.page-news {
  --news-ink-soft: var(--ink-soft);
  --news-radius: var(--r-md);
  --news-gap: 24px;
  display: block;
}

/* 面包屑微调 */
.page-news .breadcrumb {
  padding-top: 20px;
  font-size: 12px;
}
.page-news .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .breadcrumb__item a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.page-news .breadcrumb__item a:hover {
  color: var(--sig-deep);
  border-bottom-color: var(--sig-deep);
}
.page-news .breadcrumb__item[aria-current="page"] {
  color: var(--night);
  font-weight: 600;
}
.page-news .breadcrumb__sep {
  color: var(--line);
}

/* 首屏 */
.page-news .news-cover {
  display: grid;
  gap: 22px;
  padding-top: 26px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.page-news .news-cover__kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sig-deep);
}
.page-news .news-cover__title {
  margin: 0 0 14px;
  font-size: clamp(34px, 9vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--night);
}
.page-news .news-cover__lede {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.page-news .news-cover__side {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sig);
  border-radius: var(--news-radius);
  background: rgba(228, 234, 240, .55);
  backdrop-filter: blur(6px);
}
.page-news .news-cover__stats {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-cover__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.page-news .news-cover__stat-k {
  font-size: 12px;
  color: var(--ink-soft);
}
.page-news .news-cover__stat-v {
  font-size: 15px;
  color: var(--night);
  font-weight: 600;
}
.page-news .news-cover__save {
  justify-self: start;
}

/* 本期要点 */
.page-news .news-brief {
  margin-top: 0;
  background: var(--night);
  color: var(--paper);
}
.page-news .news-brief__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px 20px 34px;
}
.page-news .news-brief__title {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--sig-soft);
}
.page-news .news-brief__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-brief__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(199, 210, 219, .28);
}
.page-news .news-brief__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.page-news .news-brief__n {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .06em;
  padding-top: 4px;
}
.page-news .news-brief__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #E8EEF4;
}
.page-news .news-brief__text .mono {
  color: var(--sig-soft);
}

/* 日志流 */
.page-news .news-stream {
  padding-top: 40px;
  padding-bottom: 40px;
}
.page-news .news-stream__head {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}
.page-news .news-stream__title {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-stream__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-news .news-stream__figure {
  margin: 0 0 24px;
}
.page-news .news-stream__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.page-news .news-stream .tag-filter__btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.page-news .news-stream .tag-filter__btn:hover {
  border-color: var(--sig);
  color: var(--sig-deep);
}
.page-news .news-stream .tag-filter__btn[aria-pressed="true"] {
  border-color: var(--sig);
  background: rgba(255, 106, 26, .1);
  color: var(--sig-deep);
  font-weight: 600;
}
.page-news .news-stream .tag-filter__btn:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 2px;
}

.page-news .log-stream {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.page-news .log-stream__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 18px 12px 18px 6px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.page-news .log-stream__item:hover,
.page-news .log-stream__item:focus-within {
  background: var(--night-2);
  border-left-color: var(--sig);
  transform: translateX(3px);
}
.page-news .log-stream__item:hover .log-stream__no,
.page-news .log-stream__item:hover .log-stream__title,
.page-news .log-stream__item:hover .log-stream__desc,
.page-news .log-stream__item:hover .log-stream__when,
.page-news .log-stream__item:focus-within .log-stream__no,
.page-news .log-stream__item:focus-within .log-stream__title,
.page-news .log-stream__item:focus-within .log-stream__desc,
.page-news .log-stream__item:focus-within .log-stream__when {
  color: var(--paper);
}
.page-news .log-stream__no {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .04em;
  padding-top: 3px;
}
.page-news .log-stream__body {
  display: grid;
  gap: 6px;
}
.page-news .log-stream__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.page-news .log-stream__tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border: 1px solid var(--sig);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--sig-deep);
  background: rgba(255, 106, 26, .07);
}
.page-news .log-stream__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.page-news .log-stream__tag--data {
  border-color: var(--night-2);
  color: var(--night-2);
  background: rgba(27, 58, 92, .07);
}
.page-news .log-stream__tag--register {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(31, 122, 107, .08);
}
.page-news .log-stream__tag--help {
  border-color: var(--gold);
  color: #8A6B22;
  background: rgba(200, 161, 90, .12);
}
.page-news .log-stream__item:hover .log-stream__tag,
.page-news .log-stream__item:focus-within .log-stream__tag {
  border-color: var(--sig-soft);
  color: var(--sig-soft);
  background: rgba(255, 199, 158, .12);
}
.page-news .log-stream__when {
  font-size: 12px;
  color: var(--ink-soft);
}
.page-news .log-stream__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--night);
}
.page-news .log-stream__desc {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 更新节奏 */
.page-news .news-cadence {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-news .news-cadence__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  gap: 30px;
}
.page-news .news-cadence__title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-cadence__lede {
  margin: 0 0 22px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}
.page-news .news-cadence__rules {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.page-news .news-cadence__rule {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.page-news .news-cadence__key {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--sig-deep);
}
.page-news .news-cadence__rule p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.page-news .news-cadence__weeklabel {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.page-news .weekbar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.page-news .weekbar__day {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink-soft);
}
.page-news .weekbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.page-news .weekbar__day--live {
  background: var(--sig);
  border-color: var(--sig);
  color: var(--night);
  font-weight: 700;
  box-shadow: var(--shadow-1);
}
.page-news .weekbar__day--live .weekbar__dot {
  background: var(--night);
}
.page-news .news-cadence__figure {
  margin: 0;
}

/* 订阅 */
.page-news .news-subscribe {
  padding-top: 40px;
  padding-bottom: 40px;
}
.page-news .news-subscribe__grid {
  display: grid;
  gap: 28px;
}
.page-news .news-subscribe__title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-subscribe__lede {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}
.page-news .news-subscribe__kinds {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.page-news .news-subscribe__kind {
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--night-2);
  border-radius: var(--news-radius);
  background: var(--paper);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.page-news .news-subscribe__kind:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
}
.page-news .news-subscribe__kind-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  margin-bottom: 10px;
}
.page-news .news-subscribe__kind-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-subscribe__kind-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-news .news-subscribe__ways {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--news-radius);
}
.page-news .news-subscribe__ways-label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sig-deep);
}
.page-news .news-subscribe__ways-list {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.page-news .news-subscribe__way {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-news .news-subscribe__way-v {
  color: var(--night);
  font-weight: 600;
}
.page-news .news-subscribe__ways-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.page-news .news-subscribe__ways-note a {
  color: var(--sig-deep);
  text-underline-offset: 3px;
}
.page-news .news-subscribe__ways-note a:hover {
  color: var(--night);
}
.page-news .news-subscribe__figure {
  margin: 0;
}

/* 归档 */
.page-news .news-archive {
  background: var(--night);
  color: var(--paper);
}
.page-news .news-archive__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 20px 44px;
}
.page-news .news-archive__title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--paper);
}
.page-news .news-archive__lede {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.85;
  color: #C3D0DC;
}
.page-news .archive-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}
.page-news .archive-block {
  padding: 20px 18px;
  border: 1px solid rgba(199, 210, 219, .3);
  border-radius: var(--news-radius);
  background: var(--night-2);
  box-shadow: 6px 6px 0 rgba(200, 161, 90, .18);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.page-news .archive-block:hover {
  transform: translateY(-4px);
  box-shadow: 6px 10px 0 rgba(200, 161, 90, .3);
}
.page-news .archive-block__range {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}
.page-news .archive-block__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--paper);
}
.page-news .archive-block__keys {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: #AFBFCE;
}
.page-news .news-archive__figure {
  margin: 0;
}
.page-news .news-archive__figure .media-figure__cap {
  color: #9FB0C0;
}

/* 下一步 */
.page-news .news-next {
  padding-top: 34px;
  padding-bottom: 48px;
}
.page-news .news-next__box {
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--sig);
  border-radius: var(--news-radius);
  background: var(--paper-2);
}
.page-news .news-next__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-next__desc {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.page-news .news-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 桌面布局 */
@media (min-width: 720px) {
  .page-news .news-cover {
    grid-template-columns: 1.35fr .65fr;
    gap: 34px;
    align-items: end;
    padding-top: 34px;
    padding-bottom: 38px;
  }
  .page-news .news-brief__inner {
    padding: 36px 28px 38px;
  }
  .page-news .news-brief__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .page-news .news-brief__item {
    grid-template-columns: 30px 1fr;
    padding-bottom: 0;
    border-bottom: 0;
    border-left: 1px dashed rgba(199, 210, 219, .28);
    padding-left: 16px;
  }
  .page-news .news-brief__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .page-news .news-stream__head {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 18px;
  }
  .page-news .news-stream__note {
    text-align: right;
  }
  .page-news .log-stream__item {
    grid-template-columns: 68px 1fr;
    gap: 20px;
    padding: 20px 16px 20px 8px;
  }
  .page-news .news-cadence__inner {
    grid-template-columns: 1fr .82fr;
    gap: 40px;
    padding: 48px 28px;
    align-items: start;
  }
  .page-news .news-subscribe__grid {
    grid-template-columns: 1.35fr .65fr;
    gap: 36px;
    align-items: start;
  }
  .page-news .news-subscribe__kinds {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .page-news .news-archive__inner {
    padding: 46px 28px 50px;
  }
  .page-news .archive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .page-news .archive-block__--mid {
    margin-top: 22px;
  }
  .page-news .archive-block__--old {
    margin-top: 44px;
  }
  .page-news .news-next__box {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 28px 26px;
  }
}

@media (min-width: 1080px) {
  .page-news .news-cover {
    gap: 48px;
  }
  .page-news .news-stream {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .page-news .log-stream__title {
    font-size: 18px;
  }
  .page-news .news-cadence__inner {
    grid-template-columns: 1fr .78fr;
    gap: 56px;
    padding: 56px 28px;
  }
  .page-news .news-archive__inner {
    padding: 56px 28px 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .log-stream__item,
  .page-news .news-subscribe__kind,
  .page-news .archive-block,
  .page-news .news-stream .tag-filter__btn {
    transition: none;
  }
  .page-news .log-stream__item:hover,
  .page-news .log-stream__item:focus-within,
  .page-news .archive-block:hover,
  .page-news .news-subscribe__kind:hover {
    transform: none;
  }
}
</style>
<<<END>>>

等等，我不该加 `</style>`。让我重新核对标记格式——只用这三个标记，不能加多余的。我会去掉它。
<main id="main-content" class="page-news">
  <nav class="breadcrumb container" aria-label="当前位置">
    <ol class="breadcrumb__list">
      <li class="breadcrumb__item"><a href="/">首页</a></li>
      <li class="breadcrumb__sep" aria-hidden="true">/</li>
      <li class="breadcrumb__item" aria-current="page">值守日志</li>
    </ol>
  </nav>

  <header class="news-cover container">
    <div class="news-cover__lead">
      <p class="news-cover__kicker mono">更新记录 · 第 024 期</p>
      <h1 class="news-cover__title">值守日志</h1>
      <p class="news-cover__lede">
        每周三，365在线把这一周动过的注册字段、资料版本和收藏功能逐条写下来。你不用守着后台等通知，想知道最近改了什么、资料更新到哪一版，翻一翻就知道该不该回来看。
      </p>
    </div>
    <aside class="news-cover__side" aria-label="当前更新状态">
      <ul class="news-cover__stats">
        <li class="news-cover__stat">
          <span class="news-cover__stat-k mono">当前版本</span>
          <span class="news-cover__stat-v mono">v3.2</span>
        </li>
        <li class="news-cover__stat">
          <span class="news-cover__stat-k mono">发布节奏</span>
          <span class="news-cover__stat-v">变更说明每周三</span>
        </li>
        <li class="news-cover__stat">
          <span class="news-cover__stat-k mono">最近一批</span>
          <span class="news-cover__stat-v">小屏注册字段精简</span>
        </li>
      </ul>
      <button class="btn btn--ghost btn--sm news-cover__save" type="button" data-bookmark-add>
        收藏本栏目
      </button>
    </aside>
  </header>

  <section class="news-brief" aria-labelledby="news-brief-title">
    <div class="news-brief__inner">
      <h2 class="news-brief__title" id="news-brief-title">本期要点</h2>
      <ol class="news-brief__list">
        <li class="news-brief__item">
          <span class="news-brief__n mono">01</span>
          <p class="news-brief__text">小屏注册表单精简到 <span class="mono">6</span> 个字段，4 英寸终端上单手也能一次填完。</p>
        </li>
        <li class="news-brief__item">
          <span class="news-brief__n mono">02</span>
          <p class="news-brief__text">变更说明固定到每周三发布，季度主版本与按需小版本各走各的节奏，回来看的时间好记。</p>
        </li>
        <li class="news-brief__item">
          <span class="news-brief__n mono">03</span>
          <p class="news-brief__text">中国区资料包完成季度打包，版本说明、操作手册、配置清单与巡检表模板全部核到 v3.2。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-stream container" aria-labelledby="news-stream-title">
    <div class="news-stream__head">
      <h2 class="news-stream__title" id="news-stream-title">全部条目</h2>
      <p class="news-stream__note">按主题筛选，或直接从最新一期往下翻。悬停条目可看清摘要。</p>
    </div>

    <figure class="media-figure media-figure--wide news-stream__figure">
      <div class="media-figure__frame">
        <img class="media-figure__img" src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="抽象日志条目堆叠的几何构图，条目边缘带雪青描边">
      </div>
      <figcaption class="media-figure__cap">每一批变更都以条目形式留底，按主题归档，随时可翻回上一期。</figcaption>
    </figure>

    <div class="tag-filter news-stream__filter" role="group" aria-label="按主题筛选日志条目">
      <button class="tag-filter__btn" type="button" aria-pressed="true" data-filter="all">全部主题</button>
      <button class="tag-filter__btn" type="button" aria-pressed="false" data-filter="version">版本变更</button>
      <button class="tag-filter__btn" type="button" aria-pressed="false" data-filter="data">资料更新</button>
      <button class="tag-filter__btn" type="button" aria-pressed="false" data-filter="register">注册入口</button>
      <button class="tag-filter__btn" type="button" aria-pressed="false" data-filter="help">收藏与帮助</button>
    </div>

    <ol class="log-stream">
      <li class="log-stream__item" data-filter-item data-cat="version">
        <span class="log-stream__no mono">024</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--version">版本变更</span>
            <span class="log-stream__when mono">本周三</span>
          </p>
          <h3 class="log-stream__title">小屏注册表单精简到 6 个字段，4 英寸屏也能一次填完</h3>
          <p class="log-stream__desc">必填项拆成两屏后仍然偏长，这一版把证件号与门店号合并校验，去掉重复确认项。前台用单手拇指就能走完全程。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="version">
        <span class="log-stream__no mono">024</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--version">版本变更</span>
            <span class="log-stream__when mono">本周三</span>
          </p>
          <h3 class="log-stream__title">变更说明固定到每周三，版本节奏从此可预期</h3>
          <p class="log-stream__desc">主版本按季度走、小版本按需发，但说明统一在周三这一批放出。你只要记得周三回来看一眼，就不会漏掉自己关心的改动。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="data">
        <span class="log-stream__no mono">023</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--data">资料更新</span>
            <span class="log-stream__when mono">上期</span>
          </p>
          <h3 class="log-stream__title">中国区资料包完成季度打包，四类资料同步换版</h3>
          <p class="log-stream__desc">版本说明、操作手册、配置清单、巡检表模板全部核到 v3.2，下载入口换成本季打包件，取一次就是最新的。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="register">
        <span class="log-stream__no mono">023</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--register">注册入口</span>
            <span class="log-stream__when mono">上期</span>
          </p>
          <h3 class="log-stream__title">首页两道入口改为并列，注册与订阅不再互相遮挡</h3>
          <p class="log-stream__desc">以前从首页找订阅要多翻一层。现在注册通道与订阅入口并排站，第一次来的人也分得清该点哪边。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="help">
        <span class="log-stream__no mono">022</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--help">收藏与帮助</span>
            <span class="log-stream__when mono">第 022 期</span>
          </p>
          <h3 class="log-stream__title">收藏上限提高到 60 个页面，可分三组管理</h3>
          <p class="log-stream__desc">经常跑外勤的同事常用页面比想象中多。三组分别放资料、注册流程和排查手册，找东西的时候少走一步。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="version">
        <span class="log-stream__no mono">022</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--version">版本变更</span>
            <span class="log-stream__when mono">第 022 期</span>
          </p>
          <h3 class="log-stream__title">新疆第一片区完成第三轮夜班值守演练</h3>
          <p class="log-stream__desc">演练按冬季夜班交接口径走，重点验证资料调取与值班交接的衔接。示范服务区的排班节奏又稳了一档。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="data">
        <span class="log-stream__no mono">021</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--data">资料更新</span>
            <span class="log-stream__when mono">第 021 期</span>
          </p>
          <h3 class="log-stream__title">巡检表模板新增两类巡检项，覆盖夜间交接场景</h3>
          <p class="log-stream__desc">新增项针对凌晨交班前后的设备状态与记录完整性，填表时间增加不到一分钟，交接争议却少了很多。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="version">
        <span class="log-stream__no mono">021</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--version">版本变更</span>
            <span class="log-stream__when mono">第 021 期</span>
          </p>
          <h3 class="log-stream__title">订阅节奏增加每两周选项，适配月度复盘节奏</h3>
          <p class="log-stream__desc">每周三太密、每月又太疏的团队，现在可以选每两周收一次，内容仍是版本变更、值守简报与资料更新三类。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="data">
        <span class="log-stream__no mono">020</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--data">资料更新</span>
            <span class="log-stream__when mono">第 020 期</span>
          </p>
          <h3 class="log-stream__title">本期资料更新 5 次，配置清单与巡检表各占两版</h3>
          <p class="log-stream__desc">季度打包之外，中间的小幅修订照旧随时放出。订阅了资料更新的同事会在周三一并收到本批清单。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="version">
        <span class="log-stream__no mono">020</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--version">版本变更</span>
            <span class="log-stream__when mono">第 020 期</span>
          </p>
          <h3 class="log-stream__title">第 12 期值守技能集训结业，专项覆盖小屏注册与资料核版</h3>
          <p class="log-stream__desc">这一期把课堂搬到真实小屏终端上，从注册到取资料的完整链路走了一遍，结业人数记入年度集训台账。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="help">
        <span class="log-stream__no mono">019</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--help">收藏与帮助</span>
            <span class="log-stream__when mono">第 019 期</span>
          </p>
          <h3 class="log-stream__title">排查页手风琴可同时展开三条，常见异常一屏对照</h3>
          <p class="log-stream__desc">注册提交失败、下载中断、推送没到这三类问题经常一起出现，现在可以同时摊开，不用来回折叠。</p>
        </div>
      </li>
      <li class="log-stream__item" data-filter-item data-cat="register">
        <span class="log-stream__no mono">019</span>
        <div class="log-stream__body">
          <p class="log-stream__meta">
            <span class="log-stream__tag log-stream__tag--register">注册入口</span>
            <span class="log-stream__when mono">第 019 期</span>
          </p>
          <h3 class="log-stream__title">代理点前台注册去掉一次跳转，字段回填更少</h3>
          <p class="log-stream__desc">在门店前台帮客户注册时，最怕中途跳出重新填。流程压到三步之后，同一个店员一天能多处理几单。</p>
        </div>
      </li>
    </ol>
  </section>

  <section class="news-cadence" aria-labelledby="news-cadence-title">
    <div class="news-cadence__inner">
      <div class="news-cadence__col">
        <h2 class="news-cadence__title" id="news-cadence-title">什么时候回来看</h2>
        <p class="news-cadence__lede">
          绝大多数改动都攒到周三这一批一起发，其余时间只在必要的小版本上单独放出。摸清这个规律，你就不用天天盯着。
        </p>
        <ul class="news-cadence__rules">
          <li class="news-cadence__rule">
            <span class="news-cadence__key mono">每周三</span>
            <p>固定发布一批变更说明，版本变更、资料更新与注册入口调整一并列出，订阅推送也在这一批发车。</p>
          </li>
          <li class="news-cadence__rule">
            <span class="news-cadence__key mono">每季度</span>
            <p>主版本发布，资料包做一次全量重新打包，四类资料同步换版，旧版清单同时下线。</p>
          </li>
          <li class="news-cadence__rule">
            <span class="news-cadence__key mono">按需</span>
            <p>只影响单点的小版本不必等到周三，修好即发；发布后仍会补进当周的说明条目里。</p>
          </li>
        </ul>
      </div>

      <div class="news-cadence__col news-cadence__col--week">
        <p class="news-cadence__weeklabel mono">本周刻度</p>
        <ol class="weekbar" aria-label="一周七天的更新节奏，周三为固定发布日">
          <li class="weekbar__day"><span class="weekbar__name">一</span><span class="weekbar__dot" aria-hidden="true"></span></li>
          <li class="weekbar__day"><span class="weekbar__name">二</span><span class="weekbar__dot" aria-hidden="true"></span></li>
          <li class="weekbar__day weekbar__day--live"><span class="weekbar__name">三</span><span class="weekbar__dot" aria-hidden="true"></span></li>
          <li class="weekbar__day"><span class="weekbar__name">四</span><span class="weekbar__dot" aria-hidden="true"></span></li>
          <li class="weekbar__day"><span class="weekbar__name">五</span><span class="weekbar__dot" aria-hidden="true"></span></li>
          <li class="weekbar__day"><span class="weekbar__name">六</span><span class="weekbar__dot" aria-hidden="true"></span></li>
          <li class="weekbar__day"><span class="weekbar__name">日</span><span class="weekbar__dot" aria-hidden="true"></span></li>
        </ol>
        <figure class="media-figure news-cadence__figure">
          <div class="media-figure__frame">
            <img class="media-figure__img" src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="以七天为单位的周历图形，其中一天用信号橙高亮" loading="lazy" decoding="async">
          </div>
          <figcaption class="media-figure__cap">周三这一格是固定的发布日，其余六天只处理按需放出的小改动。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="news-subscribe container" aria-labelledby="news-subscribe-title">
    <div class="news-subscribe__grid">
      <div class="news-subscribe__col">
        <h2 class="news-subscribe__title" id="news-subscribe-title">订阅板块能收到什么</h2>
        <p class="news-subscribe__lede">
          订阅板块把日志里三类内容分开投递，你按关心的事情勾选，不必全收。节奏也能调，忙的时候调稀一点，赶项目的时候调密一点。
        </p>

        <ul class="news-subscribe__kinds">
          <li class="news-subscribe__kind">
            <span class="news-subscribe__kind-dot" aria-hidden="true"></span>
            <h3 class="news-subscribe__kind-title">版本变更</h3>
            <p class="news-subscribe__kind-text">每期发布了哪些版本、动了哪些功能、有没有影响你正在用的流程，一条不落。</p>
          </li>
          <li class="news-subscribe__kind">
            <span class="news-subscribe__kind-dot" aria-hidden="true"></span>
            <h3 class="news-subscribe__kind-title">值守简报</h3>
            <p class="news-subscribe__kind-text">各片区的排班交接情况与响应时长的阶段性回顾，负责对接的人看这一份就够。</p>
          </li>
          <li class="news-subscribe__kind">
            <span class="news-subscribe__kind-dot" aria-hidden="true"></span>
            <h3 class="news-subscribe__kind-title">资料更新</h3>
            <p class="news-subscribe__kind-text">四类资料的换版清单与下载入口变化，季度打包完成时另行提醒一次。</p>
          </li>
        </ul>

        <div class="news-subscribe__ways">
          <p class="news-subscribe__ways-label mono">三种推送节奏</p>
          <ul class="news-subscribe__ways-list">
            <li class="news-subscribe__way"><span class="news-subscribe__way-v mono">每周三</span>跟着发布日走，改动一条不落。</li>
            <li class="news-subscribe__way"><span class="news-subscribe__way-v mono">每两周</span>两次合并成一封，适合节奏偏慢的团队。</li>
            <li class="news-subscribe__way"><span class="news-subscribe__way-v mono">每月</span>月底汇总一次，只保留影响面较大的条目。</li>
          </ul>
          <p class="news-subscribe__ways-note">
            想换节奏或加订一类内容，回到<a href="/offerings/">资料与服务</a>页的订阅入口重新勾选即可，改动当场生效。
          </p>
        </div>
      </div>

      <figure class="media-figure media-figure--tall news-subscribe__figure">
        <div class="media-figure__frame">
          <img class="media-figure__img" src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="三个并列分类块构成的订阅示意图形，色块取深夜蓝与雪青" loading="lazy" decoding="async">
        </div>
        <figcaption class="media-figure__cap">三类内容各自独立投递，勾哪一类就只收哪一类。</figcaption>
      </figure>
    </div>
  </section>

  <section class="news-archive" aria-labelledby="news-archive-title">
    <div class="news-archive__inner">
      <h2 class="news-archive__title" id="news-archive-title">往期归档</h2>
      <p class="news-archive__lede">
        条目按季度归档，用期号定位，配上当季的主题关键词。想找某次改动到底是哪一期发的，从关键词倒着翻最快。
      </p>

      <div class="archive-grid">
        <article class="archive-block">
          <p class="archive-block__range mono">第 019–024 期</p>
          <h3 class="archive-block__title">本季度</h3>
          <p class="archive-block__keys">小屏注册字段精简 · 首页双入口并列 · 收藏分组 · 夜班值守演练 · 巡检表新增项</p>
        </article>
        <article class="archive-block archive-block--mid">
          <p class="archive-block__range mono">第 013–018 期</p>
          <h3 class="archive-block__title">上一季度</h3>
          <p class="archive-block__keys">订阅节奏扩展 · 巡检表模板改版 · 资料季度打包 · 值守技能集训结业</p>
        </article>
        <article class="archive-block archive-block--old">
          <p class="archive-block__range mono">第 001–012 期</p>
          <h3 class="archive-block__title">更早归档</h3>
          <p class="archive-block__keys">资料下载上线 · 注册通道接入 · 订阅初版 · 常用页面书签上线 · 片区排班成型</p>
        </article>
      </div>

      <figure class="media-figure media-figure--wide news-archive__figure">
        <div class="media-figure__frame">
          <img class="media-figure__img" src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="按季度层叠的归档方块示意，层级之间用细线连接" loading="lazy" decoding="async">
        </div>
        <figcaption class="media-figure__cap">一个季度一层，越往下翻，改动的时间线越清楚。</figcaption>
      </figure>
    </div>
  </section>

  <section class="news-next container" aria-labelledby="news-next-title">
    <div class="news-next__box">
      <div class="news-next__text">
        <h2 class="news-next__title" id="news-next-title">接下来想去哪</h2>
        <p class="news-next__desc">看完日志想直接取这一版资料，或者手上正好卡着某个问题，下面两条路都能一步到。</p>
      </div>
      <div class="news-next__actions">
        <a class="btn btn--signal" href="/offerings/">取本季资料包</a>
        <a class="btn btn--night" href="/troubleshooting/">按症状排查</a>
        <a class="btn btn--ghost" href="/inquiry/">找值守客服</a>
      </div>
    </div>
  </section>
</main>

.page-news {
  --news-ink-soft: var(--ink-soft);
  --news-radius: var(--r-md);
  display: block;
}

.page-news .breadcrumb {
  padding-top: 20px;
  font-size: 12px;
}
.page-news .breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .breadcrumb__item a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.page-news .breadcrumb__item a:hover {
  color: var(--sig-deep);
  border-bottom-color: var(--sig-deep);
}
.page-news .breadcrumb__item[aria-current="page"] {
  color: var(--night);
  font-weight: 600;
}
.page-news .breadcrumb__sep {
  color: var(--line);
}

/* 首屏 */
.page-news .news-cover {
  display: grid;
  gap: 22px;
  padding-top: 26px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.page-news .news-cover__kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sig-deep);
}
.page-news .news-cover__title {
  margin: 0 0 14px;
  font-size: clamp(34px, 9vw, 60px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 800;
  color: var(--night);
}
.page-news .news-cover__lede {
  margin: 0;
  max-width: 46ch;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.page-news .news-cover__side {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--sig);
  border-radius: var(--news-radius);
  background: rgba(228, 234, 240, .55);
  backdrop-filter: blur(6px);
}
.page-news .news-cover__stats {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-cover__stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
.page-news .news-cover__stat-k {
  font-size: 12px;
  color: var(--ink-soft);
}
.page-news .news-cover__stat-v {
  font-size: 15px;
  color: var(--night);
  font-weight: 600;
}
.page-news .news-cover__save {
  justify-self: start;
}

/* 本期要点 */
.page-news .news-brief {
  background: var(--night);
  color: var(--paper);
}
.page-news .news-brief__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 32px 20px 34px;
}
.page-news .news-brief__title {
  margin: 0 0 18px;
  font-size: 13px;
  letter-spacing: .16em;
  font-weight: 600;
  color: var(--sig-soft);
}
.page-news .news-brief__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-news .news-brief__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(199, 210, 219, .28);
}
.page-news .news-brief__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.page-news .news-brief__n {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .06em;
  padding-top: 4px;
}
.page-news .news-brief__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #E8EEF4;
}
.page-news .news-brief__text .mono {
  color: var(--sig-soft);
}

/* 日志流 */
.page-news .news-stream {
  padding-top: 40px;
  padding-bottom: 40px;
}
.page-news .news-stream__head {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}
.page-news .news-stream__title {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-stream__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-news .news-stream__figure {
  margin: 0 0 24px;
}
.page-news .news-stream__filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.page-news .news-stream .tag-filter__btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.page-news .news-stream .tag-filter__btn:hover {
  border-color: var(--sig);
  color: var(--sig-deep);
}
.page-news .news-stream .tag-filter__btn[aria-pressed="true"] {
  border-color: var(--sig);
  background: rgba(255, 106, 26, .1);
  color: var(--sig-deep);
  font-weight: 600;
}
.page-news .news-stream .tag-filter__btn:focus-visible {
  outline: 2px solid var(--sig);
  outline-offset: 2px;
}

.page-news .log-stream {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.page-news .log-stream__item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 18px 12px 18px 6px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  transition: background .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease);
}
.page-news .log-stream__item:hover,
.page-news .log-stream__item:focus-within {
  background: var(--night-2);
  border-left-color: var(--sig);
  transform: translateX(3px);
}
.page-news .log-stream__item:hover .log-stream__no,
.page-news .log-stream__item:hover .log-stream__title,
.page-news .log-stream__item:hover .log-stream__desc,
.page-news .log-stream__item:hover .log-stream__when,
.page-news .log-stream__item:focus-within .log-stream__no,
.page-news .log-stream__item:focus-within .log-stream__title,
.page-news .log-stream__item:focus-within .log-stream__desc,
.page-news .log-stream__item:focus-within .log-stream__when {
  color: var(--paper);
}
.page-news .log-stream__no {
  font-size: 13px;
  color: var(--gold);
  letter-spacing: .04em;
  padding-top: 3px;
}
.page-news .log-stream__body {
  display: grid;
  gap: 6px;
}
.page-news .log-stream__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.page-news .log-stream__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px 2px 8px;
  border: 1px solid var(--sig);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--sig-deep);
  background: rgba(255, 106, 26, .07);
}
.page-news .log-stream__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}
.page-news .log-stream__tag--data {
  border-color: var(--night-2);
  color: var(--night-2);
  background: rgba(27, 58, 92, .07);
}
.page-news .log-stream__tag--register {
  border-color: var(--ok);
  color: var(--ok);
  background: rgba(31, 122, 107, .08);
}
.page-news .log-stream__tag--help {
  border-color: var(--gold);
  color: #8A6B22;
  background: rgba(200, 161, 90, .12);
}
.page-news .log-stream__item:hover .log-stream__tag,
.page-news .log-stream__item:focus-within .log-stream__tag {
  border-color: var(--sig-soft);
  color: var(--sig-soft);
  background: rgba(255, 199, 158, .12);
}
.page-news .log-stream__when {
  font-size: 12px;
  color: var(--ink-soft);
}
.page-news .log-stream__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--night);
}
.page-news .log-stream__desc {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}

/* 更新节奏 */
.page-news .news-cadence {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-news .news-cadence__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 20px;
  display: grid;
  gap: 30px;
}
.page-news .news-cadence__title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-cadence__lede {
  margin: 0 0 22px;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}
.page-news .news-cadence__rules {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.page-news .news-cadence__rule {
  display: grid;
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.page-news .news-cadence__key {
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--sig-deep);
}
.page-news .news-cadence__rule p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.page-news .news-cadence__weeklabel {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.page-news .weekbar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.page-news .weekbar__day {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink-soft);
}
.page-news .weekbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.page-news .weekbar__day--live {
  background: var(--sig);
  border-color: var(--sig);
  color: var(--night);
  font-weight: 700;
  box-shadow: var(--shadow-1);
}
.page-news .weekbar__day--live .weekbar__dot {
  background: var(--night);
}
.page-news .news-cadence__figure {
  margin: 0;
}

/* 订阅 */
.page-news .news-subscribe {
  padding-top: 40px;
  padding-bottom: 40px;
}
.page-news .news-subscribe__grid {
  display: grid;
  gap: 28px;
}
.page-news .news-subscribe__title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-subscribe__lede {
  margin: 0 0 22px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.85;
  color: var(--ink);
}
.page-news .news-subscribe__kinds {
  display: grid;
  gap: 14px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.page-news .news-subscribe__kind {
  padding: 16px 16px 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--night-2);
  border-radius: var(--news-radius);
  background: var(--paper);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.page-news .news-subscribe__kind:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
}
.page-news .news-subscribe__kind-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  margin-bottom: 10px;
}
.page-news .news-subscribe__kind-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-subscribe__kind-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-news .news-subscribe__ways {
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--news-radius);
}
.page-news .news-subscribe__ways-label {
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--sig-deep);
}
.page-news .news-subscribe__ways-list {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.page-news .news-subscribe__way {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink-soft);
}
.page-news .news-subscribe__way-v {
  color: var(--night);
  font-weight: 600;
}
.page-news .news-subscribe__ways-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.page-news .news-subscribe__ways-note a {
  color: var(--sig-deep);
  text-underline-offset: 3px;
}
.page-news .news-subscribe__ways-note a:hover {
  color: var(--night);
}
.page-news .news-subscribe__figure {
  margin: 0;
}

/* 归档 */
.page-news .news-archive {
  background: var(--night);
  color: var(--paper);
}
.page-news .news-archive__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 40px 20px 44px;
}
.page-news .news-archive__title {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: -.01em;
  font-weight: 700;
  color: var(--paper);
}
.page-news .news-archive__lede {
  margin: 0 0 26px;
  max-width: 46ch;
  font-size: 15px;
  line-height: 1.85;
  color: #C3D0DC;
}
.page-news .archive-grid {
  display: grid;
  gap: 16px;
  margin-bottom: 28px;
}
.page-news .archive-block {
  padding: 20px 18px;
  border: 1px solid rgba(199, 210, 219, .3);
  border-radius: var(--news-radius);
  background: var(--night-2);
  box-shadow: 6px 6px 0 rgba(200, 161, 90, .18);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.page-news .archive-block:hover {
  transform: translateY(-4px);
  box-shadow: 6px 10px 0 rgba(200, 161, 90, .3);
}
.page-news .archive-block__range {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--gold);
}
.page-news .archive-block__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--paper);
}
.page-news .archive-block__keys {
  margin: 0;
  font-size: 13px;
  line-height: 1.85;
  color: #AFBFCE;
}
.page-news .news-archive__figure {
  margin: 0;
}
.page-news .news-archive__figure .media-figure__cap {
  color: #9FB0C0;
}

/* 下一步 */
.page-news .news-next {
  padding-top: 34px;
  padding-bottom: 48px;
}
.page-news .news-next__box {
  display: grid;
  gap: 18px;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--sig);
  border-radius: var(--news-radius);
  background: var(--paper-2);
}
.page-news .news-next__title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--night);
}
.page-news .news-next__desc {
  margin: 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.page-news .news-next__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 桌面布局 */
@media (min-width: 720px) {
  .page-news .news-cover {
    grid-template-columns: 1.35fr .65fr;
    gap: 34px;
    align-items: end;
    padding-top: 34px;
    padding-bottom: 38px;
  }
  .page-news .news-brief__inner {
    padding: 36px 28px 38px;
  }
  .page-news .news-brief__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .page-news .news-brief__item {
    grid-template-columns: 30px 1fr;
    padding-bottom: 0;
    padding-left: 16px;
    border-bottom: 0;
    border-left: 1px dashed rgba(199, 210, 219, .28);
  }
  .page-news .news-brief__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
  .page-news .news-stream__head {
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 18px;
  }
  .page-news .news-stream__note {
    text-align: right;
  }
  .page-news .log-stream__item {
    grid-template-columns: 68px 1fr;
    gap: 20px;
    padding: 20px 16px 20px 8px;
  }
  .page-news .news-cadence__inner {
    grid-template-columns: 1fr .82fr;
    gap: 40px;
    padding: 48px 28px;
    align-items: start;
  }
  .page-news .news-subscribe__grid {
    grid-template-columns: 1.35fr .65fr;
    gap: 36px;
    align-items: start;
  }
  .page-news .news-subscribe__kinds {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .page-news .news-archive__inner {
    padding: 46px 28px 50px;
  }
  .page-news .archive-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  .page-news .archive-block--mid {
    margin-top: 22px;
  }
  .page-news .archive-block--old {
    margin-top: 44px;
  }
  .page-news .news-next__box {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 28px 26px;
  }
}

@media (min-width: 1080px) {
  .page-news .news-cover {
    gap: 48px;
  }
  .page-news .news-stream {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .page-news .log-stream__title {
    font-size: 18px;
  }
  .page-news .news-cadence__inner {
    grid-template-columns: 1fr .78fr;
    gap: 56px;
    padding: 56px 28px;
  }
  .page-news .news-archive__inner {
    padding: 56px 28px 60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .log-stream__item,
  .page-news .news-subscribe__kind,
  .page-news .archive-block,
  .page-news .news-stream .tag-filter__btn {
    transition: none;
  }
  .page-news .log-stream__item:hover,
  .page-news .log-stream__item:focus-within,
  .page-news .archive-block:hover,
  .page-news .news-subscribe__kind:hover {
    transform: none;
  }
}