.page-news {
  --chip-version: #C9A24A;
  --chip-rules: #17A99B;
  --chip-catalog: #D6336C;
  --chip-guest: #8A6FC4;
  --line-soft: rgba(201, 162, 74, .28);
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(42, 23, 56, .95), transparent 70%),
    var(--ink-purple);
  color: var(--paper-white);
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.page-news * {
  box-sizing: border-box;
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, rgba(42, 23, 56, .96) 0%, rgba(42, 23, 56, .72) 46%, rgba(20, 15, 28, 0) 46.2%),
    linear-gradient(200deg, rgba(201, 162, 74, .12), transparent 62%);
  border-top: 1px solid rgba(201, 162, 74, .18);
  border-bottom: 1px solid rgba(201, 162, 74, .18);
}

.page-news .news-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.page-news .news-hero__lead {
  min-width: 0;
}

.page-news .news-hero__eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--neon-cyan);
}

.page-news .news-hero__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.05rem, 5.4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--paper-white);
}

.page-news .news-hero__title em {
  font-style: normal;
  color: var(--gold-soft);
  text-shadow: 0 0 22px rgba(201, 162, 74, .35);
}

.page-news .news-hero__lede {
  margin: 0 0 1.6rem;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.8;
  color: rgba(251, 245, 234, .78);
}

.page-news .news-hero__stats {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem 2.25rem;
}

.page-news .news-hero__stats li {
  display: grid;
  gap: .18rem;
  padding-left: .9rem;
  border-left: 2px solid rgba(201, 162, 74, .5);
}

.page-news .stat-num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-soft);
}

.page-news .stat-text {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--mist-violet);
}

.page-news .news-hero__index {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-cut);
  background: linear-gradient(160deg, rgba(29, 22, 32, .92), rgba(20, 15, 28, .68));
  box-shadow: var(--shadow-card);
}

.page-news .news-hero__index-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--gold-soft);
}

.page-news .topic-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.page-news .topic-index__item {
  padding-left: .85rem;
  border-left: 2px solid var(--accent, var(--gold));
}

.page-news .topic-index__item p {
  margin: .35rem 0 0;
  font-size: .84rem;
  line-height: 1.65;
  color: rgba(251, 245, 234, .68);
}

.page-news .topic-index__item--version { --accent: var(--gold); }
.page-news .topic-index__item--rules { --accent: var(--neon-cyan); }
.page-news .topic-index__item--catalog { --accent: var(--rose); }
.page-news .topic-index__item--guest { --accent: #B99BE0; }

.page-news .topic-chip {
  display: inline-block;
  padding: 0 .45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--accent, var(--gold-soft));
}

/* ---------- 头条 ---------- */
.page-news .news-headline {
  padding-top: clamp(2rem, 5vw, 3rem);
}

.page-news .headline-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 2px 26px 2px 26px;
  background: linear-gradient(150deg, var(--temple-purple), var(--ink-dark));
  box-shadow: var(--shadow-card);
}

.page-news .headline-card__media {
  min-height: 220px;
  background: var(--temple-purple);
}

.page-news .headline-card__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.86);
}

.page-news .headline-card__body {
  min-width: 0;
  padding: clamp(1.25rem, 3.2vw, 2.25rem);
}

.page-news .headline-card__kicker {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--neon-cyan);
}

.page-news .headline-card__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  line-height: 1.3;
  color: var(--paper-white);
}

.page-news .change-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .95rem;
}

.page-news .change-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  padding-bottom: .85rem;
  border-bottom: 1px dashed rgba(201, 162, 74, .22);
}

.page-news .change-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-news .change-list__num {
  padding-top: .15rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--gold);
}

.page-news .change-list__title {
  margin: 0 0 .25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--paper-white);
}

.page-news .change-list__item p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: rgba(251, 245, 234, .68);
}

/* ---------- 纪事长廊 ---------- */
.page-news .chronicle {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.page-news .chronicle__head {
  max-width: 64ch;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.page-news .chronicle__eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--gold);
}

.page-news .chronicle__title {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.25;
  color: var(--paper-white);
}

.page-news .chronicle__note {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(251, 245, 234, .66);
}

.page-news .chronicle__board {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

.page-news .chronicle__main {
  min-width: 0;
}

.page-news .rail__caption {
  margin: 0 0 .9rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .28em;
  color: var(--mist-violet);
}

.page-news .rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.15rem;
  display: grid;
  gap: 1.35rem;
  border-left: 1px solid rgba(79, 224, 208, .28);
}

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

.page-news .rail__link {
  position: relative;
  display: grid;
  gap: .12rem;
  text-decoration: none;
  color: rgba(251, 245, 234, .82);
  transition: color .2s var(--ease);
}

.page-news .rail__link::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: .35rem;
  width: 9px;
  height: 9px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--ink-purple);
  box-shadow: 0 0 0 0 rgba(79, 224, 208, 0);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}

.page-news .rail__link:hover,
.page-news .rail__link:focus-visible {
  color: var(--gold-soft);
}

.page-news .rail__link:hover::before,
.page-news .rail__link:focus-visible::before {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 4px rgba(79, 224, 208, .18);
}

.page-news .rail__link:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 4px;
}

.page-news .rail__stage {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--mist-violet);
}

.page-news .rail__label {
  font-size: .88rem;
  line-height: 1.45;
}

/* 专题筛选 */
.page-news .topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .85rem;
}

.page-news .topic-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .42rem .9rem;
  border: 1px solid rgba(201, 162, 74, .42);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: rgba(251, 245, 234, .82);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

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

.page-news .topic-pill__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.page-news .topic-pill__text {
  display: inline-block;
}

.page-news .topic-pill:has(.topic-pill__input:checked) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-dark);
}

.page-news .topic-pill:focus-within {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

.page-news .chronicle__hint {
  margin: 0 0 1.75rem;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--mist-violet);
}

/* 筛选生效：藏起不属于当前专题的条目与空阶段 */
.page-news .chronicle__board:has(.topic-pill__input[value="version"]:checked) :is(.entry:not(.entry--version), .group:not(:has(.entry--version))),
.page-news .chronicle__board:has(.topic-pill__input[value="rules"]:checked) :is(.entry:not(.entry--rules), .group:not(:has(.entry--rules))),
.page-news .chronicle__board:has(.topic-pill__input[value="catalog"]:checked) :is(.entry:not(.entry--catalog), .group:not(:has(.entry--catalog))),
.page-news .chronicle__board:has(.topic-pill__input[value="guest"]:checked) :is(.entry:not(.entry--guest), .group:not(:has(.entry--guest))) {
  display: none;
}

/* 阶段分组 */
.page-news .group {
  padding-top: 1.25rem;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-news .group + .group {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px dashed rgba(138, 118, 153, .38);
}

.page-news .group__marker {
  margin: 0 0 .45rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .26em;
  color: var(--gold);
}

.page-news .group__title {
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.3;
  color: var(--paper-white);
}

.page-news .group__note {
  margin: 0 0 1.35rem;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(251, 245, 234, .64);
}

.page-news .group__figure {
  max-width: 620px;
  margin: 0 0 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 74, .26);
  border-radius: 2px 20px 2px 20px;
  background: var(--temple-purple);
}

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

/* 纪事卡 */
.page-news .entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .95rem;
}

.page-news .entry {
  --entry-accent: var(--gold);
  position: relative;
  padding: 1.1rem 1.15rem 1.1rem 1.35rem;
  border-left: 4px solid var(--entry-accent);
  border-radius: 2px 14px 2px 14px;
  background: var(--paper-warm);
  color: var(--ink-dark);
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.page-news .entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95);
}

.page-news .entry--version { --entry-accent: var(--chip-version); }
.page-news .entry--rules { --entry-accent: var(--chip-rules); }
.page-news .entry--catalog { --entry-accent: var(--chip-catalog); }
.page-news .entry--guest { --entry-accent: var(--chip-guest); }

.page-news .entry .topic-chip {
  background: var(--entry-accent);
  border-color: transparent;
  color: var(--ink-dark);
  font-weight: 700;
  letter-spacing: .1em;
}

.page-news .entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: .55rem;
}

.page-news .entry__when {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: rgba(29, 22, 32, .55);
}

.page-news .entry__title {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.45;
  color: var(--ink-dark);
}

.page-news .entry__lead {
  margin: 0;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(29, 22, 32, .78);
}

.page-news .entry__details {
  margin-top: .7rem;
}

.page-news .entry__details summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-bottom: 1px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: #5B4390;
  border-bottom: 1px dashed rgba(91, 67, 144, .5);
}

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

.page-news .entry__details summary::after {
  content: "＋";
  font-size: .8rem;
  transition: transform .2s var(--ease);
}

.page-news .entry__details[open] summary::after {
  transform: rotate(45deg);
}

.page-news .entry__details p {
  margin: .65rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid rgba(91, 67, 144, .35);
  font-size: .85rem;
  line-height: 1.8;
  color: rgba(29, 22, 32, .74);
}

.page-news .entry__link {
  display: inline-block;
  margin-top: .8rem;
  padding-bottom: 1px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 22, 32, .35);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-news .entry__link::after {
  content: " →";
}

.page-news .entry__link:hover {
  color: #A8123F;
  border-color: #A8123F;
}

.page-news .entry a:focus-visible,
.page-news .entry summary:focus-visible {
  outline: 2px solid #0F6F66;
  outline-offset: 3px;
}

/* ---------- 收尾 ---------- */
.page-news .news-outro {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.page-news .news-outro__panel {
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid var(--line-soft);
  border-radius: 2px 26px 2px 26px;
  background:
    linear-gradient(125deg, rgba(42, 23, 56, .95), rgba(20, 15, 28, .92)),
    var(--temple-purple);
  box-shadow: var(--shadow-card);
}

.page-news .news-outro__eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--neon-cyan);
}

.page-news .news-outro__title {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.3;
  color: var(--paper-white);
}

.page-news .news-outro__text {
  margin: 0 0 1.5rem;
  max-width: 58ch;
  font-size: .92rem;
  line-height: 1.8;
  color: rgba(251, 245, 234, .7);
}

.page-news .news-outro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 880px) {
  .page-news .headline-card {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  }
}

@media (min-width: 940px) {
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (min-width: 1000px) {
  .page-news .chronicle__board {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .rail {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

@media (max-width: 560px) {
  .page-news .news-hero__stats {
    gap: 1rem 1.5rem;
  }

  .page-news .entry {
    padding: 1rem 1rem 1rem 1.15rem;
  }

  .page-news .headline-card__media {
    min-height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .entry,
  .page-news .rail__link,
  .page-news .rail__link::before,
  .page-news .topic-pill,
  .page-news .entry__link,
  .page-news .entry__details summary::after {
    transition: none;
  }

  .page-news .entry:hover {
    transform: none;
  }
}

<main id="main-content" class="page-news">
  <div class="wrap">
    <nav class="breadcrumb" aria-label="面包屑">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li class="breadcrumb__item" aria-current="page"><span class="breadcrumb__current">神殿纪事</span></li>
      </ol>
    </nav>
  </div>

  <section class="news-hero" aria-labelledby="news-hero-title">
    <div class="wrap news-hero__grid">
      <div class="news-hero__lead">
        <p class="news-hero__eyebrow">版本 · 活动 · 目录 · 入口</p>
        <h1 class="news-hero__title" id="news-hero-title">版本怎么走，<br><em>神殿里都记着</em></h1>
        <p class="news-hero__lede">娱乐神殿从 2019 年一路走到 v3.2。活动规则怎么调、目录怎么长、常用页面怎么变得顺手，都按阶段留在下面这条长廊里。关心更新节奏的访客，往下读就能跟上。</p>
        <ul class="news-hero__stats">
          <li><span class="stat-num">96</span><span class="stat-text">次版本更新</span></li>
          <li><span class="stat-num">7</span><span class="stat-text">个主版本阶段</span></li>
          <li><span class="stat-num">3–5</span><span class="stat-text">每月更新次数</span></li>
        </ul>
        <a class="btn btn--gold" href="#entries">翻最近的纪事</a>
      </div>

      <aside class="news-hero__index" aria-labelledby="topic-index-title">
        <h2 class="news-hero__index-title" id="topic-index-title">按专题找线索</h2>
        <ul class="topic-index">
          <li class="topic-index__item topic-index__item--version">
            <span class="topic-chip">版本迭代</span>
            <p>主版本改了哪些地方、什么时候落地、沉淀下多少档案。</p>
          </li>
          <li class="topic-index__item topic-index__item--rules">
            <span class="topic-chip">规则观察</span>
            <p>活动规则怎么调、条目按什么归拢、哪些说法最近动过。</p>
          </li>
          <li class="topic-index__item topic-index__item--catalog">
            <span class="topic-chip">目录上新</span>
            <p>新收进来的栏目、索引号的变化、存档补齐的节奏。</p>
          </li>
          <li class="topic-index__item topic-index__item--guest">
            <span class="topic-chip">访客体验</span>
            <p>登录、收藏、自查这三条路上的小改动，往往最省事。</p>
          </li>
        </ul>
      </aside>
    </div>
  </section>

  <section class="wrap news-headline" aria-labelledby="headline-title">
    <article class="headline-card">
      <div class="headline-card__media">
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="夜间档案馆里发光的时间轴与展开的卷轴，暖金与霓虹青光线交织" decoding="async">
      </div>
      <div class="headline-card__body">
        <p class="headline-card__kicker">本期头条 · 当前版本 v3.2</p>
        <h2 class="headline-card__title" id="headline-title">v3.2 落地后，四件事明显变顺手</h2>
        <ol class="change-list">
          <li class="change-list__item">
            <span class="change-list__num">01</span>
            <div>
              <h3 class="change-list__title">目录索引重排</h3>
              <p>18 个栏目各自挂上入口号，同一主题下的资料归到一处，不用再层层点开。</p>
            </div>
          </li>
          <li class="change-list__item">
            <span class="change-list__num">02</span>
            <div>
              <h3 class="change-list__title">收藏路径缩短</h3>
              <p>常用页面收藏之后再进来，基本一步就到，闲下来随手点开的那一下更省力。</p>
            </div>
          </li>
          <li class="change-list__item">
            <span class="change-list__num">03</span>
            <div>
              <h3 class="change-list__title">使用记录可自查</h3>
              <p>看过什么、收藏过哪些页，按时间和栏目自己拉出来回看，不必凭记忆翻找。</p>
            </div>
          </li>
          <li class="change-list__item">
            <span class="change-list__num">04</span>
            <div>
              <h3 class="change-list__title">账号入口前移</h3>
              <p>换手机之后要重新登录，这条路径挪到了账号页第一屏，打开就看见。</p>
            </div>
          </li>
        </ol>
        <a class="btn btn--ghost btn--small" href="/catalog/">翻对应的目录</a>
      </div>
    </article>
  </section>

  <section class="wrap chronicle" id="entries" aria-labelledby="chronicle-title">
    <header class="chronicle__head">
      <p class="chronicle__eyebrow">纪事长廊</p>
      <h2 class="chronicle__title" id="chronicle-title">顺着时间往里走，看得见每一步</h2>
      <p class="chronicle__note">左边列出最近的几个版本阶段，右边是那段时间里记下的事。点一下阶段名就跳过去，读到哪里停都行；每条记录后头都挂着对应的目录，读完能直接翻过去查。</p>
    </header>

    <div class="chronicle__board">
      <nav class="rail" aria-label="版本阶段">
        <p class="rail__caption">阶段</p>
        <ol class="rail__list">
          <li class="rail__item">
            <a class="rail__link" href="#stage-01">
              <span class="rail__stage">01 · 最近</span>
              <span class="rail__label">v3.2 上线之后</span>
            </a>
          </li>
          <li class="rail__item">
            <a class="rail__link" href="#stage-02">
              <span class="rail__stage">02</span>
              <span class="rail__label">本季度早些时候</span>
            </a>
          </li>
          <li class="rail__item">
            <a class="rail__link" href="#stage-03">
              <span class="rail__stage">03</span>
              <span class="rail__label">上一个主版本阶段</span>
            </a>
          </li>
          <li class="rail__item">
            <a class="rail__link" href="#stage-04">
              <span class="rail__stage">04</span>
              <span class="rail__label">档案馆起头的时候</span>
            </a>
          </li>
        </ol>
      </nav>

      <div class="chronicle__main">
        <div class="topic-filter" role="group" aria-label="按专题筛选纪事">
          <label class="topic-pill">
            <input class="topic-pill__input" type="radio" name="chronicle-topic" value="all" checked>
            <span class="topic-pill__text">全部 12 条</span>
          </label>
          <label class="topic-pill">
            <input class="topic-pill__input" type="radio" name="chronicle-topic" value="version">
            <span class="topic-pill__text">版本迭代</span>
          </label>
          <label class="topic-pill">
            <input class="topic-pill__input" type="radio" name="chronicle-topic" value="rules">
            <span class="topic-pill__text">规则观察</span>
          </label>
          <label class="topic-pill">
            <input class="topic-pill__input" type="radio" name="chronicle-topic" value="catalog">
            <span class="topic-pill__text">目录上新</span>
          </label>
          <label class="topic-pill">
            <input class="topic-pill__input" type="radio" name="chronicle-topic" value="guest">
            <span class="topic-pill__text">访客体验</span>
          </label>
        </div>
        <p class="chronicle__hint">选一个专题，下面的纪事会跟着收窄；点回“全部”就能看到完整的长廊。</p>

        <section class="group" id="stage-01" aria-labelledby="stage-01-title">
          <header class="group__head">
            <p class="group__marker">阶段 01 · 最近</p>
            <h3 class="group__title" id="stage-01-title">v3.2 上线之后</h3>
            <p class="group__note">目录、账号入口、使用记录这三处先动的手。</p>
          </header>
          <figure class="group__figure">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="发光的档案架前，新档案盒被推入格位，青色标签微微亮起" loading="lazy" decoding="async">
          </figure>
          <ol class="entry-list">
            <li class="entry entry--catalog">
              <div class="entry__meta">
                <span class="topic-chip">目录上新</span>
                <span class="entry__when">v3.2 发布后</span>
              </div>
              <h4 class="entry__title">目录结构完成第三次较大重构</h4>
              <p class="entry__lead">18 个栏目重新排了入口号，同一主题下的资料不再散在好几处。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>重构没有推倒旧的分类，而是把版本资料、活动记录和规则存档之间的交叉引用理顺。以前要点两次才到的地方，现在多半一次就够。</p>
              </details>
              <a class="entry__link" href="/catalog/">去内容目录看这一栏</a>
            </li>
            <li class="entry entry--version">
              <div class="entry__meta">
                <span class="topic-chip">版本迭代</span>
                <span class="entry__when">v3.2 发布后</span>
              </div>
              <h4 class="entry__title">栏目页的版本号与目录编号对上了</h4>
              <p class="entry__lead">同一份资料，在版本日志和内容目录里用的是同一个编号。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>跟同好对版本、写活动观察或者回查一条旧规则时，提一个编号就能说清是哪一条。当前版本为 v3.2，栏目页上可以直接看到。</p>
              </details>
              <a class="entry__link" href="/catalog/">查版本资料所在的栏目</a>
            </li>
            <li class="entry entry--guest">
              <div class="entry__meta">
                <span class="topic-chip">访客体验</span>
                <span class="entry__when">v3.2 发布后</span>
              </div>
              <h4 class="entry__title">账号页首屏把三个入口并排摆出来</h4>
              <p class="entry__lead">重新登录、收藏入口、使用记录自查，打开账号页第一屏就看见。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>换手机之后最容易卡在找不到登录口这一步。这次把这条路径前移，顺手把收藏和自查挪到同一排，常用的三件事不必再分头找。</p>
              </details>
              <a class="entry__link" href="/questions/">看账号入口的操作说明</a>
            </li>
          </ol>
        </section>

        <section class="group" id="stage-02" aria-labelledby="stage-02-title">
          <header class="group__head">
            <p class="group__marker">阶段 02 · 本季度早些时候</p>
            <h3 class="group__title" id="stage-02-title">小屏优先的那一轮调整</h3>
            <p class="group__note">手机上的操作先被照顾到，规则索引也跟着变清楚了。</p>
          </header>
          <figure class="group__figure">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="放大镜照在摊开的规则卷轴某一条目上，周围散落档案标签，抽象风格" loading="lazy" decoding="async">
          </figure>
          <ol class="entry-list">
            <li class="entry entry--guest">
              <div class="entry__meta">
                <span class="topic-chip">访客体验</span>
                <span class="entry__when">本季度早些时候</span>
              </div>
              <h4 class="entry__title">常用入口按小屏阅读重新排布</h4>
              <p class="entry__lead">手机访问占了大头，几个常用入口的位置和可点范围都放大了一轮。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>移动端访问大约占六成四，拇指够得到的位置优先留给登录、收藏和目录。桌面端的排布基本保持原样，两边互不影响。</p>
              </details>
              <a class="entry__link" href="/">回首页看现在的入口布局</a>
            </li>
            <li class="entry entry--rules">
              <div class="entry__meta">
                <span class="topic-chip">规则观察</span>
                <span class="entry__when">本季度早些时候</span>
              </div>
              <h4 class="entry__title">规则存档按三路索引排开</h4>
              <p class="entry__lead">同一份存档，可以按版本号、活动主题、适用场景三条路径找到。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>1,280 份存档里，按场景找的人最多——想知道某个玩法在什么条件下生效，比记住版本号容易得多。主题路径则更适合从感兴趣的活动倒推规则。</p>
              </details>
              <a class="entry__link" href="/catalog/">按这三条路翻存档</a>
            </li>
            <li class="entry entry--rules">
              <div class="entry__meta">
                <span class="topic-chip">规则观察</span>
                <span class="entry__when">本季度早些时候</span>
              </div>
              <h4 class="entry__title">上个月的活动记录挪到规则区前排</h4>
              <p class="entry__lead">第一次进站的人，先看最近一个月发生过什么，比从头翻更好懂。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>活动规则区把上个月的记录放在靠前的位置，新访客不用先弄懂整套分类才能开始读。想再往前追溯，再顺着版本号往下走。</p>
              </details>
              <a class="entry__link" href="/questions/">新访客怎么开始读</a>
            </li>
          </ol>
        </section>

        <section class="group" id="stage-03" aria-labelledby="stage-03-title">
          <header class="group__head">
            <p class="group__marker">阶段 03 · 上一个主版本阶段</p>
            <h3 class="group__title" id="stage-03-title">分类定下来，归档也跟着稳了</h3>
            <p class="group__note">活动主题收敛成五类，更新的节奏也跑顺了。</p>
          </header>
          <figure class="group__figure">
            <img src="{zhanqunpic:h:650w:1000}" width="1000" height="650" alt="多个版本节点像阶梯一样向上排布，暗金刻度在紫色背景上层层升高" loading="lazy" decoding="async">
          </figure>
          <ol class="entry-list">
            <li class="entry entry--rules">
              <div class="entry__meta">
                <span class="topic-chip">规则观察</span>
                <span class="entry__when">上一个主版本阶段</span>
              </div>
              <h4 class="entry__title">36 个活动主题归入五个分类</h4>
              <p class="entry__lead">竞技、收集、社交、节日、新手，每个主题都能找到自己的位置。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>分类定下来之后，内容目录里的索引条目从零散的点变成成组的块，找同类活动不用再拿关键词一个个试。420 余条内容索引就是按这套骨架排的。</p>
              </details>
              <a class="entry__link" href="/catalog/">看五个分类下的索引</a>
            </li>
            <li class="entry entry--guest">
              <div class="entry__meta">
                <span class="topic-chip">访客体验</span>
                <span class="entry__when">上一个主版本阶段</span>
              </div>
              <h4 class="entry__title">使用记录支持按时间和栏目回看</h4>
              <p class="entry__lead">看过什么、收藏过哪些页，都能自己拉出来整理一遍。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>记录默认按时间排，也能切到按栏目看。想回顾某一段时间的关注点，或者确认自己有没有漏掉某个栏目，都能直接翻到。</p>
              </details>
              <a class="entry__link" href="/questions/">自查记录怎么调出来</a>
            </li>
            <li class="entry entry--version">
              <div class="entry__meta">
                <span class="topic-chip">版本迭代</span>
                <span class="entry__when">上一个主版本阶段</span>
              </div>
              <h4 class="entry__title">版本更新节奏稳定在每月三到五次</h4>
              <p class="entry__lead">累计 96 次更新，多数是小步调整，但一直没停。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>每个主版本阶段沉淀下来的规则资料大约 140 份。步子迈得不大，好处是每次变化都能讲清楚，跟起来不吃力。</p>
              </details>
              <a class="entry__link" href="/story/">神殿这些年是怎么走的</a>
            </li>
          </ol>
        </section>

        <section class="group" id="stage-04" aria-labelledby="stage-04-title">
          <header class="group__head">
            <p class="group__marker">阶段 04 · 档案馆起头的时候</p>
            <h3 class="group__title" id="stage-04-title">从第一份存档开始</h3>
            <p class="group__note">最早的分类、编号和归档习惯，都是那个时候定下来的。</p>
          </header>
          <ol class="entry-list">
            <li class="entry entry--version">
              <div class="entry__meta">
                <span class="topic-chip">版本迭代</span>
                <span class="entry__when">档案馆起头的时候</span>
              </div>
              <h4 class="entry__title">从 2019 年走到今天，七个主版本阶段</h4>
              <p class="entry__lead">每一段都留下一层档案，后来的人还能翻到当年是怎么定的。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>七个阶段里，目录结构一共改过三次，最近的一次跟着 v3.2 一起上线。每次改动都留下了旧版的痕迹，方便对照。</p>
              </details>
              <a class="entry__link" href="/story/">读神殿的由来与坚持</a>
            </li>
            <li class="entry entry--catalog">
              <div class="entry__meta">
                <span class="topic-chip">目录上新</span>
                <span class="entry__when">档案馆起头的时候</span>
              </div>
              <h4 class="entry__title">内容目录收进 18 个栏目与 420 余条索引</h4>
              <p class="entry__lead">从活动分类到版本资料，常用的入口都挂在目录上。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>目录不是一次排完就放着不管的，条目会随着版本推进继续往里补，栏目也随着内容增加而调整。</p>
              </details>
              <a class="entry__link" href="/catalog/">打开内容目录</a>
            </li>
            <li class="entry entry--catalog">
              <div class="entry__meta">
                <span class="topic-chip">目录上新</span>
                <span class="entry__when">档案馆起头的时候</span>
              </div>
              <h4 class="entry__title">存档按月补，索引按季整</h4>
              <p class="entry__lead">这套节奏从档案馆开张那天起就没断过。</p>
              <details class="entry__details">
                <summary>看这条的来龙去脉</summary>
                <p>规则资料先归档、再进索引，最后才对外更新说明。顺序固定下来之后，查的人省事，写的人也省事。</p>
              </details>
              <a class="entry__link" href="/catalog/">看最近补进来的条目</a>
            </li>
          </ol>
        </section>
      </div>
    </div>
  </section>

  <section class="wrap news-outro" aria-labelledby="outro-title">
    <div class="news-outro__panel">
      <p class="news-outro__eyebrow">读完再往里走</p>
      <h2 class="news-outro__title" id="outro-title">把目录存下来，下次翻得更快</h2>
      <p class="news-outro__text">长廊里的每条记录末尾都挂着对应的目录，想直接查某个分类，从目录进去更省事；换手机之后找不到入口，问答里有一条现成的路径；想先弄清这座神殿是怎么来的，故事页从 2019 年讲起。</p>
      <div class="news-outro__actions">
        <a class="btn btn--gold" href="/catalog/">打开内容目录</a>
        <a class="btn btn--ghost" href="/questions/">看登录与自查说明</a>
        <a class="btn btn--ghost btn--small" href="/story/">读神殿故事</a>
      </div>
    </div>
  </section>
</main>

.page-news {
  --chip-version: #C9A24A;
  --chip-rules: #17A99B;
  --chip-catalog: #D6336C;
  --chip-guest: #8A6FC4;
  --line-soft: rgba(201, 162, 74, .28);
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(42, 23, 56, .95), transparent 70%),
    var(--ink-purple);
  color: var(--paper-white);
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}

.page-news * {
  box-sizing: border-box;
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(112deg, rgba(42, 23, 56, .96) 0%, rgba(42, 23, 56, .72) 46%, rgba(20, 15, 28, 0) 46.2%),
    linear-gradient(200deg, rgba(201, 162, 74, .12), transparent 62%);
  border-top: 1px solid rgba(201, 162, 74, .18);
  border-bottom: 1px solid rgba(201, 162, 74, .18);
}

.page-news .news-hero__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

.page-news .news-hero__lead {
  min-width: 0;
}

.page-news .news-hero__eyebrow {
  margin: 0 0 .9rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--neon-cyan);
}

.page-news .news-hero__title {
  margin: 0 0 1.1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.05rem, 5.4vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--paper-white);
}

.page-news .news-hero__title em {
  font-style: normal;
  color: var(--gold-soft);
  text-shadow: 0 0 22px rgba(201, 162, 74, .35);
}

.page-news .news-hero__lede {
  margin: 0 0 1.6rem;
  max-width: 46ch;
  font-size: 1.02rem;
  line-height: 1.8;
  color: rgba(251, 245, 234, .78);
}

.page-news .news-hero__stats {
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem 2.25rem;
}

.page-news .news-hero__stats li {
  display: grid;
  gap: .18rem;
  padding-left: .9rem;
  border-left: 2px solid rgba(201, 162, 74, .5);
}

.page-news .stat-num {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold-soft);
}

.page-news .stat-text {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--mist-violet);
}

.page-news .news-hero__index {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-cut);
  background: linear-gradient(160deg, rgba(29, 22, 32, .92), rgba(20, 15, 28, .68));
  box-shadow: var(--shadow-card);
}

.page-news .news-hero__index-title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--gold-soft);
}

.page-news .topic-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .85rem;
}

.page-news .topic-index__item {
  padding-left: .85rem;
  border-left: 2px solid var(--accent, var(--gold));
}

.page-news .topic-index__item p {
  margin: .35rem 0 0;
  font-size: .84rem;
  line-height: 1.65;
  color: rgba(251, 245, 234, .68);
}

.page-news .topic-index__item--version { --accent: var(--gold); }
.page-news .topic-index__item--rules { --accent: var(--neon-cyan); }
.page-news .topic-index__item--catalog { --accent: var(--rose); }
.page-news .topic-index__item--guest { --accent: #B99BE0; }

.page-news .topic-chip {
  display: inline-block;
  padding: 0 .45rem;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  line-height: 1.7;
  white-space: nowrap;
  color: var(--accent, var(--gold-soft));
}

/* ---------- 头条 ---------- */
.page-news .news-headline {
  padding-top: clamp(2rem, 5vw, 3rem);
}

.page-news .headline-card {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 2px 26px 2px 26px;
  background: linear-gradient(150deg, var(--temple-purple), var(--ink-dark));
  box-shadow: var(--shadow-card);
}

.page-news .headline-card__media {
  min-height: 220px;
  background: var(--temple-purple);
}

.page-news .headline-card__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.92) brightness(.86);
}

.page-news .headline-card__body {
  min-width: 0;
  padding: clamp(1.25rem, 3.2vw, 2.25rem);
}

.page-news .headline-card__kicker {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--neon-cyan);
}

.page-news .headline-card__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.95rem);
  line-height: 1.3;
  color: var(--paper-white);
}

.page-news .change-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: .95rem;
}

.page-news .change-list__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  padding-bottom: .85rem;
  border-bottom: 1px dashed rgba(201, 162, 74, .22);
}

.page-news .change-list__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-news .change-list__num {
  padding-top: .15rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--gold);
}

.page-news .change-list__title {
  margin: 0 0 .25rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .02em;
  color: var(--paper-white);
}

.page-news .change-list__item p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.7;
  color: rgba(251, 245, 234, .68);
}

/* ---------- 纪事长廊 ---------- */
.page-news .chronicle {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
}

.page-news .chronicle__head {
  max-width: 64ch;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.page-news .chronicle__eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--gold);
}

.page-news .chronicle__title {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.25;
  color: var(--paper-white);
}

.page-news .chronicle__note {
  margin: 0;
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(251, 245, 234, .66);
}

.page-news .chronicle__board {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}

.page-news .chronicle__main {
  min-width: 0;
}

.page-news .rail__caption {
  margin: 0 0 .9rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .28em;
  color: var(--mist-violet);
}

.page-news .rail__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.15rem;
  display: grid;
  gap: 1.35rem;
  border-left: 1px solid rgba(79, 224, 208, .28);
}

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

.page-news .rail__link {
  position: relative;
  display: grid;
  gap: .12rem;
  text-decoration: none;
  color: rgba(251, 245, 234, .82);
  transition: color .2s var(--ease);
}

.page-news .rail__link::before {
  content: "";
  position: absolute;
  left: -1.55rem;
  top: .35rem;
  width: 9px;
  height: 9px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: var(--ink-purple);
  box-shadow: 0 0 0 0 rgba(79, 224, 208, 0);
  transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}

.page-news .rail__link:hover,
.page-news .rail__link:focus-visible {
  color: var(--gold-soft);
}

.page-news .rail__link:hover::before,
.page-news .rail__link:focus-visible::before {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 4px rgba(79, 224, 208, .18);
}

.page-news .rail__link:focus-visible {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 4px;
}

.page-news .rail__stage {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--mist-violet);
}

.page-news .rail__label {
  font-size: .88rem;
  line-height: 1.45;
}

/* 专题筛选 */
.page-news .topic-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .85rem;
}

.page-news .topic-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: .42rem .9rem;
  border: 1px solid rgba(201, 162, 74, .42);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  color: rgba(251, 245, 234, .82);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

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

.page-news .topic-pill__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.page-news .topic-pill__text {
  display: inline-block;
}

.page-news .topic-pill:has(.topic-pill__input:checked) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink-dark);
}

.page-news .topic-pill:focus-within {
  outline: 2px solid var(--neon-cyan);
  outline-offset: 2px;
}

.page-news .chronicle__hint {
  margin: 0 0 1.75rem;
  font-size: .8rem;
  line-height: 1.6;
  color: var(--mist-violet);
}

/* 筛选生效：藏起不属于当前专题的条目与空阶段 */
.page-news .chronicle__board:has(.topic-pill__input[value="version"]:checked) :is(.entry:not(.entry--version), .group:not(:has(.entry--version))),
.page-news .chronicle__board:has(.topic-pill__input[value="rules"]:checked) :is(.entry:not(.entry--rules), .group:not(:has(.entry--rules))),
.page-news .chronicle__board:has(.topic-pill__input[value="catalog"]:checked) :is(.entry:not(.entry--catalog), .group:not(:has(.entry--catalog))),
.page-news .chronicle__board:has(.topic-pill__input[value="guest"]:checked) :is(.entry:not(.entry--guest), .group:not(:has(.entry--guest))) {
  display: none;
}

/* 阶段分组 */
.page-news .group {
  padding-top: 1.25rem;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.page-news .group + .group {
  margin-top: clamp(2rem, 5vw, 3.25rem);
  padding-top: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 1px dashed rgba(138, 118, 153, .38);
}

.page-news .group__marker {
  margin: 0 0 .45rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .26em;
  color: var(--gold);
}

.page-news .group__title {
  margin: 0 0 .45rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  line-height: 1.3;
  color: var(--paper-white);
}

.page-news .group__note {
  margin: 0 0 1.35rem;
  font-size: .9rem;
  line-height: 1.7;
  color: rgba(251, 245, 234, .64);
}

.page-news .group__figure {
  max-width: 620px;
  margin: 0 0 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(201, 162, 74, .26);
  border-radius: 2px 20px 2px 20px;
  background: var(--temple-purple);
}

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

/* 纪事卡 */
.page-news .entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .95rem;
}

.page-news .entry {
  --entry-accent: var(--gold);
  position: relative;
  padding: 1.1rem 1.15rem 1.1rem 1.35rem;
  border-left: 4px solid var(--entry-accent);
  border-radius: 2px 14px 2px 14px;
  background: var(--paper-warm);
  color: var(--ink-dark);
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.page-news .entry:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95);
}

.page-news .entry--version { --entry-accent: var(--chip-version); }
.page-news .entry--rules { --entry-accent: var(--chip-rules); }
.page-news .entry--catalog { --entry-accent: var(--chip-catalog); }
.page-news .entry--guest { --entry-accent: var(--chip-guest); }

.page-news .entry .topic-chip {
  background: var(--entry-accent);
  border-color: transparent;
  color: var(--ink-dark);
  font-weight: 700;
  letter-spacing: .1em;
}

.page-news .entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: .55rem;
}

.page-news .entry__when {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: rgba(29, 22, 32, .55);
}

.page-news .entry__title {
  margin: 0 0 .4rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  line-height: 1.45;
  color: var(--ink-dark);
}

.page-news .entry__lead {
  margin: 0;
  font-size: .88rem;
  line-height: 1.75;
  color: rgba(29, 22, 32, .78);
}

.page-news .entry__details {
  margin-top: .7rem;
}

.page-news .entry__details summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding-bottom: 1px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: #5B4390;
  border-bottom: 1px dashed rgba(91, 67, 144, .5);
}

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

.page-news .entry__details summary::after {
  content: "＋";
  font-size: .8rem;
  transition: transform .2s var(--ease);
}

.page-news .entry__details[open] summary::after {
  transform: rotate(45deg);
}

.page-news .entry__details p {
  margin: .65rem 0 0;
  padding-left: .8rem;
  border-left: 2px solid rgba(91, 67, 144, .35);
  font-size: .85rem;
  line-height: 1.8;
  color: rgba(29, 22, 32, .74);
}

.page-news .entry__link {
  display: inline-block;
  margin-top: .8rem;
  padding-bottom: 1px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ink-dark);
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 22, 32, .35);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}

.page-news .entry__link::after {
  content: " →";
}

.page-news .entry__link:hover {
  color: #A8123F;
  border-color: #A8123F;
}

.page-news .entry a:focus-visible,
.page-news .entry summary:focus-visible {
  outline: 2px solid #0F6F66;
  outline-offset: 3px;
}

/* ---------- 收尾 ---------- */
.page-news .news-outro {
  padding-top: clamp(2.5rem, 6vw, 4rem);
}

.page-news .news-outro__panel {
  padding: clamp(1.4rem, 4vw, 2.5rem);
  border: 1px solid var(--line-soft);
  border-radius: 2px 26px 2px 26px;
  background:
    linear-gradient(125deg, rgba(42, 23, 56, .95), rgba(20, 15, 28, .92)),
    var(--temple-purple);
  box-shadow: var(--shadow-card);
}

.page-news .news-outro__eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .3em;
  color: var(--neon-cyan);
}

.page-news .news-outro__title {
  margin: 0 0 .8rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1.3;
  color: var(--paper-white);
}

.page-news .news-outro__text {
  margin: 0 0 1.5rem;
  max-width: 58ch;
  font-size: .92rem;
  line-height: 1.8;
  color: rgba(251, 245, 234, .7);
}

.page-news .news-outro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ---------- 响应式 ---------- */
@media (min-width: 880px) {
  .page-news .headline-card {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  }
}

@media (min-width: 940px) {
  .page-news .news-hero__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }
}

@media (min-width: 1000px) {
  .page-news .chronicle__board {
    grid-template-columns: 210px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .rail {
    position: sticky;
    top: calc(var(--header-h) + 20px);
  }
}

@media (max-width: 560px) {
  .page-news .news-hero__stats {
    gap: 1rem 1.5rem;
  }

  .page-news .entry {
    padding: 1rem 1rem 1rem 1.15rem;
  }

  .page-news .headline-card__media {
    min-height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .entry,
  .page-news .rail__link,
  .page-news .rail__link::before,
  .page-news .topic-pill,
  .page-news .entry__link,
  .page-news .entry__details summary::after {
    transition: none;
  }

  .page-news .entry:hover {
    transform: none;
  }
}