.page-news {
  --news-rule: rgba(127, 169, 161, .18);
  --news-rule-strong: rgba(127, 169, 161, .34);
  --news-dim: rgba(242, 245, 241, .66);
  --news-pad-y: 34px;
  color: var(--text);
}

/* ---------- 刊头 ---------- */
.page-news .news-mast {
  position: relative;
  padding: 24px 0 var(--news-pad-y);
  overflow: hidden;
}

.page-news .news-mast::before {
  content: "";
  position: absolute;
  top: -170px;
  left: -30%;
  width: 160%;
  height: 380px;
  background: linear-gradient(115deg, rgba(18, 101, 92, .72) 0%, rgba(11, 74, 69, .38) 48%, rgba(6, 48, 46, 0) 78%);
  transform: rotate(-6deg);
  pointer-events: none;
}

.page-news .news-mast__grid {
  position: relative;
  display: grid;
  gap: 28px;
}

.page-news .news-mast__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--c-gold-soft);
}

.page-news .news-mast__kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-gold);
  flex: none;
}

.page-news .news-mast__title {
  margin: 0 0 18px;
  line-height: 1.24;
  letter-spacing: -.01em;
  max-width: 18em;
}

.page-news .news-mast__lead {
  margin: 0 0 14px;
  max-width: 40em;
  color: var(--text-muted);
}

.page-news .news-mast__hint {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--c-gold);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-mist);
  max-width: 34em;
}

.page-news .news-mast__aside {
  align-self: end;
}

.page-news .news-mast__rhythm {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-rule-strong);
}

.page-news .news-mast__rhythm li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--news-rule);
  font-size: 14px;
  line-height: 1.6;
}

.page-news .news-mast__rhythm li > span:first-child {
  color: var(--news-dim);
}

.page-news .news-mast__rhythm .num {
  color: var(--c-gold-soft);
  font-size: 13.5px;
  letter-spacing: .02em;
  flex: none;
}

/* ---------- 本周期 ---------- */
.page-news .news-latest__inner {
  padding: 30px 0 38px;
}

.page-news .news-latest__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--news-rule-strong);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
}

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

.page-news .news-latest__sep {
  width: 20px;
  height: 1px;
  background: var(--news-rule-strong);
  flex: none;
}

.page-news .news-latest__scope {
  color: var(--news-dim);
}

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

.page-news .news-latest__copy > p {
  color: var(--text-muted);
  margin: 0 0 18px;
}

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

.page-news .news-latest__points li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}

.page-news .news-latest__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--c-gold);
}

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

.page-news .news-latest__figure {
  border-radius: var(--r-soft);
  overflow: hidden;
  margin: 0;
}

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

/* ---------- 栏目分组 ---------- */
.page-news .news-columns__title {
  margin: 0 0 22px;
}

.page-news .news-columns__banner {
  margin: 0 0 30px;
  border-radius: var(--r-soft);
  overflow: hidden;
}

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

.page-news .news-columns__tabs {
  margin-top: 6px;
}

.page-news .news-columns__panel {
  padding-top: 22px;
  display: grid;
  gap: 0;
}

.page-news .news-entry {
  padding: 20px 0;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-entry:first-child {
  border-top: 1px solid var(--news-rule);
}

.page-news .news-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.page-news .news-entry__tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--c-gold);
  padding-left: 14px;
  position: relative;
}

.page-news .news-entry__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--c-gold);
}

.page-news .news-entry__time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--c-mist);
}

.page-news .news-entry__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--c-white);
  max-width: 42em;
}

.page-news .news-entry__more {
  font-size: 14.5px;
}

.page-news .news-entry__more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-mist);
  list-style: none;
  padding: 3px 0;
}

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

.page-news .news-entry__more summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  transform: rotate(-45deg);
  transition: transform .2s var(--ease-tide);
  flex: none;
}

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

.page-news .news-entry__more summary:focus-visible {
  outline: 2px solid var(--c-gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.page-news .news-entry__more p {
  margin: 10px 0 0;
  max-width: 46em;
  color: var(--news-dim);
  line-height: 1.85;
  border-left: 1px solid var(--news-rule-strong);
  padding-left: 14px;
}

/* ---------- 时间轴 ---------- */
.page-news .news-timeline__title {
  margin: 0 0 12px;
}

.page-news .news-timeline__lead {
  max-width: 42em;
  margin: 0 0 24px;
  color: var(--text-muted);
}

.page-news .news-timeline__figure {
  margin: 0 0 8px;
  border-radius: var(--r-soft);
  overflow: hidden;
}

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

.page-news .news-timeline__track {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 26px 0 34px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-top: 1px solid var(--news-rule-strong);
  -webkit-overflow-scrolling: touch;
}

.page-news .news-timeline__item {
  flex: 0 0 216px;
  scroll-snap-align: start;
  position: relative;
  padding: 18px 20px 0 0;
  border-left: 1px solid transparent;
}

.page-news .news-timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--news-rule-strong);
}

.page-news .news-timeline__node {
  position: absolute;
  top: -5px;
  left: -4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-deep);
  border: 1px solid var(--c-gold);
  display: block;
}

.page-news .news-timeline__phase {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--c-gold);
}

.page-news .news-timeline__item .tide-timeline__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--c-white);
}

.page-news .news-timeline__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--news-dim);
}

/* ---------- 体例 ---------- */
.page-news .news-style__grid {
  align-items: start;
  gap: 28px;
}

.page-news .news-style__plate {
  background: var(--c-under);
  border-left: 2px solid var(--c-gold);
}

.page-news .news-style__plate-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--news-dim);
}

.page-news .news-style__body > p {
  margin: 0 0 22px;
  max-width: 44em;
  color: var(--text-muted);
}

.page-news .news-style__rules {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--news-rule-strong);
}

.page-news .news-style__rule {
  padding: 16px 0;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-style__rule-label {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--c-neon);
}

.page-news .news-style__rule > p:last-child {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--news-dim);
  max-width: 46em;
}

/* ---------- 回查与订阅 ---------- */
.page-news .news-recall__title {
  margin: 0 0 24px;
}

.page-news .news-recall__grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--news-rule-strong);
}

.page-news .news-recall__card {
  padding: 20px 0;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-recall__index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--c-mist);
}

.page-news .news-recall__card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--c-white);
}

.page-news .news-recall__card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--news-dim);
  max-width: 42em;
}

.page-news .news-recall__card--accent {
  background: linear-gradient(100deg, rgba(18, 101, 92, .55), rgba(36, 26, 59, .55));
  border-left: 2px solid var(--c-gold);
  padding: 22px 20px;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-recall__card--accent .news-recall__index {
  color: var(--c-gold);
}

.page-news .news-recall__action {
  margin: 16px 0 0;
}

.page-news .news-recall__foot {
  margin: 26px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-mist);
  max-width: 46em;
}

.page-news .news-recall__foot a {
  color: var(--c-gold-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

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

/* ---------- 收束 ---------- */
.page-news .news-coda {
  padding: 8px 0 56px;
}

.page-news .news-coda__figure {
  margin: 0;
  border-radius: 26px 6px 26px 6px;
  overflow: hidden;
  position: relative;
}

.page-news .news-coda__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 48, 46, 0) 45%, rgba(6, 48, 46, .72) 100%);
  pointer-events: none;
}

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

.page-news .news-coda__figure .media-frame__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  margin: 0;
  color: var(--c-white);
  font-size: 13.5px;
  line-height: 1.7;
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-news .news-recall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  .page-news .news-recall__card {
    padding: 22px 0;
    border-top: none;
  }

  .page-news .news-recall__card--accent {
    padding: 24px 22px;
  }
}

@media (min-width: 860px) {
  .page-news {
    --news-pad-y: 46px;
  }

  .page-news .news-mast__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    gap: 48px;
  }

  .page-news .news-mast__title {
    font-size: 46px;
    line-height: 1.18;
  }

  .page-news .news-latest__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    gap: 40px;
  }

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

  .page-news .news-entry:nth-child(2) {
    border-top: 1px solid var(--news-rule);
  }

  .page-news .news-columns__panel[data-count="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-news .news-style__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 48px;
  }

  .page-news .news-style__plate {
    position: sticky;
    top: 96px;
  }

  .page-news .news-recall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 36px;
  }

  .page-news .news-recall__card--accent {
    grid-column: span 3;
  }

  .page-news .news-timeline__item {
    flex-basis: 240px;
  }
}

@media (min-width: 1100px) {
  .page-news .news-mast__title {
    font-size: 52px;
  }

  .page-news .news-entry__title {
    font-size: 20px;
  }

  .page-news .news-timeline__item {
    flex-basis: 262px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-entry__more summary::before {
    transition: none;
  }
}
</main>
<<<END>>>

等等——顺序搞错了。标记要求先 ``，再 ``。我输出结尾多了一个 `</main>`，还有一个伪造的 `<<<END>>>`。得修正一下。

重新输出。

另外，`[data-count="3"]` 没有在任何地方定义——我要去掉它，或者干脆不用。

还有，`.news-columns__panel:first-child` 在网格里的边框处理是有点小问题：桌面端两列布局时，第二个条目的 `border-top` 应该是……实际上如果是两列布局，第一行是条目 1 和条目 2。我给所有条目都设了 `border-bottom`（这没问题），但因为第一个条目有 `border-top`，第二列顶部其实没有那根线。不过我加的那条 `.news-entry:nth-child(2) { border-top: 1px solid }` 倒是能处理它。但奇数个条目的话，最后一个单独的条目就悬着了。算了，能接受。

其实再看一下，`.news-columns__panel` 只是对 `.tabs__panel` 的扩展。好的。

还有一个细节：`.tabs__panel` 用 `display: grid` —— 如果共享 CSS 里给 `[hidden]` 设了 `display:none`，那没问题。

我重新干净地输出一遍，去掉那个 `</main>` 的重复。

另外，`.news-columns__panel` 在桌面端用了 `grid-template-columns: repeat(2, ...)`，配上 gap，效果应该可以。

我重新输出一遍，去掉 `</main>` 的重复。

另外，`.news-mast__title` 的 `max-width: 18em` —— 在 52px 字体下，18em 大约相当于 936px。在 7fr 栏里没问题。

还有一点：`.page-news .news-mast__rhythm .num` —— `.num` 是全局类（等宽字体）。好的。

现在再确认一下：首屏图片——`img` 上没有 `loading="lazy"`，没问题。

最终重新输出。
<main id="main-content" class="page-news">

  <div class="wrap">
    <nav class="breadcrumb" aria-label="当前位置">
      <ol class="breadcrumb__list">
        <li class="breadcrumb__item"><a class="breadcrumb__link" href="/">首页</a></li>
        <li class="breadcrumb__item" aria-current="page">内容专栏</li>
      </ol>
    </nav>
  </div>

  <section class="news-mast">
    <div class="wrap">
      <div class="news-mast__grid">
        <div class="news-mast__body">
          <p class="news-mast__kicker">持续出版 · 中文站专栏</p>
          <h1 class="display-title news-mast__title">班次、版本与文档的每次改动，都留下一条能回查的条目</h1>
          <p class="lead news-mast__lead">欧云娱乐站把内容专栏当成一份按期出刊的读物来经营：排班表按周落笔，苹果版每一次参数面板的调整都留档，分类文档的增补与改版按月归拢。读者不必记住某一期，只要按栏目就能顺着往回翻。</p>
          <p class="news-mast__hint">条目一律用相对时间线索标注 —— 本周期、上一版、本赛季阶段，不写死具体日子。</p>
        </div>
        <aside class="news-mast__aside" aria-label="专栏出刊节律">
          <ul class="news-mast__rhythm">
            <li><span>排班表</span><span class="num">每周一次</span></li>
            <li><span>分类条目增补</span><span class="num">每周 3–5 条</span></li>
            <li><span>帮助文档改版</span><span class="num">每月约 10 篇</span></li>
            <li><span>专栏条目</span><span class="num">每月 6–8 篇</span></li>
            <li><span>案例合集</span><span class="num">每月一次</span></li>
          </ul>
        </aside>
      </div>
    </div>
  </section>

  <section class="zone zone--under news-latest" id="latest" aria-labelledby="latest-title">
    <div class="wrap news-latest__inner" data-reveal>
      <div class="news-latest__bar">
        <span class="news-latest__cycle">本周期 · 周三 18:00 发布</span>
        <span class="news-latest__sep" aria-hidden="true"></span>
        <span class="news-latest__scope">早班 · 中班 · 晚班 · 通宵班 ／ 六类桌台 ／ 桌台编号与席位代号</span>
      </div>
      <div class="news-latest__grid">
        <div class="news-latest__copy">
          <h2 class="section-title" id="latest-title">下一周期排班表已落到排班栏目</h2>
          <p>最新一期的表归档完毕，位置和往期一致，不会因为页面改版而挪动。四个时段逐行铺开，六类桌台各自成组，席位用两位代号表示，读者按桌台编号就能定位到想看的那一栏。</p>
          <ul class="news-latest__points">
            <li>更新时点固定在工作日傍晚，逢周期顺延也不会提前发布。</li>
            <li>栏目位置固定在排班栏目内，历史周期一并保留，可逐周向前回查。</li>
            <li>表内只出现时段、桌台编号与席位代号，不含任何姓名与肖像。</li>
            <li>若发现代号与桌台对不上，纠错反馈会在两个工作日内给出处理结果。</li>
          </ul>
          <p class="news-latest__action"><a class="btn btn--ghost" href="/knowledge/">查看班次常见问题</a></p>
        </div>
        <figure class="media-frame media-frame--wide news-latest__figure">
          <img src="{zhanqunpic:h:600w:1000}" width="1000" height="600" alt="排班表局部示意：横向为四个时段，纵向为桌台编号与两位席位代号，角标写着周三更新">
          <figcaption class="media-frame__caption">排班表以时段为行、席位代号为列，角标注明本周期更新时点</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section news-columns" id="columns" aria-labelledby="columns-title">
    <div class="wrap">
      <div class="section-marker">
        <p class="section-marker__label">按栏目回查</p>
        <p class="section-marker__note">四个栏目各自归拢条目，切到哪一栏就只读哪一栏</p>
      </div>

      <h2 class="section-title news-columns__title" id="columns-title">班次、版本、分类文档与案例观察</h2>

      <figure class="media-frame media-frame--wide news-columns__banner">
        <img src="{zhanqunpic:h:450w:1400}" width="1400" height="450" alt="夜间霓虹灯牌虚焦光斑，暖橙与深青交叠，没有可读文字与人物" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">专栏在夜间出刊，条目按主题归档而不是按时间堆叠</figcaption>
      </figure>

      <div class="tabs news-columns__tabs" data-tabs>
        <div class="tabs__list" role="tablist" aria-label="专栏栏目分组">
          <button class="tabs__tab" type="button" role="tab" id="tab-shifts" aria-controls="panel-shifts" aria-selected="true">班次</button>
          <button class="tabs__tab" type="button" role="tab" id="tab-versions" aria-controls="panel-versions" aria-selected="false" tabindex="-1">版本</button>
          <button class="tabs__tab" type="button" role="tab" id="tab-docs" aria-controls="panel-docs" aria-selected="false" tabindex="-1">分类文档</button>
          <button class="tabs__tab" type="button" role="tab" id="tab-cases" aria-controls="panel-cases" aria-selected="false" tabindex="-1">案例观察</button>
        </div>

        <div class="tabs__panel news-columns__panel" role="tabpanel" id="panel-shifts" aria-labelledby="tab-shifts" tabindex="0">
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">班次</span><span class="news-entry__time">本周期</span></p>
            <h3 class="news-entry__title">下一周期排班表发布，四个时段与六类桌台全部到位</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>早班、中班、晚班、通宵班各自对应所属桌台类别，席位代号延续上一周期的编排逻辑，整体顺序未作调整。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">班次</span><span class="news-entry__time">本周期</span></p>
            <h3 class="news-entry__title">席位代号编排规则随表附上</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>每张桌台给出唯一编号，席位用两位代号表示。规则说明与表格同页，第一次查看也能对上行列。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">班次</span><span class="news-entry__time">上一周期</span></p>
            <h3 class="news-entry__title">旧周期排班表归档保留，不做下线处理</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>往期表格按周留在排班栏目内，需要核对历史安排时直接向前翻，不必另行索要。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">班次</span><span class="news-entry__time">本周期</span></p>
            <h3 class="news-entry__title">表内错误的反馈处理口径</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>若席位代号与桌台对不上，可通过联系通道提出，纠错反馈在两个工作日内回复处理结果。</p>
            </details>
          </article>
        </div>

        <div class="tabs__panel news-columns__panel" role="tabpanel" id="panel-versions" aria-labelledby="tab-versions" tabindex="0" hidden>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">版本</span><span class="news-entry__time">最新一版</span></p>
            <h3 class="news-entry__title">参数面板在小屏上重排，四项输入纵向堆叠</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>窄屏下有效流水、返水比例、结算周期与分类系数改为逐项向下排列，对比结果仍保持三组并排可见。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">版本</span><span class="news-entry__time">上一版</span></p>
            <h3 class="news-entry__title">结果导出与历史记录上线</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>算好的三组方案可导出留档，历史记录按时间顺序保留，方便与后续一轮的参数对照着看。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">版本</span><span class="news-entry__time">较早一版</span></p>
            <h3 class="news-entry__title">返水参数对比面板加入苹果版</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>输入四项参数后约两分钟得到结果，三组方案并排展示，省去反复切页比对的步骤。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">版本</span><span class="news-entry__time">起点一版</span></p>
            <h3 class="news-entry__title">分类快速检索成为苹果版第一个入口</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>按分类名直接定位，不必从一级分类逐层展开，查找路径从三步缩到一步。</p>
            </details>
          </article>
        </div>

        <div class="tabs__panel news-columns__panel" role="tabpanel" id="panel-docs" aria-labelledby="tab-docs" tabindex="0" hidden>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">分类文档</span><span class="news-entry__time">本周期</span></p>
            <h3 class="news-entry__title">分类条目按周增补，本轮入库四条</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>新增条目落在新手专区与时段活动两个一级分类下，每条都配一段活动规则摘要。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">分类文档</span><span class="news-entry__time">本赛季</span></p>
            <h3 class="news-entry__title">帮助文档按月改版，本轮重写约十篇</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>改版集中在步骤顺序与条款表述，检索标题保持不变，已收藏的入口不受影响。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">分类文档</span><span class="news-entry__time">本周期</span></p>
            <h3 class="news-entry__title">七个一级与三十一个二级分类的结构保持稳定</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>二级分类下的条目累计两百一十四条，帮助文档累计三百余篇，结构性调整会单独出一条记录。</p>
            </details>
          </article>
        </div>

        <div class="tabs__panel news-columns__panel" role="tabpanel" id="panel-cases" aria-labelledby="tab-cases" tabindex="0" hidden>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">案例观察</span><span class="news-entry__time">本月</span></p>
            <h3 class="news-entry__title">案例合集新增六至十例</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>新案例按八个主题分组归入已有目录，摘要只写处理方式与所需材料，不写处理结论。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">案例观察</span><span class="news-entry__time">本赛季</span></p>
            <h3 class="news-entry__title">九十六个案例的目录结构沿用上一版</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>主题分组标题未作改动，检索时既可按主题定位，也可按栏目标签筛出同类情况。</p>
            </details>
          </article>
          <article class="news-entry">
            <p class="news-entry__meta"><span class="news-entry__tag">案例观察</span><span class="news-entry__time">本周期</span></p>
            <h3 class="news-entry__title">领取入口仍在服务清单第二个位置</h3>
            <details class="news-entry__more">
              <summary>读摘要</summary>
              <p>工作日北京时间 10:00 至 22:00 由值班客服处理案例合集的领取咨询。</p>
            </details>
          </article>
        </div>
      </div>
    </div>
  </section>

  <section class="section news-timeline" id="timeline" aria-labelledby="timeline-title">
    <div class="wrap">
      <div class="section-marker">
        <p class="section-marker__label">沿革刻度</p>
        <p class="section-marker__note">从建站到最近一次改版，顺着刻度往右读</p>
      </div>
      <h2 class="section-title news-timeline__title" id="timeline-title">版本与文档改版排在同一条尺子上</h2>
      <p class="news-timeline__lead">功能迭代与文档调整不在同一份文件里，但对读者来说它们是同一段时间。下面这条尺子把两者并到一处，节点横着排，左右滑动即可看完。</p>

      <figure class="media-frame media-frame--wide news-timeline__figure">
        <img src="{zhanqunpic:h:500w:1400}" width="1400" height="500" alt="横向时间轴信息图，节点标注版本序号与赛季阶段，深青底色配鎏金刻度" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">横向刻度尺：上沿标版本序号，下沿标赛季阶段</figcaption>
      </figure>

      <ol class="tide-timeline news-timeline__track">
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">起笔期</p>
          <h3 class="tide-timeline__title">建站，中文站确定为主线</h3>
          <p class="news-timeline__note">内容从零开始积累，栏目边界一开始就按动作划分，而不是按部门划分。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">改版期</p>
          <h3 class="tide-timeline__title">中文站改版，检索成为固定能力</h3>
          <p class="news-timeline__note">站内检索确定按分类名、文档标题与案例主题三种方式定位，沿用至今。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">版本 3.0</p>
          <h3 class="tide-timeline__title">分类快速检索上线</h3>
          <p class="news-timeline__note">苹果版拿到第一个以查得快为目标的入口，查找不再逐级展开。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">版本 3.2</p>
          <h3 class="tide-timeline__title">返水参数对比面板加入</h3>
          <p class="news-timeline__note">四项参数可输入，三组方案并排比较，计算口径从此固定下来。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">版本 3.5</p>
          <h3 class="tide-timeline__title">结果导出与历史记录</h3>
          <p class="news-timeline__note">参数算完不再一次性丢弃，可留档、可回看，便于跨周期比对。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">排班栏目固定</p>
          <h3 class="tide-timeline__title">周三更新成为惯例</h3>
          <p class="news-timeline__note">排班表在每周三傍晚更新下一周期，栏目位置此后不再变动。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">案例合集成型</p>
          <h3 class="tide-timeline__title">反馈案例归入服务清单第二个入口</h3>
          <p class="news-timeline__note">案例按主题分组，按月补充，处理方式与所需材料分开写。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">版本 3.8</p>
          <h3 class="tide-timeline__title">参数面板适配窄屏</h3>
          <p class="news-timeline__note">小屏上输入项改为纵向堆叠，对比区不会被挤掉。</p>
        </li>
        <li class="tide-timeline__item news-timeline__item">
          <span class="tide-timeline__node news-timeline__node" aria-hidden="true"></span>
          <p class="tide-timeline__time news-timeline__phase">最近一次</p>
          <h3 class="tide-timeline__title">版式与导航重做</h3>
          <p class="news-timeline__note">刊头收细、动作入口前置，四条动线在滚动后直接可见。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="section news-style" id="style" aria-labelledby="style-title">
    <div class="wrap">
      <div class="grid grid--split news-style__grid">
        <div class="plate news-style__plate">
          <p class="plate__label">专栏体例</p>
          <p class="plate__value">一条只写一件事</p>
          <p class="news-style__plate-note">体例定下来之后不随页面改版调整，读者换一页看仍然是同一套写法。</p>
        </div>
        <div class="news-style__body">
          <h2 class="section-title" id="style-title">这里期待看到什么</h2>
          <p>专栏条目不承担宣传任务。每条只交代一件改动：改了什么、影响哪一部分读者、接下来去哪里看细节。篇幅控制在摘要三到五行，展开后不超过一屏。</p>
          <div class="news-style__rules">
            <div class="news-style__rule">
              <p class="news-style__rule-label">时间</p>
              <p>一律使用相对线索标注，例如本周期、上一版、本赛季阶段。翻旧条目时不会因为日期写法不一致而误读顺序。</p>
            </div>
            <div class="news-style__rule">
              <p class="news-style__rule-label">数字</p>
              <p>参数、席位代号与更新周期单独成行，用等宽字体呈现，便于逐位核对而不是通读段落。</p>
            </div>
            <div class="news-style__rule">
              <p class="news-style__rule-label">人名</p>
              <p>排班与案例条目只出现时段、桌台编号、席位代号与主题分组，不出现姓名与肖像。</p>
            </div>
            <div class="news-style__rule">
              <p class="news-style__rule-label">复核</p>
              <p>新条目经编辑自检、组内交叉复核，发布后七日内再回查一次；读者提出的纠错在两个工作日内回复处理结果。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="section news-recall" id="subscribe" aria-labelledby="recall-title">
    <div class="wrap">
      <div class="section-marker">
        <p class="section-marker__label">回查与订阅</p>
        <p class="section-marker__note">三种定位方式，加上按单一栏目订阅</p>
      </div>
      <h2 class="section-title news-recall__title" id="recall-title">想找旧条目，从这三个位置进去最快</h2>

      <div class="news-recall__grid">
        <article class="news-recall__card">
          <p class="news-recall__index">检索方式 一</p>
          <h3>按分类名定位</h3>
          <p>记得玩法名称但不记得归属时用这一条，输入分类名即可跳转，不必从一级分类往下翻。</p>
        </article>
        <article class="news-recall__card">
          <p class="news-recall__index">检索方式 二</p>
          <h3>按文档标题定位</h3>
          <p>已知帮助文档的大致标题时使用，三百余篇文档按标题索引，改版后标题保持稳定。</p>
        </article>
        <article class="news-recall__card">
          <p class="news-recall__index">检索方式 三</p>
          <h3>按案例主题定位</h3>
          <p>想找同类处理方式时从主题分组进，八个分组覆盖九十六个案例，按月补充。</p>
        </article>
        <article class="news-recall__card news-recall__card--accent">
          <p class="news-recall__index">订阅</p>
          <h3>只订一个栏目也可以</h3>
          <p>栏目订阅支持单独勾选，只想跟进排班表或只想收案例合集都行，其余栏目的提醒不会一并推来。</p>
          <p class="news-recall__action"><a class="btn btn--gold" href="/connect/">说明订阅意向</a></p>
        </article>
      </div>

      <p class="news-recall__foot">想了解分类与返水的当前口径，可前往 <a href="/features/">功能中心</a>；站点由谁维护、内容怎么来，写在 <a href="/values/">品牌价值</a> 一页。</p>
    </div>
  </section>

  <section class="news-coda" aria-label="专栏收束">
    <div class="wrap">
      <figure class="media-frame media-frame--wide news-coda__figure">
        <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="抽象夜景：水面倒影与远处灯光连成一片，深青底色上有零星暖金反光，无地标与人物" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">专栏不停刊，条目按栏目累积，夜色与水位线一并往下延伸</figcaption>
      </figure>
    </div>
  </section>

</main>

.page-news {
  --news-rule: rgba(127, 169, 161, .18);
  --news-rule-strong: rgba(127, 169, 161, .34);
  --news-dim: rgba(242, 245, 241, .66);
  --news-pad-y: 34px;
  color: var(--text);
}

/* ---------- 刊头 ---------- */
.page-news .news-mast {
  position: relative;
  padding: 24px 0 var(--news-pad-y);
  overflow: hidden;
}

.page-news .news-mast::before {
  content: "";
  position: absolute;
  top: -170px;
  left: -30%;
  width: 160%;
  height: 380px;
  background: linear-gradient(115deg, rgba(18, 101, 92, .72) 0%, rgba(11, 74, 69, .38) 48%, rgba(6, 48, 46, 0) 78%);
  transform: rotate(-6deg);
  pointer-events: none;
}

.page-news .news-mast__grid {
  position: relative;
  display: grid;
  gap: 28px;
}

.page-news .news-mast__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--c-gold-soft);
}

.page-news .news-mast__kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--c-gold);
  flex: none;
}

.page-news .news-mast__title {
  margin: 0 0 18px;
  line-height: 1.24;
  letter-spacing: -.01em;
  max-width: 18em;
}

.page-news .news-mast__lead {
  margin: 0 0 14px;
  max-width: 40em;
  color: var(--text-muted);
}

.page-news .news-mast__hint {
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--c-gold);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-mist);
  max-width: 34em;
}

.page-news .news-mast__aside {
  align-self: end;
}

.page-news .news-mast__rhythm {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--news-rule-strong);
}

.page-news .news-mast__rhythm li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--news-rule);
  font-size: 14px;
  line-height: 1.6;
}

.page-news .news-mast__rhythm li > span:first-child {
  color: var(--news-dim);
}

.page-news .news-mast__rhythm .num {
  color: var(--c-gold-soft);
  font-size: 13.5px;
  letter-spacing: .02em;
  flex: none;
}

/* ---------- 本周期 ---------- */
.page-news .news-latest__inner {
  padding: 30px 0 38px;
}

.page-news .news-latest__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding-bottom: 14px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--news-rule-strong);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
}

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

.page-news .news-latest__sep {
  width: 20px;
  height: 1px;
  background: var(--news-rule-strong);
  flex: none;
}

.page-news .news-latest__scope {
  color: var(--news-dim);
}

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

.page-news .news-latest__copy > p {
  color: var(--text-muted);
  margin: 0 0 18px;
}

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

.page-news .news-latest__points li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-muted);
}

.page-news .news-latest__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  width: 10px;
  height: 1px;
  background: var(--c-gold);
}

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

.page-news .news-latest__figure {
  margin: 0;
  border-radius: var(--r-soft);
  overflow: hidden;
}

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

/* ---------- 栏目分组 ---------- */
.page-news .news-columns__title {
  margin: 0 0 22px;
}

.page-news .news-columns__banner {
  margin: 0 0 30px;
  border-radius: var(--r-soft);
  overflow: hidden;
}

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

.page-news .news-columns__tabs {
  margin-top: 6px;
}

.page-news .news-columns__panel {
  padding-top: 22px;
  display: grid;
  gap: 0;
}

.page-news .news-entry {
  padding: 20px 0;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-entry:first-child {
  border-top: 1px solid var(--news-rule);
}

.page-news .news-entry__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.page-news .news-entry__tag {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--c-gold);
}

.page-news .news-entry__tag::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 1px;
  background: var(--c-gold);
}

.page-news .news-entry__time {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--c-mist);
}

.page-news .news-entry__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--c-white);
  max-width: 42em;
}

.page-news .news-entry__more {
  font-size: 14.5px;
}

.page-news .news-entry__more summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--c-mist);
}

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

.page-news .news-entry__more summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 1px solid var(--c-gold);
  border-bottom: 1px solid var(--c-gold);
  transform: rotate(-45deg);
  transition: transform .2s var(--ease-tide);
}

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

.page-news .news-entry__more summary:focus-visible {
  outline: 2px solid var(--c-gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

.page-news .news-entry__more p {
  margin: 10px 0 0;
  padding-left: 14px;
  max-width: 46em;
  border-left: 1px solid var(--news-rule-strong);
  color: var(--news-dim);
  line-height: 1.85;
}

/* ---------- 时间轴 ---------- */
.page-news .news-timeline__title {
  margin: 0 0 12px;
}

.page-news .news-timeline__lead {
  max-width: 42em;
  margin: 0 0 24px;
  color: var(--text-muted);
}

.page-news .news-timeline__figure {
  margin: 0 0 8px;
  border-radius: var(--r-soft);
  overflow: hidden;
}

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

.page-news .news-timeline__track {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 26px 0 34px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  border-top: 1px solid var(--news-rule-strong);
  -webkit-overflow-scrolling: touch;
}

.page-news .news-timeline__item {
  position: relative;
  flex: 0 0 216px;
  padding: 18px 20px 0 0;
  scroll-snap-align: start;
}

.page-news .news-timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--news-rule-strong);
}

.page-news .news-timeline__node {
  position: absolute;
  top: -5px;
  left: -4px;
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-deep);
  border: 1px solid var(--c-gold);
}

.page-news .news-timeline__phase {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--c-gold);
}

.page-news .news-timeline__item .tide-timeline__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--c-white);
}

.page-news .news-timeline__note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--news-dim);
}

/* ---------- 体例 ---------- */
.page-news .news-style__grid {
  align-items: start;
  gap: 28px;
}

.page-news .news-style__plate {
  background: var(--c-under);
  border-left: 2px solid var(--c-gold);
}

.page-news .news-style__plate-note {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--news-dim);
}

.page-news .news-style__body > p {
  margin: 0 0 22px;
  max-width: 44em;
  color: var(--text-muted);
}

.page-news .news-style__rules {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--news-rule-strong);
}

.page-news .news-style__rule {
  padding: 16px 0;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-style__rule-label {
  margin: 0 0 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  color: var(--c-neon);
}

.page-news .news-style__rule > p:last-child {
  margin: 0;
  max-width: 46em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--news-dim);
}

/* ---------- 回查与订阅 ---------- */
.page-news .news-recall__title {
  margin: 0 0 24px;
}

.page-news .news-recall__grid {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--news-rule-strong);
}

.page-news .news-recall__card {
  padding: 20px 0;
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-recall__index {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  color: var(--c-mist);
}

.page-news .news-recall__card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--c-white);
}

.page-news .news-recall__card p {
  margin: 0;
  max-width: 42em;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--news-dim);
}

.page-news .news-recall__card--accent {
  padding: 22px 20px;
  background: linear-gradient(100deg, rgba(18, 101, 92, .55), rgba(36, 26, 59, .55));
  border-left: 2px solid var(--c-gold);
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-recall__card--accent .news-recall__index {
  color: var(--c-gold);
}

.page-news .news-recall__action {
  margin: 16px 0 0;
}

.page-news .news-recall__foot {
  margin: 26px 0 0;
  max-width: 46em;
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--c-mist);
}

.page-news .news-recall__foot a {
  color: var(--c-gold-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

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

/* ---------- 收束 ---------- */
.page-news .news-coda {
  padding: 8px 0 56px;
}

.page-news .news-coda__figure {
  position: relative;
  margin: 0;
  border-radius: var(--r-soft);
  overflow: hidden;
}

.page-news .news-coda__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 48, 46, 0) 45%, rgba(6, 48, 46, .72) 100%);
  pointer-events: none;
}

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

.page-news .news-coda__figure .media-frame__caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--c-white);
}

/* ---------- 响应式 ---------- */
@media (min-width: 620px) {
  .page-news .news-recall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }

  .page-news .news-recall__card {
    padding: 22px 0;
  }

  .page-news .news-recall__card--accent {
    padding: 24px 22px;
  }
}

@media (min-width: 860px) {
  .page-news {
    --news-pad-y: 46px;
  }

  .page-news .news-mast__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
    gap: 48px;
  }

  .page-news .news-mast__title {
    font-size: 46px;
    line-height: 1.18;
  }

  .page-news .news-latest__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: start;
    gap: 40px;
  }

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

  .page-news .news-entry:nth-child(2) {
    border-top: 1px solid var(--news-rule);
  }

  .page-news .news-style__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
    gap: 48px;
  }

  .page-news .news-style__plate {
    position: sticky;
    top: 96px;
  }

  .page-news .news-recall__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 36px;
  }

  .page-news .news-recall__card--accent {
    grid-column: span 3;
  }

  .page-news .news-timeline__item {
    flex-basis: 240px;
  }
}

@media (min-width: 1100px) {
  .page-news .news-mast__title {
    font-size: 52px;
  }

  .page-news .news-entry__title {
    font-size: 20px;
  }

  .page-news .news-timeline__item {
    flex-basis: 262px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-entry__more summary::before {
    transition: none;
  }
}