.page-news {
  --news-gap: clamp(20px, 3vw, 34px);
  --news-line-soft: rgba(27, 91, 80, .65);
  overflow-x: clip;
}

.page-news .news-top {
  padding-top: clamp(14px, 3vw, 26px);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  align-items: end;
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 5vw, 56px);
}

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

.page-news .news-hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.1rem, 6.2vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}

.page-news .news-hero__lede {
  margin: 0 0 22px;
  max-width: 50ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--muted);
}

.page-news .news-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .meta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--muted);
  background: rgba(15, 51, 42, .5);
}

.page-news .meta-pill b {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--cyan-soft);
}

.page-news .news-hero__figure {
  position: relative;
  margin: 0;
}

.page-news .news-hero__figure::after {
  content: "";
  position: absolute;
  right: -4%;
  top: -10px;
  width: 48%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan));
  transform: rotate(-8deg);
  opacity: .85;
}

.page-news .news-hero__figure .media-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
}

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

.page-news .news-caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 主题索引带 ---------- */
.page-news .topic-band {
  margin-bottom: clamp(32px, 6vw, 64px);
  border-top: 1px solid var(--news-line-soft);
  border-bottom: 1px solid var(--news-line-soft);
  background: linear-gradient(90deg, rgba(15, 51, 42, .78), rgba(8, 33, 27, .08));
}

.page-news .topic-list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-news .topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
  background: rgba(8, 33, 27, .6);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}

.page-news .topic-chip:hover,
.page-news .topic-chip:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(38, 224, 200, .35), 0 12px 26px -18px rgba(38, 224, 200, .9);
  transform: translateY(-2px);
}

.page-news .topic-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.page-news .topic-chip__dot--adapt { background: var(--cyan); }
.page-news .topic-chip__dot--rule { background: var(--amber); }
.page-news .topic-chip__dot--line { background: var(--coral); }
.page-news .topic-chip__dot--member { background: var(--cyan-soft); }
.page-news .topic-chip__dot--lib { background: var(--muted); }

.page-news .topic-chip__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- 分类标签 ---------- */
.page-news .tag--adapt {
  color: var(--cyan);
  background: rgba(38, 224, 200, .12);
}

.page-news .tag--rule {
  color: var(--amber);
  background: rgba(231, 179, 74, .14);
}

.page-news .tag--line {
  color: var(--coral);
  background: rgba(255, 122, 89, .14);
}

.page-news .tag--member {
  color: var(--cyan-soft);
  background: rgba(168, 245, 233, .12);
}

.page-news .tag--lib {
  color: var(--muted);
  background: rgba(120, 149, 138, .18);
}

/* ---------- 更新列表 ---------- */
.page-news .news-feed {
  padding-bottom: clamp(34px, 6vw, 64px);
}

.page-news .lead-update {
  position: relative;
  margin-top: clamp(22px, 4vw, 36px);
  padding: clamp(20px, 3.4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--panel) 0%, var(--panel-2) 58%, var(--bg-deep) 100%);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.page-news .lead-update::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 224, 200, .2), transparent 70%);
  pointer-events: none;
}

.page-news .lead-update__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.page-news .lead-update__pin {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--amber);
}

.page-news .lead-update h3 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.01em;
}

.page-news .lead-update h3 a {
  color: var(--white);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.page-news .lead-update h3 a:hover,
.page-news .lead-update h3 a:focus-visible {
  color: var(--cyan-soft);
}

.page-news .lead-update p {
  position: relative;
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .lead-update__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.page-news .lead-update__facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(27, 91, 80, .8);
  font-size: 14px;
  color: var(--white);
  background: rgba(5, 10, 9, .35);
}

.page-news .lead-update__facts .mono {
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
}

.page-news .feed-group {
  margin-top: clamp(26px, 4vw, 44px);
}

.page-news .feed-group__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--cyan);
}

.page-news .feed-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.page-news .news-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 20px 0 20px 18px;
  border-bottom: 1px solid var(--news-line-soft);
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  transition: background .24s var(--ease), box-shadow .24s var(--ease);
}

.page-news .news-item:hover::before,
.page-news .news-item:focus-within::before {
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(38, 224, 200, .85);
}

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

.page-news .news-item__time {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--coral);
}

.page-news .news-item__body h4 {
  margin: 0 0 7px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.9vw, 1.35rem);
  line-height: 1.28;
}

.page-news .news-item__body h4 a {
  color: var(--white);
  text-decoration: none;
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .28s var(--ease), color .2s var(--ease);
}

.page-news .news-item__body h4 a:hover,
.page-news .news-item__body h4 a:focus-visible {
  color: var(--cyan-soft);
  background-size: 100% 1px;
}

.page-news .news-item__body p {
  margin: 0 0 8px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--muted);
}

.page-news .news-item__ver {
  display: inline-block;
  padding: 3px 9px;
  border: 1px dashed rgba(231, 179, 74, .5);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--amber);
}

/* ---------- 平板适配专题 ---------- */
.page-news .adapt-series {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  padding: clamp(30px, 5vw, 56px) 0;
  border-top: 1px solid var(--news-line-soft);
}

.page-news .adapt-series__copy h2,
.page-news .rule-track h2,
.page-news .member-center h2,
.page-news .news-next h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--white);
}

.page-news .adapt-series .eyebrow {
  margin: 0 0 10px;
}

.page-news .adapt-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .adapt-item {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(15, 51, 42, .85), rgba(8, 33, 27, .35));
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}

.page-news .adapt-item:hover {
  border-color: rgba(38, 224, 200, .55);
  transform: translateY(-3px);
}

.page-news .adapt-item__no {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--amber);
}

.page-news .adapt-item h3 {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--white);
}

.page-news .adapt-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .adapt-series__figure {
  margin: 0;
}

.page-news .adapt-series__figure .media-frame,
.page-news .rule-track__figure .media-frame,
.page-news .member-center__figure .media-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.page-news .adapt-series__figure img,
.page-news .rule-track__figure img,
.page-news .member-center__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 规则修订追踪 ---------- */
.page-news .rule-track {
  padding: clamp(30px, 5vw, 56px) 0;
  border-top: 1px solid var(--news-line-soft);
}

.page-news .rule-track__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  margin-top: clamp(20px, 3vw, 32px);
  align-items: start;
}

.page-news .rule-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(11, 42, 35, .6);
}

.page-news .rule-table-wrap .data-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-news .rule-table-wrap th,
.page-news .rule-table-wrap td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(27, 91, 80, .7);
  vertical-align: top;
  line-height: 1.6;
}

.page-news .rule-table-wrap thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--cyan);
  background: rgba(5, 10, 9, .45);
  white-space: nowrap;
}

.page-news .rule-table-wrap tbody th {
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.page-news .rule-table-wrap tbody td {
  color: var(--muted);
}

.page-news .rule-table-wrap tbody td.mono {
  color: var(--amber);
  white-space: nowrap;
  font-size: 13px;
}

.page-news .rule-table-wrap tbody tr:hover th,
.page-news .rule-table-wrap tbody tr:hover td {
  background: rgba(38, 224, 200, .06);
}

.page-news .rule-track__figure {
  margin: 0;
}

/* ---------- 会员中心 ---------- */
.page-news .member-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  padding: clamp(30px, 5vw, 56px) 0;
  border-top: 1px solid var(--news-line-soft);
  align-items: center;
}

.page-news .member-center__copy .eyebrow {
  margin: 0 0 10px;
}

.page-news .member-center__copy > p {
  margin: 0 0 16px;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .member-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-news .member-tool {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: linear-gradient(90deg, rgba(38, 224, 200, .1), transparent 70%);
  font-size: 14px;
  line-height: 1.7;
  color: var(--white);
}

.page-news .member-tool .mono {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--amber);
  padding-top: 2px;
}

.page-news .member-center__note {
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed rgba(120, 149, 138, .5);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--cyan-soft);
}

.page-news .member-center__figure {
  margin: 0;
}

/* ---------- 下一站 ---------- */
.page-news .news-next {
  padding: clamp(30px, 5vw, 60px) 0 clamp(44px, 7vw, 84px);
  border-top: 1px solid var(--news-line-soft);
}

.page-news .next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.page-news .next-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--panel) 0%, rgba(8, 33, 27, .5) 100%);
  transition: border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}

.page-news .next-card:hover {
  border-color: rgba(38, 224, 200, .6);
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -34px rgba(38, 224, 200, .8);
}

.page-news .next-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--white);
}

.page-news .next-card p {
  margin: 0;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .next-card .btn {
  align-self: flex-start;
}

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

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

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

  .page-news .news-item {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 32px);
    padding: 22px 0 22px 22px;
  }

  .page-news .news-item--offset {
    margin-left: clamp(16px, 4vw, 56px);
  }

  .page-news .news-item__side {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 2px;
  }
}

@media (min-width: 1000px) {
  .page-news .adapt-series {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-news .rule-track__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  }

  .page-news .member-center {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-news .topic-chip,
  .page-news .adapt-item,
  .page-news .next-card,
  .page-news .news-item::before,
  .page-news .news-item__body h4 a {
    transition: none;
  }

  .page-news .topic-chip:hover,
  .page-news .adapt-item:hover,
  .page-news .next-card:hover {
    transform: none;
  }
}

<main id="main-content" class="page-news">
  <div class="container news-top">
    <nav aria-label="面包屑">
      <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li aria-current="page">更新动态</li>
      </ol>
    </nav>
  </div>

  <div class="container">
    <header class="news-hero">
      <div class="news-hero__copy">
        <p class="eyebrow news-hero__eyebrow">更新动态 · 版本档案</p>
        <h1>改了什么，回来一眼就能接上</h1>
        <p class="news-hero__lede">
          平板端适配什么时候换、规则改到哪一步、产品线资料挪到哪个入口，这些变化直接影响你下次打开页面的手感。百灵牛牛电玩把每一轮调整按主题归到固定位置上，附上版本编号和发布先后，让你出发前先看清最近动过什么。
        </p>
        <ul class="news-hero__meta">
          <li class="meta-pill"><b>7</b> 条本轮收录</li>
          <li class="meta-pill"><b>12</b> 个月版本档案</li>
          <li class="meta-pill">最近一次发布 <b>3 天前</b></li>
        </ul>
      </div>
      <figure class="news-hero__figure">
        <div class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="发光数据线连接多个更新条目的夜航仪表盘场景">
        </div>
        <figcaption class="coord news-caption">更新索引 · 夜航资料库</figcaption>
      </figure>
    </header>
  </div>

  <div class="container">
    <nav class="topic-band" aria-label="按主题跳转">
      <ul class="topic-list">
        <li><a class="topic-chip" href="#update-adapt"><span class="topic-chip__dot topic-chip__dot--adapt"></span>适配清单<span class="topic-chip__count">12 类设备</span></a></li>
        <li><a class="topic-chip" href="#rule-track"><span class="topic-chip__dot topic-chip__dot--rule"></span>规则修订<span class="topic-chip__count">1860 条编号</span></a></li>
        <li><a class="topic-chip" href="#update-line"><span class="topic-chip__dot topic-chip__dot--line"></span>产品线<span class="topic-chip__count">4 个入口</span></a></li>
        <li><a class="topic-chip" href="#member-center"><span class="topic-chip__dot topic-chip__dot--member"></span>会员中心<span class="topic-chip__count">近 12 个月</span></a></li>
        <li><a class="topic-chip" href="#update-library"><span class="topic-chip__dot topic-chip__dot--lib"></span>资料库<span class="topic-chip__count">320 份资料</span></a></li>
      </ul>
    </nav>
  </div>

  <div class="container">
    <section class="news-feed" aria-labelledby="feed-title">
      <div class="section-head">
        <h2 id="feed-title">最近发布</h2>
        <p class="section-lede">由近及远排列，每条都带分类与版本编号。先看置顶那条，再顺着时间往下扫，哪一轮跟自己有关一目了然。</p>
      </div>

      <article class="lead-update" id="update-adapt" data-reveal>
        <div class="lead-update__top">
          <span class="tag tag--adapt">适配清单</span>
          <span class="lead-update__pin mono">置顶 · 适配档案 V12</span>
        </div>
        <h3><a href="/experience/">平板端适配清单本轮更新：12 类设备、6 种浏览器与横竖屏触控逐项走查</a></h3>
        <p>
          这一轮把平板端的操作路径重新过了一遍，横屏与竖屏分别记录点击热区和侧栏宽度。首屏平均加载时间缩短 38%，资源请求数减少 27%，翻转屏幕时当前阅读位置不会丢失。
        </p>
        <ul class="lead-update__facts">
          <li><span class="mono">12</span> 类平板设备分栏列出</li>
          <li><span class="mono">6</span> 种主流浏览器回归通过</li>
          <li><span class="mono">3</span> 档屏幕尺寸独立断点</li>
        </ul>
        <p class="news-item__time mono">3 天前发布 · 适配档案第 12 期</p>
      </article>

      <div class="feed-group">
        <h3 class="feed-group__title">本周内</h3>

        <article class="news-item" id="entry-rules" data-reveal>
          <div class="news-item__side">
            <span class="tag tag--rule">规则修订</span>
            <span class="news-item__time mono">2 天前</span>
          </div>
          <div class="news-item__body">
            <h4><a href="/experience/">玩法规则页本轮修订 3 处，步骤顺序与编号同步对齐</a></h4>
            <p>开局阶段的三个步骤合并为两步，章节之间的跳转目标重新指向正文对应段落。按产品线、章节、步骤三级编号，可以直接定位到改动的那一步。</p>
            <span class="news-item__ver mono">R-07 ~ R-09</span>
          </div>
        </article>

        <article class="news-item news-item--offset" id="update-line" data-reveal>
          <div class="news-item__side">
            <span class="tag tag--line">产品线</span>
            <span class="news-item__time mono">4 天前</span>
          </div>
          <div class="news-item__body">
            <h4><a href="/experience/">新版棋牌电玩产品线并入平板端资料库，四个入口合到一处</a></h4>
            <p>规则速览、适配清单、版本变更与设备筛选现在挂在同一个索引下。找一条产品线资料不用在几个页面之间来回切换，点一次就能落到具体条目。</p>
            <span class="news-item__ver mono">索引 P-04</span>
          </div>
        </article>

        <article class="news-item" id="entry-browser" data-reveal>
          <div class="news-item__side">
            <span class="tag tag--adapt">适配清单</span>
            <span class="news-item__time mono">5 天前</span>
          </div>
          <div class="news-item__body">
            <h4><a href="/help/">6 种主流浏览器回归测试完成，竖屏输入框遮挡已处理</a></h4>
            <p>竖屏下键盘弹起时不再挡住输入位置，横屏下侧栏收起后正文宽度自动补足。浏览器版本较旧时，页面会退到更轻的渲染方式继续可用。</p>
            <span class="news-item__ver mono">A-11</span>
          </div>
        </article>
      </div>

      <div class="feed-group">
        <h3 class="feed-group__title">本月内</h3>

        <article class="news-item" id="update-library" data-reveal>
          <div class="news-item__side">
            <span class="tag tag--lib">资料库</span>
            <span class="news-item__time mono">本月中旬</span>
          </div>
          <div class="news-item__body">
            <h4><a href="/experience/">二级条目扩充到 48 条，检索步骤压缩为两步</a></h4>
            <p>9 个一级分类下现在挂着 48 个二级条目与 320 份可检索资料。从分类点进去或直接搜关键词都能落到条目，中间不再有中转页。</p>
            <span class="news-item__ver mono">L-02</span>
          </div>
        </article>

        <article class="news-item news-item--offset" id="entry-quarter" data-reveal>
          <div class="news-item__side">
            <span class="tag tag--rule">规则修订</span>
            <span class="news-item__time mono">本月初</span>
          </div>
          <div class="news-item__body">
            <h4><a href="/help/">季度版本档案汇总发布，1860 条规则按三级编号归位</a></h4>
            <p>本季度累计整理 1860 条规则，按产品线、章节、步骤重新对齐编号。跨版本对比时按编号搜索即可，不必从头通读。</p>
            <span class="news-item__ver mono">季度档案 Q-04</span>
          </div>
        </article>

        <article class="news-item" id="entry-member" data-reveal>
          <div class="news-item__side">
            <span class="tag tag--member">会员中心</span>
            <span class="news-item__time mono">上月</span>
          </div>
          <div class="news-item__body">
            <h4><a href="/help/">变更说明支持按设备类型筛选，回访先看差异再决定读多少</a></h4>
            <p>变更说明保留最近 12 个月记录，可按版本号、设备类型和栏目三类条件缩小范围。只想确认自己那台平板有没有受影响，筛一次就够。</p>
            <span class="news-item__ver mono">M-08</span>
          </div>
        </article>

        <article class="news-item news-item--offset" id="entry-breakpoint" data-reveal>
          <div class="news-item__side">
            <span class="tag tag--adapt">适配清单</span>
            <span class="news-item__time mono">上月</span>
          </div>
          <div class="news-item__body">
            <h4><a href="/experience/">3 档屏幕尺寸断点微调，横屏侧栏宽度重新分配</a></h4>
            <p>小尺寸平板上侧栏改为可收起形态，大尺寸设备保留常驻索引。表格在小屏下改为横向滑动，不再挤压正文列宽。</p>
            <span class="news-item__ver mono">A-10</span>
          </div>
        </article>
      </div>
    </section>
  </div>

  <div class="container">
    <section class="adapt-series" id="adapt-archive" aria-labelledby="adapt-title">
      <div class="adapt-series__copy">
        <p class="eyebrow">专题系列</p>
        <h2 id="adapt-title">平板端适配档案</h2>
        <p class="section-lede">手指比光标粗，横竖屏切换又频繁，平板上的操作手感和桌面端是两回事。这个系列把每一轮针对平板的走查按刊期记下来。</p>
        <ul class="adapt-list">
          <li class="adapt-item">
            <span class="adapt-item__no mono">第 12 期</span>
            <h3>设备覆盖</h3>
            <p>12 类平板逐一走查，按屏幕尺寸与系统版本分组记录表现差异，指出哪类设备需要切换布局。</p>
          </li>
          <li class="adapt-item">
            <span class="adapt-item__no mono">第 11 期</span>
            <h3>触控优化</h3>
            <p>扩大点击热区、给滑动留出容错距离，长按与双击不再误触相邻条目，翻页动作保持连贯。</p>
          </li>
          <li class="adapt-item">
            <span class="adapt-item__no mono">第 10 期</span>
            <h3>横竖屏布局</h3>
            <p>转屏时保留当前阅读位置，索引从常驻改为可收起，正文宽度随屏幕自动补足。</p>
          </li>
        </ul>
      </div>
      <figure class="adapt-series__figure">
        <div class="media-frame media-frame--tall">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="平板设备与触控手势轨迹组成的适配档案示意图" loading="lazy" decoding="async">
        </div>
        <figcaption class="coord news-caption">触控路径与屏幕断点对照</figcaption>
      </figure>
    </section>
  </div>

  <div class="container">
    <section class="rule-track" id="rule-track" aria-labelledby="rules-title">
      <div class="section-head">
        <h2 id="rules-title">规则修订追踪</h2>
        <p class="section-lede">修订按季度汇总成版本档案，每一条改动都带着编号。回访时对照编号看差异，比从头重读省事得多。</p>
      </div>

      <div class="rule-track__grid">
        <div class="rule-table-wrap">
          <table class="data-table">
            <thead>
              <tr>
                <th scope="col">修订类型</th>
                <th scope="col">编号区间</th>
                <th scope="col">本期变化</th>
                <th scope="col">查阅位置</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">步骤顺序调整</th>
                <td class="mono">S-03 ~ S-05</td>
                <td>开局阶段三步并为两步，后续编号顺延</td>
                <td>产品线体验页</td>
              </tr>
              <tr>
                <th scope="row">章节跳转修订</th>
                <td class="mono">C-11 ~ C-12</td>
                <td>跳转目标重新指向正文对应段落</td>
                <td>产品线体验页</td>
              </tr>
              <tr>
                <th scope="row">表述澄清</th>
                <td class="mono">R-07 ~ R-09</td>
                <td>三处说明改写为更直白的操作描述</td>
                <td>会员中心变更说明</td>
              </tr>
              <tr>
                <th scope="row">全库编号归位</th>
                <td class="mono">1860 条</td>
                <td>按产品线、章节、步骤三级重新校验</td>
                <td>帮助中心</td>
              </tr>
            </tbody>
          </table>
        </div>
        <figure class="rule-track__figure">
          <div class="media-frame">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="编号修订条目与版本时间戳排列成的档案索引画面" loading="lazy" decoding="async">
          </div>
          <figcaption class="coord news-caption">编号 · 版本 · 归档季度</figcaption>
        </figure>
      </div>
    </section>
  </div>

  <div class="container">
    <section class="member-center" id="member-center" aria-labelledby="member-title">
      <div class="member-center__copy">
        <p class="eyebrow">会员中心</p>
        <h2 id="member-title">变更摘要怎么查</h2>
        <p>回访用户进会员中心，最近 12 个月的变更说明都在里面。三个条件叠着用，能很快筛到自己关心的那几条。</p>
        <ul class="member-tools">
          <li class="member-tool"><span class="mono">01</span>按版本号筛——知道上一轮是哪版，直接定位差异。</li>
          <li class="member-tool"><span class="mono">02</span>按设备类型筛——只关心自己那台平板的表现。</li>
          <li class="member-tool"><span class="mono">03</span>按栏目筛——只看规则、适配或资料库其中一类。</li>
        </ul>
        <p class="member-center__note">平板端首屏平均加载时间缩短 38%，资源请求数减少 27%，筛选结果点开就是完整条目，不用等二次加载。</p>
      </div>
      <figure class="member-center__figure">
        <div class="media-frame">
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="会员中心变更说明面板与通知胶囊组成的抽象界面" loading="lazy" decoding="async">
        </div>
        <figcaption class="coord news-caption">变更说明面板 · 通知胶囊</figcaption>
      </figure>
    </section>
  </div>

  <div class="container">
    <section class="news-next" aria-labelledby="next-title">
      <div class="section-head">
        <h2 id="next-title">下一站往哪走</h2>
        <p class="section-lede">看完动态想动手查，四个入口分别对着不同的下一步。</p>
      </div>
      <ul class="next-grid">
        <li class="next-card">
          <h3>查适配清单</h3>
          <p>按设备类型找到自己那台平板对应的操作建议与断点表现。</p>
          <a class="btn btn--ghost btn--sm" href="/experience/">看适配清单</a>
        </li>
        <li class="next-card">
          <h3>规则怎么用</h3>
          <p>查询方法、编号含义、平板端资料库的使用疑问，常见问题集中在这里。</p>
          <a class="btn btn--ghost btn--sm" href="/help/">去帮助中心</a>
        </li>
        <li class="next-card">
          <h3>资料怎么维护</h3>
          <p>了解内容团队的编辑流程、互校机制和这些年一路走来的调整。</p>
          <a class="btn btn--ghost btn--sm" href="/mission/">看品牌愿景</a>
        </li>
        <li class="next-card">
          <h3>还有具体问题</h3>
          <p>变更说明看不懂、某条资料对不上，直接找服务团队说清楚。</p>
          <a class="btn btn--ghost btn--sm" href="/consult/">联系服务团队</a>
        </li>
      </ul>
    </section>
  </div>
</main>

.page-news {
  --news-gap: clamp(20px, 3vw, 34px);
  --news-line-soft: rgba(27, 91, 80, .65);
  overflow-x: clip;
}

.page-news .news-top {
  padding-top: clamp(14px, 3vw, 26px);
}

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  align-items: end;
  padding: clamp(22px, 4vw, 44px) 0 clamp(30px, 5vw, 56px);
}

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

.page-news .news-hero h1 {
  margin: 0 0 18px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.1rem, 6.2vw, 4.4rem);
  line-height: .98;
  letter-spacing: -.02em;
  color: var(--white);
  text-wrap: balance;
}

.page-news .news-hero__lede {
  margin: 0 0 22px;
  max-width: 50ch;
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.8;
  color: var(--muted);
}

.page-news .news-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .meta-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--muted);
  background: rgba(15, 51, 42, .5);
}

.page-news .meta-pill b {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--cyan-soft);
}

.page-news .news-hero__figure {
  position: relative;
  margin: 0;
}

.page-news .news-hero__figure::after {
  content: "";
  position: absolute;
  right: -4%;
  top: -10px;
  width: 48%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan));
  transform: rotate(-8deg);
  opacity: .85;
}

.page-news .news-hero__figure .media-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
}

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

.page-news .news-caption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 主题索引带 ---------- */
.page-news .topic-band {
  margin-bottom: clamp(32px, 6vw, 64px);
  border-top: 1px solid var(--news-line-soft);
  border-bottom: 1px solid var(--news-line-soft);
  background: linear-gradient(90deg, rgba(15, 51, 42, .78), rgba(8, 33, 27, .08));
}

.page-news .topic-list {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 14px 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.page-news .topic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  white-space: nowrap;
  font-size: 14px;
  color: var(--white);
  text-decoration: none;
  background: rgba(8, 33, 27, .6);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}

.page-news .topic-chip:hover,
.page-news .topic-chip:focus-visible {
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(38, 224, 200, .35), 0 12px 26px -18px rgba(38, 224, 200, .9);
  transform: translateY(-2px);
}

.page-news .topic-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}

.page-news .topic-chip__dot--adapt { background: var(--cyan); }
.page-news .topic-chip__dot--rule { background: var(--amber); }
.page-news .topic-chip__dot--line { background: var(--coral); }
.page-news .topic-chip__dot--member { background: var(--cyan-soft); }
.page-news .topic-chip__dot--lib { background: var(--muted); }

.page-news .topic-chip__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- 分类标签 ---------- */
.page-news .tag--adapt {
  color: var(--cyan);
  background: rgba(38, 224, 200, .12);
}

.page-news .tag--rule {
  color: var(--amber);
  background: rgba(231, 179, 74, .14);
}

.page-news .tag--line {
  color: var(--coral);
  background: rgba(255, 122, 89, .14);
}

.page-news .tag--member {
  color: var(--cyan-soft);
  background: rgba(168, 245, 233, .12);
}

.page-news .tag--lib {
  color: var(--muted);
  background: rgba(120, 149, 138, .18);
}

/* ---------- 更新列表 ---------- */
.page-news .news-feed {
  padding-bottom: clamp(34px, 6vw, 64px);
}

.page-news .lead-update {
  position: relative;
  margin-top: clamp(22px, 4vw, 36px);
  padding: clamp(20px, 3.4vw, 38px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--panel) 0%, var(--panel-2) 58%, var(--bg-deep) 100%);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.page-news .lead-update::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(38, 224, 200, .2), transparent 70%);
  pointer-events: none;
}

.page-news .lead-update__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.page-news .lead-update__pin {
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--amber);
}

.page-news .lead-update h3 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.18;
  letter-spacing: -.01em;
}

.page-news .lead-update h3 a {
  color: var(--white);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.page-news .lead-update h3 a:hover,
.page-news .lead-update h3 a:focus-visible {
  color: var(--cyan-soft);
}

.page-news .lead-update p {
  position: relative;
  margin: 0 0 16px;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .lead-update__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.page-news .lead-update__facts li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(27, 91, 80, .8);
  font-size: 14px;
  color: var(--white);
  background: rgba(5, 10, 9, .35);
}

.page-news .lead-update__facts .mono {
  font-size: 15px;
  font-weight: 700;
  color: var(--cyan);
}

.page-news .feed-group {
  margin-top: clamp(26px, 4vw, 44px);
}

.page-news .feed-group__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--cyan);
}

.page-news .feed-group__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.page-news .news-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 20px 0 20px 18px;
  border-bottom: 1px solid var(--news-line-soft);
}

.page-news .news-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
  transition: background .24s var(--ease), box-shadow .24s var(--ease);
}

.page-news .news-item:hover::before,
.page-news .news-item:focus-within::before {
  background: var(--cyan);
  box-shadow: 0 0 16px rgba(38, 224, 200, .85);
}

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

.page-news .news-item__time {
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--coral);
}

.page-news .news-item__body h4 {
  margin: 0 0 7px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.08rem, 1.9vw, 1.35rem);
  line-height: 1.28;
}

.page-news .news-item__body h4 a {
  color: var(--white);
  text-decoration: none;
  background-image: linear-gradient(var(--cyan), var(--cyan));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size .28s var(--ease), color .2s var(--ease);
}

.page-news .news-item__body h4 a:hover,
.page-news .news-item__body h4 a:focus-visible {
  color: var(--cyan-soft);
  background-size: 100% 1px;
}

.page-news .news-item__body p {
  margin: 0 0 8px;
  max-width: 66ch;
  font-size: 14.5px;
  line-height: 1.78;
  color: var(--muted);
}

.page-news .news-item__ver {
  display: inline-block;
  padding: 3px 9px;
  border: 1px dashed rgba(231, 179, 74, .5);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--amber);
}

/* ---------- 平板适配专题 ---------- */
.page-news .adapt-series {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  padding: clamp(30px, 5vw, 56px) 0;
  border-top: 1px solid var(--news-line-soft);
}

.page-news .adapt-series__copy h2,
.page-news .rule-track h2,
.page-news .member-center h2,
.page-news .news-next h2 {
  margin: 0 0 12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--white);
}

.page-news .adapt-series .eyebrow {
  margin: 0 0 10px;
}

.page-news .adapt-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.page-news .adapt-item {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(120deg, rgba(15, 51, 42, .85), rgba(8, 33, 27, .35));
  transition: border-color .24s var(--ease), transform .24s var(--ease);
}

.page-news .adapt-item:hover {
  border-color: rgba(38, 224, 200, .55);
  transform: translateY(-3px);
}

.page-news .adapt-item__no {
  display: inline-block;
  margin-bottom: 6px;
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--amber);
}

.page-news .adapt-item h3 {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--white);
}

.page-news .adapt-item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .adapt-series__figure {
  margin: 0;
}

.page-news .adapt-series__figure .media-frame,
.page-news .rule-track__figure .media-frame,
.page-news .member-center__figure .media-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}

.page-news .adapt-series__figure img,
.page-news .rule-track__figure img,
.page-news .member-center__figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ---------- 规则修订追踪 ---------- */
.page-news .rule-track {
  padding: clamp(30px, 5vw, 56px) 0;
  border-top: 1px solid var(--news-line-soft);
}

.page-news .rule-track__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  margin-top: clamp(20px, 3vw, 32px);
  align-items: start;
}

.page-news .rule-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(11, 42, 35, .6);
}

.page-news .rule-table-wrap .data-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}

.page-news .rule-table-wrap th,
.page-news .rule-table-wrap td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(27, 91, 80, .7);
  vertical-align: top;
  line-height: 1.6;
}

.page-news .rule-table-wrap thead th {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--cyan);
  background: rgba(5, 10, 9, .45);
  white-space: nowrap;
}

.page-news .rule-table-wrap tbody th {
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
}

.page-news .rule-table-wrap tbody td {
  color: var(--muted);
}

.page-news .rule-table-wrap tbody td.mono {
  color: var(--amber);
  white-space: nowrap;
  font-size: 13px;
}

.page-news .rule-table-wrap tbody tr:hover th,
.page-news .rule-table-wrap tbody tr:hover td {
  background: rgba(38, 224, 200, .06);
}

.page-news .rule-track__figure {
  margin: 0;
}

/* ---------- 会员中心 ---------- */
.page-news .member-center {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--news-gap);
  padding: clamp(30px, 5vw, 56px) 0;
  border-top: 1px solid var(--news-line-soft);
  align-items: center;
}

.page-news .member-center__copy .eyebrow {
  margin: 0 0 10px;
}

.page-news .member-center__copy > p {
  margin: 0 0 16px;
  max-width: 56ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--muted);
}

.page-news .member-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.page-news .member-tool {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-left: 2px solid var(--cyan);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: linear-gradient(90deg, rgba(38, 224, 200, .1), transparent 70%);
  font-size: 14px;
  line-height: 1.7;
  color: var(--white);
}

.page-news .member-tool .mono {
  flex: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--amber);
  padding-top: 2px;
}

.page-news .member-center__note {
  margin: 0;
  padding: 12px 16px;
  border: 1px dashed rgba(120, 149, 138, .5);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--cyan-soft);
}

.page-news .member-center__figure {
  margin: 0;
}

/* ---------- 下一站 ---------- */
.page-news .news-next {
  padding: clamp(30px, 5vw, 60px) 0 clamp(44px, 7vw, 84px);
  border-top: 1px solid var(--news-line-soft);
}

.page-news .next-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: clamp(20px, 3vw, 30px) 0 0;
  padding: 0;
  list-style: none;
}

.page-news .next-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--panel) 0%, rgba(8, 33, 27, .5) 100%);
  transition: border-color .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}

.page-news .next-card:hover {
  border-color: rgba(38, 224, 200, .6);
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -34px rgba(38, 224, 200, .8);
}

.page-news .next-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.18rem;
  color: var(--white);
}

.page-news .next-card p {
  margin: 0;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted);
}

.page-news .next-card .btn {
  align-self: flex-start;
}

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

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

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

  .page-news .news-item {
    grid-template-columns: 168px minmax(0, 1fr);
    gap: clamp(16px, 3vw, 32px);
    padding: 22px 0 22px 22px;
  }

  .page-news .news-item--offset {
    margin-left: clamp(16px, 4vw, 56px);
  }

  .page-news .news-item__side {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-top: 2px;
  }
}

@media (min-width: 1000px) {
  .page-news .adapt-series {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
  }

  .page-news .rule-track__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  }

  .page-news .member-center {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

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

@media (prefers-reduced-motion: reduce) {
  .page-news .topic-chip,
  .page-news .adapt-item,
  .page-news .next-card,
  .page-news .news-item::before,
  .page-news .news-item__body h4 a {
    transition: none;
  }

  .page-news .topic-chip:hover,
  .page-news .adapt-item:hover,
  .page-news .next-card:hover {
    transform: none;
  }
}