.page-news {
  background: var(--mist);
  color: var(--rock);
  font-family: var(--font-body);
}

/* ---------- 页首 ---------- */
.page-news .news-masthead {
  position: relative;
  overflow: hidden;
  padding-block: 1.25rem 6rem;
  background: linear-gradient(158deg, var(--deep-teal) 0%, var(--ink) 100%);
  color: var(--mist);
}

.page-news .news-masthead::before {
  content: "";
  position: absolute;
  inset: auto -30% -70% 40%;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 110, 138, 0.65) 0%, rgba(11, 110, 138, 0) 68%);
  pointer-events: none;
}

.page-news .news-masthead__inner {
  position: relative;
  z-index: 1;
}

.page-news .news-masthead .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--line);
}

.page-news .news-masthead .breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-right: 0.4rem;
  color: rgba(156, 201, 214, 0.55);
}

.page-news .news-masthead .breadcrumbs__link {
  color: var(--line);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.page-news .news-masthead .breadcrumbs__link:hover,
.page-news .news-masthead .breadcrumbs__link:focus-visible {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.page-news .news-masthead .eyebrow {
  margin: 0;
  color: var(--amber);
}

.page-news .news-masthead__title {
  margin: 0.5rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.page-news .news-masthead__lede {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(250, 251, 252, 0.86);
}

.page-news .news-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--line);
}

.page-news .news-masthead__meta strong {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold);
}

/* ---------- 本周更新条带 ---------- */
.page-news .news-band {
  position: relative;
  z-index: 2;
  margin-top: -4rem;
}

.page-news .news-band__panel {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.page-news .news-band__text .eyebrow {
  margin: 0 0 0.5rem;
  color: var(--teal-blue);
}

.page-news .news-band__text h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--deep-teal);
}

.page-news .news-band__text p:last-child {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--neutral);
}

.page-news .news-band__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-news .news-band__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .news-band__media .media-frame__caption {
  padding: 0.6rem 0.9rem;
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--neutral);
}

/* 日期条带 */
.page-news .date-rail {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0 0 0.35rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.page-news .date-rail .date-chip {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6.25rem;
  padding: 0.65rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--rock);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color 180ms ease-out, background-color 180ms ease-out, transform 180ms ease-out;
}

.page-news .date-chip__day {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.page-news .date-chip__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--neutral);
}

.page-news .date-chip:hover,
.page-news .date-chip:focus-visible {
  border-color: var(--amber);
  background: var(--sand);
  transform: translateY(-2px);
}

.page-news .date-chip[aria-current="true"] {
  border-color: var(--teal-blue);
  background: var(--teal-blue);
  color: var(--white);
}

.page-news .date-chip[aria-current="true"] .date-chip__label {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- 主区布局 ---------- */
.page-news .news-body {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
}

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

/* 侧栏 */
.page-news .news-side__title {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--neutral);
}

.page-news .news-side__tags {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
}

.page-news .news-side__tags li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
}

.page-news .news-side__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--neutral);
}

.page-news .news-side__note {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--neutral);
}

.page-news .news-side__note a {
  color: var(--teal-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease-out, color 160ms ease-out;
}

.page-news .news-side__note a:hover,
.page-news .news-side__note a:focus-visible {
  color: var(--deep-teal);
  border-bottom-color: var(--amber);
}

/* 笔记列表 */
.page-news .news-batch + .news-batch {
  margin-top: 2.25rem;
}

.page-news .news-batch__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--deep-teal);
}

.page-news .news-batch__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.8vw, 1.9rem);
  line-height: 1.1;
  color: var(--deep-teal);
}

.page-news .news-batch__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--teal-blue);
}

.page-news .note {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.35rem;
  border-bottom: 1px solid rgba(156, 201, 214, 0.45);
}

.page-news .note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 180ms ease-out;
}

.page-news .note:hover::before,
.page-news .note:focus-within::before {
  transform: scaleY(1);
}

.page-news .note__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.page-news .note__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--line);
}

.page-news .note__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.7vw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--rock);
}

.page-news .note__summary {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--neutral);
}

.page-news .note__link {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--teal-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}

.page-news .note__link:hover,
.page-news .note__link:focus-visible {
  color: var(--deep-teal);
  border-bottom-color: var(--amber);
}

/* ---------- 专题系列 ---------- */
.page-news .news-topics {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  background: var(--white);
  border-top: 1px solid rgba(156, 201, 214, 0.4);
}

.page-news .news-topics__head {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.page-news .topic-grid {
  display: grid;
  gap: 1rem;
}

.page-news .topic {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid rgba(156, 201, 214, 0.45);
  border-radius: var(--radius-lg);
  background: var(--sand);
  transition: border-color 180ms ease-out, transform 180ms ease-out;
}

.page-news .topic:hover,
.page-news .topic:focus-within {
  border-color: var(--amber);
  transform: translateY(-2px);
}

.page-news .topic__media {
  margin: 0 0 0.9rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-news .topic__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-news .topic--tall .topic__media img {
  aspect-ratio: 3 / 4;
  max-height: 20rem;
}

.page-news .topic__no {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--teal-blue);
}

.page-news .topic__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.15;
  color: var(--deep-teal);
}

.page-news .topic__text {
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--neutral);
}

.page-news .topic__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--deep-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.page-news .topic__link::after {
  content: "→";
  transition: transform 160ms ease-out;
}

.page-news .topic__link:hover,
.page-news .topic__link:focus-visible {
  color: var(--teal-blue);
  border-bottom-color: var(--amber);
}

.page-news .topic__link:hover::after,
.page-news .topic__link:focus-visible::after {
  transform: translateX(3px);
}

/* ---------- 日期归档 ---------- */
.page-news .news-archive {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  background: var(--sand);
}

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

.page-news .archive-lede {
  max-width: 36rem;
  margin: 0.75rem 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--neutral);
}

.page-news .archive-cols {
  display: grid;
  gap: 1.25rem;
}

.page-news .archive-col__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--teal-blue);
}

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

.page-news .archive-links li + li {
  border-top: 1px solid rgba(156, 201, 214, 0.5);
}

.page-news .archive-links a {
  position: relative;
  display: block;
  padding: 0.55rem 0 0.55rem 0.95rem;
  font-size: 0.9375rem;
  color: var(--rock);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.page-news .archive-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color 160ms ease-out;
}

.page-news .archive-links a:hover,
.page-news .archive-links a:focus-visible {
  color: var(--teal-blue);
}

.page-news .archive-links a:hover::before,
.page-news .archive-links a:focus-visible::before {
  background: var(--amber);
}

.page-news .archive-cta {
  margin-top: 1.5rem;
}

.page-news .archive-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.page-news .archive-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- 订阅与咨询 ---------- */
.page-news .news-cta {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
}

.page-news .news-cta__panel {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--deep-teal) 0%, var(--teal-blue) 100%);
  color: var(--mist);
}

.page-news .news-cta__panel .eyebrow {
  margin: 0 0 0.5rem;
  color: var(--gold);
}

.page-news .news-cta__panel h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--white);
}

.page-news .news-cta__panel p {
  max-width: 34rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: rgba(250, 251, 252, 0.85);
}

.page-news .news-cta__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.page-news .news-cta__contact a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.page-news .news-cta__contact a:hover,
.page-news .news-cta__contact a:focus-visible {
  color: var(--white);
  border-bottom-color: var(--gold);
}

.page-news .news-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.page-news .news-cta__actions .button--ghost {
  border: 1px solid rgba(250, 251, 252, 0.45);
  background: transparent;
  color: var(--mist);
}

.page-news .news-cta__actions .button--ghost:hover,
.page-news .news-cta__actions .button--ghost:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---------- 响应式 ---------- */
@media (min-width: 520px) {
  .page-news .archive-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 820px) {
  .page-news .news-band__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 2.5rem;
  }
}

@media (min-width: 900px) {
  .page-news .news-masthead {
    padding-block: 1.5rem 7rem;
  }

  .page-news .news-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }

  .page-news .news-side__inner {
    position: sticky;
    top: 1.5rem;
  }

  .page-news .news-side__tags {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
    border-top: 1px solid rgba(156, 201, 214, 0.45);
  }

  .page-news .news-side__tags li {
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(156, 201, 214, 0.45);
  }

  .page-news .topic-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .page-news .topic:nth-child(1) {
    grid-column: span 7;
  }

  .page-news .topic:nth-child(2) {
    grid-column: span 5;
  }

  .page-news .topic:nth-child(3) {
    grid-column: 4 / span 8;
  }

  .page-news .archive-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
    align-items: center;
  }

  .page-news .news-cta__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .topic,
  .page-news .date-chip,
  .page-news .note::before,
  .page-news .note__link,
  .page-news .topic__link,
  .page-news .topic__link::after {
    transition: none;
  }

  .page-news .topic:hover,
  .page-news .topic:focus-within,
  .page-news .date-chip:hover,
  .page-news .date-chip:focus-visible {
    transform: none;
  }

  .page-news .topic__link:hover::after,
  .page-news .topic__link:focus-visible::after {
    transform: none;
  }
}
<<<END>>>

等等——我注意到末尾还留了个 `<<<END>>>`。指令里只定义了 `` 和 `` 两个标记，而且「每个标记只能出现一次」。多写一个自定义标记可能违反「不要输出标记以外的说明」。把它删掉更稳妥。

删掉末尾的 `<<<END>>>`，然后输出。把上面整理好的完整内容输出。
<main id="main-content" class="page-news">

  <div class="news-masthead">
    <div class="shell news-masthead__inner">
      <nav class="breadcrumbs" aria-label="面包屑">
        <ol class="breadcrumbs__list">
          <li class="breadcrumbs__item"><a class="breadcrumbs__link" href="/">首页</a></li>
          <li class="breadcrumbs__item"><span aria-current="page">赛程笔记</span></li>
        </ol>
      </nav>
      <p class="eyebrow">赛程笔记 / 每轮更新</p>
      <h1 class="news-masthead__title">赛程笔记：每一轮都留下记录</h1>
      <p class="news-masthead__lede">大江体育把每一轮的赛程变化、场馆细节和复盘方法写成笔记，方便你在排观赛计划、跨城出发和赛后回查时少绕几圈。</p>
      <ul class="news-masthead__meta">
        <li><strong>每周三</strong>更新下一轮安排</li>
        <li><strong>赛后 24 小时</strong>补上复盘记录</li>
        <li><strong>12 家</strong>场馆运营方同步信息</li>
      </ul>
    </div>
  </div>

  <section class="news-band" aria-labelledby="band-title">
    <div class="shell">
      <div class="news-band__panel">
        <div class="news-band__text">
          <p class="eyebrow">本周更新</p>
          <h2 id="band-title">本周四篇，围绕第 8 轮的连看与回看</h2>
          <p>连看路线按城区顺序排开，场馆动线补上了入场口字段，移动端和导出清单各更新一条。看完这一批，下一轮怎么安排心里基本有数。</p>
        </div>
        <figure class="media-frame news-band__media">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="赛后复盘数据板局部，时间轴与记录条目清晰，青蓝与琥珀配色">
          <figcaption class="media-frame__caption">复盘记录按轮次归档，时间轴与条目一一对应。</figcaption>
        </figure>
      </div>

      <nav class="date-rail" aria-label="更新批次">
        <a class="date-chip" href="#batch-week" aria-current="true">
          <span class="date-chip__day">本周</span>
          <span class="date-chip__label">4 条笔记</span>
        </a>
        <a class="date-chip" href="#batch-last-round">
          <span class="date-chip__day">上轮赛后</span>
          <span class="date-chip__label">3 条笔记</span>
        </a>
        <a class="date-chip" href="#batch-round8">
          <span class="date-chip__day">第 8 轮后</span>
          <span class="date-chip__label">3 条笔记</span>
        </a>
        <a class="date-chip" href="#batch-mid">
          <span class="date-chip__day">赛季中段</span>
          <span class="date-chip__label">2 条笔记</span>
        </a>
      </nav>
    </div>
  </section>

  <div class="news-body">
    <div class="shell news-layout">

      <aside class="news-side" aria-labelledby="side-title">
        <div class="news-side__inner">
          <h2 class="news-side__title" id="side-title">分类速览</h2>
          <ul class="news-side__tags">
            <li><span class="tag tag--teal">赛程更新</span><span class="news-side__count">2</span></li>
            <li><span class="tag tag--teal">场馆观察</span><span class="news-side__count">3</span></li>
            <li><span class="tag tag--amber">复盘方法</span><span class="news-side__count">2</span></li>
            <li><span class="tag tag--amber">移动端技巧</span><span class="news-side__count">2</span></li>
            <li><span class="tag">服务说明</span><span class="news-side__count">2</span></li>
            <li><span class="tag">版本说明</span><span class="news-side__count">1</span></li>
          </ul>
          <p class="news-side__note">想按轮次整轮回看，到 <a href="/">赛程中心</a> 选日期就行。</p>
        </div>
      </aside>

      <div class="news-feed">

        <section class="news-batch" id="batch-week" aria-labelledby="batch-week-title">
          <header class="news-batch__head">
            <h2 class="news-batch__title" id="batch-week-title">本周</h2>
            <span class="news-batch__count">4 条</span>
          </header>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">01</span>
              <span class="tag tag--teal">赛程更新</span>
            </div>
            <h3 class="note__title">第 8 轮周末连看路线：两天三场怎么排</h3>
            <p class="note__summary">两天三场落在相邻两个城区，按入场口和赛间空档定先后，省掉来回折返的时间。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">02</span>
              <span class="tag tag--teal">场馆观察</span>
            </div>
            <h3 class="note__title">场馆动线新增入场口字段</h3>
            <p class="note__summary">入场口、安检通道和卫生间位置分别标出，第一次去也能顺着走。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">03</span>
              <span class="tag tag--amber">移动端技巧</span>
            </div>
            <h3 class="note__title">通勤路上单手切轮次</h3>
            <p class="note__summary">日期胶囊触点加大，连看列表一滑到底，站台上也能翻完下一轮。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">04</span>
              <span class="tag tag--amber">复盘方法</span>
            </div>
            <h3 class="note__title">赛事时间记录清单怎么导出</h3>
            <p class="note__summary">可导出 ICS 日历或 CSV 表格，行程和记录各归各位。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>
        </section>

        <section class="news-batch" id="batch-last-round" aria-labelledby="batch-last-round-title">
          <header class="news-batch__head">
            <h2 class="news-batch__title" id="batch-last-round-title">上轮赛后</h2>
            <span class="news-batch__count">3 条</span>
          </header>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">05</span>
              <span class="tag tag--amber">复盘方法</span>
            </div>
            <h3 class="note__title">加时赛段单独留一格</h3>
            <p class="note__summary">加时记录单独成项，复盘时不用回头翻原始赛程对时间。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">06</span>
              <span class="tag">服务说明</span>
            </div>
            <h3 class="note__title">赛后 24 小时归档流程</h3>
            <p class="note__summary">终场后先归档记录，再补复盘要点，第二天回查按清单顺序翻。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">07</span>
              <span class="tag tag--amber">移动端技巧</span>
            </div>
            <h3 class="note__title">信号弱时也能打开清单</h3>
            <p class="note__summary">提前保存的清单离线可读，进场前后刷不出页面也不慌。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>
        </section>

        <section class="news-batch" id="batch-round8" aria-labelledby="batch-round8-title">
          <header class="news-batch__head">
            <h2 class="news-batch__title" id="batch-round8-title">第 8 轮后</h2>
            <span class="news-batch__count">3 条</span>
          </header>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">08</span>
              <span class="tag">服务说明</span>
            </div>
            <h3 class="note__title">连看日只留关键提醒</h3>
            <p class="note__summary">连看日只保留开场与换场两个提醒节点，其余通知按需要关掉。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">09</span>
              <span class="tag tag--teal">赛程更新</span>
            </div>
            <h3 class="note__title">跨城观赛时间线怎么留余量</h3>
            <p class="note__summary">高铁到站、接驳和入场安检分段留时间，不再踩着点冲进场。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">10</span>
              <span class="tag tag--teal">场馆观察</span>
            </div>
            <h3 class="note__title">48 个场馆的信息补齐了</h3>
            <p class="note__summary">座位分区、交通指引与入场动线逐馆补充，出发前先看一眼。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>
        </section>

        <section class="news-batch" id="batch-mid" aria-labelledby="batch-mid-title">
          <header class="news-batch__head">
            <h2 class="news-batch__title" id="batch-mid-title">赛季中段</h2>
            <span class="news-batch__count">2 条</span>
          </header>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">11</span>
              <span class="tag tag--teal">场馆观察</span>
            </div>
            <h3 class="note__title">座位分区图换了阅读顺序</h3>
            <p class="note__summary">先看层、再看排、最后认通道编号，分区图按进场顺序读。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>

          <article class="note">
            <div class="note__meta">
              <span class="note__num">12</span>
              <span class="tag">版本说明</span>
            </div>
            <h3 class="note__title">移动端升级版同步到第 8 轮</h3>
            <p class="note__summary">轮次切换后的落点更明确，一眼知道停在哪天。</p>
            <a class="note__link" href="/notes/">阅读笔记</a>
          </article>
        </section>

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

  <section class="news-topics" aria-labelledby="topics-title">
    <div class="shell">
      <div class="section-head news-topics__head">
        <p class="eyebrow">专题系列</p>
        <h2 class="section-title" id="topics-title">按场景往下读</h2>
        <p class="section-note">三种最常见的观赛场景，各自带一组笔记，挑你眼下最接近的那条走。</p>
      </div>

      <div class="topic-grid">
        <article class="topic">
          <span class="topic__no" aria-hidden="true">01</span>
          <h3 class="topic__title">周末连看</h3>
          <p class="topic__text">两天三场分散在相邻城区，先排入场顺序，再算赛间空档，把赶路的时间省下来。</p>
          <a class="topic__link" href="#batch-week">看这一组笔记</a>
        </article>

        <article class="topic topic--media">
          <figure class="media-frame topic__media">
            <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="场馆通道与看台结构的低角度线条特写" loading="lazy" decoding="async">
          </figure>
          <span class="topic__no" aria-hidden="true">02</span>
          <h3 class="topic__title">跨城场馆</h3>
          <p class="topic__text">交通、安检、座位分区三段拆开看，进场时间留得明白，落地就能走。</p>
          <a class="topic__link" href="#batch-round8">看这一组笔记</a>
        </article>

        <article class="topic topic--media topic--tall">
          <figure class="media-frame topic__media">
            <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="移动端界面局部，日期胶囊与连看列表清晰可见" loading="lazy" decoding="async">
          </figure>
          <span class="topic__no" aria-hidden="true">03</span>
          <h3 class="topic__title">移动端使用</h3>
          <p class="topic__text">单手切轮次、离线存清单，通勤途中和进场前后都用得上。</p>
          <a class="topic__link" href="#batch-last-round">看这一组笔记</a>
        </article>
      </div>
    </div>
  </section>

  <section class="news-archive" aria-labelledby="archive-title">
    <div class="shell">
      <div class="archive-grid">
        <div class="archive-main">
          <p class="eyebrow">日期归档</p>
          <h2 class="section-title" id="archive-title">翻回某一轮，按两种查法</h2>
          <p class="archive-lede">整轮回看走轮次，找回某一场走日期。编辑与运营团队 26 人分布在西宁、成都、西安，场馆变更通常在 2 小时内落到对应轮次的笔记里。</p>

          <div class="archive-cols">
            <div class="archive-col">
              <h3 class="archive-col__title">按轮次</h3>
              <ul class="archive-links">
                <li><a href="/">第 1–6 轮</a></li>
                <li><a href="/">第 7–12 轮</a></li>
                <li><a href="/">第 13–18 轮</a></li>
                <li><a href="/">季后赛 4 轮</a></li>
              </ul>
            </div>
            <div class="archive-col">
              <h3 class="archive-col__title">按日期</h3>
              <ul class="archive-links">
                <li><a href="#batch-week">本周</a></li>
                <li><a href="#batch-last-round">上轮赛后</a></li>
                <li><a href="#batch-round8">第 8 轮后</a></li>
                <li><a href="#batch-mid">赛季中段</a></li>
              </ul>
            </div>
          </div>

          <a class="button button--primary archive-cta" href="/">打开赛程中心</a>
        </div>

        <figure class="media-frame archive-media">
          <img src="{zhanqunpic:h:1000w:1000}" width="1000" height="1000" alt="纸质记录表与屏幕时间刻度叠加的抽象纹理" loading="lazy" decoding="async">
        </figure>
      </div>
    </div>
  </section>

  <section class="news-cta" aria-labelledby="cta-title">
    <div class="shell">
      <div class="news-cta__panel">
        <div>
          <p class="eyebrow">订阅与咨询</p>
          <h2 id="cta-title">下一轮安排出来，第一时间知道</h2>
          <p>赛程订阅与观赛提醒在服务清单里设置；内容合作、场馆信息反馈请走咨询通道，说明具体轮次与日期，我们好快速定位。</p>
          <ul class="news-cta__contact">
            <li><a href="mailto:support@game-da-jiang.com.cn">support@game-da-jiang.com.cn</a></li>
            <li><a href="tel:40052445963">400-5244-5963</a></li>
          </ul>
        </div>
        <div class="news-cta__actions">
          <a class="button button--amber" href="/catalog/">查看服务清单</a>
          <a class="button button--ghost" href="/inquiry/">咨询通道</a>
          <a class="button button--ghost" href="/help-center/">帮助中心</a>
        </div>
      </div>
    </div>
  </section>

</main>

.page-news {
  background: var(--mist);
  color: var(--rock);
  font-family: var(--font-body);
}

/* ---------- 页首 ---------- */
.page-news .news-masthead {
  position: relative;
  overflow: hidden;
  padding-block: 1.25rem 6rem;
  background: linear-gradient(158deg, var(--deep-teal) 0%, var(--ink) 100%);
  color: var(--mist);
}

.page-news .news-masthead::before {
  content: "";
  position: absolute;
  inset: auto -30% -70% 40%;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 110, 138, 0.65) 0%, rgba(11, 110, 138, 0) 68%);
  pointer-events: none;
}

.page-news .news-masthead__inner {
  position: relative;
  z-index: 1;
}

.page-news .news-masthead .breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--line);
}

.page-news .news-masthead .breadcrumbs__item + .breadcrumbs__item::before {
  content: "/";
  margin-right: 0.4rem;
  color: rgba(156, 201, 214, 0.55);
}

.page-news .news-masthead .breadcrumbs__link {
  color: var(--line);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.page-news .news-masthead .breadcrumbs__link:hover,
.page-news .news-masthead .breadcrumbs__link:focus-visible {
  color: var(--amber);
  border-bottom-color: var(--amber);
}

.page-news .news-masthead .eyebrow {
  margin: 0;
  color: var(--amber);
}

.page-news .news-masthead__title {
  margin: 0.5rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 11vw, 5.2rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.02em;
}

.page-news .news-masthead__lede {
  max-width: 34rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(250, 251, 252, 0.86);
}

.page-news .news-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--line);
}

.page-news .news-masthead__meta strong {
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--gold);
}

/* ---------- 本周更新条带 ---------- */
.page-news .news-band {
  position: relative;
  z-index: 2;
  margin-top: -4rem;
}

.page-news .news-band__panel {
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-panel);
}

.page-news .news-band__text .eyebrow {
  margin: 0 0 0.5rem;
  color: var(--teal-blue);
}

.page-news .news-band__text h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4.4vw, 2.1rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--deep-teal);
}

.page-news .news-band__text p:last-child {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--neutral);
}

.page-news .news-band__media {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-news .news-band__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.page-news .news-band__media .media-frame__caption {
  padding: 0.6rem 0.9rem;
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--neutral);
}

/* 日期条带 */
.page-news .date-rail {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0 0 0.35rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.page-news .date-rail .date-chip {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 6.25rem;
  padding: 0.65rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--rock);
  text-decoration: none;
  scroll-snap-align: start;
  transition: border-color 180ms ease-out, background-color 180ms ease-out, transform 180ms ease-out;
}

.page-news .date-chip__day {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.page-news .date-chip__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--neutral);
}

.page-news .date-chip:hover,
.page-news .date-chip:focus-visible {
  border-color: var(--amber);
  background: var(--sand);
  transform: translateY(-2px);
}

.page-news .date-chip[aria-current="true"] {
  border-color: var(--teal-blue);
  background: var(--teal-blue);
  color: var(--white);
}

.page-news .date-chip[aria-current="true"] .date-chip__label {
  color: rgba(255, 255, 255, 0.78);
}

/* ---------- 主区布局 ---------- */
.page-news .news-body {
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem);
}

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

/* 侧栏 */
.page-news .news-side__title {
  margin: 0 0 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--neutral);
}

.page-news .news-side__tags {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
  overflow-x: auto;
}

.page-news .news-side__tags li {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.4rem;
}

.page-news .news-side__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--neutral);
}

.page-news .news-side__note {
  margin: 0.9rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--neutral);
}

.page-news .news-side__note a {
  color: var(--teal-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease-out, color 160ms ease-out;
}

.page-news .news-side__note a:hover,
.page-news .news-side__note a:focus-visible {
  color: var(--deep-teal);
  border-bottom-color: var(--amber);
}

/* 笔记列表 */
.page-news .news-batch + .news-batch {
  margin-top: 2.25rem;
}

.page-news .news-batch__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--deep-teal);
}

.page-news .news-batch__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.8vw, 1.9rem);
  line-height: 1.1;
  color: var(--deep-teal);
}

.page-news .news-batch__count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  white-space: nowrap;
  color: var(--teal-blue);
}

.page-news .note {
  position: relative;
  padding: 1.1rem 0 1.1rem 1.35rem;
  border-bottom: 1px solid rgba(156, 201, 214, 0.45);
}

.page-news .note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 3px;
  border-radius: var(--radius-pill);
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 180ms ease-out;
}

.page-news .note:hover::before,
.page-news .note:focus-within::before {
  transform: scaleY(1);
}

.page-news .note__meta {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.page-news .note__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--line);
}

.page-news .note__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.7vw, 1.15rem);
  font-weight: 700;
  line-height: 1.5;
  color: var(--rock);
}

.page-news .note__summary {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--neutral);
}

.page-news .note__link {
  display: inline-block;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--teal-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}

.page-news .note__link:hover,
.page-news .note__link:focus-visible {
  color: var(--deep-teal);
  border-bottom-color: var(--amber);
}

/* ---------- 专题系列 ---------- */
.page-news .news-topics {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  background: var(--white);
  border-top: 1px solid rgba(156, 201, 214, 0.4);
}

.page-news .news-topics__head {
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.page-news .topic-grid {
  display: grid;
  gap: 1rem;
}

.page-news .topic {
  position: relative;
  padding: clamp(1.1rem, 3vw, 1.75rem);
  border: 1px solid rgba(156, 201, 214, 0.45);
  border-radius: var(--radius-lg);
  background: var(--sand);
  transition: border-color 180ms ease-out, transform 180ms ease-out;
}

.page-news .topic:hover,
.page-news .topic:focus-within {
  border-color: var(--amber);
  transform: translateY(-2px);
}

.page-news .topic__media {
  margin: 0 0 0.9rem;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.page-news .topic__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 14 / 9;
  object-fit: cover;
}

.page-news .topic--tall .topic__media img {
  aspect-ratio: 3 / 4;
  max-height: 20rem;
}

.page-news .topic__no {
  display: inline-block;
  margin-bottom: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--teal-blue);
}

.page-news .topic__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.75rem);
  line-height: 1.15;
  color: var(--deep-teal);
}

.page-news .topic__text {
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--neutral);
}

.page-news .topic__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-bottom: 0.15rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--deep-teal);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.page-news .topic__link::after {
  content: "→";
  transition: transform 160ms ease-out;
}

.page-news .topic__link:hover,
.page-news .topic__link:focus-visible {
  color: var(--teal-blue);
  border-bottom-color: var(--amber);
}

.page-news .topic__link:hover::after,
.page-news .topic__link:focus-visible::after {
  transform: translateX(3px);
}

/* ---------- 日期归档 ---------- */
.page-news .news-archive {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
  background: var(--sand);
}

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

.page-news .archive-lede {
  max-width: 36rem;
  margin: 0.75rem 0 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--neutral);
}

.page-news .archive-cols {
  display: grid;
  gap: 1.25rem;
}

.page-news .archive-col__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--teal-blue);
}

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

.page-news .archive-links li + li {
  border-top: 1px solid rgba(156, 201, 214, 0.5);
}

.page-news .archive-links a {
  position: relative;
  display: block;
  padding: 0.55rem 0 0.55rem 0.95rem;
  font-size: 0.9375rem;
  color: var(--rock);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.page-news .archive-links a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--line);
  transition: background-color 160ms ease-out;
}

.page-news .archive-links a:hover,
.page-news .archive-links a:focus-visible {
  color: var(--teal-blue);
}

.page-news .archive-links a:hover::before,
.page-news .archive-links a:focus-visible::before {
  background: var(--amber);
}

.page-news .archive-cta {
  margin-top: 1.5rem;
}

.page-news .archive-media {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.page-news .archive-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ---------- 订阅与咨询 ---------- */
.page-news .news-cta {
  padding-block: clamp(2.5rem, 6vw, 4.25rem);
}

.page-news .news-cta__panel {
  display: grid;
  gap: 1.75rem;
  padding: clamp(1.5rem, 5vw, 3rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--deep-teal) 0%, var(--teal-blue) 100%);
  color: var(--mist);
}

.page-news .news-cta__panel .eyebrow {
  margin: 0 0 0.5rem;
  color: var(--gold);
}

.page-news .news-cta__panel h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.4vw, 2.4rem);
  line-height: 1.1;
  color: var(--white);
}

.page-news .news-cta__panel p {
  max-width: 34rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: rgba(250, 251, 252, 0.85);
}

.page-news .news-cta__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.page-news .news-cta__contact a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}

.page-news .news-cta__contact a:hover,
.page-news .news-cta__contact a:focus-visible {
  color: var(--white);
  border-bottom-color: var(--gold);
}

.page-news .news-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.page-news .news-cta__actions .button--ghost {
  border: 1px solid rgba(250, 251, 252, 0.45);
  background: transparent;
  color: var(--mist);
}

.page-news .news-cta__actions .button--ghost:hover,
.page-news .news-cta__actions .button--ghost:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
}

/* ---------- 响应式 ---------- */
@media (min-width: 520px) {
  .page-news .archive-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (min-width: 820px) {
  .page-news .news-band__panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;
    gap: 2.5rem;
  }
}

@media (min-width: 900px) {
  .page-news .news-masthead {
    padding-block: 1.5rem 7rem;
  }

  .page-news .news-layout {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }

  .page-news .news-side__inner {
    position: sticky;
    top: 1.5rem;
  }

  .page-news .news-side__tags {
    flex-direction: column;
    gap: 0;
    overflow: visible;
    padding-bottom: 0;
    border-top: 1px solid rgba(156, 201, 214, 0.45);
  }

  .page-news .news-side__tags li {
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(156, 201, 214, 0.45);
  }

  .page-news .topic-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .page-news .topic:nth-child(1) {
    grid-column: span 7;
  }

  .page-news .topic:nth-child(2) {
    grid-column: span 5;
  }

  .page-news .topic:nth-child(3) {
    grid-column: 4 / span 8;
  }

  .page-news .archive-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3rem;
    align-items: center;
  }

  .page-news .news-cta__panel {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .topic,
  .page-news .date-chip,
  .page-news .note::before,
  .page-news .note__link,
  .page-news .topic__link,
  .page-news .topic__link::after {
    transition: none;
  }

  .page-news .topic:hover,
  .page-news .topic:focus-within,
  .page-news .date-chip:hover,
  .page-news .date-chip:focus-visible {
    transform: none;
  }

  .page-news .topic__link:hover::after,
  .page-news .topic__link:focus-visible::after {
    transform: none;
  }
}