.page-news {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  padding-top: calc(var(--header-h) + 18px);
}

.page-news a:focus-visible,
.page-news label:focus-visible,
.page-news summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.page-news .news-crumb-row {
  padding-top: 4px;
}

.page-news .section {
  padding: 38px 0;
}

.page-news .news-hero {
  padding-top: 24px;
  padding-bottom: 28px;
}

.page-news .news-hero-grid {
  display: grid;
  gap: 22px;
}

.page-news .news-hero-main h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.72rem, 6.4vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink-deep);
  margin: 10px 0 16px;
}

.page-news .news-hero-main .lead {
  max-width: 34em;
  margin: 0 0 20px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.8;
}

.page-news .news-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-hero-side {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  color: var(--cream);
  box-shadow: var(--shadow-panel);
}

.page-news .news-hero-side::before {
  content: "";
  display: block;
  height: 8px;
  margin-bottom: 14px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 13px);
  opacity: .72;
}

.page-news .news-side-label {
  margin: 0 0 14px;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--gold);
}

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

.page-news .news-side-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-line-soft);
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255, 249, 239, .86);
}

.page-news .news-side-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-news .news-side-list .num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  min-width: 3ch;
}

.page-news .news-head {
  margin-bottom: 20px;
}

.page-news .news-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.38rem, 4.6vw, 2.1rem);
  line-height: 1.28;
  color: var(--ink-deep);
  margin: 6px 0 8px;
}

.page-news .news-head .muted {
  margin: 0;
  max-width: 44em;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text-mute);
}

.page-news .news-band {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .news-band-item {
  padding: 20px 0;
  border-top: 1px solid var(--gold-line-soft);
}

.page-news .news-band-item:first-child {
  border-top: 0;
}

.page-news .news-band-num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--gold-deep);
}

.page-news .news-band-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink-deep);
}

.page-news .news-band-item p {
  margin: 0 0 10px;
  font-size: .9rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-news .news-band-link {
  display: inline-block;
  font-size: .84rem;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.page-news .news-band-link:hover {
  color: var(--red);
}

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

.page-news .media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.page-news .media-caption {
  margin-top: 10px;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--text-mute);
}

.page-news .news-body-grid {
  display: grid;
  gap: 30px;
}

.page-news .news-filter-input,
.page-news .news-span-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-news .news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-news .news-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--text-soft);
  font-size: .84rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

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

.page-news #news-f-all:focus-visible ~ .news-filter label[for="news-f-all"],
.page-news #news-f-panel:focus-visible ~ .news-filter label[for="news-f-panel"],
.page-news #news-f-card:focus-visible ~ .news-filter label[for="news-f-card"],
.page-news #news-f-stat:focus-visible ~ .news-filter label[for="news-f-stat"],
.page-news #news-f-room:focus-visible ~ .news-filter label[for="news-f-room"] {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.page-news #news-f-all:checked ~ .news-filter label[for="news-f-all"],
.page-news #news-f-panel:checked ~ .news-filter label[for="news-f-panel"],
.page-news #news-f-card:checked ~ .news-filter label[for="news-f-card"],
.page-news #news-f-stat:checked ~ .news-filter label[for="news-f-stat"],
.page-news #news-f-room:checked ~ .news-filter label[for="news-f-room"] {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
}

.page-news #news-f-panel:checked ~ .news-log .news-log-item:not([data-cat="panel"]),
.page-news #news-f-card:checked ~ .news-log .news-log-item:not([data-cat="card"]),
.page-news #news-f-stat:checked ~ .news-log .news-log-item:not([data-cat="stat"]),
.page-news #news-f-room:checked ~ .news-log .news-log-item:not([data-cat="room"]) {
  display: none;
}

.page-news .news-log {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: entry;
  border-top: 1px solid var(--line);
}

.page-news .news-log-item {
  counter-increment: entry;
  position: relative;
  padding-left: 32px;
  border-bottom: 1px solid var(--line);
}

.page-news .news-log-item::before {
  content: counter(entry, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--gold-deep);
}

.page-news .news-entry summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 15px 0;
}

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

.page-news .news-entry-seq {
  flex: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--cream);
  background: var(--felt);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}

.page-news .news-entry-title {
  flex: 1 1 12em;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink-deep);
}

.page-news .news-entry summary .tag {
  flex: none;
}

.page-news .news-entry[open] .news-entry-title {
  color: var(--red);
}

.page-news .news-entry-body {
  padding: 2px 0 18px;
}

.page-news .news-entry-body p {
  margin: 0 0 10px;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--text-soft);
}

.page-news .news-entry-body .annotation {
  font-size: .8rem;
  color: var(--text-mute);
}

.page-news .news-entry-body a {
  color: var(--gold-deep);
}

.page-news .news-entry-body a:hover {
  color: var(--red);
}

.page-news .news-entry-media {
  margin: 14px 0;
}

.page-news .news-index {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.page-news .news-index-title {
  margin: 0 0 10px;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--gold-deep);
}

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

.page-news .news-index-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  font-size: .86rem;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}

.page-news .news-index-list a .mono {
  font-size: .72rem;
  color: var(--gold-deep);
}

.page-news .news-index-list a:hover {
  color: var(--red);
}

.page-news .news-stats {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 26px 20px 28px;
  color: var(--cream);
  box-shadow: var(--shadow-panel);
}

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

.page-news .news-stats h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.8vw, 1.98rem);
  line-height: 1.32;
  color: var(--cream);
}

.page-news .news-stats-lead {
  margin: 0 0 20px;
  max-width: 40em;
  font-size: .93rem;
  line-height: 1.82;
  color: rgba(255, 249, 239, .82);
}

.page-news .news-span-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
}

.page-news .news-span-switch label {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: .86rem;
  color: rgba(255, 249, 239, .8);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.page-news #news-span-7:focus-visible ~ .news-span-switch label[for="news-span-7"],
.page-news #news-span-30:focus-visible ~ .news-span-switch label[for="news-span-30"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.page-news #news-span-7:checked ~ .news-span-switch label[for="news-span-7"],
.page-news #news-span-30:checked ~ .news-span-switch label[for="news-span-30"] {
  background: var(--gold);
  color: var(--ink-deep);
  font-weight: 600;
}

.page-news .news-span-panel {
  display: none;
}

.page-news #news-span-7:checked ~ #news-panel-7,
.page-news #news-span-30:checked ~ #news-panel-30 {
  display: block;
}

.page-news .news-span-meta {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--slate);
}

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

.page-news .news-bars li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) 3.2em;
  align-items: center;
  gap: 10px;
}

.page-news .news-bar-label {
  font-size: .84rem;
  color: rgba(255, 249, 239, .86);
}

.page-news .news-bar-track {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(220, 230, 235, .16);
  overflow: hidden;
}

.page-news .news-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--slate) 0%, var(--slate-soft) 100%);
}

.page-news .news-bar-value {
  font-family: var(--font-mono);
  font-size: .8rem;
  text-align: right;
  color: var(--slate-soft);
}

.page-news .news-stats-media {
  margin: 22px 0 0;
}

.page-news .news-stats-media .media-caption {
  color: rgba(255, 249, 239, .7);
}

.page-news .news-topic-grid {
  display: grid;
  gap: 14px;
}

.page-news .news-topic {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lift);
}

.page-news .news-topic:nth-child(even) {
  background: var(--paper);
}

.page-news .news-topic-tag {
  margin: 0 0 8px;
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--red);
}

.page-news .news-topic h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--ink-deep);
}

.page-news .news-topic p {
  margin: 0 0 14px;
  font-size: .9rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-news .news-topic-meta {
  display: block;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--slate-ink);
}

.page-news .news-topic-media {
  margin-top: 22px;
}

.page-news .news-follow {
  margin-top: 14px;
  padding: 40px 0 48px;
  background: var(--ink-deep);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--cream);
}

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

.page-news .news-follow h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.34rem, 4.6vw, 1.98rem);
  line-height: 1.3;
  color: var(--cream);
}

.page-news .news-follow p {
  margin: 0 0 16px;
  font-size: .93rem;
  line-height: 1.82;
  color: rgba(255, 249, 239, .82);
}

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

.page-news .news-follow-list li {
  position: relative;
  padding-left: 16px;
  font-size: .9rem;
  line-height: 1.78;
  color: rgba(255, 249, 239, .82);
}

.page-news .news-follow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.page-news .news-follow-list a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
}

.page-news .news-follow-list a:hover {
  color: var(--cream);
}

.page-news .news-follow-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-news .news-follow-actions .annotation {
  margin: 8px 0 0;
  font-size: .78rem;
  line-height: 1.75;
  color: rgba(255, 249, 239, .64);
}

@media (min-width: 760px) {
  .page-news .section {
    padding: 48px 0;
  }

  .page-news .news-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-news .news-topic:nth-child(even) {
    margin-top: 26px;
  }

  .page-news .news-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .news-band-item {
    padding: 22px 22px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .page-news .news-band-item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-news .news-band-item:last-child {
    padding-right: 0;
  }

  .page-news .news-log-item {
    padding-left: 40px;
  }

  .page-news .news-stats {
    padding: 36px 34px 38px;
  }
}

@media (min-width: 900px) {
  .page-news .news-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 44px;
    align-items: end;
  }

  .page-news .news-hero-side {
    padding: 26px 24px;
  }

  .page-news .news-follow-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
}

@media (min-width: 980px) {
  .page-news .news-body-grid {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 48px;
    align-items: start;
  }

  .page-news .news-index {
    position: sticky;
    top: calc(var(--header-h) + 26px);
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-top: 0;
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-chip,
  .page-news .news-span-switch label {
    transition: none;
  }
}


<main id="main-content" class="page-news">
  <div class="wrap news-crumb-row">
    <nav class="breadcrumb" aria-label="页面位置">
      <ol class="breadcrumb-list">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="/">首页</a><span class="breadcrumb-sep" aria-hidden="true">›</span></li>
        <li class="breadcrumb-item"><span aria-current="page">更新与统计</span></li>
      </ol>
    </nav>
  </div>

  <section class="section news-hero" aria-labelledby="news-hero-title">
    <div class="wrap news-hero-grid">
      <div class="news-hero-main" data-reveal>
        <p class="kicker">版本批次 · 区间统计</p>
        <h1 id="news-hero-title">面板每次调整，都留得下批次与去向</h1>
        <p class="lead">9棋牌内容中心每周发布两次版本更新说明，把新版面板的回放入口、iOS 简体版对局时长的显示位置、场次标签的分组变化逐条写清。您在这里先看本周改了哪些，再翻近 7 日与近 30 日的对照分布，最后回到单局里验证。</p>
        <div class="news-hero-meta">
          <span class="tag tag--red">本周批次已发布</span>
          <span class="tag tag--gold">版本序列 3.4</span>
        </div>
      </div>
      <aside class="panel panel--felt news-hero-side" aria-label="当前批次摘要">
        <p class="news-side-label">本周批次数读</p>
        <ul class="news-side-list">
          <li><span class="num">2</span><span>每周版本更新说明</span></li>
          <li><span class="num">480</span><span>累计玩法说明与更新记录</span></li>
          <li><span class="num">1</span><span>区间数据每日更新次数</span></li>
        </ul>
      </aside>
    </div>
  </section>

  <section class="section news-batch" id="batch" aria-labelledby="batch-title">
    <div class="wrap">
      <div class="section-head news-head" data-reveal>
        <p class="kicker">本周批次</p>
        <h2 id="batch-title">这一批改了哪三件事</h2>
        <p class="muted">先看主线，判断和自己常打的玩法、常看的场次有没有关系，再决定翻哪一段细读。</p>
      </div>
      <ol class="news-band" data-reveal>
        <li class="news-band-item">
          <span class="news-band-num">01</span>
          <h3>场次标签重新归组</h3>
          <p>4 人桌的部分标签按玩法重新归类，固定打法的玩家进房前能先把人数与玩法两列的对应关系看明白。</p>
          <a class="news-band-link" href="/services/">查看玩法与场次对照</a>
        </li>
        <li class="news-band-item">
          <span class="news-band-num">02</span>
          <h3>回放入口固定在详情行</h3>
          <p>新版面板把回放牌局入口放在对局详情的固定位置，最近 30 局都能直接进入，复盘时不必再找入口。</p>
          <a class="news-band-link" href="/answers/">回放相关答疑</a>
        </li>
        <li class="news-band-item">
          <span class="news-band-num">03</span>
          <h3>区间分布增加对照档</h3>
          <p>统计栏维持每日更新一次，近 30 日档位补上与近 7 日的并排刻度，方便按周比较节奏变化。</p>
          <a class="news-band-link" href="#stats">跳到统计区间</a>
        </li>
      </ol>
    </div>
  </section>

  <section class="section news-log-section" id="log" aria-labelledby="log-title">
    <div class="wrap news-body-grid">
      <div class="news-log-col">
        <div class="section-head news-head">
          <p class="kicker">版本序列</p>
          <h2 id="log-title">更新条目</h2>
          <p class="muted">每条记录写明变更类型与受影响的功能，展开标题能看到具体改了哪里、去哪里验证。</p>
        </div>

        <input class="news-filter-input" type="radio" name="news-filter" id="news-f-all" checked>
        <input class="news-filter-input" type="radio" name="news-filter" id="news-f-panel">
        <input class="news-filter-input" type="radio" name="news-filter" id="news-f-card">
        <input class="news-filter-input" type="radio" name="news-filter" id="news-f-stat">
        <input class="news-filter-input" type="radio" name="news-filter" id="news-f-room">

        <div class="news-filter" role="group" aria-label="按变更类型筛选更新条目">
          <label class="news-chip" for="news-f-all">全部</label>
          <label class="news-chip" for="news-f-panel">面板</label>
          <label class="news-chip" for="news-f-card">牌型</label>
          <label class="news-chip" for="news-f-stat">统计</label>
          <label class="news-chip" for="news-f-room">场次</label>
        </div>

        <ol class="news-log">
          <li class="news-log-item" data-cat="panel">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.4</span>
                <span class="news-entry-title">回放入口移入对局详情固定行</span>
                <span class="tag tag--gold">面板</span>
              </summary>
              <div class="news-entry-body">
                <p>新版面板把回放牌局入口固定在详情行，最近 30 局可直接进入；在回放时间轴上能标记关键局节点，复盘时按节点回看，不必从头拖到结尾。</p>
                <figure class="media media--4x3 news-entry-media">
                  <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="回放时间轴局部示意，关键局节点以朱红细线标注在墨绿底色上" loading="lazy" decoding="async">
                  <figcaption class="media-caption">关键局在时间轴上留下节点，回看时按节点定位。</figcaption>
                </figure>
                <p class="annotation">相关栏目：<a href="/services/">玩法与体验</a> · <a href="/answers/">答疑中心</a></p>
              </div>
            </details>
          </li>

          <li class="news-log-item" data-cat="stat">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.4</span>
                <span class="news-entry-title">区间对照分布改为按日刷新</span>
                <span class="tag tag--red">统计</span>
              </summary>
              <div class="news-entry-body">
                <p>统计栏保持每日更新一次，近 7 日与近 30 日两档同时刷新；仪表条上的刻度按玩法、场次、牌型、回放四类分开显示，看分布形态比看单一数值更直观。</p>
                <p class="annotation">相关栏目：<a href="#stats">本页统计区间</a></p>
              </div>
            </details>
          </li>

          <li class="news-log-item" data-cat="card">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.3</span>
                <span class="news-entry-title">顺子与同花样例补入对照说明</span>
                <span class="tag tag--gold">牌型</span>
              </summary>
              <div class="news-entry-body">
                <p>常见牌型栏目为顺子、同花补充了一批样例卡的边注，写明出现条件与容易混淆的相邻牌型。样例卡仍经玩法研究、编辑校对两道复核后上线。</p>
                <p class="annotation">相关栏目：<a href="#topics">牌型专题</a></p>
              </div>
            </details>
          </li>

          <li class="news-log-item" data-cat="room">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.3</span>
                <span class="news-entry-title">4 人桌场次标签重新归组</span>
                <span class="tag tag--red">场次</span>
              </summary>
              <div class="news-entry-body">
                <p>4 人桌的部分场次标签按玩法重新归类，标签数量仍为 18 种；对照表左列玩法、右列场次的排列没有变化，老玩家按原来的顺序就能找到。</p>
                <p class="annotation">相关栏目：<a href="/services/">玩法与场次对照</a></p>
              </div>
            </details>
          </li>

          <li class="news-log-item" data-cat="panel">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.2</span>
                <span class="news-entry-title">iOS 简体版对局时长仍在详情第 2 行</span>
                <span class="tag tag--gold">面板</span>
              </summary>
              <div class="news-entry-body">
                <p>本批次调整了详情页的行距，对局时长继续显示在第 2 行，位置不变。客服咨询里对局时长与回放入口是最高频的两类问题，约占咨询量的 46%，这次一并核对了三端显示。</p>
                <p class="annotation">相关栏目：<a href="/answers/">对局时长怎么看</a></p>
              </div>
            </details>
          </li>

          <li class="news-log-item" data-cat="card">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.2</span>
                <span class="news-entry-title">葫芦与四条样例卡版面重排</span>
                <span class="tag tag--gold">牌型</span>
              </summary>
              <div class="news-entry-body">
                <p>这两类牌型的样例卡改为单卡单屏的对照方式，编号规则统一，翻到某一张时能直接看到它与相邻牌型的区别。</p>
                <p class="annotation">相关栏目：<a href="/services/">常见牌型样例</a></p>
              </div>
            </details>
          </li>

          <li class="news-log-item" data-cat="stat">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.1</span>
                <span class="news-entry-title">近 7 日区间改为按日汇总</span>
                <span class="tag tag--red">统计</span>
              </summary>
              <div class="news-entry-body">
                <p>近 7 日档位从按批次汇总改为按日汇总，日与日之间的变化看得出来；近 30 日档位仍按周分段，两档可以并排对照。</p>
                <p class="annotation">相关栏目：<a href="#stats">本页统计区间</a></p>
              </div>
            </details>
          </li>

          <li class="news-log-item" data-cat="room">
            <details class="news-entry">
              <summary>
                <span class="news-entry-seq">3.1</span>
                <span class="news-entry-title">2 人桌与 3 人桌标签并列展示</span>
                <span class="tag tag--red">场次</span>
              </summary>
              <div class="news-entry-body">
                <p>2 人桌与 3 人桌的场次标签改为并列排列，窄屏下自动折成上下两段，切换玩法时不必来回滚动。</p>
                <p class="annotation">相关栏目：<a href="/services/">场次对照</a></p>
              </div>
            </details>
          </li>
        </ol>
      </div>

      <aside class="news-index" aria-label="本页章节索引">
        <p class="news-index-title">刻度索引</p>
        <ol class="news-index-list">
          <li><a href="#batch"><span class="mono">01</span>本批次总览</a></li>
          <li><a href="#log"><span class="mono">02</span>更新条目</a></li>
          <li><a href="#stats"><span class="mono">03</span>统计区间</a></li>
          <li><a href="#topics"><span class="mono">04</span>牌型与场次专题</a></li>
          <li><a href="#follow"><span class="mono">05</span>后续追踪</a></li>
        </ol>
      </aside>
    </div>
  </section>

  <section class="section news-stats-section" id="stats" aria-labelledby="stats-title">
    <div class="wrap">
      <div class="panel panel--felt news-stats" data-reveal>
        <div class="news-stats-head">
          <p class="kicker news-kicker-gold">区间统计</p>
          <h2 id="stats-title">棋牌胜率统计每日更新一次，分近 7 日与近 30 日两档</h2>
          <p class="news-stats-lead">建议按三步看：先确认区间长度与更新频次，再看四类内容在区间里的分布比例，最后回到单局详情，用对局时长和牌型样例做一次对照。</p>
        </div>

        <input class="news-span-input" type="radio" name="news-span" id="news-span-7" checked>
        <input class="news-span-input" type="radio" name="news-span" id="news-span-30">

        <div class="news-span-switch" role="group" aria-label="统计区间切换">
          <label for="news-span-7">近 7 日</label>
          <label for="news-span-30">近 30 日</label>
        </div>

        <div class="news-span-panel" id="news-panel-7">
          <p class="news-span-meta">区间长度 7 天 · 每日更新 1 次 · 覆盖 9 大玩法分类</p>
          <ul class="news-bars">
            <li>
              <span class="news-bar-label">玩法对照</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:42%"></span></span>
              <span class="news-bar-value">42%</span>
            </li>
            <li>
              <span class="news-bar-label">场次对照</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:26%"></span></span>
              <span class="news-bar-value">26%</span>
            </li>
            <li>
              <span class="news-bar-label">牌型样例</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:22%"></span></span>
              <span class="news-bar-value">22%</span>
            </li>
            <li>
              <span class="news-bar-label">回放节点</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:10%"></span></span>
              <span class="news-bar-value">10%</span>
            </li>
          </ul>
        </div>

        <div class="news-span-panel" id="news-panel-30">
          <p class="news-span-meta">区间长度 30 天 · 每日更新 1 次 · 覆盖 18 种场次标签</p>
          <ul class="news-bars">
            <li>
              <span class="news-bar-label">玩法对照</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:38%"></span></span>
              <span class="news-bar-value">38%</span>
            </li>
            <li>
              <span class="news-bar-label">场次对照</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:29%"></span></span>
              <span class="news-bar-value">29%</span>
            </li>
            <li>
              <span class="news-bar-label">牌型样例</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:21%"></span></span>
              <span class="news-bar-value">21%</span>
            </li>
            <li>
              <span class="news-bar-label">回放节点</span>
              <span class="news-bar-track"><span class="news-bar-fill" style="width:12%"></span></span>
              <span class="news-bar-value">12%</span>
            </li>
          </ul>
        </div>

        <figure class="media media--4x3 news-stats-media">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="冷灰蓝横向仪表条排在墨绿底面上，显示不同区间的分布长度对比" loading="lazy" decoding="async">
          <figcaption class="media-caption">同一组指标在两档区间并排呈现，长区间看趋势，短区间看近期变化。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section news-topics" id="topics" aria-labelledby="topics-title">
    <div class="wrap">
      <div class="section-head news-head" data-reveal>
        <p class="kicker">专题系列</p>
        <h2 id="topics-title">牌型与场次的连续查阅</h2>
        <p class="muted">按主题成组推进，一个方向的变化一次看完，不必在版本条目里来回翻找。</p>
      </div>

      <div class="news-topic-grid" data-reveal>
        <article class="news-topic">
          <p class="news-topic-tag">牌型样例</p>
          <h3>常见牌型逐条补样例</h3>
          <p>12 类常见牌型对应 360 张样例卡，每张写明出现条件与相邻牌型的区别，单局遇到不熟的牌型可以直接对照。</p>
          <span class="news-topic-meta">已上线 360 张样例卡</span>
        </article>
        <article class="news-topic">
          <p class="news-topic-tag">场次标签</p>
          <h3>场次标签定期整理</h3>
          <p>每季度整理一次场次标签，把 2 人桌、3 人桌、4 人桌共 18 种标签的归类重新核对，常打固定人数的玩家按标签进房更省事。</p>
          <span class="news-topic-meta">每季度整理 1 次</span>
        </article>
        <article class="news-topic">
          <p class="news-topic-tag">回放节点</p>
          <h3>关键局在时间轴上留痕</h3>
          <p>回放入口可查阅最近 30 局，配合时间轴节点，把一局里想回看的部分单独标出来，复盘时直接跳回。</p>
          <span class="news-topic-meta">最近 30 局可回看</span>
        </article>
        <article class="news-topic">
          <p class="news-topic-tag">三端适配</p>
          <h3>同一套内容三个端同看</h3>
          <p>iOS 简体版、Android 版与网页版按同一版本序列推进，字号与高对比度模式在移动端同步覆盖，换设备查阅时版面不陌生。</p>
          <span class="news-topic-meta">三端同步维护</span>
        </article>
      </div>

      <figure class="media media--3x2 news-topic-media" data-reveal>
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="多张暖纸色牌型样例卡以档案抽屉方式层叠，卡面与深墨绿背景形成对比" loading="lazy" decoding="async">
        <figcaption class="media-caption">牌型样例按档案卡逐张排布，专题推进时成组补充。</figcaption>
      </figure>
    </div>
  </section>

  <section class="section news-follow" id="follow" aria-labelledby="follow-title">
    <div class="wrap news-follow-grid">
      <div>
        <h2 id="follow-title">怎么跟上后面的批次</h2>
        <p>更新说明每周发布两次，新批次上线后旧条目继续保留，按版本序列往回翻就能看到某次改动的前后关系。常打固定玩法的玩家，建议把本页加入收藏，进房前扫一眼本周批次。</p>
        <ul class="news-follow-list">
          <li>想看内容是怎么做出来的、谁在负责玩法与数据整理，可读<a href="/brand/">品牌档案</a>。</li>
          <li>遇到对局时长位置、回放打不开这类具体问题，先去<a href="/answers/">答疑中心</a>找现成答案。</li>
          <li>需要确认一次变更是否影响到您的常用场次，可通过<a href="/contact/">联系内容中心</a>与我们对话。</li>
        </ul>
      </div>
      <div class="news-follow-actions">
        <a class="btn btn--gold btn--block" href="/services/">回玩法与体验查对照</a>
        <a class="btn btn--paper btn--block" href="#log">回看本页更新条目</a>
        <p class="annotation">邮件咨询可发送至 service@qipai9-hub.com.cn，工作日 10:00-19:00 内回复；标题注明“内容中心”，我们会优先分流到对应小组。</p>
      </div>
    </div>
  </section>
</main>

.page-news {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  padding-top: calc(var(--header-h) + 18px);
}

.page-news a:focus-visible,
.page-news label:focus-visible,
.page-news summary:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.page-news .news-crumb-row {
  padding-top: 4px;
}

.page-news .section {
  padding: 38px 0;
}

.page-news .news-hero {
  padding-top: 24px;
  padding-bottom: 28px;
}

.page-news .news-hero-grid {
  display: grid;
  gap: 22px;
}

.page-news .news-hero-main h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.72rem, 6.4vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--ink-deep);
  margin: 10px 0 16px;
}

.page-news .news-hero-main .lead {
  max-width: 34em;
  margin: 0 0 20px;
  color: var(--text-soft);
  font-size: 1rem;
  line-height: 1.8;
}

.page-news .news-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-hero-side {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  color: var(--cream);
  box-shadow: var(--shadow-panel);
}

.page-news .news-hero-side::before {
  content: "";
  display: block;
  height: 8px;
  margin-bottom: 14px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 13px);
  opacity: .72;
}

.page-news .news-side-label {
  margin: 0 0 14px;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--gold);
}

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

.page-news .news-side-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold-line-soft);
  font-size: .88rem;
  line-height: 1.6;
  color: rgba(255, 249, 239, .86);
}

.page-news .news-side-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-news .news-side-list .num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  min-width: 3ch;
}

.page-news .news-head {
  margin-bottom: 20px;
}

.page-news .news-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.38rem, 4.6vw, 2.1rem);
  line-height: 1.28;
  color: var(--ink-deep);
  margin: 6px 0 8px;
}

.page-news .news-head .muted {
  margin: 0;
  max-width: 44em;
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text-mute);
}

.page-news .news-band {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.page-news .news-band-item {
  padding: 20px 0;
  border-top: 1px solid var(--gold-line-soft);
}

.page-news .news-band-item:first-child {
  border-top: 0;
}

.page-news .news-band-num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  color: var(--gold-deep);
}

.page-news .news-band-item h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink-deep);
}

.page-news .news-band-item p {
  margin: 0 0 10px;
  font-size: .9rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-news .news-band-link {
  display: inline-block;
  font-size: .84rem;
  color: var(--gold-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.page-news .news-band-link:hover {
  color: var(--red);
}

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

.page-news .media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.page-news .media-caption {
  margin-top: 10px;
  font-size: .8rem;
  line-height: 1.7;
  color: var(--text-mute);
}

.page-news .news-body-grid {
  display: grid;
  gap: 30px;
}

.page-news .news-filter-input,
.page-news .news-span-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-news .news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.page-news .news-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--text-soft);
  font-size: .84rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}

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

.page-news #news-f-all:focus-visible ~ .news-filter label[for="news-f-all"],
.page-news #news-f-panel:focus-visible ~ .news-filter label[for="news-f-panel"],
.page-news #news-f-card:focus-visible ~ .news-filter label[for="news-f-card"],
.page-news #news-f-stat:focus-visible ~ .news-filter label[for="news-f-stat"],
.page-news #news-f-room:focus-visible ~ .news-filter label[for="news-f-room"] {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.page-news #news-f-all:checked ~ .news-filter label[for="news-f-all"],
.page-news #news-f-panel:checked ~ .news-filter label[for="news-f-panel"],
.page-news #news-f-card:checked ~ .news-filter label[for="news-f-card"],
.page-news #news-f-stat:checked ~ .news-filter label[for="news-f-stat"],
.page-news #news-f-room:checked ~ .news-filter label[for="news-f-room"] {
  background: var(--ink-deep);
  border-color: var(--ink-deep);
  color: var(--cream);
}

.page-news #news-f-panel:checked ~ .news-log .news-log-item:not([data-cat="panel"]),
.page-news #news-f-card:checked ~ .news-log .news-log-item:not([data-cat="card"]),
.page-news #news-f-stat:checked ~ .news-log .news-log-item:not([data-cat="stat"]),
.page-news #news-f-room:checked ~ .news-log .news-log-item:not([data-cat="room"]) {
  display: none;
}

.page-news .news-log {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: entry;
  border-top: 1px solid var(--line);
}

.page-news .news-log-item {
  counter-increment: entry;
  position: relative;
  padding-left: 32px;
  border-bottom: 1px solid var(--line);
}

.page-news .news-log-item::before {
  content: counter(entry, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 17px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--gold-deep);
}

.page-news .news-entry summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  padding: 15px 0;
}

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

.page-news .news-entry-seq {
  flex: none;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--cream);
  background: var(--felt);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
}

.page-news .news-entry-title {
  flex: 1 1 12em;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink-deep);
}

.page-news .news-entry summary .tag {
  flex: none;
}

.page-news .news-entry[open] .news-entry-title {
  color: var(--red);
}

.page-news .news-entry-body {
  padding: 2px 0 18px;
}

.page-news .news-entry-body p {
  margin: 0 0 10px;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--text-soft);
}

.page-news .news-entry-body .annotation {
  font-size: .8rem;
  color: var(--text-mute);
}

.page-news .news-entry-body a {
  color: var(--gold-deep);
}

.page-news .news-entry-body a:hover {
  color: var(--red);
}

.page-news .news-entry-media {
  margin: 14px 0;
}

.page-news .news-index {
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.page-news .news-index-title {
  margin: 0 0 10px;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--gold-deep);
}

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

.page-news .news-index-list a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  font-size: .86rem;
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--line);
}

.page-news .news-index-list a .mono {
  font-size: .72rem;
  color: var(--gold-deep);
}

.page-news .news-index-list a:hover {
  color: var(--red);
}

.page-news .news-stats {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 26px 20px 28px;
  color: var(--cream);
  box-shadow: var(--shadow-panel);
}

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

.page-news .news-stats h2 {
  margin: 8px 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.8vw, 1.98rem);
  line-height: 1.32;
  color: var(--cream);
}

.page-news .news-stats-lead {
  margin: 0 0 20px;
  max-width: 40em;
  font-size: .93rem;
  line-height: 1.82;
  color: rgba(255, 249, 239, .82);
}

.page-news .news-span-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin-bottom: 18px;
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-pill);
}

.page-news .news-span-switch label {
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  font-size: .86rem;
  color: rgba(255, 249, 239, .8);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.page-news #news-span-7:focus-visible ~ .news-span-switch label[for="news-span-7"],
.page-news #news-span-30:focus-visible ~ .news-span-switch label[for="news-span-30"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.page-news #news-span-7:checked ~ .news-span-switch label[for="news-span-7"],
.page-news #news-span-30:checked ~ .news-span-switch label[for="news-span-30"] {
  background: var(--gold);
  color: var(--ink-deep);
  font-weight: 600;
}

.page-news .news-span-panel {
  display: none;
}

.page-news #news-span-7:checked ~ #news-panel-7,
.page-news #news-span-30:checked ~ #news-panel-30 {
  display: block;
}

.page-news .news-span-meta {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--slate);
}

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

.page-news .news-bars li {
  display: grid;
  grid-template-columns: 4.6em minmax(0, 1fr) 3.2em;
  align-items: center;
  gap: 10px;
}

.page-news .news-bar-label {
  font-size: .84rem;
  color: rgba(255, 249, 239, .86);
}

.page-news .news-bar-track {
  display: block;
  height: 10px;
  border-radius: var(--radius-pill);
  background: rgba(220, 230, 235, .16);
  overflow: hidden;
}

.page-news .news-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--slate) 0%, var(--slate-soft) 100%);
}

.page-news .news-bar-value {
  font-family: var(--font-mono);
  font-size: .8rem;
  text-align: right;
  color: var(--slate-soft);
}

.page-news .news-stats-media {
  margin: 22px 0 0;
}

.page-news .news-stats-media .media-caption {
  color: rgba(255, 249, 239, .7);
}

.page-news .news-topic-grid {
  display: grid;
  gap: 14px;
}

.page-news .news-topic {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-lift);
}

.page-news .news-topic:nth-child(even) {
  background: var(--paper);
}

.page-news .news-topic-tag {
  margin: 0 0 8px;
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--red);
}

.page-news .news-topic h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--ink-deep);
}

.page-news .news-topic p {
  margin: 0 0 14px;
  font-size: .9rem;
  line-height: 1.78;
  color: var(--text-soft);
}

.page-news .news-topic-meta {
  display: block;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--slate-ink);
}

.page-news .news-topic-media {
  margin-top: 22px;
}

.page-news .news-follow {
  margin-top: 14px;
  padding: 40px 0 48px;
  background: var(--ink-deep);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--cream);
}

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

.page-news .news-follow h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.34rem, 4.6vw, 1.98rem);
  line-height: 1.3;
  color: var(--cream);
}

.page-news .news-follow p {
  margin: 0 0 16px;
  font-size: .93rem;
  line-height: 1.82;
  color: rgba(255, 249, 239, .82);
}

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

.page-news .news-follow-list li {
  position: relative;
  padding-left: 16px;
  font-size: .9rem;
  line-height: 1.78;
  color: rgba(255, 249, 239, .82);
}

.page-news .news-follow-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.page-news .news-follow-list a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
}

.page-news .news-follow-list a:hover {
  color: var(--cream);
}

.page-news .news-follow-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

.page-news .news-follow-actions .annotation {
  margin: 8px 0 0;
  font-size: .78rem;
  line-height: 1.75;
  color: rgba(255, 249, 239, .64);
}

@media (min-width: 760px) {
  .page-news .section {
    padding: 48px 0;
  }

  .page-news .news-topic-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-news .news-topic:nth-child(even) {
    margin-top: 26px;
  }

  .page-news .news-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .news-band-item {
    padding: 22px 22px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .page-news .news-band-item:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .page-news .news-band-item:last-child {
    padding-right: 0;
  }

  .page-news .news-log-item {
    padding-left: 40px;
  }

  .page-news .news-stats {
    padding: 36px 34px 38px;
  }
}

@media (min-width: 900px) {
  .page-news .news-hero-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 44px;
    align-items: end;
  }

  .page-news .news-hero-side {
    padding: 26px 24px;
  }

  .page-news .news-follow-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 52px;
    align-items: start;
  }
}

@media (min-width: 980px) {
  .page-news .news-body-grid {
    grid-template-columns: minmax(0, 1fr) 208px;
    gap: 48px;
    align-items: start;
  }

  .page-news .news-index {
    position: sticky;
    top: calc(var(--header-h) + 26px);
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-top: 0;
    padding-left: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-chip,
  .page-news .news-span-switch label {
    transition: none;
  }
}