.page-news {
  background: var(--c-cream);
  color: var(--c-black);
}

/* ---------- 首屏 ---------- */
.page-news .news-open {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: clamp(24px, 4vw, 40px) 0 clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line-dark);
}

.page-news .news-open__grid {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  margin-top: clamp(24px, 3.5vw, 44px);
}

.page-news .news-open__lead .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-neon);
}

.page-news .news-open__lead h1 {
  margin: 14px 0 0;
  max-width: 18ch;
}

.page-news .news-open__lead .lede {
  margin-top: 18px;
  max-width: 56ch;
  color: var(--text-dim);
}

.page-news .news-open__stats {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}

.page-news .news-open__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
}

.page-news .news-open__stat dt {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.page-news .news-open__stat dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-mist);
  white-space: nowrap;
}

.page-news .news-open__stat .num {
  font-size: 20px;
  font-weight: 600;
  color: var(--c-neon);
  margin-right: 2px;
}

@media (min-width: 900px) {
  .page-news .news-open__grid {
    grid-template-columns: minmax(0, 1fr) 272px;
    align-items: end;
    gap: clamp(32px, 5vw, 72px);
  }
}

/* ---------- 本期头条 ---------- */
.page-news .news-lead {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--c-cream);
}

.page-news .news-lead__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-news .news-lead__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.page-news .news-lead__kicker-time {
  font-size: 12px;
  color: var(--c-rock);
  letter-spacing: 0.04em;
}

.page-news .news-lead__body h2 {
  margin: 0 0 18px;
  max-width: 22ch;
}

.page-news .news-lead__body p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(4, 16, 13, 0.78);
  max-width: 54ch;
}

.page-news .news-lead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
}

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

.page-news .news-lead__figure .media {
  clip-path: var(--cut-lg);
}

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

/* ---------- 报告流 ---------- */
.page-news .news-stream {
  padding: clamp(40px, 5.5vw, 88px) 0 clamp(56px, 7vw, 104px);
  background: var(--c-cream);
  border-top: 1px solid var(--line-light);
}

.page-news .news-stream__grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 40px);
}

.page-news .news-index__title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-rock);
}

.page-news .news-index__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-news .news-index__list li {
  flex: 0 0 auto;
}

.page-news .news-index__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  color: var(--c-ink);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  transition: border-color 0.22s ease, background-color 0.22s ease;
}

.page-news .news-index__no {
  font-size: 11px;
  color: var(--c-clay);
}

.page-news .news-index__count {
  display: none;
  font-size: 11px;
  color: var(--c-rock);
}

.page-news .news-index__link:hover,
.page-news .news-index__link:focus-visible {
  border-color: var(--c-ink);
  background: rgba(12, 43, 36, 0.06);
}

.page-news .news-index__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
}

.page-news .news-feed__head {
  padding-bottom: 18px;
  border-bottom: 2px solid var(--c-ink);
}

.page-news .news-feed__head .eyebrow {
  color: var(--c-clay);
}

.page-news .news-feed__head h2 {
  margin: 8px 0 0;
}

.page-news .entry {
  position: relative;
  padding: 22px 10px 22px 16px;
  border-top: 1px solid var(--line-light);
  transition: background-color 0.25s ease, padding-left 0.25s ease;
}

.page-news .news-feed__head + .entry {
  border-top: 0;
}

.page-news .entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--c-clay);
  opacity: 0;
  transform: scaleY(0.35);
  transform-origin: top;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.page-news .entry:hover {
  background: rgba(12, 43, 36, 0.04);
  padding-left: 24px;
}

.page-news .entry:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

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

.page-news .entry__no {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-clay);
  letter-spacing: 0.06em;
}

.page-news .entry__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1.6;
}

.page-news .entry__cat--catalog { color: var(--c-moss); }
.page-news .entry__cat--ranking { color: #9a6415; }
.page-news .entry__cat--lineup { color: var(--c-clay); }
.page-news .entry__cat--venue { color: var(--c-rock); }
.page-news .entry__cat--version { color: var(--c-ink); }

.page-news .entry__time {
  margin-left: auto;
  font-size: 11px;
  color: var(--c-rock);
  letter-spacing: 0.04em;
}

.page-news .entry__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.page-news .entry__sum {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(4, 16, 13, 0.72);
  max-width: 62ch;
}

.page-news .entry__more {
  margin-top: 10px;
}

.page-news .entry__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-moss);
  padding: 4px 0;
  border-bottom: 1px dashed rgba(77, 107, 88, 0.45);
}

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

.page-news .entry__more summary::before {
  content: "＋";
  font-size: 13px;
  color: var(--c-clay);
}

.page-news .entry__more[open] summary::before {
  content: "－";
}

.page-news .entry__more p {
  margin: 12px 0 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.78;
  color: rgba(4, 16, 13, 0.76);
  background: rgba(12, 43, 36, 0.05);
  border-left: 2px solid var(--c-moss);
  max-width: 62ch;
}

.page-news .news-figure {
  margin: 6px 0;
  padding: 14px 10px 18px 16px;
  border-top: 1px solid var(--line-light);
}

.page-news .news-figure .media {
  clip-path: var(--cut);
}

@media (min-width: 960px) {
  .page-news .news-stream__grid {
    grid-template-columns: 214px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

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

  .page-news .news-index__list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-news .news-index__list li + li {
    margin-top: 2px;
  }

  .page-news .news-index__link {
    display: flex;
    width: 100%;
    border: 0;
    border-radius: 0;
    border-left: 2px solid transparent;
    padding: 9px 0 9px 12px;
    white-space: normal;
  }

  .page-news .news-index__link:hover,
  .page-news .news-index__link:focus-visible {
    border-left-color: var(--c-ink);
    background: rgba(12, 43, 36, 0.05);
  }

  .page-news .news-index__name {
    flex: 1 1 auto;
  }

  .page-news .news-index__count {
    display: inline;
  }
}

/* ---------- 专题系列 ---------- */
.page-news .news-series {
  padding: clamp(48px, 6.5vw, 96px) 0;
  background: var(--c-night);
  color: var(--c-cream);
}

.page-news .news-series__head h2 {
  margin: 10px 0 0;
  max-width: 20ch;
}

.page-news .news-series__head .eyebrow {
  color: var(--c-neon);
}

.page-news .news-series__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-news .news-series__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.page-news .series-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
  transition: background-color 0.25s ease;
}

.page-news .series-row:hover {
  background: rgba(53, 240, 164, 0.05);
}

.page-news .series-row__no {
  font-size: 12px;
  color: var(--c-neon);
  padding-top: 4px;
}

.page-news .series-row__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-cream);
}

.page-news .series-row__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-dim);
}

.page-news .series-row__beat {
  grid-column: 2;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-amber);
}

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

.page-news .news-series__figure .media {
  clip-path: var(--cut-lg);
}

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

  .page-news .series-row {
    grid-template-columns: 42px minmax(0, 1fr) 78px;
    align-items: baseline;
    gap: 4px 18px;
  }

  .page-news .series-row__beat {
    grid-column: 3;
    text-align: right;
    padding-top: 4px;
  }
}

/* ---------- 季度观察 ---------- */
.page-news .news-quarter {
  padding: clamp(48px, 6.5vw, 96px) 0;
  background: var(--c-moss);
  color: var(--c-cream);
}

.page-news .news-quarter__grid {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}

.page-news .news-quarter__lead .eyebrow {
  color: var(--c-mist);
}

.page-news .news-quarter__lead h2 {
  margin: 10px 0 16px;
  max-width: 20ch;
}

.page-news .news-quarter__lead p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(245, 240, 230, 0.84);
  max-width: 52ch;
}

.page-news .news-quarter__lead .link-arrow {
  color: var(--c-cream);
}

.page-news .news-quarter__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(245, 240, 230, 0.22);
}

.page-news .quarter-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 240, 230, 0.22);
}

.page-news .quarter-item__k {
  font-size: 12px;
  color: var(--c-amber);
  padding-top: 3px;
}

.page-news .quarter-item__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-cream);
}

.page-news .quarter-item__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(245, 240, 230, 0.74);
}

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

/* ---------- 订阅与联系 ---------- */
.page-news .news-reach {
  padding: clamp(48px, 6.5vw, 96px) 0 clamp(56px, 7vw, 104px);
  background: var(--c-ink);
  color: var(--c-cream);
}

.page-news .news-reach__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-news .news-reach__lead .eyebrow {
  color: var(--c-neon);
}

.page-news .news-reach__lead h2 {
  margin: 10px 0 16px;
  max-width: 20ch;
}

.page-news .news-reach__lead p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 54ch;
}

.page-news .news-reach__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.page-news .news-reach__panel {
  padding: 22px 20px;
  border: 1px solid var(--line-dark);
  background: rgba(6, 21, 18, 0.55);
  clip-path: var(--cut-lg);
}

.page-news .news-reach__label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-amber);
}

.page-news .news-reach__value {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--c-cream);
  word-break: break-all;
}

.page-news .news-reach__hint {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-news .news-reach__links {
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.page-news .news-reach__links li + li {
  margin-top: 10px;
}

.page-news .news-reach__links a {
  font-size: 13.5px;
  color: var(--c-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease, color 0.22s ease;
}

.page-news .news-reach__links a:hover,
.page-news .news-reach__links a:focus-visible {
  color: var(--c-neon);
  border-bottom-color: var(--c-neon);
}

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

/* ---------- 动效兼容 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-news .entry,
  .page-news .entry::before,
  .page-news .news-index__link,
  .page-news .series-row,
  .page-news .news-reach__links a {
    transition: none;
  }

  .page-news .entry:hover {
    padding-left: 16px;
  }
}


等等——我只能输出两个标记一次，顺序必须正确。我多写了一个 PAGE_CSS 标记。让我重新核对输出格式：MAIN_HTML 标记，然后内容是 <main>...</main>，再然后 PAGE_CSS 标记，最后是 CSS。

让我把原始输出重新整理干净。
<main id="main-content" class="page-news">

  <section class="news-open">
    <div class="wrap">
      <nav class="breadcrumb" aria-label="页面位置">
        <ol>
          <li><a href="/">赛场首页</a></li>
          <li aria-current="page">观察报告</li>
        </ol>
      </nav>
      <div class="news-open__grid">
        <div class="news-open__lead" data-reveal>
          <p class="eyebrow"><span class="status-dot"></span>观察报告 · 持续更新中</p>
          <h1 class="display-1">赛场的每一次调整，都能看清由来</h1>
          <p class="lede">BSPORT赛场的编辑团队把赛事目录、排名规则和赛前阵容的变化写成可回访的观察笔记。周末出发前想顺路看两场，或开赛前十分钟等一份确认名单，先在这里看清变化，再决定怎么走。</p>
        </div>
        <dl class="news-open__stats" data-reveal>
          <div class="news-open__stat">
            <dt>持续观察方向</dt>
            <dd><span class="num">05</span> 个系列</dd>
          </div>
          <div class="news-open__stat">
            <dt>目录观察节奏</dt>
            <dd>每季度 <span class="num">1</span> 期</dd>
          </div>
          <div class="news-open__stat">
            <dt>编辑与数据核对</dt>
            <dd><span class="num">38</span> 人团队</dd>
          </div>
          <div class="news-open__stat">
            <dt>内容合作方</dt>
            <dd><span class="num">60</span> 余家</dd>
          </div>
        </dl>
      </div>
    </div>
  </section>

  <section class="news-lead section section--light">
    <div class="wrap">
      <div class="news-lead__grid">
        <div class="news-lead__body" data-reveal>
          <p class="news-lead__kicker">
            <span class="tag tag--amber">本期头条</span>
            <span class="mono news-lead__kicker-time">目录观察 · 赛季中期</span>
          </p>
          <h2 class="display-2">周末两场顺路赛，在一个场馆目录里就能串起来</h2>
          <p>同一个周末、同一片场馆区域，下午一场晚上一场，最耽误工夫的往往不是比赛本身，而是来回找入口。PC 端的栏目目录按地区、场馆、赛事、栏目四级往下排，先把场馆定下来，同一条场馆记录里就能看到当天和第二天的赛程，路线自然浮出来。</p>
          <p>选择顺序是从省区市落到场馆，日期筛选留在原位，不用退回开头重来。如果两场之间只隔一个多小时，场馆笔记里记的看台视角和出入口位置，能帮你判断要不要换区、值不值得折返。</p>
          <div class="news-lead__actions">
            <a class="btn btn--accent" href="/app-download/">打开目录</a>
            <a class="link-arrow" href="/faqs/">筛选方式答疑</a>
          </div>
        </div>
        <figure class="news-lead__figure" data-reveal>
          <div class="media media--wide">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="低角度赛道弯道线条，青绿色高光沿路面延伸">
          </div>
          <figcaption class="media__caption">同一场馆的连续赛程，用日期筛选串成一条路线。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="news-stream section section--light">
    <div class="wrap">
      <div class="news-stream__grid">

        <aside class="news-index" aria-label="按分类浏览">
          <p class="news-index__title mono">分类索引</p>
          <ul class="news-index__list">
            <li>
              <a class="news-index__link" href="#r-catalog">
                <span class="mono news-index__no">01</span>
                <span class="news-index__name">目录观察</span>
                <span class="news-index__count mono">3 篇</span>
              </a>
            </li>
            <li>
              <a class="news-index__link" href="#r-ranking">
                <span class="mono news-index__no">02</span>
                <span class="news-index__name">排名方法</span>
                <span class="news-index__count mono">3 篇</span>
              </a>
            </li>
            <li>
              <a class="news-index__link" href="#r-lineup">
                <span class="mono news-index__no">03</span>
                <span class="news-index__name">阵容快照</span>
                <span class="news-index__count mono">2 篇</span>
              </a>
            </li>
            <li>
              <a class="news-index__link" href="#r-venue">
                <span class="mono news-index__no">04</span>
                <span class="news-index__name">场馆笔记</span>
                <span class="news-index__count mono">2 篇</span>
              </a>
            </li>
            <li>
              <a class="news-index__link" href="#r-version">
                <span class="mono news-index__no">05</span>
                <span class="news-index__name">版本手记</span>
                <span class="news-index__count mono">2 篇</span>
              </a>
            </li>
          </ul>
          <a class="news-index__more link-arrow" href="/faqs/">目录与排名怎么用</a>
        </aside>

        <div class="news-feed">
          <header class="news-feed__head" data-reveal>
            <p class="eyebrow">报告流</p>
            <h2 class="display-2">从最近的一条读起</h2>
          </header>

          <article class="entry" id="r-catalog" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">01</span>
              <span class="entry__cat entry__cat--catalog">目录观察</span>
              <span class="entry__time mono">赛季中期</span>
            </div>
            <h3 class="entry__title">从地区到场馆：周末两场顺路赛事的目录走法</h3>
            <p class="entry__sum">先锁定场馆再展开赛程，同一天的两场比赛会落在同一条记录里，省掉反复切换入口的时间。</p>
            <details class="entry__more">
              <summary>展开要点</summary>
              <p>落点在场馆之后，日期筛选会留在原位，第二场比赛不用从头再选一遍省区市。遇到两场都在同一片场馆区，切换只需一次滚动。场馆记录里同时标出入口方向，散场后赶下一场时能少绕一段路。</p>
            </details>
          </article>

          <article class="entry" id="r-ranking" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">02</span>
              <span class="entry__cat entry__cat--ranking">排名方法</span>
              <span class="entry__time mono">常规赛轮次</span>
            </div>
            <h3 class="entry__title">排名页的主客场拆分怎么读</h3>
            <p class="entry__sum">同一支队伍在主客场的成绩经常差距明显，拆开看比只看总排名更接近真实状态。</p>
            <details class="entry__more">
              <summary>展开要点</summary>
              <p>切换按钮就在排名表上方，拆分后名次会重新计算，箭头和数字一起变化。看客场成绩偏弱但主场稳定的队伍时，先确认接下来几轮的主客分布，再判断名次会不会继续往上走。</p>
            </details>
          </article>

          <figure class="news-figure" data-reveal>
            <div class="media media--wide">
              <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="电子记分牌局部与数字刻度特写，琥珀色高光落在数字边缘" loading="lazy" decoding="async">
            </div>
            <figcaption class="media__caption">排名表里的数字，拆到主客场之后口径会变。</figcaption>
          </figure>

          <article class="entry" id="r-lineup" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">03</span>
              <span class="entry__cat entry__cat--lineup">阵容快照</span>
              <span class="entry__time mono">首发公布段</span>
            </div>
            <h3 class="entry__title">开赛前十分钟的阵容确认标记说明</h3>
            <p class="entry__sum">从开赛前六十分钟进入高频刷新，到开赛前十分钟落定最终版本，标记的颜色说的是信息走到了哪一步。</p>
            <details class="entry__more">
              <summary>展开要点</summary>
              <p>高频刷新期间名单仍可能变动，此时看到的是接近终稿的版本。确认标记出现后，首发、替补、伤停和停赛四类状态都写在同一块面板里，看完再决定要不要调整自己的观赛安排。</p>
            </details>
          </article>

          <article class="entry" id="r-venue" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">04</span>
              <span class="entry__cat entry__cat--venue">场馆笔记</span>
              <span class="entry__time mono">场馆巡检期</span>
            </div>
            <h3 class="entry__title">五类场馆的看台视角与栏目编排</h3>
            <p class="entry__sum">露天球场、室内馆、赛道看台、临时搭建场地和多层综合馆，栏目里呈现的重点各不相同。</p>
            <p class="entry__sum">露天球场的日照方向影响选座，室内馆更看重出入口和层数，赛道看台则要分清弯道视线被遮挡的范围。</p>
          </article>

          <article class="entry" id="r-version" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">05</span>
              <span class="entry__cat entry__cat--version">版本手记</span>
              <span class="entry__time mono">V4 稳定版</span>
            </div>
            <h3 class="entry__title">V4 标签组合的三种常用路径</h3>
            <p class="entry__sum">联赛标签管项目与赛季，栏目标签管目录、排名、阵容和场馆笔记，两者分开之后组合路径明显变短。</p>
            <details class="entry__more">
              <summary>展开要点</summary>
              <p>常看单一项目的用户会把联赛标签收藏起来，再从栏目标签切到排名或阵容；按场馆找赛的用户先固定地区标签，再叠一层日期；临时查数据的用户多用最近使用记录，两次点击就能回到上次的位置。</p>
            </details>
          </article>

          <figure class="news-figure" data-reveal>
            <div class="media media--wide">
              <img src="{zhanqunpic:h:750w:1000}" width="1000" height="750" alt="看台网格与重复座椅线条，冷绿色暗调，局部裁切" loading="lazy" decoding="async">
            </div>
            <figcaption class="media__caption">场馆笔记里记的是看台结构与出入口方向，不是座位号。</figcaption>
          </figure>

          <article class="entry" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">06</span>
              <span class="entry__cat entry__cat--ranking">排名方法</span>
              <span class="entry__time mono">跨项目观察</span>
            </div>
            <h3 class="entry__title">赛车与电竞排名的更新节奏差异</h3>
            <p class="entry__sum">赛车排名跟着分站推进，电竞排名跟着赛程密集度走，同一天打开这两个页面，看到的刷新状态常常不同步。</p>
            <p class="entry__sum">排名页顶部有最近更新状态条，显示数据刷新到哪个轮次，判断新鲜度就看这一行。</p>
          </article>

          <article class="entry" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">07</span>
              <span class="entry__cat entry__cat--venue">场馆笔记</span>
              <span class="entry__time mono">场馆巡检期</span>
            </div>
            <h3 class="entry__title">用日期筛选减少折返的两次记录</h3>
            <p class="entry__sum">先选日期再看场馆，和先选场馆再挑日期，得到的结果排序并不一样，走法取决于你更在意哪一头。</p>
            <p class="entry__sum">当天来回的用户先定日期更省事，住在场馆附近的用户反过来先定场馆，再看一周内的排期。</p>
          </article>

          <article class="entry" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">08</span>
              <span class="entry__cat entry__cat--ranking">排名方法</span>
              <span class="entry__time mono">常规赛轮次</span>
            </div>
            <h3 class="entry__title">最近五场状态怎么看才不误读</h3>
            <p class="entry__sum">五场标记只反映近期结果，不看对手强弱，连着遇上强队的队伍看起来会偏弱。</p>
            <p class="entry__sum">把它当作热身参考，再配合主客场拆分一起看，判断会稳一些。</p>
          </article>

          <article class="entry" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">09</span>
              <span class="entry__cat entry__cat--lineup">阵容快照</span>
              <span class="entry__time mono">赛后复盘</span>
            </div>
            <h3 class="entry__title">阵容记录保留七天意味着什么</h3>
            <p class="entry__sum">赛后想回头核对某场首发，七天之内还能在阵容页翻到当时的确认版本。</p>
            <p class="entry__sum">超过这个时间，看到的是更新后的名单，赛前那版确认记录不再保留，需要的话当场复制链接存下来。</p>
          </article>

          <article class="entry" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">10</span>
              <span class="entry__cat entry__cat--catalog">目录观察</span>
              <span class="entry__time mono">季度观察</span>
            </div>
            <h3 class="entry__title">季度目录观察：栏目入口的位置变化</h3>
            <p class="entry__sum">这一期把场馆栏目入口的挪动、项目与赛季标签的分组调整，以及移动端逐级展开的层级深度放在一起看。</p>
            <p class="entry__sum">入口位置的变化往往比新增场馆更影响查找效率，尤其是常看固定几个场馆的用户。</p>
          </article>

          <article class="entry" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">11</span>
              <span class="entry__cat entry__cat--catalog">目录观察</span>
              <span class="entry__time mono">赛季中期</span>
            </div>
            <h3 class="entry__title">一个场馆页串起三场连续赛事</h3>
            <p class="entry__sum">同一片场地两天内排三场，场馆页会把它们按时间顺序列在一起，项目不同也不打散。</p>
            <p class="entry__sum">跨项目连看时，栏目分组会标出各自所属赛事，避免把两场比赛的入口混在一起。</p>
          </article>

          <article class="entry" data-reveal>
            <div class="entry__head">
              <span class="entry__no mono">12</span>
              <span class="entry__cat entry__cat--version">版本手记</span>
              <span class="entry__time mono">V4 稳定版</span>
            </div>
            <h3 class="entry__title">标签收藏与最近使用在移动端的偏移</h3>
            <p class="entry__sum">手机上收藏的标签会回到首页顶部，最近使用则按打开顺序排列，两者在窄屏下的位置关系做过一次调整。</p>
            <p class="entry__sum">常看两三个项目的用户，把收藏放前面更顺手；四处看赛的用户，最近使用反而更快。</p>
          </article>
        </div>

      </div>
    </div>
  </section>

  <section class="news-series section section--night">
    <div class="wrap">
      <div class="news-series__head" data-reveal>
        <p class="eyebrow">专题系列</p>
        <h2 class="display-2">五个方向，按各自的节奏往下写</h2>
      </div>
      <div class="news-series__grid">
        <ol class="news-series__list">
          <li class="series-row" data-reveal>
            <span class="series-row__no mono">01</span>
            <div class="series-row__body">
              <h3 class="series-row__name">目录观察</h3>
              <p class="series-row__desc">场馆栏目怎么排、入口怎么挪、同场馆连续赛事怎么串，每季度出一期完整梳理。</p>
            </div>
            <span class="series-row__beat mono">每季度</span>
          </li>
          <li class="series-row" data-reveal>
            <span class="series-row__no mono">02</span>
            <div class="series-row__body">
              <h3 class="series-row__name">排名方法</h3>
              <p class="series-row__desc">主客场拆分、赛季切换、最近五场状态的计算方式，配 28 个联赛与赛事排行的实际读法。</p>
            </div>
            <span class="series-row__beat mono">随轮次</span>
          </li>
          <li class="series-row" data-reveal>
            <span class="series-row__no mono">03</span>
            <div class="series-row__body">
              <h3 class="series-row__name">阵容快照</h3>
              <p class="series-row__desc">开赛前六十分钟的高频刷新、开赛前十分钟的确认版本，以及首发替补伤停停赛四类状态怎么用。</p>
            </div>
            <span class="series-row__beat mono">每场</span>
          </li>
          <li class="series-row" data-reveal>
            <span class="series-row__no mono">04</span>
            <div class="series-row__body">
              <h3 class="series-row__name">场馆笔记</h3>
              <p class="series-row__desc">按看台结构分出五类场馆，记录视角、出入口与栏目编排习惯，帮助你少走回头路。</p>
            </div>
            <span class="series-row__beat mono">巡检期</span>
          </li>
          <li class="series-row" data-reveal>
            <span class="series-row__no mono">05</span>
            <div class="series-row__body">
              <h3 class="series-row__name">版本手记</h3>
              <p class="series-row__desc">9 个一级分类与 36 个可组合标签怎么落进日常查找，每次调整都写清前后差别。</p>
            </div>
            <span class="series-row__beat mono">随版本</span>
          </li>
        </ol>
        <figure class="news-series__figure" data-reveal>
          <div class="media media--tall">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="战术板上的便签与状态标记，网格线条与色块，无人物" loading="lazy" decoding="async">
          </div>
          <figcaption class="media__caption">阵容快照系列关心的，是状态标记从模糊到确认的过程。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="news-quarter section section--moss">
    <div class="wrap">
      <div class="news-quarter__grid">
        <div class="news-quarter__lead" data-reveal>
          <p class="eyebrow">季度目录观察</p>
          <h2 class="display-2">场馆栏目变了，查找路径也会跟着变</h2>
          <p>每隔一个季度，编辑团队会把这一段时间里场馆栏目的调整、项目与赛季标签的分组方式、日期筛选的默认落点整理成一份观察。常看固定场馆的用户最容易感受到差别——入口挪了一格，可能就多绕两步。</p>
          <a class="link-arrow" href="/history/">看内容体系怎么一步步长起来</a>
        </div>
        <ul class="news-quarter__list" data-reveal>
          <li class="quarter-item">
            <span class="quarter-item__k mono">A</span>
            <div>
              <h3 class="quarter-item__name">场馆栏目的入口位置</h3>
              <p class="quarter-item__desc">入口在层级中的深浅，决定找到一片场地需要几次点击。</p>
            </div>
          </li>
          <li class="quarter-item">
            <span class="quarter-item__k mono">B</span>
            <div>
              <h3 class="quarter-item__name">项目与赛季标签的分组</h3>
              <p class="quarter-item__desc">联赛标签和栏目标签分开之后，跨项目查找的路径明显变短。</p>
            </div>
          </li>
          <li class="quarter-item">
            <span class="quarter-item__k mono">C</span>
            <div>
              <h3 class="quarter-item__name">日期筛选的默认落点</h3>
              <p class="quarter-item__desc">默认停在本周末还是今天，直接影响周末顺路找赛的效率。</p>
            </div>
          </li>
          <li class="quarter-item">
            <span class="quarter-item__k mono">D</span>
            <div>
              <h3 class="quarter-item__name">同场馆连续赛事的串联</h3>
              <p class="quarter-item__desc">两场之间隔多久、要不要换区，能在同一页判断清楚。</p>
            </div>
          </li>
          <li class="quarter-item">
            <span class="quarter-item__k mono">E</span>
            <div>
              <h3 class="quarter-item__name">移动端逐级展开的深度</h3>
              <p class="quarter-item__desc">窄屏折叠到第几层还看得清，是每次调整都要重新试的事。</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <section class="news-reach section section--night">
    <div class="wrap">
      <div class="news-reach__grid">
        <div class="news-reach__lead" data-reveal>
          <p class="eyebrow">编辑部</p>
          <h2 class="display-2">有选题线索或合作想法，写邮件给我们</h2>
          <p>场馆媒体、赛事运营方和数据服务商如果想在观察报告里出现，或者在赛程发布、场馆导览、排名数据校验、阵容快照上做内容合作，直接发邮件说明来意和覆盖范围。读者想看的选题，同样欢迎提。</p>
          <div class="news-reach__actions">
            <a class="btn btn--accent" href="mailto:service@bsportapp-entry.com.cn">发邮件</a>
            <button class="copy-btn" type="button" data-copy="service@bsportapp-entry.com.cn">复制邮箱</button>
          </div>
        </div>
        <div class="news-reach__panel" data-reveal>
          <p class="news-reach__label mono">编辑部邮箱</p>
          <p class="news-reach__value">service@bsportapp-entry.com.cn</p>
          <p class="news-reach__hint">工作日 9:00—18:00 回复，赛事数据与栏目目录相关的问题优先走邮件。</p>
          <ul class="news-reach__links">
            <li><a href="/app-download/">打开目录，直接去查一场比赛</a></li>
            <li><a href="/faqs/">遇到操作问题，先看常见问答</a></li>
            <li><a href="/find-us/">需要电话或其他联系方式</a></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

</main>

.page-news {
  background: var(--c-cream);
  color: var(--c-black);
}

/* ---------- 首屏 ---------- */
.page-news .news-open {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: clamp(24px, 4vw, 40px) 0 clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--line-dark);
}

.page-news .news-open__grid {
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  margin-top: clamp(24px, 3.5vw, 44px);
}

.page-news .news-open__lead .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-neon);
}

.page-news .news-open__lead h1 {
  margin: 14px 0 0;
  max-width: 18ch;
}

.page-news .news-open__lead .lede {
  margin-top: 18px;
  max-width: 56ch;
  color: var(--text-dim);
}

.page-news .news-open__stats {
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}

.page-news .news-open__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark);
}

.page-news .news-open__stat dt {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.page-news .news-open__stat dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--c-mist);
  white-space: nowrap;
}

.page-news .news-open__stat .num {
  font-size: 20px;
  font-weight: 600;
  color: var(--c-neon);
  margin-right: 2px;
}

@media (min-width: 900px) {
  .page-news .news-open__grid {
    grid-template-columns: minmax(0, 1fr) 272px;
    align-items: end;
    gap: clamp(32px, 5vw, 72px);
  }
}

/* ---------- 本期头条 ---------- */
.page-news .news-lead {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--c-cream);
}

.page-news .news-lead__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-news .news-lead__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.page-news .news-lead__kicker-time {
  font-size: 12px;
  color: var(--c-rock);
  letter-spacing: 0.04em;
}

.page-news .news-lead__body h2 {
  margin: 0 0 18px;
  max-width: 22ch;
}

.page-news .news-lead__body p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.78;
  color: rgba(4, 16, 13, 0.78);
  max-width: 54ch;
}

.page-news .news-lead__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
}

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

.page-news .news-lead__figure .media {
  clip-path: var(--cut-lg);
}

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

/* ---------- 报告流 ---------- */
.page-news .news-stream {
  padding: clamp(40px, 5.5vw, 88px) 0 clamp(56px, 7vw, 104px);
  background: var(--c-cream);
  border-top: 1px solid var(--line-light);
}

.page-news .news-stream__grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 40px);
}

.page-news .news-index__title {
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-rock);
}

.page-news .news-index__list {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

.page-news .news-index__list li {
  flex: 0 0 auto;
}

.page-news .news-index__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  color: var(--c-ink);
  text-decoration: none;
  font-size: 13px;
  white-space: nowrap;
  transition: border-color 0.22s ease, background-color 0.22s ease;
}

.page-news .news-index__no {
  font-size: 11px;
  color: var(--c-clay);
}

.page-news .news-index__count {
  display: none;
  font-size: 11px;
  color: var(--c-rock);
}

.page-news .news-index__link:hover,
.page-news .news-index__link:focus-visible {
  border-color: var(--c-ink);
  background: rgba(12, 43, 36, 0.06);
}

.page-news .news-index__more {
  display: inline-block;
  margin-top: 18px;
  font-size: 13px;
}

.page-news .news-feed__head {
  padding-bottom: 18px;
  border-bottom: 2px solid var(--c-ink);
}

.page-news .news-feed__head .eyebrow {
  color: var(--c-clay);
}

.page-news .news-feed__head h2 {
  margin: 8px 0 0;
}

.page-news .entry {
  position: relative;
  padding: 22px 10px 22px 16px;
  border-top: 1px solid var(--line-light);
  transition: background-color 0.25s ease, padding-left 0.25s ease;
}

.page-news .news-feed__head + .entry {
  border-top: 0;
}

.page-news .entry::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--c-clay);
  opacity: 0;
  transform: scaleY(0.35);
  transform-origin: top;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.page-news .entry:hover {
  background: rgba(12, 43, 36, 0.04);
  padding-left: 24px;
}

.page-news .entry:hover::before {
  opacity: 1;
  transform: scaleY(1);
}

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

.page-news .entry__no {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-clay);
  letter-spacing: 0.06em;
}

.page-news .entry__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 2px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: 1.6;
}

.page-news .entry__cat--catalog { color: var(--c-moss); }
.page-news .entry__cat--ranking { color: #9A6415; }
.page-news .entry__cat--lineup { color: var(--c-clay); }
.page-news .entry__cat--venue { color: var(--c-rock); }
.page-news .entry__cat--version { color: var(--c-ink); }

.page-news .entry__time {
  margin-left: auto;
  font-size: 11px;
  color: var(--c-rock);
  letter-spacing: 0.04em;
}

.page-news .entry__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

.page-news .entry__sum {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(4, 16, 13, 0.72);
  max-width: 62ch;
}

.page-news .entry__more {
  margin-top: 10px;
}

.page-news .entry__more summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--c-moss);
  padding: 4px 0;
  border-bottom: 1px dashed rgba(77, 107, 88, 0.45);
}

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

.page-news .entry__more summary::before {
  content: "＋";
  font-size: 13px;
  color: var(--c-clay);
}

.page-news .entry__more[open] summary::before {
  content: "－";
}

.page-news .entry__more p {
  margin: 12px 0 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.78;
  color: rgba(4, 16, 13, 0.76);
  background: rgba(12, 43, 36, 0.05);
  border-left: 2px solid var(--c-moss);
  max-width: 62ch;
}

.page-news .news-figure {
  margin: 6px 0;
  padding: 14px 10px 18px 16px;
  border-top: 1px solid var(--line-light);
}

.page-news .news-figure .media {
  clip-path: var(--cut);
}

@media (min-width: 960px) {
  .page-news .news-stream__grid {
    grid-template-columns: 214px minmax(0, 1fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
  }

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

  .page-news .news-index__list {
    display: block;
    overflow: visible;
    padding-bottom: 0;
  }

  .page-news .news-index__list li + li {
    margin-top: 2px;
  }

  .page-news .news-index__link {
    display: flex;
    width: 100%;
    border: 0;
    border-radius: 0;
    border-left: 2px solid transparent;
    padding: 9px 0 9px 12px;
    white-space: normal;
  }

  .page-news .news-index__link:hover,
  .page-news .news-index__link:focus-visible {
    border-left-color: var(--c-ink);
    background: rgba(12, 43, 36, 0.05);
  }

  .page-news .news-index__name {
    flex: 1 1 auto;
  }

  .page-news .news-index__count {
    display: inline;
  }
}

/* ---------- 专题系列 ---------- */
.page-news .news-series {
  padding: clamp(48px, 6.5vw, 96px) 0;
  background: var(--c-night);
  color: var(--c-cream);
}

.page-news .news-series__head h2 {
  margin: 10px 0 0;
  max-width: 20ch;
}

.page-news .news-series__head .eyebrow {
  color: var(--c-neon);
}

.page-news .news-series__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  margin-top: clamp(28px, 4vw, 44px);
}

.page-news .news-series__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.page-news .series-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
  transition: background-color 0.25s ease;
}

.page-news .series-row:hover {
  background: rgba(53, 240, 164, 0.05);
}

.page-news .series-row__no {
  font-size: 12px;
  color: var(--c-neon);
  padding-top: 4px;
}

.page-news .series-row__body h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-cream);
}

.page-news .series-row__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--text-dim);
}

.page-news .series-row__beat {
  grid-column: 2;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-amber);
}

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

.page-news .news-series__figure .media {
  clip-path: var(--cut-lg);
}

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

  .page-news .series-row {
    grid-template-columns: 42px minmax(0, 1fr) 78px;
    align-items: baseline;
    gap: 4px 18px;
  }

  .page-news .series-row__beat {
    grid-column: 3;
    text-align: right;
    padding-top: 4px;
  }
}

/* ---------- 季度观察 ---------- */
.page-news .news-quarter {
  padding: clamp(48px, 6.5vw, 96px) 0;
  background: var(--c-moss);
  color: var(--c-cream);
}

.page-news .news-quarter__grid {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}

.page-news .news-quarter__lead .eyebrow {
  color: var(--c-mist);
}

.page-news .news-quarter__lead h2 {
  margin: 10px 0 16px;
  max-width: 20ch;
}

.page-news .news-quarter__lead p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(245, 240, 230, 0.84);
  max-width: 52ch;
}

.page-news .news-quarter__lead .link-arrow {
  color: var(--c-cream);
}

.page-news .news-quarter__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(245, 240, 230, 0.22);
}

.page-news .quarter-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(245, 240, 230, 0.22);
}

.page-news .quarter-item__k {
  font-size: 12px;
  color: var(--c-amber);
  padding-top: 3px;
}

.page-news .quarter-item__name {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-cream);
}

.page-news .quarter-item__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(245, 240, 230, 0.74);
}

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

/* ---------- 订阅与联系 ---------- */
.page-news .news-reach {
  padding: clamp(48px, 6.5vw, 96px) 0 clamp(56px, 7vw, 104px);
  background: var(--c-ink);
  color: var(--c-cream);
}

.page-news .news-reach__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
}

.page-news .news-reach__lead .eyebrow {
  color: var(--c-neon);
}

.page-news .news-reach__lead h2 {
  margin: 10px 0 16px;
  max-width: 20ch;
}

.page-news .news-reach__lead p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 54ch;
}

.page-news .news-reach__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
}

.page-news .news-reach__panel {
  padding: 22px 20px;
  border: 1px solid var(--line-dark);
  background: rgba(6, 21, 18, 0.55);
  clip-path: var(--cut-lg);
}

.page-news .news-reach__label {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-amber);
}

.page-news .news-reach__value {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--c-cream);
  word-break: break-all;
}

.page-news .news-reach__hint {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-dim);
}

.page-news .news-reach__links {
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.page-news .news-reach__links li + li {
  margin-top: 10px;
}

.page-news .news-reach__links a {
  font-size: 13.5px;
  color: var(--c-mist);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.22s ease, color 0.22s ease;
}

.page-news .news-reach__links a:hover,
.page-news .news-reach__links a:focus-visible {
  color: var(--c-neon);
  border-bottom-color: var(--c-neon);
}

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

/* ---------- 动效兼容 ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-news .entry,
  .page-news .entry::before,
  .page-news .news-index__link,
  .page-news .series-row,
  .page-news .news-reach__links a {
    transition: none;
  }

  .page-news .entry:hover {
    padding-left: 16px;
  }
}