.page-news {
  --news-rule: rgba(235, 208, 126, .22);
  --news-rule-dark: rgba(20, 22, 28, .12);
  --news-soft: rgba(14, 46, 74, .06);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

/* ---------- 面包屑 ---------- */
.page-news .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px var(--gutter) 0;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ink-55);
}

.page-news .breadcrumbs a {
  color: var(--ink-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}

.page-news .breadcrumbs a:hover {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: clamp(42px, 6vw, 78px) 0 clamp(56px, 7vw, 98px);
  background:
    radial-gradient(118% 92% at 6% 2%, rgba(30, 110, 128, .52) 0%, rgba(6, 26, 46, 0) 62%),
    linear-gradient(158deg, var(--deep-sea) 0%, var(--navy) 56%, var(--teal-deep) 100%);
  color: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(112deg, rgba(235, 208, 126, .055) 0 1px, transparent 1px 16px);
  pointer-events: none;
}

.page-news .news-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 54px);
  align-items: end;
}

.page-news .news-hero .eyebrow {
  color: var(--gold-light);
}

.page-news .news-hero__title {
  margin: 16px 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4.3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-news .news-hero__title em {
  font-style: normal;
  color: var(--gold-light);
}

.page-news .news-hero__lede {
  max-width: 34em;
  margin: 0 0 32px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--paper-80);
}

.page-news .news-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--news-rule);
}

.page-news .news-hero__stats dt {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--gold-light);
}

.page-news .news-hero__stats dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--paper);
}

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

.page-news .news-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-hero__media .media-frame__caption {
  margin: 12px 0 0;
  font-size: .68rem;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--paper-55);
}

/* ---------- 最新一期 ---------- */
.page-news .news-latest {
  position: relative;
  overflow: hidden;
  padding: clamp(50px, 7vw, 94px) 0 clamp(46px, 6vw, 82px);
  background: var(--paper);
}

.page-news .news-latest__ghost {
  position: absolute;
  top: -.22em;
  right: -.02em;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(5.6rem, 19vw, 14rem);
  line-height: .78;
  letter-spacing: -.05em;
  color: rgba(14, 46, 74, .075);
  pointer-events: none;
  user-select: none;
}

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

.page-news .news-latest__title {
  max-width: 20em;
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.8vw, 2.55rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-news .news-latest__prose {
  margin: 0;
  color: var(--ink-82);
}

.page-news .news-latest__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
}

.page-news .news-latest__facts > div {
  padding-top: 12px;
  border-top: 2px solid var(--gold);
}

.page-news .news-latest__facts dt {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-55);
}

.page-news .news-latest__facts dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--navy);
}

.page-news .news-latest__more {
  margin: 28px 0 0;
}

/* ---------- 近期公告 ---------- */
.page-news .news-stream {
  padding: clamp(48px, 6vw, 88px) 0 clamp(52px, 7vw, 96px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--news-soft) 100%), var(--paper);
}

.page-news .news-stream__head {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}

.page-news .news-stream__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-news .news-stream__hint {
  margin: 0;
  font-family: var(--font-body);
  font-size: .97rem;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}

.page-news .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--ink-70);
  background: rgba(245, 241, 232, .7);
  border: 1px solid var(--news-rule-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.page-news .filter-chip:hover {
  border-color: var(--teal-mid);
  color: var(--navy);
}

.page-news .filter-chip__count {
  font-size: .68rem;
  opacity: .72;
}

.page-news .filter-chip[data-filter="all"][aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.page-news .filter-chip[data-filter="version"][aria-pressed="true"] {
  background: rgba(200, 162, 39, .2);
  border-color: var(--gold);
  color: #6B5405;
}

.page-news .filter-chip[data-filter="content"][aria-pressed="true"] {
  background: rgba(30, 110, 128, .18);
  border-color: var(--teal-mid);
  color: #0B4A57;
}

.page-news .filter-chip[data-filter="service"][aria-pressed="true"] {
  background: rgba(255, 122, 89, .2);
  border-color: var(--coral);
  color: #9C3A1D;
}

.page-news .filter-chip[data-filter="security"][aria-pressed="true"] {
  background: rgba(41, 224, 196, .22);
  border-color: #0E9C88;
  color: #0A5F53;
}

.page-news .news-stream__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

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

.page-news .news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 26px 0;
  border-top: 1px solid var(--news-rule-dark);
  transition: border-color .2s ease;
}

.page-news .news-item:hover {
  border-top-color: var(--gold);
}

.page-news .news-item__num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.page-news .news-item__issue {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--ink-55);
}

.page-news .news-item__ver {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: .02em;
  color: var(--navy);
}

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

.page-news .news-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.42;
  color: var(--ink);
}

.page-news .news-item__text {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: .96rem;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-news .news-item__impact {
  margin: 12px 0 0;
  font-size: .72rem;
  letter-spacing: .07em;
  color: var(--ink-55);
}

.page-news .news-item__time {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-55);
  white-space: nowrap;
}

.page-news .news-tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .06em;
  border-radius: 8px;
  border: 1px solid;
  white-space: nowrap;
}

.page-news .news-tag--version {
  color: #7A5F0B;
  border-color: rgba(200, 162, 39, .65);
  background: rgba(200, 162, 39, .14);
}

.page-news .news-tag--content {
  color: #0B4A57;
  border-color: rgba(30, 110, 128, .5);
  background: rgba(30, 110, 128, .12);
}

.page-news .news-tag--service {
  color: #A33C1E;
  border-color: rgba(255, 122, 89, .68);
  background: rgba(255, 122, 89, .14);
}

.page-news .news-tag--security {
  color: #0A5F53;
  border-color: rgba(41, 224, 196, .8);
  background: rgba(41, 224, 196, .18);
}

.page-news .empty-state {
  display: none;
  margin: 26px 0 0;
  padding: 26px 20px;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-55);
  text-align: center;
  border: 1px dashed var(--news-rule-dark);
  border-radius: 8px;
}

.page-news .empty-state.is-visible {
  display: block;
}

.page-news .news-stream__aside {
  margin: 0;
  max-width: 420px;
  justify-self: center;
}

.page-news .news-stream__aside img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-stream__aside figcaption {
  margin-top: 12px;
  font-size: .69rem;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--ink-55);
}

/* ---------- 版本迭代 ---------- */
.page-news .news-versions {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 94px) 0;
  background: linear-gradient(152deg, var(--indigo) 0%, var(--navy) 62%, var(--deep-sea) 100%);
  color: var(--paper);
}

.page-news .news-versions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(72deg, rgba(235, 208, 126, .05) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

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

.page-news .news-versions .eyebrow {
  color: var(--gold-light);
}

.page-news .news-versions__title {
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.3vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-news .news-versions__prose {
  margin: 0;
  color: var(--paper-70);
}

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

.page-news .version-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  display: grid;
  gap: 28px;
}

.page-news .version-track::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(200, 162, 39, .08) 100%);
}

.page-news .version-node {
  position: relative;
}

.page-news .version-node::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 8px;
  width: 13px;
  height: 13px;
  background: var(--deep-sea);
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
}

.page-news .version-node__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.page-news .version-node__ver {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .02em;
  color: var(--gold-light);
}

.page-news .news-versions .news-tag--version {
  color: var(--gold-light);
  border-color: rgba(235, 208, 126, .5);
  background: rgba(235, 208, 126, .1);
}

.page-news .version-node__text {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--paper-80);
}

.page-news .version-node__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-news .version-node__list li {
  position: relative;
  padding-left: 16px;
  font-size: .92rem;
  line-height: 1.72;
  color: var(--paper-70);
}

.page-news .version-node__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .74em;
  width: 7px;
  height: 1px;
  background: var(--neon);
}

.page-news .version-node__list b {
  font-weight: 600;
  color: var(--paper);
}

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

.page-news .news-versions__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-versions__media figcaption {
  margin-top: 12px;
  font-size: .69rem;
  letter-spacing: .05em;
  line-height: 1.7;
  color: var(--paper-55);
}

/* ---------- 历史存档 ---------- */
.page-news .news-archive {
  padding: clamp(50px, 6vw, 88px) 0 clamp(46px, 6vw, 74px);
  background: var(--paper);
}

.page-news .news-archive__title {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.22;
  color: var(--ink);
}

.page-news .news-archive__lede {
  max-width: 40em;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-70);
}

.page-news .news-archive__banner {
  margin: 30px auto 0;
  height: clamp(140px, 22vw, 260px);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
}

.page-news .news-archive__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
}

.page-news .news-archive__rail {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-bottom: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--teal-mid) transparent;
}

.page-news .news-archive__rail::-webkit-scrollbar {
  height: 6px;
}

.page-news .news-archive__rail::-webkit-scrollbar-thumb {
  background: var(--teal-mid);
  border-radius: 3px;
}

.page-news .news-archive__card {
  flex: 0 0 min(272px, 76vw);
  scroll-snap-align: start;
  padding: 22px 20px 24px;
  background: rgba(14, 46, 74, .05);
  border-top: 2px solid var(--teal-mid);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.page-news .news-archive__idx {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--teal-mid);
}

.page-news .news-archive__card-title {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--navy);
}

.page-news .news-archive__range {
  margin: 0 0 12px;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gold);
}

.page-news .news-archive__card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-70);
}

/* ---------- 查看与反馈 ---------- */
.page-news .news-feedback {
  position: relative;
  overflow: hidden;
  padding: clamp(50px, 6vw, 90px) 0 clamp(54px, 7vw, 96px);
  background:
    radial-gradient(110% 90% at 92% 0%, rgba(30, 110, 128, .42) 0%, rgba(6, 26, 46, 0) 60%),
    linear-gradient(168deg, var(--navy) 0%, var(--deep-sea) 100%);
  color: var(--paper);
}

.page-news .news-feedback .eyebrow {
  color: var(--gold-light);
}

.page-news .news-feedback__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

.page-news .news-feedback__title {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.22;
  color: var(--paper);
}

.page-news .news-feedback__prose {
  margin: 0;
  color: var(--paper-80);
}

.page-news .news-feedback__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-feedback__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--paper-70);
}

.page-news .news-feedback__list .mono {
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--neon);
}

.page-news .news-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-news .news-feedback__panel {
  padding: 24px 22px 26px;
  background: rgba(245, 241, 232, .06);
  border: 1px solid var(--news-rule);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
}

.page-news .news-feedback__panel-title {
  margin: 0 0 16px;
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--gold-light);
}

.page-news .news-feedback__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-feedback__links a {
  display: block;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-size: .96rem;
  line-height: 1.5;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(235, 208, 126, .18);
  transition: color .18s ease, border-color .18s ease;
}

.page-news .news-feedback__links a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .page-news .news-latest__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 28px;
  }
}

@media (min-width: 820px) {
  .page-news .news-stream__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 24px;
  }

  .page-news .news-item {
    grid-template-columns: 128px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 28px;
  }

  .page-news .news-item__num {
    display: block;
  }

  .page-news .news-item__ver {
    display: block;
    margin-top: 6px;
  }

  .page-news .news-item__impact {
    margin-top: 14px;
  }
}

@media (min-width: 900px) {
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-news .news-feedback__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 46px;
    align-items: start;
  }
}

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

  .page-news .news-stream__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 44px;
    align-items: start;
  }

  .page-news .news-stream__aside {
    max-width: none;
    justify-self: stretch;
    position: sticky;
    top: 32px;
  }

  .page-news .news-stream__aside img {
    max-height: 560px;
  }
}

@media (min-width: 1200px) {
  .page-news .news-item {
    grid-template-columns: 148px minmax(0, 1fr) auto;
  }

  .page-news .news-item__ver {
    font-size: 1.36rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item,
  .page-news .filter-chip,
  .page-news .news-feedback__links a {
    transition: none;
  }
}
<<<END>>>

等等，这里多写了一个 `<<<END>>>` 标记。按规矩，只该输出 MAIN_HTML 和 PAGE_CSS 两个标记，不额外加这个词。去掉它。
<main id="main-content" class="page-news">
  <nav class="breadcrumbs mono" aria-label="页面路径">
    <a href="/">首页</a>
    <span aria-hidden="true">/</span>
    <span>更新公告</span>
  </nav>

  <section class="news-hero">
    <div class="shell news-hero__grid">
      <div class="news-hero__copy">
        <p class="eyebrow mono">双周发布 · 全年约 26 期</p>
        <h1 class="news-hero__title">每次改动都编上号，<em>您常用的栏目有没有被牵动</em>一眼可见</h1>
        <p class="news-hero__lede">亚洲城中心中文站更新公告每两周发布一期，全年约 26 期。每期把版本号、更新日期与受影响的栏目并排写清，您不用逐条比对，扫一眼就知道这次调整是否落到自己每天在用地方。</p>
        <dl class="news-hero__stats">
          <div>
            <dt>现行版本</dt>
            <dd>v7.4</dd>
          </div>
          <div>
            <dt>发布节奏</dt>
            <dd>双周一期</dd>
          </div>
          <div>
            <dt>公告类别</dt>
            <dd>4 类</dd>
          </div>
        </dl>
      </div>
      <figure class="media-frame news-hero__media">
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="夜色中规则排列的窗格，一道暖橙色光带横跨画面，呈现按双周节奏持续推进的更新感">
        <figcaption class="media-frame__caption mono">每期并列标注版本号 · 更新日期 · 影响栏目</figcaption>
      </figure>
    </div>
  </section>

  <section class="news-latest" id="latest">
    <p class="news-latest__ghost mono" aria-hidden="true">v7.4</p>
    <div class="shell news-latest__inner">
      <p class="eyebrow mono">最新一期 · 第 27 期</p>
      <h2 class="news-latest__title">资料库可以按栏目和版本号一起查了</h2>
      <p class="prose news-latest__prose">过去翻专题要一层层点进去，现在左侧多了一块组合筛选区：先勾栏目，再选版本号，结果会同时收窄。找一份旧版说明，或者只想看某个栏目最近的改动，都能两三步到位，不必再靠记忆往回翻。</p>
      <dl class="news-latest__facts">
        <div>
          <dt>版本号</dt>
          <dd>v7.4</dd>
        </div>
        <div>
          <dt>更新日期</dt>
          <dd>近两周 · 本季度第 3 期</dd>
        </div>
        <div>
          <dt>影响栏目</dt>
          <dd>资料库 · 个人中心</dd>
        </div>
      </dl>
      <p class="news-latest__more">
        <a class="btn btn--solid" href="/catalog/">看服务清单里资料库这一项</a>
      </p>
    </div>
  </section>

  <section class="section news-stream" id="stream">
    <div class="shell">
      <div class="news-stream__head">
        <div>
          <p class="eyebrow mono">近期公告</p>
          <h2 class="news-stream__title">近 8 期，按类别挑着看</h2>
        </div>
        <p class="news-stream__hint">想确认的东西不同，关注点也不同：查权益的盯服务调整，翻资料的看内容上新。点下面的按钮，把不属于您的那些先收起来。</p>
      </div>

      <div class="filter-bar" data-filter-group data-filter-scope="#news-list" role="group" aria-label="公告类别筛选">
        <button class="filter-chip" type="button" data-filter="all" aria-pressed="true">全部 <span class="filter-chip__count">8</span></button>
        <button class="filter-chip" type="button" data-filter="version" aria-pressed="false">版本迭代 <span class="filter-chip__count">2</span></button>
        <button class="filter-chip" type="button" data-filter="content" aria-pressed="false">内容上新 <span class="filter-chip__count">3</span></button>
        <button class="filter-chip" type="button" data-filter="service" aria-pressed="false">服务调整 <span class="filter-chip__count">2</span></button>
        <button class="filter-chip" type="button" data-filter="security" aria-pressed="false">安全提示 <span class="filter-chip__count">1</span></button>
      </div>

      <div class="news-stream__grid">
        <ol class="news-list" id="news-list">
          <li class="news-item" data-filter-item data-tags="version content">
            <div class="news-item__num">
              <span class="news-item__issue">第 27 期</span>
              <span class="news-item__ver">v7.4</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">资料库检索支持按栏目与版本号组合筛选</h3>
                <span class="news-tag news-tag--version">版本迭代</span>
              </div>
              <p class="news-item__text">专题页左侧新增组合筛选区，栏目与版本号可同时勾选，结果同步收窄，适合核对某项功能是从哪一版开始变的。</p>
              <p class="news-item__impact mono">影响栏目 · 资料库 / 个人中心</p>
            </div>
            <p class="news-item__time mono">近两周</p>
          </li>

          <li class="news-item" data-filter-item data-tags="content">
            <div class="news-item__num">
              <span class="news-item__issue">第 26 期</span>
              <span class="news-item__ver">v7.4</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">12 个专题页补入本季度校订条目</h3>
                <span class="news-tag news-tag--content">内容上新</span>
              </div>
              <p class="news-item__text">资料库维持每周约 20 份的新增或校订节奏，这一轮补的是专题索引页的条目摘要，方便先看梗概再决定要不要细读。</p>
              <p class="news-item__impact mono">影响栏目 · 资料库</p>
            </div>
            <p class="news-item__time mono">近一个月</p>
          </li>

          <li class="news-item" data-filter-item data-tags="service">
            <div class="news-item__num">
              <span class="news-item__issue">第 25 期</span>
              <span class="news-item__ver">v7.4</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">服务清单合作支持类目新增 4 项条目</h3>
                <span class="news-tag news-tag--service">服务调整</span>
              </div>
              <p class="news-item__text">资料授权、专题共建一类事项补上了办理说明，服务清单的服务条目总数现为 42 项，六大类目的归属也更清楚了。</p>
              <p class="news-item__impact mono">影响栏目 · 服务清单</p>
            </div>
            <p class="news-item__time mono">近一个月</p>
          </li>

          <li class="news-item" data-filter-item data-tags="service">
            <div class="news-item__num">
              <span class="news-item__issue">第 24 期</span>
              <span class="news-item__ver">v7.3</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">个人中心权益面板在小屏下改为单列卡片</h3>
                <span class="news-tag news-tag--service">服务调整</span>
              </div>
              <p class="news-item__text">四档会员权益在手机竖屏下一档一张卡，档位标签横向排布，切换后内容就地更新，不用来回缩放页面。</p>
              <p class="news-item__impact mono">影响栏目 · 个人中心</p>
            </div>
            <p class="news-item__time mono">近两个月</p>
          </li>

          <li class="news-item" data-filter-item data-tags="content">
            <div class="news-item__num">
              <span class="news-item__issue">第 23 期</span>
              <span class="news-item__ver">v7.3</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">帮助中心第二条补充版本号与影响栏目对照</h3>
                <span class="news-tag news-tag--content">内容上新</span>
              </div>
              <p class="news-item__text">站内栏目版本说明与当期公告放到同一处，按版本号就能查出它改动过哪些栏目，查变更时少绕一道弯。</p>
              <p class="news-item__impact mono">影响栏目 · 帮助中心</p>
            </div>
            <p class="news-item__time mono">近两个月</p>
          </li>

          <li class="news-item" data-filter-item data-tags="security">
            <div class="news-item__num">
              <span class="news-item__issue">第 22 期</span>
              <span class="news-item__ver">v7.3</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">登录设备异常提醒的说明文字重写</h3>
                <span class="news-tag news-tag--security">安全提示</span>
              </div>
              <p class="news-item__text">提醒里直接写明设备类型、首次出现时间与建议操作，遇到陌生设备时您能更快判断要不要立即处理。</p>
              <p class="news-item__impact mono">影响栏目 · 个人中心 / 账号安全</p>
            </div>
            <p class="news-item__time mono">近三个月</p>
          </li>

          <li class="news-item" data-filter-item data-tags="content">
            <div class="news-item__num">
              <span class="news-item__issue">第 21 期</span>
              <span class="news-item__ver">v7.2</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">更新公告分类调整为四类</h3>
                <span class="news-tag news-tag--content">内容上新</span>
              </div>
              <p class="news-item__text">公告按版本迭代、内容上新、服务调整、安全提示重新归类，关心哪一类就只看哪一类，不用逐期翻过去。</p>
              <p class="news-item__impact mono">影响栏目 · 更新公告</p>
            </div>
            <p class="news-item__time mono">近三个月</p>
          </li>

          <li class="news-item" data-filter-item data-tags="version">
            <div class="news-item__num">
              <span class="news-item__issue">第 20 期</span>
              <span class="news-item__ver">v7.2</span>
            </div>
            <div class="news-item__body">
              <div class="news-item__head">
                <h3 class="news-item__title">页首导航与个人中心入口位置梳理</h3>
                <span class="news-tag news-tag--version">版本迭代</span>
              </div>
              <p class="news-item__text">一级栏目在刊头下方横向铺开，个人中心入口挪到页首右侧常驻，手机上收拢为抽屉式栏目表，入口更固定。</p>
              <p class="news-item__impact mono">影响栏目 · 全站</p>
            </div>
            <p class="news-item__time mono">近四个月</p>
          </li>
        </ol>

        <p class="empty-state" data-filter-empty></p>

        <figure class="media-frame media-frame--tall news-stream__aside">
          <img src="{zhanqunpic:h:1100w:900}" width="900" height="1100" loading="lazy" decoding="async" alt="桌面上的编辑工作台，只摆放纸张索引卡、笔与屏幕一角，屏幕上是抽象色块">
          <figcaption class="mono">一期公告的成稿过程：先定归类，再核对版本号与影响栏目</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section news-versions" id="versions">
    <div class="shell">
      <p class="eyebrow mono">版本迭代</p>
      <h2 class="news-versions__title">顺着 v7 版本线，看清每一版动了哪里</h2>
      <p class="prose news-versions__prose">版本号往前推进，服务清单、资料库和个人中心各自的改动范围也跟着变。下面按版本从新到旧排开，您可以对号入座，只看自己每天用的那一块。</p>

      <div class="news-versions__grid">
        <ol class="version-track">
          <li class="version-node">
            <div class="version-node__head">
              <span class="version-node__ver">v7.4</span>
              <span class="news-tag news-tag--version">当前版本</span>
            </div>
            <p class="version-node__text">这一版重心落在检索效率上，把资料库的组合筛选和移动端的权益面板一起收拾了一遍。</p>
            <ul class="version-node__list">
              <li><b>服务清单 ·</b> 合作支持类目补齐条目说明，服务条目总数现为 42 项。</li>
              <li><b>资料库 ·</b> 栏目与版本号可同时勾选，检索结果随之收窄。</li>
              <li><b>个人中心 ·</b> 四档权益在小屏下改为单列卡片，切换即时生效。</li>
            </ul>
          </li>
          <li class="version-node">
            <div class="version-node__head">
              <span class="version-node__ver">v7.3</span>
            </div>
            <p class="version-node__text">围绕“查得到、看得懂”做了一轮补强，把版本信息挪到离用户更近的地方。</p>
            <ul class="version-node__list">
              <li><b>帮助中心 ·</b> 第二条补上版本号与影响栏目对照，与公告同步。</li>
              <li><b>个人中心 ·</b> 登录设备异常提醒改写，写明设备类型与建议操作。</li>
              <li><b>资料库 ·</b> 专题内页排序规则统一，同一专题下顺序不再跳。</li>
            </ul>
          </li>
          <li class="version-node">
            <div class="version-node__head">
              <span class="version-node__ver">v7.2</span>
            </div>
            <p class="version-node__text">把入口和分类先理顺，后续每一次改动才有稳定的落点。</p>
            <ul class="version-node__list">
              <li><b>更新公告 ·</b> 分类固定为版本迭代、内容上新、服务调整、安全提示四类。</li>
              <li><b>全站 ·</b> 页首导航与个人中心入口位置梳理，移动端收拢为抽屉式栏目表。</li>
            </ul>
          </li>
          <li class="version-node">
            <div class="version-node__head">
              <span class="version-node__ver">v7.0</span>
            </div>
            <p class="version-node__text">v7 版本线的起点，资料与服务的组织方式在这一版定型，之后各版都在它上面叠加。</p>
            <ul class="version-node__list">
              <li><b>资料库 ·</b> 确立按专题与版本号组合检索的方式。</li>
              <li><b>服务清单 ·</b> 六大类目结构定型，条目归属不再来回挪动。</li>
            </ul>
          </li>
        </ol>

        <figure class="media-frame media-frame--square news-versions__media">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" loading="lazy" decoding="async" alt="俯视视角的编号档案盒层层叠放，侧面标签用等宽数字样式，呈现可按版本线回溯的档案排列">
          <figcaption class="mono">版本线连着服务清单、资料库与个人中心三处落点</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section news-archive" id="archive">
    <div class="shell news-archive__head">
      <p class="eyebrow mono">历史存档</p>
      <h2 class="news-archive__title">往前翻，看某项服务是从哪一期开始变的</h2>
      <p class="news-archive__lede">会员权益的调整结果、栏目名称的变动、检索方式的更替，都能在早前的期数里找到对应记录。下面是几个常用的回溯入口，按时间段挑一个进去看即可。</p>
    </div>

    <figure class="shell news-archive__banner">
      <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" loading="lazy" decoding="async" alt="向纵深延伸的档案通道，两侧为编号栏与斜切面板，尽头有一点金色微光">
    </figure>

    <div class="shell">
      <div class="news-archive__rail">
        <article class="news-archive__card">
          <span class="news-archive__idx mono">ARCH-01</span>
          <h3 class="news-archive__card-title">最近半年</h3>
          <p class="news-archive__range mono">第 14 至 27 期</p>
          <p class="news-archive__card-text">四档会员权益的季度复核结果集中出现在这一段，栏目名称与检索方式的调整也一并留了记录。</p>
        </article>
        <article class="news-archive__card">
          <span class="news-archive__idx mono">ARCH-02</span>
          <h3 class="news-archive__card-title">更早批次</h3>
          <p class="news-archive__range mono">第 1 至 13 期</p>
          <p class="news-archive__card-text">中文站上线后的一段公告，覆盖六大类目服务结构的成型过程，适合追查某项服务的来历。</p>
        </article>
        <article class="news-archive__card">
          <span class="news-archive__idx mono">ARCH-03</span>
          <h3 class="news-archive__card-title">2023 年改版</h3>
          <p class="news-archive__range mono">第 6 次改版</p>
          <p class="news-archive__card-text">页首导航与“官方入口—服务清单—资料库—帮助中心”这条主路径在这一轮确立，公告保留了当时的栏目对照。</p>
        </article>
        <article class="news-archive__card">
          <span class="news-archive__idx mono">ARCH-04</span>
          <h3 class="news-archive__card-title">2021 年资料库专题化</h3>
          <p class="news-archive__range mono">专题化改造期</p>
          <p class="news-archive__card-text">资料从零散条目改成按专题组织，检索方式同时调整为专题与版本号组合，公告记录了分批迁移的顺序。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="section news-feedback" id="feedback">
    <div class="shell news-feedback__grid">
      <div class="news-feedback__copy">
        <p class="eyebrow mono">查看与反馈</p>
        <h2 class="news-feedback__title">公告固定在哪看，意见往哪提</h2>
        <p class="prose news-feedback__prose">公告的查看入口固定在帮助中心第二条附近，长期挂着，翻旧期也不用另找地方。如果您发现某一期的说明和实际使用感受对不上，欢迎来信，把注册手机号与问题截图一并写上，会更快落到具体团队手上。</p>
        <ul class="news-feedback__list">
          <li><span class="mono">01</span> 入口稳定，随时回看任意一期</li>
          <li><span class="mono">02</span> 每期都写清版本号、更新日期与影响栏目</li>
          <li><span class="mono">03</span> 反馈注明注册手机号与问题截图，工作日 9:00 至 18:00 受理</li>
        </ul>
        <div class="news-feedback__actions">
          <a class="btn btn--ghost" href="/faqs/">去帮助中心看公告</a>
          <a class="btn btn--ghost" href="/connect/">联系客服反馈</a>
        </div>
      </div>
      <div class="news-feedback__panel">
        <p class="news-feedback__panel-title mono">顺手可去的几处</p>
        <ul class="news-feedback__links">
          <li><a href="/catalog/">服务清单 · 六大类目 42 项条目</a></li>
          <li><a href="/overview/">品牌总览 · 团队与服务能力</a></li>
          <li><a href="/">首页 · 官方入口与资料库索引</a></li>
          <li><a href="/connect/">联系通道 · 客服邮箱与受理时间</a></li>
        </ul>
      </div>
    </div>
  </section>
</main>

.page-news {
  --news-rule: rgba(235, 208, 126, .22);
  --news-rule-dark: rgba(20, 22, 28, .12);
  --news-soft: rgba(14, 46, 74, .06);
  background: var(--paper);
  color: var(--ink);
  overflow-x: clip;
}

.page-news .breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 18px var(--gutter) 0;
  font-size: .74rem;
  letter-spacing: .08em;
  color: var(--ink-55);
}

.page-news .breadcrumbs a {
  color: var(--ink-70);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}

.page-news .breadcrumbs a:hover {
  color: var(--navy);
  border-bottom-color: var(--gold);
}

.page-news .news-hero {
  position: relative;
  overflow: hidden;
  margin-top: 16px;
  padding: clamp(42px, 6vw, 78px) 0 clamp(56px, 7vw, 98px);
  background:
    radial-gradient(118% 92% at 6% 2%, rgba(30, 110, 128, .52) 0%, rgba(6, 26, 46, 0) 62%),
    linear-gradient(158deg, var(--deep-sea) 0%, var(--navy) 56%, var(--teal-deep) 100%);
  color: var(--paper);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(112deg, rgba(235, 208, 126, .055) 0 1px, transparent 1px 16px);
  pointer-events: none;
}

.page-news .news-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(30px, 5vw, 54px);
  align-items: end;
}

.page-news .news-hero .eyebrow {
  color: var(--gold-light);
}

.page-news .news-hero__title {
  margin: 16px 0 20px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 4.3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--paper);
}

.page-news .news-hero__title em {
  font-style: normal;
  color: var(--gold-light);
}

.page-news .news-hero__lede {
  max-width: 34em;
  margin: 0 0 32px;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--paper-80);
}

.page-news .news-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 18px 24px;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--news-rule);
}

.page-news .news-hero__stats dt {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--gold-light);
}

.page-news .news-hero__stats dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.16rem;
  color: var(--paper);
}

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

.page-news .news-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-hero__media .media-frame__caption {
  margin: 12px 0 0;
  font-size: .68rem;
  line-height: 1.7;
  letter-spacing: .06em;
  color: var(--paper-55);
}

.page-news .news-latest {
  position: relative;
  overflow: hidden;
  padding: clamp(50px, 7vw, 94px) 0 clamp(46px, 6vw, 82px);
  background: var(--paper);
}

.page-news .news-latest__ghost {
  position: absolute;
  top: -.22em;
  right: -.02em;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(5.6rem, 19vw, 14rem);
  line-height: .78;
  letter-spacing: -.05em;
  color: rgba(14, 46, 74, .075);
  pointer-events: none;
  user-select: none;
}

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

.page-news .news-latest__title {
  max-width: 20em;
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.8vw, 2.55rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-news .news-latest__prose {
  margin: 0;
  color: var(--ink-82);
}

.page-news .news-latest__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 30px 0 0;
  padding: 0;
}

.page-news .news-latest__facts > div {
  padding-top: 12px;
  border-top: 2px solid var(--gold);
}

.page-news .news-latest__facts dt {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--ink-55);
}

.page-news .news-latest__facts dd {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  color: var(--navy);
}

.page-news .news-latest__more {
  margin: 28px 0 0;
}

.page-news .news-stream {
  padding: clamp(48px, 6vw, 88px) 0 clamp(52px, 7vw, 96px);
  background: linear-gradient(180deg, var(--paper) 0%, var(--news-soft) 100%), var(--paper);
}

.page-news .news-stream__head {
  display: grid;
  gap: 14px;
  margin-bottom: 26px;
}

.page-news .news-stream__title {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.page-news .news-stream__hint {
  margin: 0;
  font-family: var(--font-body);
  font-size: .97rem;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-news .filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 26px;
}

.page-news .filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  color: var(--ink-70);
  background: rgba(245, 241, 232, .7);
  border: 1px solid var(--news-rule-dark);
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.page-news .filter-chip:hover {
  border-color: var(--teal-mid);
  color: var(--navy);
}

.page-news .filter-chip__count {
  font-size: .68rem;
  opacity: .72;
}

.page-news .filter-chip[data-filter="all"][aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--paper);
}

.page-news .filter-chip[data-filter="version"][aria-pressed="true"] {
  background: rgba(200, 162, 39, .2);
  border-color: var(--gold);
  color: #6B5405;
}

.page-news .filter-chip[data-filter="content"][aria-pressed="true"] {
  background: rgba(30, 110, 128, .18);
  border-color: var(--teal-mid);
  color: #0B4A57;
}

.page-news .filter-chip[data-filter="service"][aria-pressed="true"] {
  background: rgba(255, 122, 89, .2);
  border-color: var(--coral);
  color: #9C3A1D;
}

.page-news .filter-chip[data-filter="security"][aria-pressed="true"] {
  background: rgba(41, 224, 196, .22);
  border-color: #0E9C88;
  color: #0A5F53;
}

.page-news .news-stream__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

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

.page-news .news-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 26px 0;
  border-top: 1px solid var(--news-rule-dark);
  transition: border-color .2s ease;
}

.page-news .news-item:hover {
  border-top-color: var(--gold);
}

.page-news .news-item__num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.page-news .news-item__issue {
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--ink-55);
}

.page-news .news-item__ver {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.24rem;
  letter-spacing: .02em;
  color: var(--navy);
}

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

.page-news .news-item__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.42;
  color: var(--ink);
}

.page-news .news-item__text {
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: .96rem;
  line-height: 1.78;
  color: var(--ink-70);
}

.page-news .news-item__impact {
  margin: 12px 0 0;
  font-size: .72rem;
  letter-spacing: .07em;
  color: var(--ink-55);
}

.page-news .news-item__time {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--ink-55);
  white-space: nowrap;
}

.page-news .news-tag {
  display: inline-block;
  padding: 3px 10px;
  font-family: var(--font-mono);
  font-size: .69rem;
  letter-spacing: .06em;
  border-radius: 8px;
  border: 1px solid;
  white-space: nowrap;
}

.page-news .news-tag--version {
  color: #7A5F0B;
  border-color: rgba(200, 162, 39, .65);
  background: rgba(200, 162, 39, .14);
}

.page-news .news-tag--content {
  color: #0B4A57;
  border-color: rgba(30, 110, 128, .5);
  background: rgba(30, 110, 128, .12);
}

.page-news .news-tag--service {
  color: #A33C1E;
  border-color: rgba(255, 122, 89, .68);
  background: rgba(255, 122, 89, .14);
}

.page-news .news-tag--security {
  color: #0A5F53;
  border-color: rgba(41, 224, 196, .8);
  background: rgba(41, 224, 196, .18);
}

.page-news .empty-state {
  display: none;
  margin: 26px 0 0;
  padding: 26px 20px;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--ink-55);
  text-align: center;
  border: 1px dashed var(--news-rule-dark);
  border-radius: 8px;
}

.page-news .empty-state.is-visible {
  display: block;
}

.page-news .news-stream__aside {
  margin: 0;
  max-width: 420px;
  justify-self: center;
}

.page-news .news-stream__aside img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-stream__aside figcaption {
  margin-top: 12px;
  font-size: .69rem;
  line-height: 1.7;
  letter-spacing: .05em;
  color: var(--ink-55);
}

.page-news .news-versions {
  position: relative;
  overflow: hidden;
  padding: clamp(52px, 7vw, 94px) 0;
  background: linear-gradient(152deg, var(--indigo) 0%, var(--navy) 62%, var(--deep-sea) 100%);
  color: var(--paper);
}

.page-news .news-versions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(72deg, rgba(235, 208, 126, .05) 0 1px, transparent 1px 18px);
  pointer-events: none;
}

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

.page-news .news-versions .eyebrow {
  color: var(--gold-light);
}

.page-news .news-versions__title {
  margin: 14px 0 16px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.3vw, 2.4rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--paper);
}

.page-news .news-versions__prose {
  margin: 0;
  color: var(--paper-70);
}

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

.page-news .version-track {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 30px;
  display: grid;
  gap: 28px;
}

.page-news .version-track::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(200, 162, 39, .08) 100%);
}

.page-news .version-node {
  position: relative;
}

.page-news .version-node::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 8px;
  width: 13px;
  height: 13px;
  background: var(--deep-sea);
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
}

.page-news .version-node__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
  margin-bottom: 10px;
}

.page-news .version-node__ver {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .02em;
  color: var(--gold-light);
}

.page-news .news-versions .news-tag--version {
  color: var(--gold-light);
  border-color: rgba(235, 208, 126, .5);
  background: rgba(235, 208, 126, .1);
}

.page-news .version-node__text {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--paper-80);
}

.page-news .version-node__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.page-news .version-node__list li {
  position: relative;
  padding-left: 16px;
  font-size: .92rem;
  line-height: 1.72;
  color: var(--paper-70);
}

.page-news .version-node__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .74em;
  width: 7px;
  height: 1px;
  background: var(--neon);
}

.page-news .version-node__list b {
  font-weight: 600;
  color: var(--paper);
}

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

.page-news .news-versions__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.page-news .news-versions__media figcaption {
  margin-top: 12px;
  font-size: .69rem;
  letter-spacing: .05em;
  line-height: 1.7;
  color: var(--paper-55);
}

.page-news .news-archive {
  padding: clamp(50px, 6vw, 88px) 0 clamp(46px, 6vw, 74px);
  background: var(--paper);
}

.page-news .news-archive__title {
  margin: 12px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.22;
  color: var(--ink);
}

.page-news .news-archive__lede {
  max-width: 40em;
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink-70);
}

.page-news .news-archive__banner {
  margin: 30px auto 0;
  height: clamp(140px, 22vw, 260px);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);
}

.page-news .news-archive__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
}

.page-news .news-archive__rail {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  padding-bottom: 18px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--teal-mid) transparent;
}

.page-news .news-archive__rail::-webkit-scrollbar {
  height: 6px;
}

.page-news .news-archive__rail::-webkit-scrollbar-thumb {
  background: var(--teal-mid);
  border-radius: 3px;
}

.page-news .news-archive__card {
  flex: 0 0 min(272px, 76vw);
  scroll-snap-align: start;
  padding: 22px 20px 24px;
  background: rgba(14, 46, 74, .05);
  border-top: 2px solid var(--teal-mid);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}

.page-news .news-archive__idx {
  display: block;
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--teal-mid);
}

.page-news .news-archive__card-title {
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--navy);
}

.page-news .news-archive__range {
  margin: 0 0 12px;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--gold);
}

.page-news .news-archive__card-text {
  margin: 0;
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.75;
  color: var(--ink-70);
}

.page-news .news-feedback {
  position: relative;
  overflow: hidden;
  padding: clamp(50px, 6vw, 90px) 0 clamp(54px, 7vw, 96px);
  background:
    radial-gradient(110% 90% at 92% 0%, rgba(30, 110, 128, .42) 0%, rgba(6, 26, 46, 0) 60%),
    linear-gradient(168deg, var(--navy) 0%, var(--deep-sea) 100%);
  color: var(--paper);
}

.page-news .news-feedback .eyebrow {
  color: var(--gold-light);
}

.page-news .news-feedback__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
}

.page-news .news-feedback__title {
  margin: 14px 0 18px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  line-height: 1.22;
  color: var(--paper);
}

.page-news .news-feedback__prose {
  margin: 0;
  color: var(--paper-80);
}

.page-news .news-feedback__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-feedback__list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--paper-70);
}

.page-news .news-feedback__list .mono {
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--neon);
}

.page-news .news-feedback__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.page-news .news-feedback__panel {
  padding: 24px 22px 26px;
  background: rgba(245, 241, 232, .06);
  border: 1px solid var(--news-rule);
  clip-path: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
}

.page-news .news-feedback__panel-title {
  margin: 0 0 16px;
  font-size: .7rem;
  letter-spacing: .16em;
  color: var(--gold-light);
}

.page-news .news-feedback__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .news-feedback__links a {
  display: block;
  padding-bottom: 10px;
  font-family: var(--font-display);
  font-size: .96rem;
  line-height: 1.5;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid rgba(235, 208, 126, .18);
  transition: color .18s ease, border-color .18s ease;
}

.page-news .news-feedback__links a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold);
}

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

@media (min-width: 820px) {
  .page-news .news-stream__head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 24px;
  }

  .page-news .news-item {
    grid-template-columns: 128px minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 28px;
  }

  .page-news .news-item__num {
    display: block;
  }

  .page-news .news-item__ver {
    display: block;
    margin-top: 6px;
  }

  .page-news .news-item__impact {
    margin-top: 14px;
  }
}

@media (min-width: 900px) {
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .page-news .news-feedback__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 46px;
    align-items: start;
  }
}

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

  .page-news .news-stream__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: 44px;
    align-items: start;
  }

  .page-news .news-stream__aside {
    max-width: none;
    justify-self: stretch;
    position: sticky;
    top: 32px;
  }

  .page-news .news-stream__aside img {
    max-height: 560px;
  }
}

@media (min-width: 1200px) {
  .page-news .news-item {
    grid-template-columns: 148px minmax(0, 1fr) auto;
  }

  .page-news .news-item__ver {
    font-size: 1.36rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item,
  .page-news .filter-chip,
  .page-news .news-feedback__links a {
    transition: none;
  }
}