.page-news {
  color: var(--mist);
  background:
    radial-gradient(120% 55% at 88% 0%, rgba(124, 92, 255, 0.16), transparent 62%),
    radial-gradient(90% 45% at 0% 8%, rgba(46, 242, 208, 0.10), transparent 58%),
    var(--ink);
  overflow-x: hidden;
}

.page-news img {
  max-width: 100%;
  height: auto;
}

/* ---------- 通用小标题组 ---------- */
.page-news .pn-head {
  display: grid;
  gap: 0.5rem;
  max-width: 64ch;
}

.page-news .pn-head__eyebrow {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--cyan);
  text-transform: uppercase;
}

.page-news .pn-head h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3.6vw, 2.15rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  font-weight: 800;
}

.page-news .pn-head p {
  margin: 0;
  color: var(--slate);
  font-size: 0.97rem;
  line-height: 1.75;
}

/* ---------- 首屏 ---------- */
.page-news .pn-hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(2rem, 6vw, 3.75rem)) 0 clamp(2rem, 5vw, 3.25rem);
}

.page-news .pn-hero::after {
  content: "";
  position: absolute;
  top: 0;
  right: -12%;
  width: 62%;
  height: 100%;
  background: linear-gradient(158deg, rgba(46, 242, 208, 0.10), rgba(255, 107, 74, 0.07) 62%, transparent 84%);
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.page-news .pn-hero .shell {
  position: relative;
  z-index: 1;
}

.page-news .pn-hero .crumbs {
  margin-bottom: clamp(1.2rem, 3vw, 1.9rem);
}

.page-news .pn-hero__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.75rem);
}

.page-news .pn-hero__kicker {
  margin: 0 0 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--coral);
}

.page-news .pn-hero h1 {
  margin: 0;
  font-size: clamp(1.85rem, 5.6vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 900;
  background: linear-gradient(96deg, var(--mist) 34%, #a8f6e8 82%, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.page-news .pn-hero__lead {
  margin: 1.15rem 0 0;
  max-width: 48ch;
  color: var(--slate);
  font-size: 1rem;
  line-height: 1.8;
}

.page-news .pn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.7rem;
}

.page-news .pn-hero__panel {
  display: grid;
  gap: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--gold-soft);
  border-radius: var(--radius-m);
  background: linear-gradient(158deg, rgba(18, 56, 79, 0.92), rgba(12, 38, 56, 0.78));
}

.page-news .pn-hero__panel-title {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.page-news .pn-hero__row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  padding: 0.15rem 0;
  border-top: 1px dashed rgba(216, 179, 106, 0.24);
  color: var(--mist);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.25s var(--ease);
}

.page-news .pn-hero__row:first-of-type {
  border-top: 0;
}

.page-news .pn-hero__row:hover,
.page-news .pn-hero__row:focus-visible {
  color: var(--cyan);
}

.page-news .pn-hero__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-news .pn-hero__label {
  flex: 1;
}

.page-news .pn-hero__go {
  color: var(--cyan);
  font-size: 0.85rem;
}

.page-news .pn-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
  margin-top: clamp(1.9rem, 5vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid rgba(216, 179, 106, 0.28);
}

.page-news .pn-stat {
  display: grid;
  gap: 0.28rem;
}

.page-news .pn-stat__num {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  line-height: 1;
  color: var(--cyan);
  letter-spacing: -0.02em;
}

.page-news .pn-stat__label {
  font-size: 0.82rem;
  color: var(--slate);
  letter-spacing: 0.04em;
}

/* ---------- 标签矩阵 ---------- */
.page-news .pn-tags {
  padding: clamp(2.3rem, 6vw, 3.75rem) 0;
}

.page-news .pn-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .pn-tags__list .tag {
  font-size: 0.86rem;
  padding: 0.42rem 0.85rem;
}

/* ---------- 精选案例 ---------- */
.page-news .pn-featured {
  padding: clamp(2.3rem, 6vw, 3.75rem) 0 clamp(2.5rem, 7vw, 4.25rem);
}

.page-news .pn-featured__cover {
  margin: clamp(1.5rem, 4vw, 2.1rem) 0 clamp(1.4rem, 4vw, 2rem);
}

.page-news .pn-featured__grid {
  display: grid;
  gap: 1rem;
}

.page-news .pn-case {
  position: relative;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 1.2rem 1.1rem 1.25rem 1.25rem;
  border: 1px solid rgba(216, 179, 106, 0.22);
  border-radius: var(--radius-m);
  background: linear-gradient(165deg, var(--ink-2), var(--ink-3));
  overflow: hidden;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.page-news .pn-case::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--coral));
}

.page-news .pn-case:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 242, 208, 0.42);
}

.page-news .pn-case__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.page-news .pn-case h3 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.page-news .pn-case p {
  margin: 0;
  color: var(--slate);
  font-size: 0.93rem;
  line-height: 1.72;
}

.page-news .pn-case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .pn-case__tags .tag {
  font-size: 0.74rem;
  padding: 0.24rem 0.6rem;
}

.page-news .pn-case__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--cyan);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}

.page-news .pn-case__link:hover,
.page-news .pn-case__link:focus-visible {
  color: var(--coral);
}

/* ---------- 最新列表 ---------- */
.page-news .pn-latest {
  padding: clamp(2.3rem, 6vw, 4rem) 0;
}

.page-news .pn-latest__grid {
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.6rem);
  margin-top: 1.6rem;
}

.page-news .pn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(216, 179, 106, 0.22);
}

.page-news .pn-entry {
  display: grid;
  gap: 0.5rem;
  padding: 1.05rem 0.4rem 1.05rem 0.1rem;
  border-bottom: 1px solid rgba(216, 179, 106, 0.16);
  transition: background 0.25s var(--ease);
}

.page-news .pn-entry:hover {
  background: rgba(46, 242, 208, 0.05);
}

.page-news .pn-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--slate);
}

.page-news .pn-entry__issue {
  color: var(--cyan);
}

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

.page-news .pn-entry h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.48;
  letter-spacing: -0.01em;
}

.page-news .pn-entry__more {
  font-size: 0.9rem;
}

.page-news .pn-entry__more summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
}

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

.page-news .pn-entry__more summary::before {
  content: "+";
  font-size: 0.95rem;
  line-height: 1;
}

.page-news .pn-entry__more[open] summary::before {
  content: "−";
}

.page-news .pn-entry__more p {
  margin: 0.5rem 0 0.3rem;
  color: var(--slate);
  line-height: 1.78;
}

.page-news .pn-side {
  display: grid;
  gap: 1rem;
  align-content: start;
}

.page-news .pn-side__figure {
  margin: 0;
}

.page-news .pn-side__card {
  padding: 1.1rem;
  border: 1px solid rgba(216, 179, 106, 0.24);
  border-radius: var(--radius-m);
  background: rgba(12, 38, 56, 0.72);
}

.page-news .pn-side__card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.4;
}

.page-news .pn-side__card p {
  margin: 0 0 0.95rem;
  color: var(--slate);
  font-size: 0.9rem;
  line-height: 1.72;
}

/* ---------- 主题归档 ---------- */
.page-news .pn-archive {
  position: relative;
  padding: clamp(2.4rem, 6vw, 4rem) 0 clamp(2.6rem, 7vw, 4.25rem);
  background: linear-gradient(180deg, rgba(18, 56, 79, 0.55), rgba(6, 24, 38, 0) 62%);
}

.page-news .pn-archive__banner {
  margin: clamp(1.5rem, 4vw, 2.1rem) 0 clamp(1.3rem, 3.5vw, 1.8rem);
}

.page-news .pn-archive__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-news .pn-archive__item {
  display: grid;
  gap: 0.35rem;
  padding: 0.85rem 0 0.85rem 0.95rem;
  border-left: 2px solid rgba(46, 242, 208, 0.34);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.page-news .pn-archive__item:hover {
  border-left-color: var(--coral);
  transform: translateX(2px);
}

.page-news .pn-archive__top {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.page-news .pn-archive__num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.page-news .pn-archive__item h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.page-news .pn-archive__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--slate);
  white-space: nowrap;
}

.page-news .pn-archive__item p {
  margin: 0;
  color: var(--slate);
  font-size: 0.87rem;
  line-height: 1.65;
}

/* ---------- 更新节奏 ---------- */
.page-news .pn-cadence {
  padding: clamp(2.4rem, 6vw, 4rem) 0;
}

.page-news .pn-cadence__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
}

.page-news .pn-cadence__list {
  display: grid;
  gap: 0.85rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.page-news .pn-cadence__list li {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(216, 179, 106, 0.22);
}

.page-news .pn-cadence__list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-news .pn-cadence__key {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--coral);
  padding-top: 0.2rem;
}

.page-news .pn-cadence__list p {
  margin: 0;
  color: var(--slate);
  font-size: 0.92rem;
  line-height: 1.72;
}

.page-news .pn-cadence__figure {
  margin: 0;
}

/* ---------- 收尾行动区 ---------- */
.page-news .pn-cta {
  padding: 0 0 clamp(3rem, 7vw, 5rem);
}

.page-news .pn-cta__inner {
  display: grid;
  gap: 1.2rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid rgba(255, 107, 74, 0.4);
  border-radius: var(--radius-l);
  background: linear-gradient(150deg, rgba(255, 107, 74, 0.14), rgba(46, 242, 208, 0.08) 72%, transparent);
}

.page-news .pn-cta__copy h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.25rem, 3vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.page-news .pn-cta__copy p {
  margin: 0;
  max-width: 52ch;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.75;
}

.page-news .pn-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

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

@media (min-width: 860px) {
  .page-news .pn-featured__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: start;
  }

  .page-news .pn-featured__grid > :nth-child(2) {
    margin-top: 30px;
  }

  .page-news .pn-featured__grid > :nth-child(3) {
    margin-top: 14px;
  }

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

@media (min-width: 900px) {
  .page-news .pn-hero__grid {
    grid-template-columns: minmax(0, 1.18fr) minmax(268px, 0.82fr);
    align-items: end;
  }

  .page-news .pn-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem 1.4rem;
  }

  .page-news .pn-latest__grid {
    grid-template-columns: minmax(0, 1.62fr) minmax(250px, 0.62fr);
    align-items: start;
  }
}

@media (min-width: 1000px) {
  .page-news .pn-archive__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.9rem 1.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .pn-case,
  .page-news .pn-archive__item {
    transition: none;
  }

  .page-news .pn-case:hover,
  .page-news .pn-archive__item:hover {
    transform: none;
  }
}


<main id="main-content" class="page-news">

  <section class="pn-hero" aria-labelledby="pn-title">
    <div class="shell">
      <nav class="crumbs" aria-label="面包屑">
        <span class="crumbs__item"><a class="crumbs__link" href="/">主页</a></span>
        <span class="crumbs__sep" aria-hidden="true">/</span>
        <span class="crumbs__item crumbs__current" aria-current="page">专栏与案例</span>
      </nav>

      <div class="pn-hero__grid">
        <div class="pn-hero__copy">
          <p class="pn-hero__kicker">第 48 期 · 双周更新</p>
          <h1 id="pn-title">专栏与案例：每一篇都拆开一个具体难题</h1>
          <p class="pn-hero__lead">
            登录入口换了位置、换了新手机认不出原来的界面、检索关键词总也匹配不上——这些情况在澳门十大娱乐城
            都有对应的拆解。每篇都标好期号、所属栏目与标签，读完可以照着步骤操作，也能回到对应栏目接着往下找。
          </p>
          <div class="pn-hero__actions">
            <a class="btn btn--coral" href="#latest">看最新一期</a>
            <a class="btn btn--ghost" href="#archive">按主题翻案例</a>
          </div>
        </div>

        <aside class="pn-hero__panel" aria-label="本期导读">
          <p class="pn-hero__panel-title">本期导读 / ISSUE 48</p>
          <a class="pn-hero__row" href="#latest">
            <span class="pn-hero__num">01</span>
            <span class="pn-hero__label">这一期讲了什么</span>
            <span class="pn-hero__go" aria-hidden="true">→</span>
          </a>
          <a class="pn-hero__row" href="#archive">
            <span class="pn-hero__num">02</span>
            <span class="pn-hero__label">同类案例收在哪</span>
            <span class="pn-hero__go" aria-hidden="true">→</span>
          </a>
          <a class="pn-hero__row" href="/business/">
            <span class="pn-hero__num">03</span>
            <span class="pn-hero__label">看完整服务清单</span>
            <span class="pn-hero__go" aria-hidden="true">→</span>
          </a>
        </aside>
      </div>

      <div class="pn-stats">
        <div class="pn-stat"><span class="pn-stat__num">1260</span><span class="pn-stat__label">篇专栏与案例</span></div>
        <div class="pn-stat"><span class="pn-stat__num">12</span><span class="pn-stat__label">个主题归档</span></div>
        <div class="pn-stat"><span class="pn-stat__num">120+</span><span class="pn-stat__label">个主题标签</span></div>
        <div class="pn-stat"><span class="pn-stat__num">双周</span><span class="pn-stat__label">更新节奏</span></div>
      </div>
    </div>
  </section>

  <section class="pn-tags" id="tags" aria-labelledby="pn-tags-title">
    <div class="shell">
      <div class="pn-head" data-reveal>
        <p class="pn-head__eyebrow">TOPIC INDEX</p>
        <h2 id="pn-tags-title">先看看这些主题，有没有你要的那一类</h2>
        <p>标签来自实际被问到的场景，越具体的标签，越靠近一篇能直接照着做的拆解。</p>
      </div>
      <ul class="pn-tags__list" data-reveal>
        <li><span class="tag tag--cyan">路径观察</span></li>
        <li><span class="tag">账户中心</span></li>
        <li><span class="tag tag--cyan">检索方法</span></li>
        <li><span class="tag">移动端体验</span></li>
        <li><span class="tag tag--coral">换机登录</span></li>
        <li><span class="tag">服务清单</span></li>
        <li><span class="tag">客服通道</span></li>
        <li><span class="tag tag--coral">额度说明</span></li>
        <li><span class="tag">版本更新</span></li>
        <li><span class="tag">分类索引</span></li>
        <li><span class="tag">工单提交</span></li>
        <li><span class="tag">入口收拢</span></li>
        <li><span class="tag tag--cyan">常见问题</span></li>
        <li><span class="tag">专题索引</span></li>
        <li><span class="tag">栏目导航</span></li>
        <li><span class="tag">标签筛选</span></li>
        <li><span class="tag">案例拆解</span></li>
        <li><span class="tag tag--coral">主题共建</span></li>
      </ul>
    </div>
  </section>

  <section class="pn-featured" id="featured" aria-labelledby="pn-featured-title">
    <div class="shell">
      <div class="pn-head" data-reveal>
        <p class="pn-head__eyebrow">SELECTED FILES</p>
        <h2 id="pn-featured-title">三组常被翻开的案例档案</h2>
        <p>从一条完整的操作流程出发，把中途容易卡住的地方单独拎出来讲清楚。</p>
      </div>

      <figure class="media-frame media-frame--wide pn-featured__cover" data-reveal>
        <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="俯拍叠放的档案卡与主题标签，霓虹光轨穿过编号标签" loading="lazy" decoding="async">
        <span class="media-frame__code">FILE / 48</span>
      </figure>

      <div class="pn-featured__grid">
        <article class="pn-case" data-reveal>
          <p class="pn-case__code">档案 01 · 专题 07 · 路径观察</p>
          <h3>从首页走到具体栏目，中间到底隔了几层</h3>
          <p>沿着一条真实的使用流程逐步记录每一步落在哪个栏目，遇到分叉的地方给出两种走法，并说明各自更适合什么情况。</p>
          <ul class="pn-case__tags">
            <li><span class="tag tag--cyan">路径观察</span></li>
            <li><span class="tag">栏目导航</span></li>
          </ul>
          <a class="pn-case__link" href="/business/">在检索台找同类条目 →</a>
        </article>

        <article class="pn-case" data-reveal>
          <p class="pn-case__code">档案 02 · 专题 02 · 账户中心</p>
          <h3>一个入口，把常用的几件事收在一起</h3>
          <p>工单、客服通道、额度说明的入口集中到同一处之后，找东西的步骤明显变短。这篇把每个入口的位置和取用顺序写下来。</p>
          <ul class="pn-case__tags">
            <li><span class="tag tag--cyan">账户中心</span></li>
            <li><span class="tag">工单提交</span></li>
          </ul>
          <a class="pn-case__link" href="/help/">到帮助中心看操作入口 →</a>
        </article>

        <article class="pn-case" data-reveal>
          <p class="pn-case__code">档案 03 · 专题 04 · 移动端体验</p>
          <h3>小屏幕上，怎么少点两次</h3>
          <p>移动端访问占到全站访客的 78%，屏幕小、手指粗，多一次跳转就多一次放弃。这篇把常用操作压缩到两步以内的做法拆开讲。</p>
          <ul class="pn-case__tags">
            <li><span class="tag tag--cyan">移动端体验</span></li>
            <li><span class="tag tag--coral">换机登录</span></li>
          </ul>
          <a class="pn-case__link" href="/help/">查看移动端客服通道 →</a>
        </article>
      </div>
    </div>
  </section>

  <section class="pn-latest" id="latest" aria-labelledby="pn-latest-title">
    <div class="shell">
      <div class="pn-head" data-reveal>
        <p class="pn-head__eyebrow">RECENT ISSUES</p>
        <h2 id="pn-latest-title">最近几期，按时间从新到旧</h2>
        <p>每期围绕一个主题展开，展开摘要就能看到这篇解决的是哪一种情况。</p>
      </div>

      <div class="pn-latest__grid">
        <ol class="pn-list">
          <li class="pn-entry" data-reveal>
            <div class="pn-entry__meta">
              <span class="pn-entry__issue">第 48 期</span>
              <span>专题 07</span>
              <span class="pn-entry__time">三周前更新</span>
            </div>
            <h3>换了新手机，移动端入口的位置没有变</h3>
            <ul class="pn-case__tags">
              <li><span class="tag tag--cyan">换机登录</span></li>
              <li><span class="tag">移动端体验</span></li>
            </ul>
            <details class="pn-entry__more">
              <summary>展开摘要</summary>
              <p>移动端登录从账户中心进入，换设备之后这条路径保持不变。这篇对比了书签、浏览器历史与手动输入地址三种进入方式，说明各自在换机后还需要重新做哪些动作。</p>
            </details>
          </li>

          <li class="pn-entry" data-reveal>
            <div class="pn-entry__meta">
              <span class="pn-entry__issue">第 47 期</span>
              <span>专题 03</span>
              <span class="pn-entry__time">五周前更新</span>
            </div>
            <h3>关键词总也搜不到，先看看栏目选对了没有</h3>
            <ul class="pn-case__tags">
              <li><span class="tag tag--cyan">检索方法</span></li>
              <li><span class="tag">分类索引</span></li>
            </ul>
            <details class="pn-entry__more">
              <summary>展开摘要</summary>
              <p>把长句拆成两三个短词、先限定一级栏目再补关键词，是命中率最高的两种用法。这篇用同一组查询做了对照，说明逐个收窄比一次输入整句话更容易找到条目。</p>
            </details>
          </li>

          <li class="pn-entry" data-reveal>
            <div class="pn-entry__meta">
              <span class="pn-entry__issue">第 46 期</span>
              <span>专题 06</span>
              <span class="pn-entry__time">七周前更新</span>
            </div>
            <h3>28 项服务里，真正用得上的通常是哪几项</h3>
            <ul class="pn-case__tags">
              <li><span class="tag tag--cyan">服务清单</span></li>
              <li><span class="tag">版本更新</span></li>
            </ul>
            <details class="pn-entry__more">
              <summary>展开摘要</summary>
              <p>6 大模块、28 项服务按使用频率重新排了一次序，把账户、检索、客服三条线单独拎出来，说明刚接触的人先看哪几项就够了。</p>
            </details>
          </li>

          <li class="pn-entry" data-reveal>
            <div class="pn-entry__meta">
              <span class="pn-entry__issue">第 45 期</span>
              <span>专题 02</span>
              <span class="pn-entry__time">九周前更新</span>
            </div>
            <h3>账户中心的工单，比直接发邮件快在哪里</h3>
            <ul class="pn-case__tags">
              <li><span class="tag tag--cyan">账户中心</span></li>
              <li><span class="tag">工单提交</span></li>
            </ul>
            <details class="pn-entry__more">
              <summary>展开摘要</summary>
              <p>账户与额度类问题走工单，能看到处理进度；邮件通道与工单并行，适合附带截图或需要文字说明的情况。这篇把两条通道的适用场景分别写清楚。</p>
            </details>
          </li>

          <li class="pn-entry" data-reveal>
            <div class="pn-entry__meta">
              <span class="pn-entry__issue">第 44 期</span>
              <span>专题 08</span>
              <span class="pn-entry__time">十一周前更新</span>
            </div>
            <h3>看额度说明之前，先拉到页面底部</h3>
            <ul class="pn-case__tags">
              <li><span class="tag tag--coral">额度说明</span></li>
              <li><span class="tag">版本更新</span></li>
            </ul>
            <details class="pn-entry__more">
              <summary>展开摘要</summary>
              <p>首页底部的更新日期决定你看到的是哪一期内容。这篇说明最近 12 期记录怎么往回翻，以及不同期之间哪些部分会调整、哪些保持不变。</p>
            </details>
          </li>

          <li class="pn-entry" data-reveal>
            <div class="pn-entry__meta">
              <span class="pn-entry__issue">第 43 期</span>
              <span>专题 10</span>
              <span class="pn-entry__time">十三周前更新</span>
            </div>
            <h3>9 个一级栏目下面，46 个二级栏目怎么一层层收窄</h3>
            <ul class="pn-case__tags">
              <li><span class="tag">栏目导航</span></li>
              <li><span class="tag">分类索引</span></li>
            </ul>
            <details class="pn-entry__more">
              <summary>展开摘要</summary>
              <p>从一级栏目入手、再借标签矩阵缩小范围，通常两到三层就能碰到目标条目。这篇给出一条完整示例，从首页一路点到具体文章。</p>
            </details>
          </li>

          <li class="pn-entry" data-reveal>
            <div class="pn-entry__meta">
              <span class="pn-entry__issue">第 42 期</span>
              <span>专题 01</span>
              <span class="pn-entry__time">十五周前更新</span>
            </div>
            <h3>同一件事在三个栏目都提到，从哪一条开始看</h3>
            <ul class="pn-case__tags">
              <li><span class="tag tag--cyan">路径观察</span></li>
              <li><span class="tag">常见问题</span></li>
            </ul>
            <details class="pn-entry__more">
              <summary>展开摘要</summary>
              <p>平台档案讲背景、服务矩阵讲功能、帮助中心讲操作步骤。这篇按问题类型给出建议的阅读顺序，避免在几个栏目之间来回跳。</p>
            </details>
          </li>
        </ol>

        <aside class="pn-side">
          <figure class="media-frame pn-side__figure">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="深色屏幕上发光的列表与标签，抽象检索界面" loading="lazy" decoding="async">
            <span class="media-frame__code">INDEX / 12</span>
          </figure>

          <div class="pn-side__card">
            <h3>想按关键词直接找</h3>
            <p>检索台支持关键词加栏目两个方向同时收窄，120 个以上标签可以叠加使用，条目会带上所属栏目方便回看。</p>
            <a class="btn btn--ghost btn--sm" href="/business/">进入分类检索</a>
          </div>

          <div class="pn-side__card">
            <h3>本期没覆盖到你的情况</h3>
            <p>把遇到的具体步骤写清楚发给客服，工作日的 9:00 到 18:00 有专人回复，常见疑问会进入下一期的选题。</p>
            <a class="btn btn--ghost btn--sm" href="/contact-us/">联系客服</a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section class="pn-archive" id="archive" aria-labelledby="pn-archive-title">
    <div class="shell">
      <div class="pn-head" data-reveal>
        <p class="pn-head__eyebrow">ARCHIVE MAP</p>
        <h2 id="pn-archive-title">按主题归档，从你最关心的一块进去</h2>
        <p>12 个主题覆盖从入口到操作的各个环节，每篇内容都留有所属栏目，看完能顺着原路回去。</p>
      </div>

      <figure class="media-frame media-frame--wide pn-archive__banner" data-reveal>
        <img src="{zhanqunpic:h:800w:1400}" width="1400" height="800" alt="抽象路径分叉与档案柜格栅，香槟金细线标注分区" loading="lazy" decoding="async">
        <span class="media-frame__code">MAP / 12</span>
      </figure>

      <ul class="pn-archive__grid">
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">01</span>
            <h3>路径观察</h3>
            <span class="pn-archive__count">186 篇</span>
          </div>
          <p>从首页到具体栏目，逐步记录每一层落在哪里。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">02</span>
            <h3>账户中心</h3>
            <span class="pn-archive__count">142 篇</span>
          </div>
          <p>工单、客服、额度说明在同一个入口的取用顺序。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">03</span>
            <h3>检索方法</h3>
            <span class="pn-archive__count">128 篇</span>
          </div>
          <p>关键词怎么拆、栏目怎么叠加，才能把结果收窄。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">04</span>
            <h3>移动端体验</h3>
            <span class="pn-archive__count">96 篇</span>
          </div>
          <p>小屏幕上的常见操作，位置变化与步骤对照。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">05</span>
            <h3>换机登录</h3>
            <span class="pn-archive__count">84 篇</span>
          </div>
          <p>换了设备之后，原来的入口和步骤还在哪个位置。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">06</span>
            <h3>服务清单</h3>
            <span class="pn-archive__count">112 篇</span>
          </div>
          <p>6 大模块、28 项服务各自解决什么问题。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">07</span>
            <h3>客服通道</h3>
            <span class="pn-archive__count">76 篇</span>
          </div>
          <p>移动端客服入口的进入方式与回复时段。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">08</span>
            <h3>额度说明</h3>
            <span class="pn-archive__count">68 篇</span>
          </div>
          <p>查看位置、更新日期与最近 12 期记录。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">09</span>
            <h3>版本更新</h3>
            <span class="pn-archive__count">94 篇</span>
          </div>
          <p>服务清单改版之后，界面与入口做了哪些调整。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">10</span>
            <h3>分类索引</h3>
            <span class="pn-archive__count">88 篇</span>
          </div>
          <p>9 个一级栏目与 46 个二级栏目之间的归属关系。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">11</span>
            <h3>常见问题</h3>
            <span class="pn-archive__count">102 篇</span>
          </div>
          <p>反复被问到的操作疑问，附上对应的解决步骤。</p>
        </li>
        <li class="pn-archive__item" data-reveal>
          <div class="pn-archive__top">
            <span class="pn-archive__num">12</span>
            <h3>主题共建</h3>
            <span class="pn-archive__count">84 篇</span>
          </div>
          <p>与 18 家内容合作方共同维护的专题栏目与供稿。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="pn-cadence" id="cadence" aria-labelledby="pn-cadence-title">
    <div class="shell">
      <div class="pn-cadence__grid">
        <div class="pn-cadence__copy">
          <div class="pn-head">
            <p class="pn-head__eyebrow">RHYTHM</p>
            <h2 id="pn-cadence-title">多久能看到新内容，怎么跟得上</h2>
            <p>每个月大约有 60 条内容归档进检索台，节奏稳定，方便你按习惯回来看更新。</p>
          </div>
          <ul class="pn-cadence__list">
            <li>
              <span class="pn-cadence__key">双周</span>
              <p>专栏与案例上新一期，围绕一个主题配一组可以照着做的步骤。</p>
            </li>
            <li>
              <span class="pn-cadence__key">双周</span>
              <p>首页的额度说明同步更新，页面底部标出最新日期，最近 12 期记录可以往回翻。</p>
            </li>
            <li>
              <span class="pn-cadence__key">每月</span>
              <p>约 60 条内容按主题归档进分类索引，旧文也能从标签矩阵里翻出来。</p>
            </li>
            <li>
              <span class="pn-cadence__key">每季</span>
              <p>中文版服务清单发版，当前版本为 v3.2，入口与界面有调整时会同步写成拆解。</p>
            </li>
            <li>
              <span class="pn-cadence__key">版本节点</span>
              <p>重大版本发布专题索引，把同一批变化集中放在一处，不用逐页去翻。</p>
            </li>
          </ul>
        </div>

        <figure class="media-frame pn-cadence__figure" data-reveal>
          <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="等宽期号与珊瑚橙更新徽章特写，冷调高对比" loading="lazy" decoding="async">
          <span class="media-frame__code">UPD / 14D</span>
        </figure>
      </div>
    </div>
  </section>

  <section class="pn-cta" aria-labelledby="pn-cta-title">
    <div class="shell">
      <div class="pn-cta__inner">
        <div class="pn-cta__copy">
          <h2 id="pn-cta-title">手头正卡在某一步？</h2>
          <p>先把当期案例翻一遍，多数操作问题能在里面找到对应步骤；没找到就直接问，我们把答案写进下一期。</p>
        </div>
        <div class="pn-cta__actions">
          <a class="btn btn--coral" href="/help/">去帮助中心</a>
          <a class="btn btn--ghost" href="/introduction/">了解平台档案</a>
        </div>
      </div>
    </div>
  </section>

</main>