.page-news {
  --press-pad: clamp(1.25rem, 4vw, 2.75rem);
  --press-paper-ink: #22403A;
  display: block;
  overflow-x: clip;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  color: var(--white);
}

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

/* 首屏 */
.page-news .press-head {
  padding-top: clamp(1rem, 2.6vw, 1.75rem);
}

.page-news .press-head__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}

.page-news h1 {
  margin: 0.45rem 0 0;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.page-news .press-head__lead {
  max-width: 42em;
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--mist);
}

.page-news .press-head__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}

.page-news .press-head__facts dt {
  font-size: var(--fs-note);
  color: var(--mist-dim);
}

.page-news .press-head__facts dd {
  margin: 0.2rem 0 0;
  font-size: var(--fs-sm);
  color: var(--white);
}

.page-news .press-head__facts dd.mono {
  font-size: var(--fs-mono);
  color: var(--gold);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.page-news .press-head__facts dd.mono:hover {
  color: var(--cyan);
}

@media (min-width: 960px) {
  .page-news .press-head__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}

/* 置顶版本要点 */
.page-news .pin {
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
}

.page-news .pin__inner {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: var(--press-pad);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--card) 0%, var(--ink-2) 58%, var(--ink) 100%);
  box-shadow: var(--shadow-card);
}

.page-news .pin__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), rgba(34, 224, 200, 0) 72%);
}

.page-news .pin__inner::after {
  content: "";
  position: absolute;
  inset: auto -12% -45% auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 224, 200, 0.15), transparent 68%);
  pointer-events: none;
}

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

.page-news .pin__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.page-news .pin__week {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--mist);
}

.page-news .pin__title {
  margin: 0 0 0.9rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.page-news .pin__list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--mist);
}

.page-news .pin__list li::marker {
  color: var(--gold);
  font-family: var(--font-mono);
}

.page-news .pin__list strong {
  color: var(--white);
  font-weight: 600;
}

.page-news .pin__more {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.page-news .pin__more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--cyan);
  cursor: pointer;
  list-style: none;
}

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

.page-news .pin__more summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(34, 224, 200, 0.5);
  border-radius: 2px;
  font-size: 0.75rem;
  line-height: 1;
}

.page-news .pin__more[open] summary::before {
  content: "\2212";
}

.page-news .pin__more ul {
  display: grid;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--mist);
}

.page-news .pin__more li::marker {
  color: var(--cyan);
}

.page-news .pin__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0;
  font-size: var(--fs-note);
  color: var(--mist-dim);
}

.page-news .pin__ver {
  padding-bottom: 1px;
  color: var(--gold);
  border-bottom: 1px dashed rgba(233, 196, 106, 0.55);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-news .pin__ver:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-news .pin__ver.is-copied {
  color: var(--orange);
  border-color: var(--orange);
}

.page-news .pin__media {
  position: relative;
  z-index: 1;
  margin: 0;
}

.page-news .pin__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

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

/* 动态列表 */
.page-news .log {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-news .log__head {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.page-news .log__lead {
  max-width: 44em;
  margin: 0.75rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--mist);
}

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

.page-news .log__fig img {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-news .log__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .lg-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-repeat: repeat;
  background-size: 6px 6px;
}

.page-news .lg-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.85;
}

.page-news .lg-tag--ver {
  color: var(--cyan);
  border-color: rgba(34, 224, 200, 0.45);
  background-image: repeating-linear-gradient(135deg, rgba(34, 224, 200, 0.16) 0 1px, transparent 1px 6px);
}

.page-news .lg-tag--rank {
  color: var(--gold);
  border-color: rgba(233, 196, 106, 0.45);
  background-image: repeating-linear-gradient(90deg, rgba(233, 196, 106, 0.14) 0 1px, transparent 1px 6px);
}

.page-news .lg-tag--new {
  color: #8cf3e4;
  border-color: rgba(34, 224, 200, 0.32);
  background-image: radial-gradient(rgba(34, 224, 200, 0.3) 1px, transparent 1px);
  background-size: 5px 5px;
}

.page-news .lg-tag--audit {
  color: var(--mist);
  border-color: rgba(159, 184, 174, 0.36);
  background-image: repeating-linear-gradient(45deg, rgba(159, 184, 174, 0.16) 0 1px, transparent 1px 5px);
}

.page-news .lg-tag--feature {
  color: var(--orange);
  border-color: rgba(255, 122, 47, 0.45);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 122, 47, 0.16) 0 1px, transparent 1px 6px);
}

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

.page-news .log__item {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

.page-news .log__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-news .log__item:hover {
  background: linear-gradient(90deg, rgba(34, 224, 200, 0.06), transparent 62%);
}

.page-news .log__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.page-news .log__ver {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: rgba(233, 196, 106, 0.72);
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}

.page-news .log__item:hover .log__ver {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(233, 196, 106, 0.45);
}

.page-news .log__week {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  color: var(--mist-dim);
}

.page-news .log__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.48;
  color: var(--white);
}

.page-news .log__desc {
  max-width: 46em;
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.76;
  color: var(--mist);
}

.page-news .log__note {
  margin: 1.25rem 0 0;
  font-size: var(--fs-note);
  line-height: 1.8;
  color: var(--mist-dim);
}

.page-news .log__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 200, 0.45);
}

@media (min-width: 760px) {
  .page-news .log__item {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 1.6rem;
    padding: 1.15rem 0 1.25rem;
  }

  .page-news .log__meta {
    position: sticky;
    top: calc(var(--bar-h) + 1.25rem);
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

@media (min-width: 820px) {
  .page-news .log__head {
    grid-template-columns: minmax(0, 1fr) 168px;
  }
}

/* 升段位说明：浅色阅读区 */
.page-news .ladder {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4.5vw, 3.25rem) 0;
  color: var(--press-paper-ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg, rgba(18, 38, 31, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(18, 38, 31, 0.05) 0 1px, transparent 1px 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .ladder__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.page-news .ladder .eyebrow {
  color: #0e6b5f;
}

.page-news .ladder__title {
  margin: 0.5rem 0 0.9rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
  color: var(--paper-ink);
}

.page-news .ladder__copy p {
  max-width: 40em;
  margin: 0 0 1rem;
  font-size: var(--fs-sm);
  line-height: 1.82;
  color: var(--press-paper-ink);
}

.page-news .ladder__steps {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.page-news .ladder__steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.72;
}

.page-news .ladder__steps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  font-weight: 400;
  color: #0e6b5f;
  border: 1px solid rgba(18, 38, 31, 0.35);
  border-radius: var(--r-sm);
  background: rgba(34, 224, 200, 0.16);
}

.page-news .ladder__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem !important;
}

.page-news .ladder .btn--ghost {
  color: var(--paper-ink);
  border-color: rgba(18, 38, 31, 0.32);
}

.page-news .ladder .btn--ghost:hover {
  background: rgba(18, 38, 31, 0.07);
  border-color: var(--paper-ink);
}

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

.page-news .ladder__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(18, 38, 31, 0.18);
  border-radius: var(--r-md);
}

.page-news .ladder__cap {
  margin: 0.6rem 0 0;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: #4a655c;
}

@media (min-width: 900px) {
  .page-news .ladder__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* 历史版本索引 */
.page-news .archive {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-news .archive__head {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

.page-news .archive__lead {
  max-width: 44em;
  margin: 0.75rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--mist);
}

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

.page-news .archive__fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-news .archive__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .ver-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-2);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-news .ver-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 224, 200, 0.6);
}

.page-news .ver-cell__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--gold);
}

.page-news .ver-cell__theme {
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--mist);
}

.page-news .ver-cell--current {
  border-color: var(--cyan);
  background: linear-gradient(160deg, rgba(34, 224, 200, 0.18), var(--ink-2));
}

.page-news .ver-cell--current .ver-cell__no {
  color: var(--cyan);
}

@media (min-width: 600px) {
  .page-news .archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-news .archive__head {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (min-width: 960px) {
  .page-news .archive__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 回访入口 */
.page-news .revisit {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-news .revisit__inner {
  padding: var(--press-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(200deg, var(--ink-2), var(--ink));
}

.page-news .revisit__lead {
  max-width: 44em;
  margin: 0.85rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--mist);
}

.page-news .revisit__list {
  display: grid;
  gap: 0.85rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .revisit__item {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.page-news .revisit__num {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  color: var(--cyan);
}

.page-news .revisit__item h3 {
  margin: 0.35rem 0 0.45rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}

.page-news .revisit__item p {
  margin: 0 0 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.74;
  color: var(--mist);
}

.page-news .revisit__link {
  font-size: var(--fs-sm);
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 200, 0.4);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-news .revisit__link:hover {
  color: var(--gold);
  border-color: rgba(233, 196, 106, 0.6);
}

@media (min-width: 760px) {
  .page-news .revisit__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .ver-cell,
  .page-news .log__ver,
  .page-news .pin__ver,
  .page-news .log__item,
  .page-news .revisit__link {
    transition: none;
  }

  .page-news .ver-cell:hover {
    transform: none;
  }
}
<<<PAGE_CSS_END>>>
<<<END>>>

Wait — I must double-check the output format: the marker sequence should be MAIN_HTML then PAGE_CSS. I added extra markers at the end (<<<PAGE_CSS_END>>> and <<<END>>>) which are not allowed ("每个标记只能出现一次", "严格按照以下标记顺序输出"). I should not invent extra markers. Let me re-output cleanly without the trailing invented markers.
<main id="main-content" class="page-news">
  <div class="container">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a class="breadcrumb__link" href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">版本与动态</span>
    </nav>
  </div>

  <header class="press-head">
    <div class="container press-head__grid">
      <div class="press-head__main">
        <p class="eyebrow">发布记录 · 每两周一次</p>
        <h1>版本更新与段位动态</h1>
        <p class="press-head__lead">
          888棋牌游每期版本说明上线时，最先变的往往是两件事：你在哪一段、那条规则怎么写。这一页把最近的改动按时间倒序排开，
          段位门槛、玩法增补、巡检结果与专题策划各带标签，看到感兴趣的条目就能顺着版本号回到资料库对应条目。
        </p>
      </div>
      <dl class="press-head__facts">
        <div>
          <dt>当前版本</dt>
          <dd class="mono" data-copy="v3.8.2" title="点击复制版本号">v3.8.2</dd>
        </div>
        <div>
          <dt>最近发布</dt>
          <dd>本月第 2 周</dd>
        </div>
        <div>
          <dt>发布节奏</dt>
          <dd>每月第 2、4 周</dd>
        </div>
        <div>
          <dt>可回查期数</dt>
          <dd class="mono">24 期</dd>
        </div>
      </dl>
    </div>
  </header>

  <section class="pin" aria-labelledby="pin-title">
    <div class="container">
      <div class="pin__inner">
        <div class="pin__copy">
          <p class="pin__flag">
            <span class="tag tag--orange">本期上线</span>
            <span class="pin__week">本月第 2 周</span>
          </p>
          <h2 class="pin__title" id="pin-title">v3.8.2 动了这三处</h2>
          <ol class="pin__list">
            <li><strong>段位</strong>：六段至八段的升段门槛改为按积分区间划分，九段条件保持不变。</li>
            <li><strong>规则</strong>：扑克分区 12 个条目重写步骤说明，交牌与补牌的先后顺序写清楚了。</li>
            <li><strong>检索</strong>：版本号检索支持直接输入 v 前缀，回查往期说明少一步操作。</li>
          </ol>
          <details class="pin__more">
            <summary>展开本期完整说明</summary>
            <ul>
              <li>段位说明同步了六段至八段的积分区间图，并补上低于区间下沿时的判定示例。</li>
              <li>扑克分区被改动的条目在版本号旁加了本期标记，翻目录时不容易漏。</li>
              <li>麻将分区新增两条地方玩法条目，每条 12 个操作步骤，各配一张规则流程示意。</li>
              <li>记录导出页按段位筛选的说明补上了示例，导出前能看清筛掉了哪些行。</li>
            </ul>
          </details>
          <p class="pin__meta">
            本期版本号
            <span class="mono pin__ver" data-copy="v3.8.2" title="点击复制版本号">v3.8.2</span>
            ，复制后可到资料库目录对号查条目。
          </p>
        </div>
        <figure class="pin__media">
          <img src="{zhanqunpic:h:500w:900}" width="900" height="500" alt="抽象数据流线与段位刻度叠加的图形，青橙双色，无文字">
        </figure>
      </div>
    </div>
  </section>

  <section class="log" aria-labelledby="log-title">
    <div class="container">
      <div class="log__head">
        <div>
          <h2 class="section-title" id="log-title">近期动态</h2>
          <p class="log__lead">
            版本说明、段位调整、玩法新增、巡检通报与专题策划分列五类，各自的徽标纹样不同，扫一眼就能判断这条消息跟自己有没有关系。
          </p>
        </div>
        <figure class="log__fig">
          <img src="{zhanqunpic:h:600w:600}" width="600" height="600" loading="lazy" decoding="async" alt="五个描边图标并排，分别表现文档、阶梯、拼图、放大镜与书签">
        </figure>
      </div>

      <ul class="log__legend" aria-label="动态分类">
        <li><span class="lg-tag lg-tag--ver">版本说明</span></li>
        <li><span class="lg-tag lg-tag--rank">段位调整</span></li>
        <li><span class="lg-tag lg-tag--new">玩法新增</span></li>
        <li><span class="lg-tag lg-tag--audit">巡检通报</span></li>
        <li><span class="lg-tag lg-tag--feature">专题策划</span></li>
      </ul>

      <ol class="log__list">
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--ver">版本说明</span>
            <span class="log__ver mono">v3.8.2</span>
            <span class="log__week">本月第 2 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">主版本 v3.8.2 上线，段位说明与扑克条目同步更新</h3>
            <p class="log__desc">这一期的改动集中在两处：六段以上怎么升段，以及扑克分区里那些容易读岔的步骤。目录页索引已刷新。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--rank">段位调整</span>
            <span class="log__ver mono">v3.8.2</span>
            <span class="log__week">本月第 2 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">六段至八段升段门槛改为按积分区间划分</h3>
            <p class="log__desc">原先按单局积分累计判定，现在看连续三个版本内的积分区间，低于区间下沿不触发升段。九段的升段条件这次没有动。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--new">玩法新增</span>
            <span class="log__ver mono">v3.8.2</span>
            <span class="log__week">本月第 2 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">麻将分区新增两条地方玩法条目</h3>
            <p class="log__desc">两条新条目各含 12 个操作步骤与一张规则流程示意，讲清了洗牌顺序与番型结算的先后次序。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--audit">巡检通报</span>
            <span class="log__ver mono">v3.8.2</span>
            <span class="log__week">本月第 2 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">本轮抽查 32 条玩法条目，补齐 5 处步骤缺句</h3>
            <p class="log__desc">抽查覆盖麻将、扑克、棋类三个分区，问题集中在流程示意与文字步骤对不上的地方，现已全部补正。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--feature">专题策划</span>
            <span class="log__ver mono">v3.8.1</span>
            <span class="log__week">上期</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">「七天上手」专题上线，把新手引导拆成七步</h3>
            <p class="log__desc">从第一次打开页面到完成一次记录查询，整个路径被拆成七段可以照着做的说明，适合完全没接触过的新玩家。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--ver">版本说明</span>
            <span class="log__ver mono">v3.8.1</span>
            <span class="log__week">上期</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">扑克分区 12 个条目重写步骤说明</h3>
            <p class="log__desc">重写重点是把原先一句带过的交牌情形展开写，每一步只讲一个动作，方便边看边对牌桌。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--rank">段位调整</span>
            <span class="log__ver mono">v3.8.1</span>
            <span class="log__week">上期</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">升段条件的表述与帮助中心对齐</h3>
            <p class="log__desc">两处描述原先一个说「累计」一个说「区间」，容易让人以为规则有两套，这次统一成积分区间写法，并补了例子。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--new">玩法新增</span>
            <span class="log__ver mono">v3.8.0</span>
            <span class="log__week">上月第 2 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">电玩街机分区新增 3 条条目，含两条例外情形</h3>
            <p class="log__desc">新增条目都带例外说明，比如分数翻倍与连击中断同时发生时按哪个算，这部分在此前的条目里一直是空白。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--audit">巡检通报</span>
            <span class="log__ver mono">v3.8.0</span>
            <span class="log__week">上月第 2 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">导出记录抽查：CSV 与 PDF 各 20 份全部对齐</h3>
            <p class="log__desc">抽查按时间、玩法分区、段位三种条件组合取样，导出文件的行数与页面显示一致，表头字段没有错位。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--feature">专题策划</span>
            <span class="log__ver mono">v3.7.9</span>
            <span class="log__week">上月第 4 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">电玩城对接专题：记录格式怎么对、文件怎么交接</h3>
            <p class="log__desc">面向门店经营者，讲清导出文件交给前台时需要带上哪些字段，以及时间范围按营业日还是自然日截取。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--ver">版本说明</span>
            <span class="log__ver mono">v3.7.9</span>
            <span class="log__week">上月第 4 周</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">棋类分区流程示意图重绘</h3>
            <p class="log__desc">棋盘格与坐标标注加重了对比，走子顺序用编号串起来，打印成纸质资料也能看清。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--rank">段位调整</span>
            <span class="log__ver mono">v3.7.8</span>
            <span class="log__week">近期</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">入门一段至三段的积分说明改写</h3>
            <p class="log__desc">示例换成一局三盘的完整过程，新手能顺着数字看到积分怎么一步步累上去，而不是只看到结果。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--new">玩法新增</span>
            <span class="log__ver mono">v3.7.8</span>
            <span class="log__week">近期</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">休闲竞速分区补齐 4 条条目</h3>
            <p class="log__desc">补齐后该分区的条目流程统一为 12 步，赛道选择与计时判定放在同一屏里，不用来回翻。</p>
          </div>
        </li>
        <li class="log__item">
          <div class="log__meta">
            <span class="lg-tag lg-tag--audit">巡检通报</span>
            <span class="log__ver mono">v3.7.7</span>
            <span class="log__week">近期</span>
          </div>
          <div class="log__body">
            <h3 class="log__title">全站检索回归：三种检索维度均正常响应</h3>
            <p class="log__desc">玩法名、版本号、段位三种检索方式逐一试过，平均响应 0.3 秒，偏门的玩法名也能搜到对应条目。</p>
          </div>
        </li>
      </ol>

      <p class="log__note">
        每期说明都由编辑撰写、规则审校复核后上线，撰写与复核由两人分别完成；团队怎么分工，在
        <a href="/who-we-are/">品牌自述</a> 里有完整介绍。
      </p>
    </div>
  </section>

  <section class="ladder" aria-labelledby="ladder-title">
    <div class="container ladder__grid">
      <div class="ladder__copy">
        <p class="eyebrow">段位体系 · 9 段</p>
        <h2 class="ladder__title" id="ladder-title">棋牌新版升段位，先弄清门槛怎么算</h2>
        <p>
          9 段体系从入门一段排到九段，每一期版本说明都可能动到其中某几段。想知道自己离下一段还差多少，看两件事就够了：
          现在落在哪个积分区间，以及这个区间最近一次被改到哪一版。
        </p>
        <ol class="ladder__steps">
          <li><b>1</b><span>先确认段位。资料库目录里每个玩法条目旁都带段位标识，当前段位与所在区间一眼可见。</span></li>
          <li><b>2</b><span>再看积分。六段以上按连续三个版本内的积分区间判定，低于区间下沿不触发升段，超出上沿的部分累计到下一段。</span></li>
          <li><b>3</b><span>最后对版本。凡是被改到的段位，都会在动态列表里单独占一条，点开就能看到改前改后的差别。</span></li>
        </ol>
        <p>
          平板端看到段位没有刷新，先按帮助中心的显示问题排查走一遍：切横屏、重新进入条目、确认版本号是否为 v3.8.2，
          三步都不奏效再找客服，能省下不少来回。
        </p>
        <p class="ladder__links">
          <a class="btn btn--primary" href="/catalog/">查段位与玩法条目</a>
          <a class="btn btn--ghost" href="/faqs/">段位显示排查</a>
        </p>
      </div>
      <figure class="ladder__media">
        <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" loading="lazy" decoding="async" alt="九级阶梯式抽象图形，每级标一个圆点，最高级为金色">
        <figcaption class="ladder__cap">九个段位按阶梯排列，圆点代表段位节点，最高一级用段位金标出。</figcaption>
      </figure>
    </div>
  </section>

  <section class="archive" id="archive" aria-labelledby="archive-title">
    <div class="container">
      <div class="archive__head">
        <div>
          <h2 class="section-title" id="archive-title">历史版本索引</h2>
          <p class="archive__lead">
            最近 24 期的版本号与主题按发布顺序倒排。记住版本号比记住日期可靠得多，查到号之后，可以在资料库目录找到被改的那条玩法，
            在帮助中心找到受影响的操作步骤。
          </p>
        </div>
        <figure class="archive__fig">
          <img src="{zhanqunpic:h:400w:800}" width="800" height="400" loading="lazy" decoding="async" alt="等距排列的小方块序列沿水平方向递进，末端为电光青高亮">
        </figure>
      </div>

      <ul class="archive__grid">
        <li class="ver-cell ver-cell--current"><span class="ver-cell__no">v3.8.2</span><span class="ver-cell__theme">段位门槛调整</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.8.1</span><span class="ver-cell__theme">扑克步骤重写</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.8.0</span><span class="ver-cell__theme">街机条目扩充</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.9</span><span class="ver-cell__theme">导出格式抽查</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.8</span><span class="ver-cell__theme">棋类图示重绘</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.7</span><span class="ver-cell__theme">检索回归测试</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.6</span><span class="ver-cell__theme">检索维度扩展</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.5</span><span class="ver-cell__theme">新手流程精简</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.4</span><span class="ver-cell__theme">牌类术语统一</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.3</span><span class="ver-cell__theme">段位徽标改版</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.2</span><span class="ver-cell__theme">麻将分区扩容</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.1</span><span class="ver-cell__theme">平板双栏适配</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.7.0</span><span class="ver-cell__theme">目录结构重整</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.9</span><span class="ver-cell__theme">复核记录归档</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.8</span><span class="ver-cell__theme">记录筛选优化</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.7</span><span class="ver-cell__theme">门店对接专题</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.6</span><span class="ver-cell__theme">规则流程图补全</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.5</span><span class="ver-cell__theme">段位说明改版</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.4</span><span class="ver-cell__theme">扑克分区补充</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.3</span><span class="ver-cell__theme">检索提示优化</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.2</span><span class="ver-cell__theme">内容巡检通报</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.1</span><span class="ver-cell__theme">新手引导上线</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.6.0</span><span class="ver-cell__theme">版本编号统一</span></li>
        <li class="ver-cell"><span class="ver-cell__no">v3.5.9</span><span class="ver-cell__theme">目录首版发布</span></li>
      </ul>
    </div>
  </section>

  <section class="revisit" aria-labelledby="revisit-title">
    <div class="container">
      <div class="revisit__inner">
        <h2 class="section-title" id="revisit-title">下次回来，从这三处进</h2>
        <p class="revisit__lead">
          版本说明固定在每月第 2 周与第 4 周发布，其中一次通常是段位或规则的主改动。把这一页收进常用，
          下次升级前不必重新翻找入口。
        </p>
        <ol class="revisit__list">
          <li class="revisit__item">
            <span class="revisit__num">01</span>
            <h3>收藏后固定在索引轴顶部</h3>
            <p>常用的玩法条目与资料库目录收藏后会固定显示在侧边索引轴顶部，与记录查询入口挨在一起，一屏之内点得到。</p>
            <a class="revisit__link" href="/catalog/">打开资料库目录</a>
          </li>
          <li class="revisit__item">
            <span class="revisit__num">02</span>
            <h3>按版本号直接对号</h3>
            <p>看到条目里提到某个版本号，回到上面的索引格按号找，24 期之内的主题都能一眼定位。</p>
            <a class="revisit__link" href="#archive">跳到版本索引</a>
          </li>
          <li class="revisit__item">
            <span class="revisit__num">03</span>
            <h3>需要人工协助时</h3>
            <p>客服邮箱、服务热线与服务时段都在联系页，门店对接与内容合作也走同一个入口，工作日当天会有回复。</p>
            <a class="revisit__link" href="/contact/">查看联系方式</a>
          </li>
        </ol>
      </div>
    </div>
  </section>
</main>

.page-news {
  --press-pad: clamp(1.25rem, 4vw, 2.75rem);
  --press-paper-ink: #22403A;
  display: block;
  overflow-x: clip;
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
  color: var(--white);
}

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

/* 首屏 */
.page-news .press-head {
  padding-top: clamp(1rem, 2.6vw, 1.75rem);
}

.page-news .press-head__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: end;
}

.page-news h1 {
  margin: 0.45rem 0 0;
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.page-news .press-head__lead {
  max-width: 42em;
  margin: 1rem 0 0;
  font-size: var(--fs-body);
  line-height: 1.78;
  color: var(--mist);
}

.page-news .press-head__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
  margin: 0;
  padding: 1rem 0 0;
  border-top: 1px solid var(--line);
}

.page-news .press-head__facts dt {
  font-size: var(--fs-note);
  color: var(--mist-dim);
}

.page-news .press-head__facts dd {
  margin: 0.2rem 0 0;
  font-size: var(--fs-sm);
  color: var(--white);
}

.page-news .press-head__facts dd.mono {
  font-size: var(--fs-mono);
  color: var(--gold);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.page-news .press-head__facts dd.mono:hover {
  color: var(--cyan);
}

@media (min-width: 960px) {
  .page-news .press-head__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}

/* 置顶版本要点 */
.page-news .pin {
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
}

.page-news .pin__inner {
  position: relative;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: var(--press-pad);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(155deg, var(--card) 0%, var(--ink-2) 58%, var(--ink) 100%);
  box-shadow: var(--shadow-card);
}

.page-news .pin__inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cyan), rgba(34, 224, 200, 0) 72%);
}

.page-news .pin__inner::after {
  content: "";
  position: absolute;
  inset: auto -12% -45% auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 224, 200, 0.15), transparent 68%);
  pointer-events: none;
}

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

.page-news .pin__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.75rem;
}

.page-news .pin__week {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--mist);
}

.page-news .pin__title {
  margin: 0 0 0.9rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.page-news .pin__list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--mist);
}

.page-news .pin__list li::marker {
  color: var(--gold);
  font-family: var(--font-mono);
}

.page-news .pin__list strong {
  color: var(--white);
  font-weight: 600;
}

.page-news .pin__more {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
}

.page-news .pin__more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--cyan);
  cursor: pointer;
  list-style: none;
}

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

.page-news .pin__more summary::before {
  content: "+";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(34, 224, 200, 0.5);
  border-radius: 2px;
  font-size: 0.75rem;
  line-height: 1;
}

.page-news .pin__more[open] summary::before {
  content: "\2212";
}

.page-news .pin__more ul {
  display: grid;
  gap: 0.4rem;
  margin: 0.8rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--mist);
}

.page-news .pin__more li::marker {
  color: var(--cyan);
}

.page-news .pin__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0;
  font-size: var(--fs-note);
  color: var(--mist-dim);
}

.page-news .pin__ver {
  padding-bottom: 1px;
  color: var(--gold);
  border-bottom: 1px dashed rgba(233, 196, 106, 0.55);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-news .pin__ver:hover {
  color: var(--cyan);
  border-color: var(--cyan);
}

.page-news .pin__ver.is-copied {
  color: var(--orange);
  border-color: var(--orange);
}

.page-news .pin__media {
  position: relative;
  z-index: 1;
  margin: 0;
}

.page-news .pin__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

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

/* 动态列表 */
.page-news .log {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-news .log__head {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.page-news .log__lead {
  max-width: 44em;
  margin: 0.75rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--mist);
}

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

.page-news .log__fig img {
  display: block;
  width: 100%;
  max-width: 168px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-news .log__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .lg-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background-repeat: repeat;
  background-size: 6px 6px;
}

.page-news .lg-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.85;
}

.page-news .lg-tag--ver {
  color: var(--cyan);
  border-color: rgba(34, 224, 200, 0.45);
  background-image: repeating-linear-gradient(135deg, rgba(34, 224, 200, 0.16) 0 1px, transparent 1px 6px);
}

.page-news .lg-tag--rank {
  color: var(--gold);
  border-color: rgba(233, 196, 106, 0.45);
  background-image: repeating-linear-gradient(90deg, rgba(233, 196, 106, 0.14) 0 1px, transparent 1px 6px);
}

.page-news .lg-tag--new {
  color: #8cf3e4;
  border-color: rgba(34, 224, 200, 0.32);
  background-image: radial-gradient(rgba(34, 224, 200, 0.3) 1px, transparent 1px);
  background-size: 5px 5px;
}

.page-news .lg-tag--audit {
  color: var(--mist);
  border-color: rgba(159, 184, 174, 0.36);
  background-image: repeating-linear-gradient(45deg, rgba(159, 184, 174, 0.16) 0 1px, transparent 1px 5px);
}

.page-news .lg-tag--feature {
  color: var(--orange);
  border-color: rgba(255, 122, 47, 0.45);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 122, 47, 0.16) 0 1px, transparent 1px 6px);
}

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

.page-news .log__item {
  display: grid;
  gap: 0.5rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}

.page-news .log__item:last-child {
  border-bottom: 1px solid var(--line);
}

.page-news .log__item:hover {
  background: linear-gradient(90deg, rgba(34, 224, 200, 0.06), transparent 62%);
}

.page-news .log__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.page-news .log__ver {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: rgba(233, 196, 106, 0.72);
  transition: color var(--dur) var(--ease), text-shadow var(--dur) var(--ease);
}

.page-news .log__item:hover .log__ver {
  color: var(--gold);
  text-shadow: 0 0 14px rgba(233, 196, 106, 0.45);
}

.page-news .log__week {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  color: var(--mist-dim);
}

.page-news .log__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.48;
  color: var(--white);
}

.page-news .log__desc {
  max-width: 46em;
  margin: 0.4rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.76;
  color: var(--mist);
}

.page-news .log__note {
  margin: 1.25rem 0 0;
  font-size: var(--fs-note);
  line-height: 1.8;
  color: var(--mist-dim);
}

.page-news .log__note a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 200, 0.45);
}

@media (min-width: 760px) {
  .page-news .log__item {
    grid-template-columns: 176px minmax(0, 1fr);
    gap: 1.6rem;
    padding: 1.15rem 0 1.25rem;
  }

  .page-news .log__meta {
    position: sticky;
    top: calc(var(--bar-h) + 1.25rem);
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

@media (min-width: 820px) {
  .page-news .log__head {
    grid-template-columns: minmax(0, 1fr) 168px;
  }
}

/* 升段位说明：浅色阅读区 */
.page-news .ladder {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4.5vw, 3.25rem) 0;
  color: var(--press-paper-ink);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(90deg, rgba(18, 38, 31, 0.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(18, 38, 31, 0.05) 0 1px, transparent 1px 48px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .ladder__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}

.page-news .ladder .eyebrow {
  color: #0e6b5f;
}

.page-news .ladder__title {
  margin: 0.5rem 0 0.9rem;
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.2;
  color: var(--paper-ink);
}

.page-news .ladder__copy p {
  max-width: 40em;
  margin: 0 0 1rem;
  font-size: var(--fs-sm);
  line-height: 1.82;
  color: var(--press-paper-ink);
}

.page-news .ladder__steps {
  display: grid;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.page-news .ladder__steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  font-size: var(--fs-sm);
  line-height: 1.72;
}

.page-news .ladder__steps b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  font-weight: 400;
  color: #0e6b5f;
  border: 1px solid rgba(18, 38, 31, 0.35);
  border-radius: var(--r-sm);
  background: rgba(34, 224, 200, 0.16);
}

.page-news .ladder__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.35rem !important;
}

.page-news .ladder .btn--ghost {
  color: var(--paper-ink);
  border-color: rgba(18, 38, 31, 0.32);
}

.page-news .ladder .btn--ghost:hover {
  background: rgba(18, 38, 31, 0.07);
  border-color: var(--paper-ink);
}

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

.page-news .ladder__media img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(18, 38, 31, 0.18);
  border-radius: var(--r-md);
}

.page-news .ladder__cap {
  margin: 0.6rem 0 0;
  font-size: var(--fs-note);
  line-height: 1.6;
  color: #4a655c;
}

@media (min-width: 900px) {
  .page-news .ladder__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

/* 历史版本索引 */
.page-news .archive {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-news .archive__head {
  display: grid;
  gap: 1.25rem;
  align-items: center;
}

.page-news .archive__lead {
  max-width: 44em;
  margin: 0.75rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--mist);
}

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

.page-news .archive__fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.page-news .archive__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .ver-cell {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-2);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-news .ver-cell:hover {
  transform: translateY(-2px);
  border-color: rgba(34, 224, 200, 0.6);
}

.page-news .ver-cell__no {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--gold);
}

.page-news .ver-cell__theme {
  font-size: var(--fs-note);
  line-height: 1.4;
  color: var(--mist);
}

.page-news .ver-cell--current {
  border-color: var(--cyan);
  background: linear-gradient(160deg, rgba(34, 224, 200, 0.18), var(--ink-2));
}

.page-news .ver-cell--current .ver-cell__no {
  color: var(--cyan);
}

@media (min-width: 600px) {
  .page-news .archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 860px) {
  .page-news .archive__head {
    grid-template-columns: minmax(0, 1fr) 280px;
  }
}

@media (min-width: 960px) {
  .page-news .archive__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 回访入口 */
.page-news .revisit {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-news .revisit__inner {
  padding: var(--press-pad);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(200deg, var(--ink-2), var(--ink));
}

.page-news .revisit__lead {
  max-width: 44em;
  margin: 0.85rem 0 0;
  font-size: var(--fs-sm);
  line-height: 1.78;
  color: var(--mist);
}

.page-news .revisit__list {
  display: grid;
  gap: 0.85rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .revisit__item {
  padding-top: 0.85rem;
  border-top: 1px solid var(--line);
}

.page-news .revisit__num {
  font-family: var(--font-mono);
  font-size: var(--fs-note);
  color: var(--cyan);
}

.page-news .revisit__item h3 {
  margin: 0.35rem 0 0.45rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--white);
}

.page-news .revisit__item p {
  margin: 0 0 0.6rem;
  font-size: var(--fs-sm);
  line-height: 1.74;
  color: var(--mist);
}

.page-news .revisit__link {
  font-size: var(--fs-sm);
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(34, 224, 200, 0.4);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.page-news .revisit__link:hover {
  color: var(--gold);
  border-color: rgba(233, 196, 106, 0.6);
}

@media (min-width: 760px) {
  .page-news .revisit__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .ver-cell,
  .page-news .log__ver,
  .page-news .pin__ver,
  .page-news .log__item,
  .page-news .revisit__link {
    transition: none;
  }

  .page-news .ver-cell:hover {
    transform: none;
  }
}