.page-news {
  --news-line: rgba(243, 237, 225, 0.10);
  --news-line-strong: rgba(243, 237, 225, 0.22);
  background: var(--ink);
  color: var(--rice);
  overflow-x: clip;
}

.page-news .prose {
  max-width: 34em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(243, 237, 225, 0.82);
  margin: 0;
}

.page-news .crumbs {
  padding-block: 24px 4px;
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(18px, 4vw, 40px) clamp(40px, 7vw, 84px);
}

.page-news .news-hero__stripe {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 52%;
  height: 78px;
  background: linear-gradient(100deg,
      rgba(216, 169, 59, 0.22),
      rgba(196, 64, 47, 0.16) 55%,
      rgba(89, 160, 139, 0.10));
  transform: rotate(-5deg);
  pointer-events: none;
}

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

.page-news .news-hero__title {
  margin: 12px 0 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 8vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--gold);
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

.page-news .news-hero__lede {
  max-width: 34em;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.9;
  color: var(--rice);
}

.page-news .news-hero__paths {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 发批近况 ---------- */
.page-news .overview {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-news .overview__grid {
  display: grid;
  gap: 24px;
}

.page-news .overview__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rice);
}

.page-news .overview__stats {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-news .stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num key"
    "num val";
  gap: 2px 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--navy-700);
  border-radius: var(--r-md);
  border-left: 3px solid var(--gold);
}

.page-news .stat__num {
  grid-area: num;
  font-size: var(--fs-6);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.page-news .stat__k {
  grid-area: key;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--rice);
}

.page-news .stat__v {
  grid-area: val;
  font-size: var(--fs-2);
  line-height: 1.6;
  color: var(--stone);
}

.page-news .stat--celadon {
  border-left-color: var(--celadon);
}

.page-news .stat--celadon .stat__num {
  color: var(--celadon);
}

.page-news .stat--clay {
  border-left-color: var(--clay);
}

.page-news .stat--clay .stat__num {
  color: var(--clay);
}

/* ---------- 图片通用 ---------- */
.page-news .media {
  margin: 0;
}

.page-news .media__img {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-750);
}

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

.page-news .media__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 23, 38, 0.06);
  pointer-events: none;
}

.page-news .media__cap {
  margin-top: 10px;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--stone);
}

/* ---------- 记录主体 ---------- */
.page-news .records {
  padding-block: clamp(34px, 6vw, 64px);
  background: linear-gradient(180deg,
      transparent,
      rgba(22, 40, 63, 0.55) 10%,
      rgba(22, 40, 63, 0.55) 90%,
      transparent);
}

.page-news .records__head {
  margin-bottom: 22px;
}

.page-news .records__title {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.22;
  color: var(--rice);
}

.page-news .records__note {
  margin: 0;
  max-width: 40em;
  font-size: var(--fs-2);
  line-height: 1.75;
  color: var(--stone);
}

.page-news .records-grid {
  display: grid;
  gap: 18px;
}

.page-news .records-main {
  min-width: 0;
}

/* 左栏刻度 */
.page-news .records-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--news-line);
}

.page-news .records-rail__item {
  flex: 0 0 auto;
}

.page-news .records-rail__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 2px;
  text-decoration: none;
  color: var(--stone);
}

.page-news .records-rail__no {
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  color: var(--rice);
}

.page-news .records-rail__time {
  font-size: var(--fs-1);
  letter-spacing: 0.04em;
}

.page-news .records-rail__item.is-current .records-rail__no {
  color: var(--gold);
}

.page-news .records-rail__link:hover .records-rail__no {
  color: var(--gold-soft);
}

.page-news .records-rail__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* 记录卡片 */
.page-news .records-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.page-news .record {
  background: var(--navy-700);
  border: 1px solid var(--news-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  scroll-margin-top: 88px;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.page-news .record:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--news-line-strong);
}

.page-news .record:target {
  border-color: var(--gold);
}

.page-news .record--feature {
  background: linear-gradient(122deg, rgba(216, 169, 59, 0.18), var(--navy-700) 62%);
  border-color: rgba(216, 169, 59, 0.34);
  padding: 20px 20px;
}

.page-news .record__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.page-news .record__cat {
  font-size: var(--fs-1);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  white-space: nowrap;
}

.page-news .record__cat--arcade {
  color: var(--clay);
}

.page-news .record__cat--puzzle {
  color: var(--celadon);
}

.page-news .record__cat--versus {
  color: var(--cinnabar);
}

.page-news .record__cat--family {
  color: var(--gold);
}

.page-news .record__cat--classic {
  color: var(--gold-soft);
}

.page-news .record__no,
.page-news .record__time {
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
  color: var(--stone);
}

.page-news .record__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.45;
  color: var(--rice);
}

.page-news .record__text {
  margin: 0;
  max-width: 42em;
  font-size: var(--fs-2);
  line-height: 1.78;
  color: rgba(243, 237, 225, 0.76);
}

.page-news .records-list__media {
  border-radius: var(--r-md);
  overflow: hidden;
}

/* 右栏 */
.page-news .records-side {
  order: -1;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.page-news .filter-panel {
  position: relative;
  background: var(--navy-700);
  border: 1px solid var(--news-line);
  border-radius: var(--r-lg);
  padding: 16px;
}

.page-news .filter-panel__title {
  margin: 0 0 12px;
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  color: var(--stone);
}

.page-news .filter-panel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .filter-panel__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-news .cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--news-line-strong);
  color: var(--rice);
  font-size: var(--fs-2);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.page-news .cat-pill:hover {
  border-color: var(--gold-soft);
}

.page-news .filter-panel__radio:checked + .cat-pill {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.page-news .filter-panel__radio:focus-visible + .cat-pill {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.page-news .cat-pill__n {
  font-size: var(--fs-1);
  opacity: 0.7;
}

.page-news .records-grid:has(#cat-arcade:checked) .record:not(.record--arcade),
.page-news .records-grid:has(#cat-puzzle:checked) .record:not(.record--puzzle),
.page-news .records-grid:has(#cat-versus:checked) .record:not(.record--versus),
.page-news .records-grid:has(#cat-family:checked) .record:not(.record--family),
.page-news .records-grid:has(#cat-classic:checked) .record:not(.record--classic) {
  display: none;
}

.page-news .archive-panel {
  background: var(--navy-750);
  border: 1px solid var(--news-line);
  border-radius: var(--r-lg);
  padding: 16px;
}

.page-news .archive-panel__title {
  margin: 0;
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  color: var(--stone);
}

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

.page-news .archive-panel__list li {
  display: grid;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--news-line);
}

.page-news .archive-panel__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-news .archive-panel__no {
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  color: var(--gold-soft);
}

.page-news .archive-panel__meta {
  font-size: var(--fs-1);
  color: var(--stone);
}

.page-news .archive-panel__link {
  font-size: var(--fs-2);
  color: var(--rice);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 200, 122, 0.55);
  justify-self: start;
}

.page-news .archive-panel__link:hover {
  color: var(--gold-soft);
}

.page-news .archive-panel__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .archive-panel__note {
  margin: 14px 0 0;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--stone);
}

.page-news .dl-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(89, 160, 139, 0.42);
  background: linear-gradient(140deg, rgba(89, 160, 139, 0.20), rgba(22, 40, 63, 0.92));
  text-decoration: none;
  color: var(--rice);
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}

.page-news .dl-card:hover {
  transform: translateY(-2px);
  border-color: var(--celadon);
}

.page-news .dl-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .dl-card__k {
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  color: var(--celadon);
}

.page-news .dl-card__t {
  font-size: var(--fs-2);
  line-height: 1.65;
}

.page-news .dl-card__v {
  font-size: var(--fs-2);
  color: var(--gold-soft);
}

/* ---------- 上月归档 ---------- */
.page-news .archive {
  padding-block: clamp(34px, 6vw, 72px);
}

.page-news .archive__panel {
  background: var(--rice);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(22px, 4vw, 46px);
}

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

.page-news .archive__grid {
  display: grid;
  gap: 26px;
}

.page-news .archive__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  line-height: 1.2;
  color: var(--ink);
}

.page-news .archive__text {
  margin: 0;
  max-width: 32em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(12, 23, 38, 0.78);
}

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

.page-news .archive-card {
  background: rgba(12, 23, 38, 0.05);
  border: 1px solid rgba(12, 23, 38, 0.12);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.page-news .archive-card:hover {
  transform: translateY(-2px);
  background: rgba(196, 121, 79, 0.14);
}

.page-news .archive-card__no {
  display: inline-block;
  font-size: var(--fs-3);
  letter-spacing: 0.1em;
  color: var(--clay);
}

.page-news .archive-card__title {
  margin: 6px 0 4px;
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--ink);
}

.page-news .archive-card__text {
  margin: 0 0 10px;
  font-size: var(--fs-2);
  line-height: 1.75;
  color: rgba(12, 23, 38, 0.72);
}

.page-news .archive-card__link {
  font-size: var(--fs-2);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 23, 38, 0.4);
}

.page-news .archive-card__link:hover {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

.page-news .archive-card__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .archive__panel .media__cap {
  color: rgba(12, 23, 38, 0.62);
}

.page-news .archive__panel .media__img {
  background: rgba(12, 23, 38, 0.08);
}

/* ---------- 专题 ---------- */
.page-news .topics {
  padding-block: clamp(34px, 6vw, 72px);
}

.page-news .topics__grid {
  display: grid;
  gap: 24px;
}

.page-news .topics__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.22;
  color: var(--rice);
}

.page-news .topics__text {
  margin: 0;
  max-width: 32em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(243, 237, 225, 0.8);
}

.page-news .topics__pills {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-news .topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--navy-700);
  border: 1px solid var(--news-line-strong);
  color: var(--rice);
  font-size: var(--fs-2);
  text-decoration: none;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}

.page-news .topic-pill:hover {
  background: rgba(216, 169, 59, 0.14);
  border-color: var(--gold);
}

.page-news .topic-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .topic-pill__n {
  font-size: var(--fs-1);
  letter-spacing: 0.06em;
  color: var(--gold-soft);
}

/* ---------- 发批节奏 ---------- */
.page-news .cadence {
  padding-block: clamp(34px, 6vw, 72px);
}

.page-news .cadence__grid {
  display: grid;
  gap: 24px;
}

.page-news .cadence__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.22;
  color: var(--rice);
}

.page-news .cadence__text {
  margin: 0 0 14px;
  max-width: 32em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(243, 237, 225, 0.8);
}

.page-news .cadence__status {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.page-news .cadence__step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 4px 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--navy-700);
  border-radius: var(--r-md);
  border-left: 3px solid var(--celadon);
}

.page-news .cadence__num {
  grid-area: num;
  font-size: var(--fs-3);
  letter-spacing: 0.1em;
  color: var(--celadon);
}

.page-news .cadence__step-title {
  grid-area: title;
  margin: 0;
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--rice);
}

.page-news .cadence__step-text {
  grid-area: text;
  margin: 0;
  font-size: var(--fs-2);
  line-height: 1.72;
  color: var(--stone);
}

/* ---------- 底部信息带 ---------- */
.page-news .news-band {
  margin-top: 8px;
  padding-block: 28px 34px;
  background: var(--ink-deep);
  border-top: 2px solid rgba(216, 169, 59, 0.55);
}

.page-news .news-band__inner {
  display: grid;
  gap: 16px;
}

.page-news .news-band__item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.page-news .news-band__k {
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  color: var(--gold);
}

.page-news .news-band__v {
  font-size: var(--fs-2);
  line-height: 1.6;
  color: var(--rice);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.page-news .news-band__v:hover {
  color: var(--gold-soft);
}

.page-news .news-band__v:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- 断点 ---------- */
@media (min-width: 560px) {
  .page-news .news-band__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .page-news .overview__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }

  .page-news .archive__grid,
  .page-news .topics__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 32px;
  }

  .page-news .cadence__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: start;
  }

  .page-news .records__note {
    font-size: var(--fs-3);
  }
}

@media (min-width: 1000px) {
  .page-news .records-grid {
    grid-template-columns: 132px minmax(0, 1fr) 268px;
    gap: 24px;
    align-items: start;
  }

  .page-news .records-side {
    order: 0;
  }

  .page-news .records-rail {
    position: sticky;
    top: 24px;
  }

  .page-news .records-rail__list {
    display: block;
    padding: 0 0 0 20px;
    border-bottom: 0;
    border-left: 1px solid var(--news-line-strong);
    overflow: visible;
  }

  .page-news .records-rail__item {
    position: relative;
    padding-block: 14px;
  }

  .page-news .records-rail__item::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--news-line-strong);
    transform: translateY(-50%);
  }

  .page-news .records-rail__item.is-current::before {
    width: 18px;
    height: 2px;
    background: var(--gold-soft);
  }
}


<main id="main-content" class="page-news">
  <div class="container">
    <nav class="crumbs" aria-label="页面位置">
      <ol class="crumbs__list">
        <li><a class="crumbs__link" href="/">首页</a></li>
        <li class="crumbs__current" aria-current="page">更新记录</li>
      </ol>
    </nav>
  </div>

  <header class="news-hero">
    <span class="news-hero__stripe" aria-hidden="true"></span>
    <div class="container news-hero__inner">
      <p class="eyebrow">信息中心｜批次 088 已发布</p>
      <h1 class="display news-hero__title">每次分类改动<br>都带着批次号</h1>
      <p class="lede news-hero__lede">顺发游艺把五类游戏的每次调整按批次记下来：每月 5 日与 20 日各发一批，单批 12 至 30 条。回到这里翻两下，就能确认上个月的改动有没有落到你常玩的那台机器上。</p>
      <ul class="news-hero__paths">
        <li><a class="btn btn--gold btn--sm" href="#record-list">看本批条目</a></li>
        <li><a class="btn btn--ghost btn--sm" href="#archive">翻上月归档</a></li>
        <li><a class="btn btn--ghost btn--sm" href="/download/">约桌面端正式版</a></li>
      </ul>
    </div>
  </header>

  <section class="section overview" aria-labelledby="overview-title">
    <div class="container overview__grid">
      <div class="overview__body">
        <p class="eyebrow"><span class="file-tag">01｜</span>发批近况</p>
        <h2 id="overview-title" class="overview__title">最近两个批次，一共 74 条改动</h2>
        <p class="prose">本月的两批已经发完，上月的两批也都在归档里。门店想确认某台机器改没改、会员想追自己常玩的分类，从下面的刻度直接跳过去就行。</p>
        <ul class="overview__stats">
          <li class="stat stat--gold">
            <span class="stat__num mono">2</span>
            <span class="stat__k">本月已发布批次</span>
            <span class="stat__v">共 30 条，街机竞速、益智休闲、多人对战、亲子互动、经典复刻各有着落</span>
          </li>
          <li class="stat stat--celadon">
            <span class="stat__num mono">2</span>
            <span class="stat__k">上月归档批次</span>
            <span class="stat__v">共 44 条，回访会员随时能翻回去对照当时的调整</span>
          </li>
          <li class="stat stat--clay">
            <span class="stat__num mono">46</span>
            <span class="stat__k">亲子互动适龄标注</span>
            <span class="stat__v">逐款标到具体年龄段，贴在机台上的标签与记录同源</span>
          </li>
        </ul>
      </div>
      <figure class="media overview__media">
        <div class="media__img">
          <img src="{zhanqunpic:h:600w:800}" width="800" height="600" alt="记录册翻页特写，页边贴着彩色索引标签">
        </div>
        <figcaption class="media__cap">五类条目按批次装订，页边索引标签对应街机竞速、益智休闲等分类。</figcaption>
      </figure>
    </div>
  </section>

  <section id="record-list" class="section records" aria-labelledby="records-title">
    <div class="container">
      <div class="records__head">
        <p class="eyebrow"><span class="file-tag">02｜</span>按分类翻</p>
        <h2 id="records-title" class="records__title">挑一个分类，看最近的改动</h2>
        <p class="records__note">下面是近期改动幅度较大的条目，按发布先后倒序排。右侧标签一点，就只剩你关心的那一类。</p>
      </div>

      <div class="records-grid">
        <aside class="records-rail" aria-label="批次刻度">
          <ol class="records-rail__list">
            <li class="records-rail__item is-current">
              <a class="records-rail__link" href="#r-088-1">
                <span class="records-rail__no mono">088</span>
                <span class="records-rail__time mono">2 天前</span>
              </a>
            </li>
            <li class="records-rail__item">
              <a class="records-rail__link" href="#r-087-1">
                <span class="records-rail__no mono">087</span>
                <span class="records-rail__time mono">12 天前</span>
              </a>
            </li>
            <li class="records-rail__item">
              <a class="records-rail__link" href="#r-086-1">
                <span class="records-rail__no mono">086</span>
                <span class="records-rail__time mono">24 天前</span>
              </a>
            </li>
            <li class="records-rail__item">
              <a class="records-rail__link" href="#r-085-1">
                <span class="records-rail__no mono">085</span>
                <span class="records-rail__time mono">1 个月前</span>
              </a>
            </li>
          </ol>
        </aside>

        <div class="records-main">
          <ol class="records-list">
            <li class="record record--arcade record--feature" id="r-088-1">
              <div class="record__meta">
                <span class="record__cat record__cat--arcade">街机竞速</span>
                <span class="record__no mono">B-088</span>
                <span class="record__time mono">2 天前</span>
              </div>
              <h3 class="record__title">「山道夜跑」新增两条赛道分支</h3>
              <p class="record__text">下坡与隧道两条分支线上线，圈速榜提交后自动刷新；方向盘和手柄跑出来的是同一条基准成绩，店里换机台也不会掉榜。</p>
            </li>

            <li class="record record--puzzle" id="r-088-2">
              <div class="record__meta">
                <span class="record__cat record__cat--puzzle">益智休闲</span>
                <span class="record__no mono">B-088</span>
                <span class="record__time mono">2 天前</span>
              </div>
              <h3 class="record__title">「方块叠塔」关卡扩到 60 关</h3>
              <p class="record__text">后 40 关加入移动底座机制，前 20 关难度下调。新玩家第一次上手不会卡在第五关，老玩家也有得打。</p>
            </li>

            <li class="record record--versus" id="r-088-3">
              <div class="record__meta">
                <span class="record__cat record__cat--versus">多人对战</span>
                <span class="record__no mono">B-088</span>
                <span class="record__time mono">2 天前</span>
              </div>
              <h3 class="record__title">四人房间匹配压到 25 秒内</h3>
              <p class="record__text">匹配池按延迟分层，跨区房间单独标注。进房前的等待改成进度提示，站在机台前的人知道还要等多久。</p>
            </li>

            <li class="record record--family" id="r-088-4">
              <div class="record__meta">
                <span class="record__cat record__cat--family">亲子互动</span>
                <span class="record__no mono">B-088</span>
                <span class="record__time mono">2 天前</span>
              </div>
              <h3 class="record__title">「小小消防员」适龄标注改为 4+</h3>
              <p class="record__text">操作提示同步改成图形化说明，机台贴纸与会员中心显示同一档标注，家长在店里扫一眼就能判断合不合适。</p>
            </li>

            <li class="record record--classic" id="r-088-5">
              <div class="record__meta">
                <span class="record__cat record__cat--classic">经典复刻</span>
                <span class="record__no mono">B-088</span>
                <span class="record__time mono">2 天前</span>
              </div>
              <h3 class="record__title">「像素飞行」补入六键面板映射</h3>
              <p class="record__text">六键机型不用再单独改配置文件，装好即用；摇杆灵敏度沿用初代三档，换设备的老玩家手感不断档。</p>
            </li>

            <li class="records-list__media">
              <figure class="media">
                <div class="media__img">
                  <img src="{zhanqunpic:h:480w:640}" width="640" height="480" alt="街机竞速机台方向盘与踏板的局部近景" loading="lazy" decoding="async">
                </div>
                <figcaption class="media__cap">竞速类改动多落在手感与赛道判定上，跑一圈就能分辨。</figcaption>
              </figure>
            </li>

            <li class="record record--arcade" id="r-087-1">
              <div class="record__meta">
                <span class="record__cat record__cat--arcade">街机竞速</span>
                <span class="record__no mono">B-087</span>
                <span class="record__time mono">12 天前</span>
              </div>
              <h3 class="record__title">漂移判定容错窗口加宽</h3>
              <p class="record__text">手柄与方向盘手感拉齐，低速入弯不再被判失败；赛道记录里保留旧成绩，之前的排名不作废。</p>
            </li>

            <li class="record record--puzzle" id="r-087-2">
              <div class="record__meta">
                <span class="record__cat record__cat--puzzle">益智休闲</span>
                <span class="record__no mono">B-087</span>
                <span class="record__time mono">12 天前</span>
              </div>
              <h3 class="record__title">「连锁消除」加了 90 秒短局</h3>
              <p class="record__text">短局独立计分，适合高峰时段排队快的场所；长局成绩不受影响，两种模式各自排名。</p>
            </li>

            <li class="record record--versus record--feature" id="r-087-3">
              <div class="record__meta">
                <span class="record__cat record__cat--versus">多人对战</span>
                <span class="record__no mono">B-087</span>
                <span class="record__time mono">12 天前</span>
              </div>
              <h3 class="record__title">断线 30 秒内可回原座位</h3>
              <p class="record__text">重连时保留房间席位与当前进度，超时后座位释放给排队的人。信号不稳的场子，掉线不再是直接出局。</p>
            </li>

            <li class="record record--family" id="r-087-4">
              <div class="record__meta">
                <span class="record__cat record__cat--family">亲子互动</span>
                <span class="record__no mono">B-087</span>
                <span class="record__time mono">13 天前</span>
              </div>
              <h3 class="record__title">三款机台加入音量亮度上限</h3>
              <p class="record__text">上限值随机型预设，场所可以在这个范围里再调低。临街店面晚间营业时，声音和光不会顶到邻居。</p>
            </li>

            <li class="record record--classic" id="r-087-5">
              <div class="record__meta">
                <span class="record__cat record__cat--classic">经典复刻</span>
                <span class="record__no mono">B-087</span>
                <span class="record__time mono">13 天前</span>
              </div>
              <h3 class="record__title">「老街篮球」计分板字体重绘</h3>
              <p class="record__text">数字加大加粗，三米外也能读清；旧型号屏幕显示正常，不用换屏就能看到效果。</p>
            </li>

            <li class="record record--arcade" id="r-086-1">
              <div class="record__meta">
                <span class="record__cat record__cat--arcade">街机竞速</span>
                <span class="record__no mono">B-086</span>
                <span class="record__time mono">24 天前</span>
              </div>
              <h3 class="record__title">赛道预览缩略图重新拍摄</h3>
              <p class="record__text">夜间场景提亮，缩略图与实际赛道配色对齐。选赛道的时候不会再点错到另一条道上。</p>
            </li>

            <li class="record record--puzzle" id="r-086-2">
              <div class="record__meta">
                <span class="record__cat record__cat--puzzle">益智休闲</span>
                <span class="record__no mono">B-086</span>
                <span class="record__time mono">24 天前</span>
              </div>
              <h3 class="record__title">「数独驿站」题库加 120 道</h3>
              <p class="record__text">难度曲线重排，中等段补得最厚。连着来几天的玩家不会总撞上重复题，停留时间也就稳住了。</p>
            </li>

            <li class="record record--versus" id="r-086-3">
              <div class="record__meta">
                <span class="record__cat record__cat--versus">多人对战</span>
                <span class="record__no mono">B-086</span>
                <span class="record__time mono">25 天前</span>
              </div>
              <h3 class="record__title">房间列表改按延迟排序</h3>
              <p class="record__text">跨区房间单独标注，加入前能看到预计延迟范围。组队时不用靠试，避免进房才发现卡。</p>
            </li>

            <li class="record record--family" id="r-086-4">
              <div class="record__meta">
                <span class="record__cat record__cat--family">亲子互动</span>
                <span class="record__no mono">B-086</span>
                <span class="record__time mono">25 天前</span>
              </div>
              <h3 class="record__title">「积木小镇」提示改图形化</h3>
              <p class="record__text">识字量少的小朋友跟着图标也能玩，语音提示保留。家长不用全程站在旁边念说明。</p>
            </li>

            <li class="record record--classic" id="r-085-1">
              <div class="record__meta">
                <span class="record__cat record__cat--classic">经典复刻</span>
                <span class="record__no mono">B-085</span>
                <span class="record__time mono">1 个月前</span>
              </div>
              <h3 class="record__title">「街机合集」摇杆恢复三档</h3>
              <p class="record__text">初代的三档灵敏度回来了，玩家能在机台上直接切换，不用再进设置页找。</p>
            </li>

            <li class="record record--arcade" id="r-085-2">
              <div class="record__meta">
                <span class="record__cat record__cat--arcade">街机竞速</span>
                <span class="record__no mono">B-085</span>
                <span class="record__time mono">1 个月前</span>
              </div>
              <h3 class="record__title">方向盘校准加三分钟流程</h3>
              <p class="record__text">换机台后按提示走完三步即可完成校准，门店现场不用等工程师上门，开机当班就能处理。</p>
            </li>
          </ol>
        </div>

        <aside class="records-side">
          <div class="filter-panel" role="group" aria-label="按游戏分类筛选记录">
            <p class="filter-panel__title mono">分类筛选</p>
            <div class="filter-panel__pills">
              <input class="filter-panel__radio" type="radio" name="record-cat" id="cat-all" checked>
              <label class="cat-pill" for="cat-all">全部 <span class="cat-pill__n mono">16</span></label>

              <input class="filter-panel__radio" type="radio" name="record-cat" id="cat-arcade">
              <label class="cat-pill" for="cat-arcade">街机竞速 <span class="cat-pill__n mono">4</span></label>

              <input class="filter-panel__radio" type="radio" name="record-cat" id="cat-puzzle">
              <label class="cat-pill" for="cat-puzzle">益智休闲 <span class="cat-pill__n mono">3</span></label>

              <input class="filter-panel__radio" type="radio" name="record-cat" id="cat-versus">
              <label class="cat-pill" for="cat-versus">多人对战 <span class="cat-pill__n mono">3</span></label>

              <input class="filter-panel__radio" type="radio" name="record-cat" id="cat-family">
              <label class="cat-pill" for="cat-family">亲子互动 <span class="cat-pill__n mono">3</span></label>

              <input class="filter-panel__radio" type="radio" name="record-cat" id="cat-classic">
              <label class="cat-pill" for="cat-classic">经典复刻 <span class="cat-pill__n mono">3</span></label>
            </div>
          </div>

          <div class="archive-panel">
            <p class="archive-panel__title mono">上月两批</p>
            <ul class="archive-panel__list">
              <li>
                <span class="archive-panel__no mono">B-086</span>
                <span class="archive-panel__meta">24 天前发布 · 22 条</span>
                <a class="archive-panel__link" href="#r-086-1">看这批条目</a>
              </li>
              <li>
                <span class="archive-panel__no mono">B-085</span>
                <span class="archive-panel__meta">1 个月前发布 · 22 条</span>
                <a class="archive-panel__link" href="#r-085-1">看这批条目</a>
              </li>
            </ul>
            <p class="archive-panel__note">回访会员在会员中心可查本月与上月批次，连续回访 6 个月以上的账号能翻完整 24 个月归档。</p>
          </div>

          <a class="dl-card" href="/download/">
            <span class="dl-card__k mono">桌面端 v4.6.2</span>
            <span class="dl-card__t">记录在客户端里直接翻，不用来回切页面</span>
            <span class="dl-card__v mono">去下载 →</span>
          </a>
        </aside>
      </div>
    </div>
  </section>

  <section id="archive" class="section archive" aria-labelledby="archive-title">
    <div class="container">
      <div class="archive__panel">
        <div class="archive__grid">
          <div class="archive__body">
            <p class="eyebrow"><span class="file-tag">03｜</span>上月归档</p>
            <h2 id="archive-title" class="archive__title">上个月的两批，翻出来还能对</h2>
            <p class="archive__text">上个月的调整如果有争议，翻到批次号就能看清当时改了什么。两个批次各 22 条，改动集中在竞速判定、题库和亲子机台的适龄标注上。</p>
            <ul class="archive__cards">
              <li class="archive-card">
                <span class="archive-card__no mono">B-086</span>
                <h3 class="archive-card__title">24 天前发布</h3>
                <p class="archive-card__text">22 条，覆盖四个分类，赛道预览与题库扩充是这一批的重头。</p>
                <a class="archive-card__link" href="#r-086-1">看这批条目</a>
              </li>
              <li class="archive-card">
                <span class="archive-card__no mono">B-085</span>
                <h3 class="archive-card__title">1 个月前发布</h3>
                <p class="archive-card__text">22 条，经典复刻的手感回调与现场校准流程同期上线。</p>
                <a class="archive-card__link" href="#r-085-1">看这批条目</a>
              </li>
            </ul>
          </div>
          <figure class="media archive__media">
            <div class="media__img">
              <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="俯拍的归档卡片与批次标签排列，纸面印有编号" loading="lazy" decoding="async">
            </div>
            <figcaption class="media__cap">每个批次一张卡片，编号与发布时间印在卡面上，方便门店与会员当面核对。</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section class="section topics" aria-labelledby="topics-title">
    <div class="container topics__grid">
      <div class="topics__body">
        <p class="eyebrow"><span class="file-tag">04｜</span>专题</p>
        <h2 id="topics-title" class="topics__title">几个能连着追的系列</h2>
        <p class="topics__text">有些改动不是一批能做完的，会跨批次往前推。按系列追比按批次翻更省事，点开就能看到最近一次落到哪一条。</p>
        <ul class="topics__pills">
          <li><a class="topic-pill" href="#r-085-1">机型复刻补录 <span class="topic-pill__n mono">14 批</span></a></li>
          <li><a class="topic-pill" href="#r-088-4">适龄标签补全 <span class="topic-pill__n mono">46 款</span></a></li>
          <li><a class="topic-pill" href="#r-087-1">圈速榜校准 <span class="topic-pill__n mono">9 批</span></a></li>
          <li><a class="topic-pill" href="#r-087-3">断线重连优化 <span class="topic-pill__n mono">6 批</span></a></li>
        </ul>
      </div>
      <figure class="media topics__media">
        <div class="media__img">
          <img src="{zhanqunpic:h:480w:640}" width="640" height="480" alt="亲子互动机台的操作面板近景，按键色彩明亮" loading="lazy" decoding="async">
        </div>
        <figcaption class="media__cap">适龄标签补全系列已走到第 46 款，主要落在亲子机台的操作面板说明上。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section cadence" aria-labelledby="cadence-title">
    <div class="container cadence__grid">
      <div class="cadence__body">
        <p class="eyebrow"><span class="file-tag">05｜</span>发批节奏</p>
        <h2 id="cadence-title" class="cadence__title">每月 5 日和 20 日，各发一批</h2>
        <p class="cadence__text">批次日固定，门店排班和会员回访都能提前安排。计划内的维护提前 48 小时在这里挂公告，全年服务可用性 99.7%。</p>
        <p class="cadence__text">想第一时间知道自己的分类有没有动，把关注的分类发到客服邮箱，每批发布后按受理编号回你一条摘要。</p>
        <p class="cadence__status"><span class="stamp stamp--green">通道在线</span><span class="stamp stamp--gray">工作日 9:00–18:00</span></p>
      </div>
      <ol class="cadence__steps">
        <li class="cadence__step">
          <span class="cadence__num mono">01</span>
          <h3 class="cadence__step-title">5 日发上月下旬的批次</h3>
          <p class="cadence__step-text">单批 12 至 30 条，五类条目在会员中心按分类呈现，带版本号与生效日期。</p>
        </li>
        <li class="cadence__step">
          <span class="cadence__num mono">02</span>
          <h3 class="cadence__step-title">20 日发本月上旬的批次</h3>
          <p class="cadence__step-text">桌面端每两周迭代一次，客户端的功能条目会同步落到对应的分类记录里。</p>
        </li>
        <li class="cadence__step">
          <span class="cadence__num mono">03</span>
          <h3 class="cadence__step-title">维护公告提前 48 小时</h3>
          <p class="cadence__step-text">计划内维护挂在这里，临时情况走客服通道通报，平均首次响应 8 分钟。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-band" aria-label="记录保留与联系方式">
    <div class="container news-band__inner">
      <div class="news-band__item">
        <span class="news-band__k mono">记录保留</span>
        <span class="news-band__v">回访会员账号内保留 24 个月</span>
      </div>
      <div class="news-band__item">
        <span class="news-band__k mono">客服邮箱</span>
        <a class="news-band__v" href="mailto:kefu@luckyshunfa.com.cn">kefu@luckyshunfa.com.cn</a>
      </div>
      <div class="news-band__item">
        <span class="news-band__k mono">备案号</span>
        <span class="news-band__v">冀ICP备34128419号-2</span>
      </div>
    </div>
  </section>
</main>

.page-news {
  --news-line: rgba(243, 237, 225, 0.10);
  --news-line-strong: rgba(243, 237, 225, 0.22);
  background: var(--ink);
  color: var(--rice);
  overflow-x: clip;
}

.page-news .prose {
  max-width: 34em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(243, 237, 225, 0.82);
  margin: 0;
}

.page-news .crumbs {
  padding-block: 24px 4px;
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(18px, 4vw, 40px) clamp(40px, 7vw, 84px);
}

.page-news .news-hero__stripe {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 52%;
  height: 78px;
  background: linear-gradient(100deg,
      rgba(216, 169, 59, 0.22),
      rgba(196, 64, 47, 0.16) 55%,
      rgba(89, 160, 139, 0.10));
  transform: rotate(-5deg);
  pointer-events: none;
}

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

.page-news .news-hero__title {
  margin: 12px 0 22px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 8vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--gold);
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

.page-news .news-hero__lede {
  max-width: 34em;
  font-family: var(--font-serif);
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.9;
  color: var(--rice);
}

.page-news .news-hero__paths {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- 发批近况 ---------- */
.page-news .overview {
  padding-block: clamp(34px, 6vw, 64px);
}

.page-news .overview__grid {
  display: grid;
  gap: 24px;
}

.page-news .overview__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rice);
}

.page-news .overview__stats {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.page-news .stat {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num key"
    "num val";
  gap: 2px 16px;
  align-items: center;
  padding: 14px 18px;
  background: var(--navy-700);
  border-radius: var(--r-md);
  border-left: 3px solid var(--gold);
}

.page-news .stat__num {
  grid-area: num;
  font-size: var(--fs-6);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold);
}

.page-news .stat__k {
  grid-area: key;
  font-size: var(--fs-2);
  font-weight: 700;
  color: var(--rice);
}

.page-news .stat__v {
  grid-area: val;
  font-size: var(--fs-2);
  line-height: 1.6;
  color: var(--stone);
}

.page-news .stat--celadon {
  border-left-color: var(--celadon);
}

.page-news .stat--celadon .stat__num {
  color: var(--celadon);
}

.page-news .stat--clay {
  border-left-color: var(--clay);
}

.page-news .stat--clay .stat__num {
  color: var(--clay);
}

/* ---------- 图片通用 ---------- */
.page-news .media {
  margin: 0;
}

.page-news .media__img {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy-750);
}

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

.page-news .media__img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12, 23, 38, 0.06);
  pointer-events: none;
}

.page-news .media__cap {
  margin-top: 10px;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--stone);
}

/* ---------- 记录主体 ---------- */
.page-news .records {
  padding-block: clamp(34px, 6vw, 64px);
  background: linear-gradient(180deg,
      transparent,
      rgba(22, 40, 63, 0.55) 10%,
      rgba(22, 40, 63, 0.55) 90%,
      transparent);
}

.page-news .records__head {
  margin-bottom: 22px;
}

.page-news .records__title {
  margin: 10px 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.22;
  color: var(--rice);
}

.page-news .records__note {
  margin: 0;
  max-width: 40em;
  font-size: var(--fs-2);
  line-height: 1.75;
  color: var(--stone);
}

.page-news .records-grid {
  display: grid;
  gap: 18px;
}

.page-news .records-main {
  min-width: 0;
}

.page-news .records-rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 10px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  border-bottom: 1px solid var(--news-line);
}

.page-news .records-rail__item {
  flex: 0 0 auto;
}

.page-news .records-rail__link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 2px;
  text-decoration: none;
  color: var(--stone);
}

.page-news .records-rail__no {
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  color: var(--rice);
}

.page-news .records-rail__time {
  font-size: var(--fs-1);
  letter-spacing: 0.04em;
}

.page-news .records-rail__item.is-current .records-rail__no {
  color: var(--gold);
}

.page-news .records-rail__link:hover .records-rail__no {
  color: var(--gold-soft);
}

.page-news .records-rail__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

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

.page-news .record {
  background: var(--navy-700);
  border: 1px solid var(--news-line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  scroll-margin-top: 88px;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

.page-news .record:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--news-line-strong);
}

.page-news .record:target {
  border-color: var(--gold);
}

.page-news .record--feature {
  background: linear-gradient(122deg, rgba(216, 169, 59, 0.18), var(--navy-700) 62%);
  border-color: rgba(216, 169, 59, 0.34);
  padding: 20px;
}

.page-news .record__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 8px;
}

.page-news .record__cat {
  font-size: var(--fs-1);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid currentColor;
  white-space: nowrap;
}

.page-news .record__cat--arcade {
  color: var(--clay);
}

.page-news .record__cat--puzzle {
  color: var(--celadon);
}

.page-news .record__cat--versus {
  color: var(--cinnabar);
}

.page-news .record__cat--family {
  color: var(--gold);
}

.page-news .record__cat--classic {
  color: var(--gold-soft);
}

.page-news .record__no,
.page-news .record__time {
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
  color: var(--stone);
}

.page-news .record__title {
  margin: 0 0 6px;
  font-family: var(--font-body);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.45;
  color: var(--rice);
}

.page-news .record__text {
  margin: 0;
  max-width: 42em;
  font-size: var(--fs-2);
  line-height: 1.78;
  color: rgba(243, 237, 225, 0.76);
}

.page-news .records-list__media {
  border-radius: var(--r-md);
  overflow: hidden;
}

.page-news .records-side {
  order: -1;
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.page-news .filter-panel {
  position: relative;
  background: var(--navy-700);
  border: 1px solid var(--news-line);
  border-radius: var(--r-lg);
  padding: 16px;
}

.page-news .filter-panel__title {
  margin: 0 0 12px;
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  color: var(--stone);
}

.page-news .filter-panel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .filter-panel__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.page-news .cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--news-line-strong);
  color: var(--rice);
  font-size: var(--fs-2);
  cursor: pointer;
  user-select: none;
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.page-news .cat-pill:hover {
  border-color: var(--gold-soft);
}

.page-news .filter-panel__radio:checked + .cat-pill {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.page-news .filter-panel__radio:focus-visible + .cat-pill {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.page-news .cat-pill__n {
  font-size: var(--fs-1);
  opacity: 0.7;
}

.page-news .records-grid:has(#cat-arcade:checked) .record:not(.record--arcade),
.page-news .records-grid:has(#cat-puzzle:checked) .record:not(.record--puzzle),
.page-news .records-grid:has(#cat-versus:checked) .record:not(.record--versus),
.page-news .records-grid:has(#cat-family:checked) .record:not(.record--family),
.page-news .records-grid:has(#cat-classic:checked) .record:not(.record--classic) {
  display: none;
}

.page-news .archive-panel {
  background: var(--navy-750);
  border: 1px solid var(--news-line);
  border-radius: var(--r-lg);
  padding: 16px;
}

.page-news .archive-panel__title {
  margin: 0;
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  color: var(--stone);
}

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

.page-news .archive-panel__list li {
  display: grid;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--news-line);
}

.page-news .archive-panel__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-news .archive-panel__no {
  font-size: var(--fs-3);
  letter-spacing: 0.08em;
  color: var(--gold-soft);
}

.page-news .archive-panel__meta {
  font-size: var(--fs-1);
  color: var(--stone);
}

.page-news .archive-panel__link {
  justify-self: start;
  font-size: var(--fs-2);
  color: var(--rice);
  text-decoration: none;
  border-bottom: 1px solid rgba(231, 200, 122, 0.55);
}

.page-news .archive-panel__link:hover {
  color: var(--gold-soft);
}

.page-news .archive-panel__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .archive-panel__note {
  margin: 14px 0 0;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--stone);
}

.page-news .dl-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(89, 160, 139, 0.42);
  background: linear-gradient(140deg, rgba(89, 160, 139, 0.20), rgba(22, 40, 63, 0.92));
  text-decoration: none;
  color: var(--rice);
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}

.page-news .dl-card:hover {
  transform: translateY(-2px);
  border-color: var(--celadon);
}

.page-news .dl-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .dl-card__k {
  font-size: var(--fs-1);
  letter-spacing: 0.1em;
  color: var(--celadon);
}

.page-news .dl-card__t {
  font-size: var(--fs-2);
  line-height: 1.65;
}

.page-news .dl-card__v {
  font-size: var(--fs-2);
  color: var(--gold-soft);
}

/* ---------- 上月归档 ---------- */
.page-news .archive {
  padding-block: clamp(34px, 6vw, 72px);
}

.page-news .archive__panel {
  background: var(--rice);
  color: var(--ink);
  border-radius: var(--r-xl);
  padding: clamp(22px, 4vw, 46px);
}

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

.page-news .archive__grid {
  display: grid;
  gap: 26px;
}

.page-news .archive__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.35rem);
  line-height: 1.2;
  color: var(--ink);
}

.page-news .archive__text {
  margin: 0;
  max-width: 32em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(12, 23, 38, 0.78);
}

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

.page-news .archive-card {
  background: rgba(12, 23, 38, 0.05);
  border: 1px solid rgba(12, 23, 38, 0.12);
  border-radius: var(--r-md);
  padding: 16px 18px;
  transition: transform 180ms ease-out, background 180ms ease-out;
}

.page-news .archive-card:hover {
  transform: translateY(-2px);
  background: rgba(196, 121, 79, 0.14);
}

.page-news .archive-card__no {
  display: inline-block;
  font-size: var(--fs-3);
  letter-spacing: 0.1em;
  color: var(--clay);
}

.page-news .archive-card__title {
  margin: 6px 0 4px;
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--ink);
}

.page-news .archive-card__text {
  margin: 0 0 10px;
  font-size: var(--fs-2);
  line-height: 1.75;
  color: rgba(12, 23, 38, 0.72);
}

.page-news .archive-card__link {
  font-size: var(--fs-2);
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(12, 23, 38, 0.4);
}

.page-news .archive-card__link:hover {
  color: var(--cinnabar);
  border-bottom-color: var(--cinnabar);
}

.page-news .archive-card__link:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .archive__panel .media__img {
  background: rgba(12, 23, 38, 0.08);
}

.page-news .archive__panel .media__cap {
  color: rgba(12, 23, 38, 0.62);
}

/* ---------- 专题 ---------- */
.page-news .topics {
  padding-block: clamp(34px, 6vw, 72px);
}

.page-news .topics__grid {
  display: grid;
  gap: 24px;
}

.page-news .topics__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.22;
  color: var(--rice);
}

.page-news .topics__text {
  margin: 0;
  max-width: 32em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(243, 237, 225, 0.8);
}

.page-news .topics__pills {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.page-news .topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--navy-700);
  border: 1px solid var(--news-line-strong);
  color: var(--rice);
  font-size: var(--fs-2);
  text-decoration: none;
  transition: background 120ms ease-out, border-color 120ms ease-out;
}

.page-news .topic-pill:hover {
  background: rgba(216, 169, 59, 0.14);
  border-color: var(--gold);
}

.page-news .topic-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.page-news .topic-pill__n {
  font-size: var(--fs-1);
  letter-spacing: 0.06em;
  color: var(--gold-soft);
}

/* ---------- 发批节奏 ---------- */
.page-news .cadence {
  padding-block: clamp(34px, 6vw, 72px);
}

.page-news .cadence__grid {
  display: grid;
  gap: 24px;
}

.page-news .cadence__title {
  margin: 10px 0 14px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  line-height: 1.22;
  color: var(--rice);
}

.page-news .cadence__text {
  margin: 0 0 14px;
  max-width: 32em;
  font-size: var(--fs-3);
  line-height: 1.8;
  color: rgba(243, 237, 225, 0.8);
}

.page-news .cadence__status {
  margin: 4px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

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

.page-news .cadence__step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "num title"
    "num text";
  gap: 4px 14px;
  align-items: start;
  padding: 14px 16px;
  background: var(--navy-700);
  border-radius: var(--r-md);
  border-left: 3px solid var(--celadon);
}

.page-news .cadence__num {
  grid-area: num;
  font-size: var(--fs-3);
  letter-spacing: 0.1em;
  color: var(--celadon);
}

.page-news .cadence__step-title {
  grid-area: title;
  margin: 0;
  font-size: var(--fs-3);
  font-weight: 700;
  color: var(--rice);
}

.page-news .cadence__step-text {
  grid-area: text;
  margin: 0;
  font-size: var(--fs-2);
  line-height: 1.72;
  color: var(--stone);
}

/* ---------- 底部信息带 ---------- */
.page-news .news-band {
  margin-top: 8px;
  padding-block: 28px 34px;
  background: var(--ink-deep);
  border-top: 2px solid rgba(216, 169, 59, 0.55);
}

.page-news .news-band__inner {
  display: grid;
  gap: 16px;
}

.page-news .news-band__item {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.page-news .news-band__k {
  font-size: var(--fs-1);
  letter-spacing: 0.14em;
  color: var(--gold);
}

.page-news .news-band__v {
  font-size: var(--fs-2);
  line-height: 1.6;
  color: var(--rice);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.page-news .news-band__v:hover {
  color: var(--gold-soft);
}

.page-news .news-band__v:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- 断点 ---------- */
@media (min-width: 560px) {
  .page-news .news-band__inner {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 900px) {
  .page-news .overview__grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px;
  }

  .page-news .archive__grid,
  .page-news .topics__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: 32px;
  }

  .page-news .cadence__grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 32px;
    align-items: start;
  }

  .page-news .records__note {
    font-size: var(--fs-3);
  }
}

@media (min-width: 1000px) {
  .page-news .records-grid {
    grid-template-columns: 132px minmax(0, 1fr) 268px;
    gap: 24px;
    align-items: start;
  }

  .page-news .records-side {
    order: 0;
  }

  .page-news .records-rail {
    position: sticky;
    top: 24px;
  }

  .page-news .records-rail__list {
    display: block;
    padding: 0 0 0 20px;
    border-bottom: 0;
    border-left: 1px solid var(--news-line-strong);
    overflow: visible;
  }

  .page-news .records-rail__item {
    position: relative;
    padding-block: 14px;
  }

  .page-news .records-rail__item::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 50%;
    width: 12px;
    height: 1px;
    background: var(--news-line-strong);
    transform: translateY(-50%);
  }

  .page-news .records-rail__item.is-current::before {
    width: 18px;
    height: 2px;
    background: var(--gold-soft);
  }
}