.page-news {
  --news-rule: rgba(185, 174, 196, 0.55);
  --news-rule-strong: rgba(110, 94, 122, 0.42);
  --news-ink-soft: rgba(245, 240, 232, 0.78);
  display: block;
  background: var(--rice);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

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

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4.4vw, 48px) 0 clamp(28px, 4vw, 54px);
  background: linear-gradient(176deg, var(--mist) 0%, var(--rice) 64%, var(--rice) 100%);
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--grape) 0%, var(--grape-grey) 52%, rgba(185, 174, 196, 0));
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74px;
  background-image: repeating-linear-gradient(90deg, var(--news-rule) 0 1px, transparent 1px 46px);
  opacity: 0.65;
  pointer-events: none;
}

.page-news .news-hero > .container {
  position: relative;
  z-index: 1;
}

.page-news .news-hero .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grape-grey);
  text-transform: uppercase;
}

.page-news .news-hero__title {
  margin: 12px 0 0;
  max-width: 24ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(27px, 5.4vw, 42px);
  line-height: 1.24;
  letter-spacing: 0.005em;
  color: var(--grape-deep);
}

.page-news .news-hero__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.88;
  color: var(--graphite);
}

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

.page-news .news-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--news-rule);
  border-left: 3px solid var(--grape);
  border-radius: 6px;
}

.page-news .news-hero__fact-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 23px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--grape);
}

.page-news .news-hero__fact-label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--graphite);
}

/* ---------- 本周挂出 ---------- */
.page-news .news-dispatch {
  padding: clamp(30px, 5vw, 60px) 0 clamp(28px, 4.4vw, 54px);
  background: var(--paper);
}

.page-news .news-dispatch .section-head {
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-news .news-dispatch .section-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .news-dispatch .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .news-weekbar {
  margin: 0 0 clamp(22px, 3.2vw, 34px);
  background: var(--mist);
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.page-news .news-weekbar img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.page-news .news-weekbar .figure-caption {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--graphite);
  background: var(--rice);
  border-top: 1px solid var(--news-rule);
}

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

.page-news .dispatch-item {
  position: relative;
  padding: 18px 0 18px 16px;
  border-bottom: 1px solid var(--news-rule);
  border-left: 2px solid transparent;
  transition: border-left-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-news .dispatch-item:hover,
.page-news .dispatch-item:focus-within {
  border-left-color: var(--grape);
  background-color: rgba(237, 230, 242, 0.45);
}

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

.page-news .dispatch-item__version {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--grape);
  border: 1px solid var(--news-rule-strong);
  border-radius: 999px;
}

.page-news .dispatch-item__time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--graphite);
}

.page-news .dispatch-item__time::before {
  content: "·";
  margin-right: 8px;
  color: var(--vine);
}

.page-news .dispatch-item__title {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}

.page-news .dispatch-item__note {
  margin: 7px 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--graphite);
}

.page-news .news-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--grape-deep);
  background: var(--mist);
  border: 1px solid var(--vine);
  border-radius: 4px;
  white-space: nowrap;
}

.page-news .news-tag--state {
  color: var(--paper);
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

/* ---------- 按标签浏览 ---------- */
.page-news .news-tags {
  padding: clamp(30px, 5vw, 62px) 0;
  background: linear-gradient(180deg, var(--mist) 0%, var(--rice) 100%);
  border-top: 1px solid var(--news-rule);
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-tags .section-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .news-tags .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .news-matrix {
  margin: 0 0 clamp(20px, 3vw, 30px);
  background: var(--paper);
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-news .news-matrix .figure-caption {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--graphite);
  background: var(--rice);
  border-top: 1px solid var(--news-rule);
}

.page-news .tag-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-news .tag-block {
  padding: 18px 18px 20px;
  background: var(--paper);
  border: 1px solid var(--news-rule);
  border-top: 3px solid var(--grape);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.page-news .tag-block__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .tag-block__count {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--grape-grey);
}

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

.page-news .tag-block__note {
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.72;
  color: var(--graphite);
}

/* ---------- 版本迭代记录 ---------- */
.page-news .news-versions {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 66px) 0;
  background: var(--grape);
  color: var(--rice);
}

.page-news .news-versions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(245, 240, 232, 0.07) 0 1px, transparent 1px 58px);
  pointer-events: none;
}

.page-news .news-versions > .container {
  position: relative;
  z-index: 1;
}

.page-news .news-versions .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vine);
}

.page-news .news-versions .section-title {
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--rice);
}

.page-news .news-versions .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--news-ink-soft);
}

.page-news .version-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-news .version-figure {
  margin: 0;
  background: var(--grape-deep);
  border: 1px solid rgba(245, 240, 232, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-news .version-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page-news .version-figure .figure-caption {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--news-ink-soft);
  background: rgba(26, 26, 26, 0.22);
  border-top: 1px solid rgba(245, 240, 232, 0.16);
}

.page-news .version-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .version-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(245, 240, 232, 0.18);
}

.page-news .version-item:first-child {
  padding-top: 0;
}

.page-news .version-item:last-child {
  border-bottom: none;
}

.page-news .version-item__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(23px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--rice);
}

.page-news .version-item__title {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--rice);
}

.page-news .version-item__desc {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--news-ink-soft);
}

/* ---------- 月度归档与季度专题 ---------- */
.page-news .news-archive {
  padding: clamp(32px, 5vw, 66px) 0;
  background: var(--rice);
}

.page-news .archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-news .news-archive-fig {
  margin: 0;
}

.page-news .news-archive-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
}

.page-news .news-archive-fig .figure-caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--graphite);
}

.page-news .archive-body .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grape-grey);
}

.page-news .archive-body .section-title {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 28px);
  line-height: 1.38;
  color: var(--grape-deep);
}

.page-news .archive-body p {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.88;
  color: var(--graphite);
}

.page-news .archive-body__lede {
  color: var(--ink) !important;
}

.page-news .archive-body a,
.page-news .revisit-footer a {
  color: var(--grape);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(91, 44, 111, 0.35);
  text-underline-offset: 3px;
}

.page-news .archive-body a:hover,
.page-news .revisit-footer a:hover {
  text-decoration-color: var(--grape);
}

/* ---------- 回查方式 ---------- */
.page-news .news-revisit {
  padding: clamp(30px, 5vw, 62px) 0 clamp(42px, 6vw, 84px);
  background: var(--paper);
  border-top: 1px solid var(--news-rule);
}

.page-news .news-revisit .section-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .news-revisit .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .revisit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-news .revisit-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 22px;
  background: var(--rice);
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.page-news .revisit-card__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cinnabar);
}

.page-news .revisit-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--grape-deep);
}

.page-news .revisit-card__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.82;
  color: var(--graphite);
}

.page-news .revisit-footer {
  margin: 26px 0 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.88;
  color: var(--graphite);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-news .news-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-news .dispatch-list {
    padding-right: 72px;
  }

  .page-news .dispatch-list::after {
    content: "";
    position: absolute;
    top: 0;
    right: 26px;
    bottom: 0;
    width: 1px;
    background-image: repeating-linear-gradient(180deg, var(--news-rule-strong) 0 1px, transparent 1px 20px);
  }

  .page-news .dispatch-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 0 20px 18px;
  }

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

  .page-news .version-grid {
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    align-items: start;
    gap: 44px;
  }

  .page-news .archive-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 46px;
  }

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

@media (min-width: 1180px) {
  .page-news .version-grid {
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .dispatch-item,
  .page-news .news-hero__fact,
  .page-news .news-tag {
    transition: none;
  }
}
<main id="main-content" class="page-news">
  <nav class="breadcrumb container" 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>

  <section class="news-hero">
    <div class="container">
      <p class="eyebrow">INDEX DISPATCH · 周更公告</p>
      <h1 class="news-hero__title">站内动态｜索引变更说明与版本记录</h1>
      <p class="news-hero__lede">
        最近一次索引调整改了什么、某个版本动了哪些分类、入口变化是哪一周发布的——顺着周次往下翻，或者用标签直接跳到与你相关的那一类。葡萄京平台把每周三挂出的变更说明、版本记录与月度归档收在同一处，回访时打开一个地址就能跟进全部动静。
      </p>
      <ul class="news-hero__facts">
        <li class="news-hero__fact">
          <span class="news-hero__fact-num mono">08—12</span>
          <span class="news-hero__fact-label">每周新增条目</span>
        </li>
        <li class="news-hero__fact">
          <span class="news-hero__fact-num mono">12 / 56</span>
          <span class="news-hero__fact-label">一级分类 / 细分标签</span>
        </li>
        <li class="news-hero__fact">
          <span class="news-hero__fact-num mono">24</span>
          <span class="news-hero__fact-label">保留归档月数</span>
        </li>
        <li class="news-hero__fact">
          <span class="news-hero__fact-num mono">每周三</span>
          <span class="news-hero__fact-label">索引变更挂出</span>
        </li>
      </ul>
    </div>
  </section>

  <section class="news-dispatch" id="this-week">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">01 / 本周挂出</p>
        <h2 class="section-title">本周三与最近一周的条目</h2>
        <p class="section-note">条目按挂出先后排列，最新的排在最前。</p>
      </div>

      <figure class="news-weekbar" data-reveal>
        <img src="{zhanqunpic:h:400w:1200}" width="1200" height="400" alt="以周为单位的索引更新刻度线示意，每一格标注当周编号与挂出条目数">
        <figcaption class="figure-caption">每周三挂出的条目按周编号排列，一格为一周；遇节假日顺延至下一个工作日。</figcaption>
      </figure>

      <ol class="dispatch-list">
        <li class="dispatch-item" data-reveal>
          <div class="dispatch-item__meta">
            <span class="news-tag news-tag--state">公告</span>
            <span class="dispatch-item__version mono">v2.4.1</span>
            <span class="dispatch-item__time mono">本周三</span>
          </div>
          <h3 class="dispatch-item__title">大屏站内索引变更说明：一级分类展示顺序按季度使用频率重排</h3>
          <p class="dispatch-item__note">12 个一级分类在信息屏与大屏端的前后次序做了统一，公告摘要与入口汇总整体前移，长时间无人点开的分类下沉到第二屏。</p>
        </li>

        <li class="dispatch-item" data-reveal data-reveal-delay="60">
          <div class="dispatch-item__meta">
            <span class="news-tag">入口</span>
            <span class="dispatch-item__version mono">v2.4.0</span>
            <span class="dispatch-item__time mono">本周三</span>
          </div>
          <h3 class="dispatch-item__title">简体版常用入口把「历史版本走查」提到查询组首位</h3>
          <p class="dispatch-item__note">18 个常用入口仍按查询、公告、帮助、联系四组划分，本周只调整了组内排序与图标，老用户原先的点击路径保持不变。</p>
        </li>

        <li class="dispatch-item" data-reveal data-reveal-delay="120">
          <div class="dispatch-item__meta">
            <span class="news-tag">帮助</span>
            <span class="dispatch-item__version mono">v2.3.9</span>
            <span class="dispatch-item__time mono">上周</span>
          </div>
          <h3 class="dispatch-item__title">五步走查清单补充缓存与网络判断分支</h3>
          <p class="dispatch-item__note">旧版地址打不开时，先判断是本地缓存还是版本已下线，再决定清理缓存或改走新的入口地址。</p>
        </li>

        <li class="dispatch-item" data-reveal data-reveal-delay="180">
          <div class="dispatch-item__meta">
            <span class="news-tag">合作</span>
            <span class="dispatch-item__version mono">v2.3.8</span>
            <span class="dispatch-item__time mono">上周</span>
          </div>
          <h3 class="dispatch-item__title">园区导览场景新增横屏、竖屏两套索引适配</h3>
          <p class="dispatch-item__note">大屏索引方案在园区场景的落地说明补齐了 16:9 与竖屏两种排布，集成商可按现场屏体直接选型。</p>
        </li>

        <li class="dispatch-item" data-reveal data-reveal-delay="240">
          <div class="dispatch-item__meta">
            <span class="news-tag">公告</span>
            <span class="dispatch-item__version mono">v2.3.7</span>
            <span class="dispatch-item__time mono">本月首个工作日</span>
          </div>
          <h3 class="dispatch-item__title">上月月度归档发布，46 条条目完成归集</h3>
          <p class="dispatch-item__note">月度归档把上一个自然月的公告、入口与帮助类条目合并为一份可顺序回看的清单，按周次密集排列。</p>
        </li>

        <li class="dispatch-item" data-reveal data-reveal-delay="300">
          <div class="dispatch-item__meta">
            <span class="news-tag">入口</span>
            <span class="dispatch-item__version mono">v2.3.6</span>
            <span class="dispatch-item__time mono">本季度</span>
          </div>
          <h3 class="dispatch-item__title">56 个细分标签重新编码为四位等宽格式</h3>
          <p class="dispatch-item__note">编码统一之后，在站内搜索框里直接输入四位标签码就能定位到同类条目，不必再逐层点开分类。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="news-tags" id="by-tag">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">02 / 按标签浏览</p>
        <h2 class="section-title">12 个一级分类，56 个细分标签</h2>
        <p class="section-note">按你关心的内容类型选组，再看细分标签。</p>
      </div>

      <figure class="news-matrix" data-reveal>
        <img src="{zhanqunpic:h:700w:1200}" width="1200" height="700" alt="12 个一级分类按公告、入口、帮助、合作四组层层展开的标签矩阵示意" loading="lazy" decoding="async">
        <figcaption class="figure-caption">一级分类按四组归拢，每组分若干细分标签；入口与公告两类标签的日常访问量最高。</figcaption>
      </figure>

      <div class="tag-blocks">
        <article class="tag-block" data-reveal>
          <h3 class="tag-block__title">公告</h3>
          <span class="tag-block__count mono">3 个分类 · 14 个标签</span>
          <ul class="tag-block__list">
            <li><span class="news-tag">公告摘要</span></li>
            <li><span class="news-tag">索引变更</span></li>
            <li><span class="news-tag">版本记录</span></li>
          </ul>
          <p class="tag-block__note">每周三挂出的变更说明都归在这一组，配合季度专题一起看，能串起一条完整的调整脉络。</p>
        </article>

        <article class="tag-block" data-reveal data-reveal-delay="80">
          <h3 class="tag-block__title">入口</h3>
          <span class="tag-block__count mono">3 个分类 · 15 个标签</span>
          <ul class="tag-block__list">
            <li><span class="news-tag">入口调整</span></li>
            <li><span class="news-tag">入口汇总</span></li>
            <li><span class="news-tag">版本入口</span></li>
          </ul>
          <p class="tag-block__note">18 个常用入口的增删与顺序调整记在这里，担心入口变化影响日常使用的用户重点看这一组。</p>
        </article>

        <article class="tag-block" data-reveal data-reveal-delay="160">
          <h3 class="tag-block__title">帮助</h3>
          <span class="tag-block__count mono">3 个分类 · 14 个标签</span>
          <ul class="tag-block__list">
            <li><span class="news-tag">走查清单</span></li>
            <li><span class="news-tag">故障排查</span></li>
            <li><span class="news-tag">帮助文档</span></li>
          </ul>
          <p class="tag-block__note">排查步骤与帮助文档的修订记录，覆盖 2019 年至 2023 年间发布的 5 个历史版本。</p>
        </article>

        <article class="tag-block" data-reveal data-reveal-delay="240">
          <h3 class="tag-block__title">合作</h3>
          <span class="tag-block__count mono">3 个分类 · 13 个标签</span>
          <ul class="tag-block__list">
            <li><span class="news-tag">合作动态</span></li>
            <li><span class="news-tag">展陈方案</span></li>
            <li><span class="news-tag">接口说明</span></li>
          </ul>
          <p class="tag-block__note">面向企业展陈、政务大厅信息屏与园区导览的合作进展，以及开放索引接口的能力说明。</p>
        </article>
      </div>
    </div>
  </section>

  <section class="news-versions" id="versions">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">03 / 版本迭代记录</p>
        <h2 class="section-title">每个版本动了哪些分类</h2>
        <p class="section-note">记住版本号，回查时在搜索框直接输入即可。</p>
      </div>

      <div class="version-grid">
        <figure class="version-figure" data-reveal>
          <img src="{zhanqunpic:h:800w:800}" width="800" height="800" alt="放大加粗的版本号排版特写，紫底米白字，作为版本迭代记录的视觉锚点" loading="lazy" decoding="async">
          <figcaption class="figure-caption">版本号统一采用 v 主版本、次版本、修订号三段格式。</figcaption>
        </figure>

        <ol class="version-list">
          <li class="version-item" data-reveal>
            <span class="version-item__num mono">v2.4</span>
            <h3 class="version-item__title">分类展示顺序重排与入口分组</h3>
            <p class="version-item__desc">一级分类的展示次序改为按季度使用频率决定；简体版常用入口由平铺列表改成查询、公告、帮助、联系四组结构。</p>
          </li>
          <li class="version-item" data-reveal data-reveal-delay="60">
            <span class="version-item__num mono">v2.3</span>
            <h3 class="version-item__title">走查清单压缩与搜索过滤扩展</h3>
            <p class="version-item__desc">旧版排查步骤压缩到 5 步以内，补上缓存与网络判断分支；站内搜索增加按更新时间区间过滤的能力。</p>
          </li>
          <li class="version-item" data-reveal data-reveal-delay="120">
            <span class="version-item__num mono">v2.2</span>
            <h3 class="version-item__title">标签编码统一与开放接口</h3>
            <p class="version-item__desc">56 个细分标签改为四位等宽编码，并开放按标签拉取公告摘要的接口，第三方展陈系统可直接接入。</p>
          </li>
          <li class="version-item" data-reveal data-reveal-delay="180">
            <span class="version-item__num mono">v2.1</span>
            <h3 class="version-item__title">大屏端适配组件补齐</h3>
            <p class="version-item__desc">政务大厅信息屏与园区导览两类场景补上横屏、竖屏两套排布组件，同一套索引数据可直接投放到不同尺寸的屏幕。</p>
          </li>
          <li class="version-item" data-reveal data-reveal-delay="240">
            <span class="version-item__num mono">v2.0</span>
            <h3 class="version-item__title">2023 年索引结构升级</h3>
            <p class="version-item__desc">一级分类由 7 个调整为 12 个，新增 34 个细分标签，公告、入口、帮助、合作四类内容的归位方式随之确定。</p>
          </li>
        </ol>
      </div>
    </div>
  </section>

  <section class="news-archive" id="archive">
    <div class="container">
      <div class="archive-grid">
        <figure class="news-archive-fig" data-reveal>
          <img src="{zhanqunpic:h:1200w:900}" width="900" height="1200" alt="并列排布归档的档案盒示意，盒脊以等宽数字标注周次区间与所属月份" loading="lazy" decoding="async">
          <figcaption class="figure-caption">归档盒按自然月排列，盒脊标注当月覆盖的周次区间。</figcaption>
        </figure>

        <div class="archive-body">
          <p class="eyebrow">04 / 月度归档与季度专题</p>
          <h2 class="section-title">每月首个工作日挂出归档，每季汇总一次专题</h2>
          <p class="archive-body__lede">
            月度归档在每月首个工作日发布，把上一个自然月的公告、入口与帮助类条目合并成一份可顺序回看的清单。逢周一或节假日则顺延至随后的第一个工作日。
          </p>
          <p>
            索引变更说明按季度汇总为专题，把同一季度内的分类调整、组件适配与版本迭代放在一起，按标签可追溯近 24 个月的变化。想核对某一次调整的具体分支，从季度专题进入再往下翻对应的周次，比逐周翻找快得多。
          </p>
          <p>
            平台累计归档索引条目 12400 余条，站内动态平均每周更新 8 至 12 条。索引的运营分工与三级复核流程，在<a href="/culture/">品牌文化</a>一页有完整说明；需要把索引数据投放到实体大屏的客户，可从<a href="/projects/">项目中心</a>了解交付内容与实施周期。
          </p>
        </div>
      </div>
    </div>
  </section>

  <section class="news-revisit" id="revisit">
    <div class="container">
      <div class="section-head">
        <p class="eyebrow">05 / 回查方式</p>
        <h2 class="section-title">收藏、检索与回看</h2>
        <p class="section-note">三种方式覆盖日常回访和深度追溯。</p>
      </div>

      <div class="revisit-grid">
        <article class="revisit-card" data-reveal>
          <span class="revisit-card__num mono">A</span>
          <h3 class="revisit-card__title">把动态地址加入收藏</h3>
          <p class="revisit-card__note">每周三下午回来，当周挂出的条目会排在列表最前。长期跟进的用户可以把这个地址固定在浏览器书签栏，省去重新查找的步骤。</p>
        </article>

        <article class="revisit-card" data-reveal data-reveal-delay="80">
          <span class="revisit-card__num mono">B</span>
          <h3 class="revisit-card__title">在搜索框输入标签或版本号</h3>
          <p class="revisit-card__note">站内搜索支持按标签、版本号与更新时间三种方式过滤条目。输入四位标签编码或 v 开头的版本号，可以直接定位到对应记录。</p>
        </article>

        <article class="revisit-card" data-reveal data-reveal-delay="160">
          <span class="revisit-card__num mono">C</span>
          <h3 class="revisit-card__title">按更新时间区间回看</h3>
          <p class="revisit-card__note">需要核对某一段时间的调整时，用更新时间区间筛出条目，再对照月度归档从后往前比对，能还原完整的改动顺序。</p>
        </article>
      </div>

      <p class="revisit-footer">
        找不到对应的版本或分类？可以先到<a href="/help/">帮助中心</a>走一遍排查清单，那里覆盖旧版打不开的现象与原因对照；需要提交问题、纠错或洽谈合作，<a href="/find-us/">联系入口</a>列出了客服邮箱、电话与值班时段，工作日提交的表单平均 4 小时内给出首次回复。
      </p>
    </div>
  </section>
</main>

.page-news {
  --news-rule: rgba(185, 174, 196, 0.55);
  --news-rule-strong: rgba(110, 94, 122, 0.42);
  --news-ink-soft: rgba(245, 240, 232, 0.78);
  display: block;
  background: var(--rice);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

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

/* ---------- 首屏 ---------- */
.page-news .news-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(26px, 4.4vw, 48px) 0 clamp(28px, 4vw, 54px);
  background: linear-gradient(176deg, var(--mist) 0%, var(--rice) 64%, var(--rice) 100%);
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--grape) 0%, var(--grape-grey) 52%, rgba(185, 174, 196, 0));
}

.page-news .news-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74px;
  background-image: repeating-linear-gradient(90deg, var(--news-rule) 0 1px, transparent 1px 46px);
  opacity: 0.65;
  pointer-events: none;
}

.page-news .news-hero > .container {
  position: relative;
  z-index: 1;
}

.page-news .news-hero .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grape-grey);
  text-transform: uppercase;
}

.page-news .news-hero__title {
  margin: 12px 0 0;
  max-width: 24ch;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(27px, 5.4vw, 42px);
  line-height: 1.24;
  letter-spacing: 0.005em;
  color: var(--grape-deep);
}

.page-news .news-hero__lede {
  margin: 18px 0 0;
  max-width: 62ch;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.88;
  color: var(--graphite);
}

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

.page-news .news-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 15px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--news-rule);
  border-left: 3px solid var(--grape);
  border-radius: 6px;
}

.page-news .news-hero__fact-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(17px, 2.4vw, 23px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--grape);
}

.page-news .news-hero__fact-label {
  font-size: 13px;
  line-height: 1.55;
  color: var(--graphite);
}

/* ---------- 本周挂出 ---------- */
.page-news .news-dispatch {
  padding: clamp(30px, 5vw, 60px) 0 clamp(28px, 4.4vw, 54px);
  background: var(--paper);
}

.page-news .news-dispatch .section-head {
  margin-bottom: clamp(20px, 3vw, 30px);
}

.page-news .news-dispatch .section-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .news-dispatch .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .news-weekbar {
  margin: 0 0 clamp(22px, 3.2vw, 34px);
  background: var(--mist);
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.page-news .news-weekbar img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

.page-news .news-weekbar .figure-caption {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--graphite);
  background: var(--rice);
  border-top: 1px solid var(--news-rule);
}

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

.page-news .dispatch-item {
  position: relative;
  padding: 18px 0 18px 16px;
  border-bottom: 1px solid var(--news-rule);
  border-left: 2px solid transparent;
  transition: border-left-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.page-news .dispatch-item:hover,
.page-news .dispatch-item:focus-within {
  border-left-color: var(--grape);
  background-color: rgba(237, 230, 242, 0.45);
}

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

.page-news .dispatch-item__version {
  display: inline-flex;
  align-items: center;
  padding: 1px 9px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--grape);
  border: 1px solid var(--news-rule-strong);
  border-radius: 999px;
}

.page-news .dispatch-item__time {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--graphite);
}

.page-news .dispatch-item__time::before {
  content: "·";
  margin-right: 8px;
  color: var(--vine);
}

.page-news .dispatch-item__title {
  margin: 8px 0 0;
  font-family: var(--font-head);
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink);
}

.page-news .dispatch-item__note {
  margin: 7px 0 0;
  max-width: 66ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--graphite);
}

.page-news .news-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--grape-deep);
  background: var(--mist);
  border: 1px solid var(--vine);
  border-radius: 4px;
  white-space: nowrap;
}

.page-news .news-tag--state {
  color: var(--paper);
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--cinnabar);
  border-color: var(--cinnabar);
}

/* ---------- 按标签浏览 ---------- */
.page-news .news-tags {
  padding: clamp(30px, 5vw, 62px) 0;
  background: linear-gradient(180deg, var(--mist) 0%, var(--rice) 100%);
  border-top: 1px solid var(--news-rule);
  border-bottom: 1px solid var(--news-rule);
}

.page-news .news-tags .section-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .news-tags .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .news-matrix {
  margin: 0 0 clamp(20px, 3vw, 30px);
  background: var(--paper);
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.page-news .news-matrix .figure-caption {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--graphite);
  background: var(--rice);
  border-top: 1px solid var(--news-rule);
}

.page-news .tag-blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-news .tag-block {
  padding: 18px 18px 20px;
  background: var(--paper);
  border: 1px solid var(--news-rule);
  border-top: 3px solid var(--grape);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.page-news .tag-block__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .tag-block__count {
  display: block;
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--grape-grey);
}

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

.page-news .tag-block__note {
  margin: 13px 0 0;
  font-size: 13px;
  line-height: 1.72;
  color: var(--graphite);
}

/* ---------- 版本迭代记录 ---------- */
.page-news .news-versions {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 5vw, 66px) 0;
  background: var(--grape);
  color: var(--rice);
}

.page-news .news-versions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(245, 240, 232, 0.07) 0 1px, transparent 1px 58px);
  pointer-events: none;
}

.page-news .news-versions > .container {
  position: relative;
  z-index: 1;
}

.page-news .news-versions .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vine);
}

.page-news .news-versions .section-title {
  margin-top: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--rice);
}

.page-news .news-versions .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--news-ink-soft);
}

.page-news .version-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-news .version-figure {
  margin: 0;
  background: var(--grape-deep);
  border: 1px solid rgba(245, 240, 232, 0.22);
  border-radius: var(--radius);
  overflow: hidden;
}

.page-news .version-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.page-news .version-figure .figure-caption {
  padding: 10px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--news-ink-soft);
  background: rgba(26, 26, 26, 0.22);
  border-top: 1px solid rgba(245, 240, 232, 0.16);
}

.page-news .version-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .version-item {
  padding: 18px 0;
  border-bottom: 1px solid rgba(245, 240, 232, 0.18);
}

.page-news .version-item:first-child {
  padding-top: 0;
}

.page-news .version-item:last-child {
  border-bottom: none;
}

.page-news .version-item__num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(23px, 3.4vw, 31px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--rice);
}

.page-news .version-item__title {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--rice);
}

.page-news .version-item__desc {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.82;
  color: var(--news-ink-soft);
}

/* ---------- 月度归档与季度专题 ---------- */
.page-news .news-archive {
  padding: clamp(32px, 5vw, 66px) 0;
  background: var(--rice);
}

.page-news .archive-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.page-news .news-archive-fig {
  margin: 0;
}

.page-news .news-archive-fig img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
}

.page-news .news-archive-fig .figure-caption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--graphite);
}

.page-news .archive-body .eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grape-grey);
}

.page-news .archive-body .section-title {
  margin: 10px 0 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(21px, 3.2vw, 28px);
  line-height: 1.38;
  color: var(--grape-deep);
}

.page-news .archive-body p {
  margin: 16px 0 0;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.88;
  color: var(--graphite);
}

.page-news .archive-body__lede {
  color: var(--ink);
}

.page-news .archive-body a,
.page-news .revisit-footer a {
  color: var(--grape);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(91, 44, 111, 0.35);
  text-underline-offset: 3px;
}

.page-news .archive-body a:hover,
.page-news .revisit-footer a:hover {
  text-decoration-color: var(--grape);
}

/* ---------- 回查方式 ---------- */
.page-news .news-revisit {
  padding: clamp(30px, 5vw, 62px) 0 clamp(42px, 6vw, 84px);
  background: var(--paper);
  border-top: 1px solid var(--news-rule);
}

.page-news .news-revisit .section-title {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--grape-deep);
}

.page-news .news-revisit .section-note {
  font-size: 14px;
  line-height: 1.7;
  color: var(--graphite);
}

.page-news .revisit-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-news .revisit-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 20px 22px;
  background: var(--rice);
  border: 1px solid var(--news-rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.page-news .revisit-card__num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cinnabar);
}

.page-news .revisit-card__title {
  margin: 0;
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--grape-deep);
}

.page-news .revisit-card__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.82;
  color: var(--graphite);
}

.page-news .revisit-footer {
  margin: 26px 0 0;
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.88;
  color: var(--graphite);
}

/* ---------- 断点 ---------- */
@media (min-width: 640px) {
  .page-news .news-hero__facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

@media (min-width: 900px) {
  .page-news .dispatch-list {
    padding-right: 72px;
  }

  .page-news .dispatch-list::after {
    content: "";
    position: absolute;
    top: 0;
    right: 26px;
    bottom: 0;
    width: 1px;
    background-image: repeating-linear-gradient(180deg, var(--news-rule-strong) 0 1px, transparent 1px 20px);
  }

  .page-news .dispatch-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 20px 0 20px 18px;
  }

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

  .page-news .version-grid {
    grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
    align-items: start;
    gap: 44px;
  }

  .page-news .archive-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 46px;
  }

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

@media (min-width: 1180px) {
  .page-news .version-grid {
    grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .dispatch-item,
  .page-news .news-hero__fact,
  .page-news .news-tag {
    transition: none;
  }
}