.page-news {
  --news-rule: rgba(143, 166, 192, .32);
  --news-card: var(--paper);
  --news-soft-line: rgba(11, 31, 58, .12);
}

.page-news .breadcrumb {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* ---------- 栏目头 ---------- */
.page-news .journal-masthead {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(255, 106, 42, .22) 0%, rgba(11, 31, 58, 0) 58%),
    repeating-linear-gradient(90deg, rgba(143, 166, 192, .12) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(143, 166, 192, .12) 0 1px, transparent 1px 64px),
    var(--ink-800);
  color: var(--paper);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: clamp(26px, 5vw, 56px) 0 clamp(30px, 5vw, 64px);
}

.page-news .masthead-grid {
  display: grid;
  gap: clamp(22px, 4vw, 40px);
}

.page-news .masthead-copy h1 {
  margin: 12px 0 16px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(28px, 6.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-news .masthead-copy .lead {
  max-width: 56ch;
  color: rgba(245, 240, 230, .86);
}

.page-news .masthead-index {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.page-news .index-cell {
  border-top: 2px solid var(--orange);
  padding-top: 10px;
}

.page-news .index-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--gold);
}

.page-news .index-label {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mist);
}

.page-news .masthead-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-news .masthead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 标签列 + 条目流 ---------- */
.page-news .log-flow {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  padding-top: clamp(34px, 6vw, 64px);
  padding-bottom: clamp(34px, 6vw, 64px);
}

.page-news .log-tags {
  align-self: start;
}

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

.page-news .tag-list a {
  text-decoration: none;
  display: inline-block;
}

.page-news .log-tags-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-700);
  max-width: 30ch;
}

.page-news .entry-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.page-news .entry {
  background: var(--news-card);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--orange);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-2);
}

.page-news .entry:nth-child(2n) {
  background: var(--gray);
  border-left-color: var(--cyan);
}

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

.page-news .entry-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
  letter-spacing: .02em;
}

.page-news .entry-title {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(18px, 3.6vw, 22px);
  line-height: 1.3;
  color: var(--ink-900);
}

.page-news .entry-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-900);
}

.page-news .entry-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--ink-800);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

.page-news .entry-link:hover,
.page-news .entry-link:focus-visible {
  color: var(--ink-900);
  border-bottom-color: var(--cyan);
}

/* ---------- 版本记录 ---------- */
.page-news .versions-band {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.page-news .versions-grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

.page-news .version-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.page-news .version-item {
  position: relative;
  background: var(--ink-700);
  border: 1px solid rgba(143, 166, 192, .22);
  border-radius: var(--radius-md);
  padding: 24px 20px 20px;
}

.page-news .version-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
}

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

.page-news .version-title {
  margin: 0 0 6px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
}

.page-news .version-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245, 240, 230, .78);
}

.page-news .version-foot {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-news .versions-media img,
.page-news .cities-media img,
.page-news .skills-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-news .versions-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(143, 166, 192, .22);
}

/* ---------- 城市节点 ---------- */
.page-news .cities-grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

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

.page-news .city-item {
  display: grid;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--news-soft-line);
  border-radius: var(--pill);
  padding: 14px 20px;
}

.page-news .city-name {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink-900);
  letter-spacing: .02em;
}

.page-news .city-task {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-700);
}

.page-news .cities-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---------- 使用技巧 ---------- */
.page-news .skills-band {
  border-radius: var(--radius-xl);
}

.page-news .skills-grid {
  display: grid;
  gap: clamp(22px, 4vw, 36px);
  margin-top: 26px;
}

.page-news .skill-track {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  counter-reset: none;
}

.page-news .skill-node {
  position: relative;
  background: rgba(16, 42, 76, .72);
  border: 1px solid rgba(143, 166, 192, .26);
  border-radius: var(--radius-md);
  padding: 20px 20px 18px 20px;
}

.page-news .skill-node::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -14px;
  width: 2px;
  height: 14px;
  background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px);
}

.page-news .skill-node:last-child::after {
  display: none;
}

.page-news .skill-step {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cyan);
  border: 1px solid rgba(61, 224, 208, .45);
  border-radius: var(--pill);
  padding: 3px 10px;
}

.page-news .skill-title {
  margin: 10px 0 6px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
}

.page-news .skill-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(245, 240, 230, .8);
}

.page-news .skills-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(143, 166, 192, .22);
  min-height: 220px;
}

/* ---------- 接着跟进 ---------- */
.page-news .follow-band {
  background: linear-gradient(180deg, var(--paper) 0%, var(--gray) 100%);
  padding-bottom: clamp(40px, 7vw, 76px);
}

.page-news .follow-grid {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.page-news .follow-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  border-top: 3px solid var(--ink-800);
  box-shadow: var(--shadow-2);
}

.page-news .follow-card:nth-child(2) {
  border-top-color: var(--orange);
}

.page-news .follow-card:nth-child(3) {
  border-top-color: var(--cyan);
}

.page-news .follow-num {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-700);
}

.page-news .follow-title {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink-900);
}

.page-news .follow-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-900);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .masthead-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: end;
  }

  .page-news .version-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-news .city-item {
    grid-template-columns: 92px 1fr;
    align-items: baseline;
    gap: 14px;
  }

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

  .page-news .skill-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-news .skill-node::after {
    left: auto;
    right: -14px;
    bottom: auto;
    top: 40px;
    width: 14px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 8px);
  }
}

@media (min-width: 900px) {
  .page-news .log-flow {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .log-tags {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    padding-right: 12px;
    border-right: 1px solid var(--news-rule);
  }

  .page-news .tag-list {
    display: grid;
    gap: 8px;
  }

  .page-news .tag-list a {
    display: block;
    text-align: center;
  }

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

  .page-news .entry:nth-child(4n + 2),
  .page-news .entry:nth-child(4n + 3) {
    transform: translateY(26px);
  }

  .page-news .entry-list {
    padding-bottom: 26px;
  }

  .page-news .versions-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: start;
  }

  .page-news .cities-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: center;
  }

  .page-news .skills-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    align-items: stretch;
  }

  .page-news .skill-track {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-news .skill-node::after {
    left: 34px;
    right: auto;
    top: auto;
    bottom: -16px;
    width: 2px;
    height: 16px;
    background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .entry:nth-child(4n + 2),
  .page-news .entry:nth-child(4n + 3) {
    transform: none;
  }
}
<<<END>>>

fix：上面误加了 END 标记，删除。

最终输出去掉 END。重写结尾即可。只需要 main_html 和 page_css 两个标记。

修正：最后的 CSS 中 `.page-news .entry-list` 写了两次，合并。

输出最终版本。
<main id="main-content" class="page-news">
  <div class="wrap">
    <ol class="breadcrumb">
      <li><a href="/">首页</a></li>
      <li aria-current="page">品牌日志</li>
    </ol>
  </div>

  <header class="journal-masthead">
    <div class="wrap masthead-grid">
      <div class="masthead-copy">
        <p class="eyebrow">品牌日志 · JOURNAL</p>
        <h1>幸运28品牌日志：把每一步更新写在城市坐标上</h1>
        <p class="lead lead--ink">资料库改了什么、换了新设备收藏怎么找回、企业在本地对接到哪一步，都能在这里翻到近期的记录。每月不少于 6 条更新，版本记录、城市节点、使用技巧、企业服务四条线索并行推进，挑最贴近您手头事情的那一类往下看。</p>
        <div class="masthead-index">
          <div class="index-cell">
            <p class="index-num">每月 6 条</p>
            <p class="index-label">四类标签持续更新</p>
          </div>
          <div class="index-cell">
            <p class="index-num">5 个节点</p>
            <p class="index-label">南昌 · 赣州 · 九江 · 上饶 · 宜春</p>
          </div>
          <div class="index-cell">
            <p class="index-num">24 个周期</p>
            <p class="index-label">版本记录可回溯范围</p>
          </div>
        </div>
      </div>
      <figure class="media-frame media-frame--16x9 masthead-media">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="城市夜景中的路网与坐标刻度叠加的抽象插画，深蓝底面亮起橙色节点，没有人物与文字">
        <figcaption class="media-frame__caption">本月主题 · 短路径与节点协作</figcaption>
      </figure>
    </div>
  </header>

  <div class="wrap log-flow">
    <aside class="log-tags" aria-labelledby="tags-title">
      <p class="eyebrow" id="tags-title">按标签找</p>
      <ul class="tag-list">
        <li><a class="tag tag--orange" href="#entries">全部条目</a></li>
        <li><a class="tag" href="#versions">版本记录</a></li>
        <li><a class="tag" href="#cities">城市节点</a></li>
        <li><a class="tag" href="#skills">使用技巧</a></li>
        <li><a class="tag" href="#entries">企业服务</a></li>
      </ul>
      <p class="log-tags-note">标签长期保留，看到合用的那一条，下次直接从标签重新进来。</p>
    </aside>

    <div class="log-entries">
      <div class="section-head">
        <p class="eyebrow">近期条目</p>
        <h2 id="entries" class="display-md">这一段时间里发生的事</h2>
        <p class="lead">条目按发生先后排列，时间用相对线索标注，方便您判断哪一条与手上的事最贴近。</p>
      </div>

      <ol class="entry-list">
        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--orange">版本记录</span><span class="entry-time">第2版上线后第3个更新周期</span></p>
          <h3 class="entry-title">检索结果页再省一步：筛选条件停在原位</h3>
          <p class="entry-text">翻看条目时改过的筛选条件仍留在页面顶部，不必退回重选。二级目录与标签可以同时使用，选中目标后正文直接展开，常用操作被压进“进入—定位—展开”三步之内。</p>
          <a class="entry-link" href="/platform/">查看平台服务</a>
        </li>

        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--cyan">城市节点</span><span class="entry-time">本月</span></p>
          <h3 class="entry-title">上饶节点完成季度轮值校订，本地场景条目补齐</h3>
          <p class="entry-text">轮值期间重点看了本地生活服务类目，把表述含糊、步骤缺失的条目逐条改到位，并补上换设备后重新登录的说明。校订完成后，上饶区域条目与全省表述保持一致。</p>
          <a class="entry-link" href="#cities">看城市节点观察</a>
        </li>

        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--cyan">使用技巧</span><span class="entry-time">本月</span></p>
          <h3 class="entry-title">换了新手机，收藏还在吗</h3>
          <p class="entry-text">移动端与电脑端共用同一套账户。在新设备上重新登录，收藏夹里的条目与最近检索记录会同步回来，整理过的顺序也保留。收藏夹容量上限 2,000 条，够日常取用。</p>
          <a class="entry-link" href="/guide/">跟着使用指南走一遍</a>
        </li>

        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--orange">企业服务</span><span class="entry-time">上季度</span></p>
          <h3 class="entry-title">批量导出之前，先把资料范围圈清楚</h3>
          <p class="entry-text">企业客户常按项目建共享资料清单，把要用到的条目先归拢，再选择 CSV 或 PDF 导出。范围明确的清单导出更快，也便于后续在项目内部流转。</p>
          <a class="entry-link" href="/reach-us/">联系企业对接</a>
        </li>

        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--orange">版本记录</span><span class="entry-time">第2版上线后第2个更新周期</span></p>
          <h3 class="entry-title">版本号怎么读：主版本、次版本与更新周期</h3>
          <p class="entry-text">资料库版本号按“主版本.次版本.更新周期”的形式展示。看到条目后面的编号，就能大致判断它是哪一轮整理进来的，第2版体系下的资料尤其好认。例行更新固定在每周二与周五。</p>
          <a class="entry-link" href="#versions">看版本记录专题</a>
        </li>

        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--cyan">城市节点</span><span class="entry-time">上季度</span></p>
          <h3 class="entry-title">南昌、赣州、九江同步完成条目校订</h3>
          <p class="entry-text">三个节点按轮值表分工，把本地的服务流程、设备说明与常见疑问逐条对照。校订后的条目重新核过编号与目录位置，从二级目录点开的路径更短。</p>
          <a class="entry-link" href="/values/">了解品牌与节点</a>
        </li>

        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--cyan">使用技巧</span><span class="entry-time">第2版上线后第1个更新周期</span></p>
          <h3 class="entry-title">电脑端第一次检索：先看二级目录，再敲关键词</h3>
          <p class="entry-text">焕新版资料库有 12 个一级栏目、86 个二级目录。第一次来的人先翻目录认路，比直接输入关键词更省时间；心里已有明确目标时，再配合标签与编号定位，几步就到。</p>
          <a class="entry-link" href="/guide/">进入使用指南</a>
        </li>

        <li class="entry" data-reveal>
          <p class="entry-meta"><span class="tag tag--orange">企业服务</span><span class="entry-time">本月</span></p>
          <h3 class="entry-title">城市节点协作：本地条目是怎么补进来的</h3>
          <p class="entry-text">企业客户在对接时提到的场景差异，会转到对应城市节点处理：节点补充材料、内容团队复核，再由资料库排期上线。南昌、赣州、九江、上饶、宜春五个节点每季度轮值一次。</p>
          <a class="entry-link" href="/reach-us/">说说您的场景</a>
        </li>
      </ol>
    </div>
  </div>

  <section class="section section--ink versions-band" aria-labelledby="versions">
    <div class="wrap versions-grid">
      <div class="versions-copy">
        <p class="eyebrow">版本记录</p>
        <h2 id="versions" class="display-lg lead--ink">从基础路径到短路径，三个阶段的改动都留了痕</h2>
        <p class="lead lead--ink">平台自 2016 年上线，先解决“找得到”，再解决“找得快”。第2版把常用操作压成三步，平均少一次页面跳转；改版之后，二级目录点击率提升 37%，新手第一次检索的完成率提升 29%。</p>

        <ol class="version-list">
          <li class="version-item" data-reveal>
            <p class="version-tag">第1版 · 基础路径</p>
            <h3 class="version-title">把栏目和资料立起来</h3>
            <p class="version-text">建立一级栏目骨架与基础检索，先让来访的人能找到目录与正文。</p>
          </li>
          <li class="version-item" data-reveal>
            <p class="version-tag">第1.5版 · 检索增强</p>
            <h3 class="version-title">加上标签与编号</h3>
            <p class="version-text">引入标签、版本号与二级目录，检索结果开始能按条件收窄。</p>
          </li>
          <li class="version-item" data-reveal>
            <p class="version-tag">第2版 · 短路径</p>
            <h3 class="version-title">进入—定位—展开</h3>
            <p class="version-text">常用操作压缩为三步，路径编号在电脑端与移动端保持一致。</p>
          </li>
        </ol>

        <p class="version-foot">例行更新每周二、周五进行，版本记录保留最近 24 个更新周期。</p>
      </div>

      <figure class="media-frame media-frame--4x5 versions-media">
        <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="第2版路径的更新周期与版本号组成的横向时间轴信息图，橙色标记已完成节点，青色标记当前节点" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">版本记录 · 主版本.次版本.更新周期</figcaption>
      </figure>
    </div>
  </section>

  <section class="section cities-band" aria-labelledby="cities">
    <div class="wrap cities-grid">
      <div class="cities-copy">
        <p class="eyebrow">城市节点观察</p>
        <h2 id="cities" class="display-lg">五个协作节点，把本地的事说准</h2>
        <p class="lead">服务以江西为核心，覆盖全省 11 个设区市，并延伸到周边 6 个省份的 42 个城市节点。南昌、赣州、九江、上饶、宜春五个内容协作节点负责本地资料校订与场景补充，每季度轮值一次，把通用说法改成这里就是这么办的写法。</p>
        <ul class="city-list">
          <li class="city-item" data-reveal><span class="city-name">南昌</span><span class="city-task">主城场景条目校订，服务流程表述统一</span></li>
          <li class="city-item" data-reveal><span class="city-name">赣州</span><span class="city-task">南部片区服务指引补充与编号核对</span></li>
          <li class="city-item" data-reveal><span class="city-name">九江</span><span class="city-task">设备切换与账户类说明的本地适配备注</span></li>
          <li class="city-item" data-reveal><span class="city-name">上饶</span><span class="city-task">生活服务类目表述打磨，操作步骤补全</span></li>
          <li class="city-item" data-reveal><span class="city-name">宜春</span><span class="city-task">企业对接流程的本地场景整理</span></li>
        </ul>
      </div>

      <figure class="media-frame media-frame--4x5 cities-media">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="五个城市协作节点由路网线条连接的抽象轴测图，节点以橙色与青色标记，没有真实地名与地址" loading="lazy" decoding="async">
        <figcaption class="media-frame__caption">协作节点 · 季度轮值校订</figcaption>
      </figure>
    </div>
  </section>

  <section class="section section--ink skills-band" aria-labelledby="skills">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">使用技巧</p>
        <h2 id="skills" class="display-lg lead--ink">三条上手动作，照着做就行</h2>
        <p class="lead lead--ink">每一条只讲一个动作，看完立刻能用。想系统看一遍，使用指南里按新手路径、设备与账户、收藏与导出、企业对接分好了组。</p>
      </div>

      <div class="skills-grid">
        <ol class="skill-track">
          <li class="skill-node" data-reveal>
            <span class="skill-step">01 进入</span>
            <h3 class="skill-title">从“下载与进入”起步</h3>
            <p class="skill-text">页头常驻入口在首屏与滚动后都看得见，换设备重新登录也走这里，不必回头找。</p>
          </li>
          <li class="skill-node" data-reveal>
            <span class="skill-step">02 定位</span>
            <h3 class="skill-title">用二级目录与标签收窄</h3>
            <p class="skill-text">先认目录再搜词，心里有目标时直接勾标签，四种筛选方式可以叠着用。</p>
          </li>
          <li class="skill-node" data-reveal>
            <span class="skill-step">03 展开</span>
            <h3 class="skill-title">收藏或导出，带走结果</h3>
            <p class="skill-text">个人中心里收藏整理、按 CSV 或 PDF 导出；企业客户可建共享清单在项目内流转。</p>
          </li>
        </ol>

        <figure class="media-frame media-frame--fill skills-media">
          <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="三步检索路径与筛选标签组合的步骤示意图，线条连接三个节点，无人物" loading="lazy" decoding="async">
          <figcaption class="media-frame__caption">进入 · 定位 · 展开</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="section follow-band" aria-labelledby="follow">
    <div class="wrap">
      <div class="section-head">
        <p class="eyebrow">接着跟进</p>
        <h2 id="follow" class="display-md">下次想找我们，走这三条路</h2>
      </div>
      <div class="follow-grid">
        <article class="follow-card" data-reveal>
          <p class="follow-num">路线 A</p>
          <h3 class="follow-title">按标签回访</h3>
          <p class="follow-text">版本记录、城市节点、使用技巧、企业服务四类标签长期在线。挑最关心的一类，下次从这里直接翻到新条目。</p>
          <a class="entry-link" href="#entries">回到条目列表</a>
        </article>
        <article class="follow-card" data-reveal>
          <p class="follow-num">路线 B</p>
          <h3 class="follow-title">用检索找资料</h3>
          <p class="follow-text">3,200 余条结构化资料按 12 个一级栏目、86 个二级目录安置。第一次来先看目录认路，再配合关键词与版本号定位。</p>
          <a class="entry-link" href="/guide/">查看操作说明</a>
        </article>
        <article class="follow-card" data-reveal>
          <p class="follow-num">路线 C</p>
          <h3 class="follow-title">把需求交给客服</h3>
          <p class="follow-text">家庭用户的问题在工作日 9:00-18:00 有回复；企业客户把需求、资料范围与对接方式说清楚，我们安排后续跟进。</p>
          <a class="entry-link" href="/reach-us/">前往联系入口</a>
        </article>
      </div>
    </div>
  </section>
</main>

.page-news {
  --news-rule: rgba(143, 166, 192, .32);
  --news-card: var(--paper);
  --news-soft-line: rgba(11, 31, 58, .12);
}

.page-news .breadcrumb {
  padding-top: 18px;
  padding-bottom: 18px;
}

/* ---------- 栏目头 ---------- */
.page-news .journal-masthead {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(255, 106, 42, .22) 0%, rgba(11, 31, 58, 0) 58%),
    repeating-linear-gradient(90deg, rgba(143, 166, 192, .12) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(143, 166, 192, .12) 0 1px, transparent 1px 64px),
    var(--ink-800);
  color: var(--paper);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  padding: clamp(26px, 5vw, 56px) 0 clamp(30px, 5vw, 64px);
}

.page-news .masthead-grid {
  display: grid;
  gap: clamp(22px, 4vw, 40px);
}

.page-news .masthead-copy h1 {
  margin: 12px 0 16px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(28px, 6.4vw, 54px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--white);
}

.page-news .masthead-copy .lead {
  max-width: 56ch;
  color: rgba(245, 240, 230, .86);
}

.page-news .masthead-index {
  display: grid;
  gap: 14px;
  margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

.page-news .index-cell {
  border-top: 2px solid var(--orange);
  padding-top: 10px;
}

.page-news .index-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--gold);
}

.page-news .index-label {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--mist);
}

.page-news .masthead-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.page-news .masthead-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 100%;
}

/* ---------- 标签列 + 条目流 ---------- */
.page-news .log-flow {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
  padding-top: clamp(34px, 6vw, 64px);
  padding-bottom: clamp(34px, 6vw, 64px);
}

.page-news .log-tags {
  align-self: start;
}

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

.page-news .tag-list a {
  text-decoration: none;
  display: inline-block;
}

.page-news .log-tags-note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-700);
  max-width: 30ch;
}

.page-news .entry-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 18px;
}

.page-news .entry {
  background: var(--news-card);
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--orange);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-2);
}

.page-news .entry:nth-child(2n) {
  background: var(--gray);
  border-left-color: var(--cyan);
}

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

.page-news .entry-time {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-700);
  letter-spacing: .02em;
}

.page-news .entry-title {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: clamp(18px, 3.6vw, 22px);
  line-height: 1.3;
  color: var(--ink-900);
}

.page-news .entry-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-900);
}

.page-news .entry-link {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  color: var(--ink-800);
  text-decoration: none;
  border-bottom: 2px solid var(--orange);
  padding-bottom: 2px;
}

.page-news .entry-link:hover,
.page-news .entry-link:focus-visible {
  color: var(--ink-900);
  border-bottom-color: var(--cyan);
}

/* ---------- 版本记录 ---------- */
.page-news .versions-band {
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.page-news .versions-grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

.page-news .version-list {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.page-news .version-item {
  position: relative;
  background: var(--ink-700);
  border: 1px solid rgba(143, 166, 192, .22);
  border-radius: var(--radius-md);
  padding: 24px 20px 20px;
}

.page-news .version-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--cyan));
}

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

.page-news .version-title {
  margin: 0 0 6px;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
}

.page-news .version-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245, 240, 230, .78);
}

.page-news .version-foot {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--mist);
}

.page-news .versions-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(143, 166, 192, .22);
}

.page-news .versions-media img,
.page-news .cities-media img,
.page-news .skills-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

/* ---------- 城市节点 ---------- */
.page-news .cities-grid {
  display: grid;
  gap: clamp(24px, 4vw, 44px);
}

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

.page-news .city-item {
  display: grid;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--news-soft-line);
  border-radius: var(--pill);
  padding: 14px 20px;
}

.page-news .city-name {
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink-900);
  letter-spacing: .02em;
}

.page-news .city-task {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-700);
}

.page-news .cities-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* ---------- 使用技巧 ---------- */
.page-news .skills-band {
  border-radius: var(--radius-xl);
}

.page-news .skills-grid {
  display: grid;
  gap: clamp(22px, 4vw, 36px);
  margin-top: 26px;
}

.page-news .skill-track {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.page-news .skill-node {
  position: relative;
  background: rgba(16, 42, 76, .72);
  border: 1px solid rgba(143, 166, 192, .26);
  border-radius: var(--radius-md);
  padding: 20px 20px 18px;
}

.page-news .skill-node::after {
  content: "";
  position: absolute;
  left: 34px;
  bottom: -14px;
  width: 2px;
  height: 14px;
  background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px);
}

.page-news .skill-node:last-child::after {
  display: none;
}

.page-news .skill-step {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cyan);
  border: 1px solid rgba(61, 224, 208, .45);
  border-radius: var(--pill);
  padding: 3px 10px;
}

.page-news .skill-title {
  margin: 10px 0 6px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.35;
  color: var(--white);
}

.page-news .skill-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: rgba(245, 240, 230, .8);
}

.page-news .skills-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(143, 166, 192, .22);
  min-height: 220px;
}

/* ---------- 接着跟进 ---------- */
.page-news .follow-band {
  background: linear-gradient(180deg, var(--paper) 0%, var(--gray) 100%);
  padding-bottom: clamp(40px, 7vw, 76px);
}

.page-news .follow-grid {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}

.page-news .follow-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  border-top: 3px solid var(--ink-800);
  box-shadow: var(--shadow-2);
}

.page-news .follow-card:nth-child(2) {
  border-top-color: var(--orange);
}

.page-news .follow-card:nth-child(3) {
  border-top-color: var(--cyan);
}

.page-news .follow-num {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-700);
}

.page-news .follow-title {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-weight: 800;
  font-size: 19px;
  color: var(--ink-900);
}

.page-news .follow-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-900);
}

/* ---------- 响应式 ---------- */
@media (min-width: 760px) {
  .page-news .masthead-grid {
    grid-template-columns: 1.1fr .9fr;
    align-items: end;
  }

  .page-news .version-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-news .city-item {
    grid-template-columns: 92px 1fr;
    align-items: baseline;
    gap: 14px;
  }

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

  .page-news .skill-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .page-news .skill-node::after {
    left: auto;
    right: -14px;
    bottom: auto;
    top: 40px;
    width: 14px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 8px);
  }
}

@media (min-width: 900px) {
  .page-news .log-flow {
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
  }

  .page-news .log-tags {
    position: sticky;
    top: calc(var(--header-h) + 20px);
    padding-right: 12px;
    border-right: 1px solid var(--news-rule);
  }

  .page-news .tag-list {
    display: grid;
    gap: 8px;
  }

  .page-news .tag-list a {
    display: block;
    text-align: center;
  }

  .page-news .entry-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    padding-bottom: 26px;
  }

  .page-news .entry:nth-child(4n + 2),
  .page-news .entry:nth-child(4n + 3) {
    transform: translateY(26px);
  }

  .page-news .versions-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
    align-items: start;
  }

  .page-news .cities-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    align-items: center;
  }

  .page-news .skills-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
    align-items: stretch;
  }

  .page-news .skill-track {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .page-news .skill-node::after {
    left: 34px;
    right: auto;
    top: auto;
    bottom: -16px;
    width: 2px;
    height: 16px;
    background: repeating-linear-gradient(180deg, var(--cyan) 0 4px, transparent 4px 8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .entry:nth-child(4n + 2),
  .page-news .entry:nth-child(4n + 3) {
    transform: none;
  }
}