.page-news {
  --news-radius: 22px;
  background:
    radial-gradient(880px 420px at 90% -12%, rgba(234, 88, 12, .10), transparent 62%),
    radial-gradient(620px 320px at 4% 18%, rgba(16, 42, 67, .06), transparent 60%),
    var(--c-sand);
  color: var(--c-ink);
  padding-bottom: 3.5rem;
}

.page-news .breadcrumb {
  margin: 0;
  padding: 1.15rem 0 .25rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--c-sand-gray);
}

.page-news .breadcrumb .link-inline {
  color: var(--c-ink-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 42, 67, .22);
}

.page-news .breadcrumb .link-inline:hover {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

.page-news .breadcrumb-sep {
  margin: 0 .45rem;
  color: var(--c-sand-mid);
}

.page-news .link-inline {
  color: var(--c-orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 65, 12, .35);
  transition: color var(--ease), border-color var(--ease);
}

.page-news .link-inline:hover {
  color: var(--c-orange-lit);
  border-bottom-color: var(--c-orange-lit);
}

.page-news .eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-orange);
}

/* ---------- 首屏：刻度栏 + 门牌叙事 ---------- */
.page-news .news-hero {
  padding: 1.35rem 0 1rem;
}

.page-news .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.page-news .quarter-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  padding: .9rem;
  background: rgba(251, 247, 240, .72);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--news-radius);
}

.page-news .rail-title {
  grid-column: 1 / -1;
  margin: 0 0 .15rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--c-sand-gray);
}

.page-news .rail-item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem .7rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--c-ink);
  font-size: .82rem;
  line-height: 1.4;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.page-news .rail-item:hover {
  border-color: rgba(194, 65, 12, .45);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.page-news .rail-num {
  font-weight: 700;
  color: var(--c-orange);
  font-size: .82rem;
}

.page-news .rail-label {
  color: var(--c-ink-2);
}

.page-news .hero-copy {
  border-top: 3px solid var(--c-orange);
  padding-top: 1.1rem;
}

.page-news .hero-copy h1 {
  margin: 0 0 .85rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.72rem, 6.2vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

.page-news .hero-lede {
  margin: 0 0 1.4rem;
  max-width: 60ch;
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.page-news .hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}

.page-news .meta-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .7rem .85rem;
  background: var(--c-paper);
  border-left: 3px solid var(--c-sand-mid);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.page-news .meta-key {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--c-sand-gray);
}

.page-news .meta-val {
  font-size: .88rem;
  font-weight: 500;
  color: var(--c-ink);
}

.page-news .mono-num {
  font-family: var(--f-mono);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---------- 公共区块头 ---------- */
.page-news .section-head {
  margin-bottom: 1.4rem;
}

.page-news .section-head .section-title {
  margin: 0 0 .7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.32rem, 4.4vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.page-news .section-head .lede {
  margin: 0;
  max-width: 64ch;
  font-family: var(--f-serif);
  font-size: .96rem;
  line-height: 1.85;
  color: var(--c-ink-2);
}

/* ---------- 时间轴 ---------- */
.page-news .timeline {
  padding: 2.6rem 0 1rem;
}

.page-news .tl-figure {
  margin: 0 0 1.6rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--news-radius);
  border: 1px solid var(--c-line);
}

.page-news .tl-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.35rem;
  display: grid;
  gap: 1rem;
}

.page-news .tl-list::before {
  content: "";
  position: absolute;
  left: .32rem;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--c-orange), rgba(234, 88, 12, .12));
  border-radius: var(--r-pill);
}

.page-news .tl-item {
  position: relative;
  padding: 1.05rem 1.1rem 1.15rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

.page-news .tl-item::before {
  content: "";
  position: absolute;
  left: -1.22rem;
  top: 1.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-sand);
  border: 2px solid var(--c-orange);
}

.page-news .tl-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .45rem;
}

.page-news .tl-q {
  font-size: .95rem;
  color: var(--c-orange);
}

.page-news .tl-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-ink);
}

.page-news .tl-item p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--c-ink-2);
}

/* ---------- 费用周期 ---------- */
.page-news .fee-cycle {
  margin: 2.6rem 0;
  padding: 1.6rem 1.15rem 1.5rem;
  background: var(--c-amber);
  border-radius: var(--r-lg);
  border: 1px solid rgba(194, 65, 12, .16);
}

.page-news .fee-head .section-title {
  margin: 0 0 .7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.28rem, 4.2vw, 1.85rem);
  line-height: 1.32;
}

.page-news .fee-lede {
  margin: 0 0 1.25rem;
  max-width: 60ch;
  font-family: var(--f-serif);
  font-size: .95rem;
  line-height: 1.85;
  color: var(--c-brown);
}

.page-news .fee-figure {
  margin: 0 0 1.3rem;
  aspect-ratio: 2 / 1;
  border-radius: var(--r-md);
  background: var(--c-sand-lift);
}

.page-news .cycle-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

.page-news .cycle-step {
  position: relative;
  padding: 1.05rem 1.05rem 1.15rem;
  background: var(--c-paper);
  border-radius: var(--r-md);
  border-top: 3px solid var(--c-orange);
}

.page-news .step-num {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .18rem .55rem;
  font-size: .78rem;
  color: var(--c-brown);
  background: rgba(253, 232, 181, .85);
  border-radius: var(--r-pill);
}

.page-news .step-title {
  margin: 0 0 .4rem;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 700;
}

.page-news .cycle-step p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.8;
  color: var(--c-ink-2);
}

.page-news .fee-foot {
  margin: 1.15rem 0 0;
  font-size: .87rem;
  color: var(--c-brown);
}

.page-news .fee-foot .link-inline {
  color: var(--c-brown);
  border-bottom-color: rgba(124, 45, 18, .4);
}

.page-news .fee-foot .link-inline:hover {
  color: var(--c-orange);
}

/* ---------- 更新列表 ---------- */
.page-news .updates {
  padding: 1rem 0 1.5rem;
}

.page-news .upd-texture {
  margin: 0 0 1.5rem;
  aspect-ratio: 16 / 5;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft);
}

.page-news .update-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}

.page-news .upd-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--c-sand-lift);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: box-shadow var(--ease), border-color var(--ease), background var(--ease);
}

.page-news .upd-card:hover {
  background: var(--c-paper);
  border-color: rgba(194, 65, 12, .32);
  box-shadow: var(--shadow-lift);
}

.page-news .upd-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.page-news .upd-meta .chip-accent {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
}

.page-news .upd-time {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--c-sand-gray);
  white-space: nowrap;
}

.page-news .upd-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
}

.page-news .upd-card p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.78;
  color: var(--c-ink-2);
}

/* ---------- 分类与归档 ---------- */
.page-news .archive {
  margin: 1.5rem 0;
  padding: 1.6rem 1.15rem;
  background: var(--c-ink);
  border-radius: var(--r-lg);
  color: var(--c-sand);
}

.page-news .arch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.page-news .archive .eyebrow {
  color: var(--c-orange-lit);
}

.page-news .archive .section-title {
  margin: 0 0 .8rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.26rem, 4.2vw, 1.8rem);
  color: var(--c-paper);
}

.page-news .arch-copy p {
  margin: 0;
  max-width: 48ch;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--c-on-ink);
}

.page-news .arch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.page-news .arch-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .7rem;
  align-items: start;
  padding: .7rem .8rem;
  background: rgba(246, 240, 230, .06);
  border-left: 2px solid var(--c-orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.page-news .arch-key {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-amber);
}

.page-news .arch-val {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--c-on-ink);
}

/* ---------- 归档包与摘要 ---------- */
.page-news .downloads {
  padding: 1.5rem 0 2rem;
}

.page-news .dl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.page-news .dl-copy .section-title {
  margin: 0 0 .7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.28rem, 4.2vw, 1.85rem);
}

.page-news .dl-copy p {
  margin: 0 0 1.2rem;
  max-width: 56ch;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--c-ink-2);
}

.page-news .dl-figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--news-radius);
  border: 1px solid var(--c-line);
}

.page-news .dl-cards {
  display: grid;
  gap: .75rem;
}

.page-news .dl-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.page-news .dl-card[open] {
  border-color: rgba(194, 65, 12, .35);
  box-shadow: var(--shadow-soft);
}

.page-news .dl-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-ink);
}

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

.page-news .dl-summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--c-orange);
  transition: transform var(--ease);
}

.page-news .dl-card[open] .dl-summary::after {
  content: "–";
}

.page-news .dl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--c-paper);
  background: var(--c-ink);
  border-radius: var(--r-sm);
}

.page-news .dl-name {
  flex: 1 1 auto;
}

.page-news .dl-type {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  color: var(--c-sand-gray);
  padding: .18rem .5rem;
  background: var(--c-sand);
  border-radius: var(--r-pill);
}

.page-news .dl-list {
  margin: 0;
  padding: 0 1rem 1rem 1.9rem;
  list-style: none;
}

.page-news .dl-list li {
  position: relative;
  padding: .32rem 0 .32rem 0;
  font-size: .86rem;
  line-height: 1.72;
  color: var(--c-ink-2);
}

.page-news .dl-list li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: .88rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-orange-lit);
}

.page-news .dl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.3rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--c-paper);
  background: var(--c-orange);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background var(--ease), box-shadow var(--ease);
}

.page-news .dl-cta:hover {
  background: var(--c-brown);
  box-shadow: var(--shadow-lift);
}

/* ---------- 相关入口 ---------- */
.page-news .news-more {
  margin-top: .5rem;
  padding: 1.1rem 1.2rem;
  background: var(--c-sand-lift);
  border: 1px dashed var(--c-sand-mid);
  border-radius: var(--r-md);
}

.page-news .more-text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.page-news .media-frame {
  overflow: hidden;
  background: var(--c-sand-mid);
}

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

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

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

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

  .page-news .arch-row {
    grid-template-columns: 4.8rem 1fr;
  }
}

@media (min-width: 900px) {
  .page-news .hero-grid {
    grid-template-columns: 232px 1fr;
    gap: 2.2rem;
  }

  .page-news .quarter-rail {
    grid-template-columns: 1fr;
    position: sticky;
    top: 6.2rem;
    padding: 1rem;
  }

  .page-news .rail-item {
    padding: .7rem .8rem;
  }

  .page-news .news-hero {
    padding: 2rem 0 1.6rem;
  }

  .page-news .hero-lede {
    font-size: 1.04rem;
  }

  .page-news .tl-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    gap: 1.1rem;
  }

  .page-news .tl-list::before {
    display: none;
  }

  .page-news .tl-item::before {
    display: none;
  }

  .page-news .tl-item:nth-child(even) {
    margin-top: 1.8rem;
  }

  .page-news .tl-figure {
    aspect-ratio: 3 / 2;
  }

  .page-news .fee-cycle {
    padding: 2.2rem 2rem 1.9rem;
  }

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

  .page-news .upd-card:nth-child(3n + 2) {
    margin-top: 1.6rem;
  }

  .page-news .arch-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    align-items: start;
  }

  .page-news .archive {
    padding: 2.2rem 2rem;
  }

  .page-news .dl-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
  }

  .page-news .upd-texture {
    aspect-ratio: 21 / 5;
  }
}
</user_final_output_instruction>

<main id="main-content" class="page-news">
  <div class="main-shell">
    <nav class="breadcrumb" aria-label="当前位置">
      <a class="link-inline" href="/">坐标首页</a>
      <span class="breadcrumb-sep">/</span>
      <span aria-current="page">更新面板</span>
    </nav>

    <section class="news-hero" aria-labelledby="hero-title">
      <div class="hero-grid">
        <aside class="quarter-rail" aria-label="季度索引">
          <p class="rail-title">季度刻度</p>
          <a class="rail-item" href="#panel-q1">
            <span class="rail-num mono-num">01</span>
            <span class="rail-label">登录与费用表</span>
          </a>
          <a class="rail-item" href="#panel-q2">
            <span class="rail-num mono-num">02</span>
            <span class="rail-label">推广周期说明</span>
          </a>
          <a class="rail-item" href="#panel-q3">
            <span class="rail-num mono-num">03</span>
            <span class="rail-label">下载分类升级</span>
          </a>
          <a class="rail-item" href="#panel-q4">
            <span class="rail-num mono-num">04</span>
            <span class="rail-label">年度对照汇总</span>
          </a>
        </aside>

        <div class="hero-copy">
          <p class="eyebrow">更新面板 / 2026</p>
          <h1 id="hero-title">说明面板与推广费用周期的最新更新</h1>
          <p class="hero-lede">365速发登录把每一季的费用周期、入口说明与公告变更集中发布在这里。您顺着时间线往下看，就能判断手上的价格表、排期模板是不是该换新版，哪一份归档包里放着您要的那份文件。</p>
          <div class="hero-meta">
            <div class="meta-cell">
              <span class="meta-key">发布节奏</span>
              <span class="meta-val">每月第一周出新公告</span>
            </div>
            <div class="meta-cell">
              <span class="meta-key">归档时点</span>
              <span class="meta-val">每季度末整理一次</span>
            </div>
            <div class="meta-cell">
              <span class="meta-key">累计条目</span>
              <span class="meta-val"><span class="mono-num">120</span> 条常见说明</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="timeline" id="panel-timeline" aria-labelledby="tl-title" data-reveal>
      <div class="section-head">
        <p class="eyebrow">01 / 季度时间轴</p>
        <h2 class="section-title" id="tl-title">这一年，面板上动过哪些地方</h2>
        <p class="lede">从入口说明到费用表，每次调整都跟客户的日常操作有关。按季度往回看，您可以快速定位到影响自己工作的那一次变化。</p>
      </div>

      <figure class="media-frame tl-figure">
        <img src="{zhanqunpic:h:900w:1200}" width="1200" height="900" alt="四个季度刻度与橙色路径节点组成的时间轴信息图">
      </figure>

      <ol class="tl-list">
        <li class="tl-item" id="panel-q1">
          <div class="tl-head">
            <span class="tl-q mono-num">Q1</span>
            <h3 class="tl-title">登录路径与费用表归档</h3>
          </div>
          <p>登录入口按步骤拆成三级说明，从域名到具体栏目一步一屏；国际速发价格表改按重量段重排，常见区间 68–145 元每千克清晰标注，敏感品类与偏远地区的附加项单独列出。</p>
        </li>
        <li class="tl-item" id="panel-q2">
          <div class="tl-head">
            <span class="tl-q mono-num">Q2</span>
            <h3 class="tl-title">推广周期说明整理</h3>
          </div>
          <p>把 4 周启动、8 周稳定、12 周复盘三段写成同一份排期说明。运营团队接手时不必再靠口头解释，照着说明就能对齐每一周该交付什么。</p>
        </li>
        <li class="tl-item" id="panel-q3">
          <div class="tl-head">
            <span class="tl-q mono-num">Q3</span>
            <h3 class="tl-title">资料下载分类升级</h3>
          </div>
          <p>12 类模板与 480 份文档按费用、排期、公告三个方向重新归位，原先要翻三层目录才能找到的排期表，现在两级就能拿到。</p>
        </li>
        <li class="tl-item" id="panel-q4">
          <div class="tl-head">
            <span class="tl-q mono-num">Q4</span>
            <h3 class="tl-title">年度对照表汇总</h3>
          </div>
          <p>四个季度的费用变动与说明增补合成一张年度对照表，年终做明年预算时直接调取，不必再把四份旧表拼在一起。</p>
        </li>
      </ol>
    </section>

    <section class="fee-cycle" aria-labelledby="fee-title" data-reveal>
      <div class="fee-inner">
        <div class="fee-head">
          <p class="eyebrow">02 / 费用周期</p>
          <h2 class="section-title" id="fee-title">通用品牌站推广费用周期怎么走</h2>
          <p class="fee-lede">推广投入不是一次性动作。从排期落地到效果回看，一个完整的推广周期通常是十二周，费用跟着阶段走，每个阶段都有对应的交付物。</p>
        </div>

        <figure class="media-frame fee-figure">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="启动、稳定、复盘三段式路径线插画" loading="lazy" decoding="async">
        </figure>

        <ol class="cycle-grid">
          <li class="cycle-step">
            <span class="step-num mono-num">04 周</span>
            <h3 class="step-title">启动期</h3>
            <p>确认需求、匹配路径、排出首批内容节奏，一个月的功夫跑完开场。您会在这一阶段拿到启动排期表，明确每周谁做什么。</p>
          </li>
          <li class="cycle-step">
            <span class="step-num mono-num">08 周</span>
            <h3 class="step-title">稳定期</h3>
            <p>内容节奏表进入常态执行，渠道组合固定下来，费用投入落在可预期的区间里。每周能看到进度，不在中途反复调整方向。</p>
          </li>
          <li class="cycle-step">
            <span class="step-num mono-num">12 周</span>
            <h3 class="step-title">复盘期</h3>
            <p>用复盘模板把三个月的数据收拢，出一份季度归档摘要。下一季度投多少、投在哪儿，手上有依据再开口。</p>
          </li>
        </ol>

        <p class="fee-foot">三阶段的排期与交付物在 <a class="link-inline" href="/features/">服务与费用</a> 页面按服务包展开，费用数字可以直接对照。</p>
      </div>
    </section>

    <section class="updates" aria-labelledby="upd-title" data-reveal>
      <div class="section-head">
        <p class="eyebrow">03 / 更新列表</p>
        <h2 class="section-title" id="upd-title">最近发布的条目</h2>
        <p class="lede">费用、登录、下载、公告四个方向的新内容都在这里，时间用季度和相对周次表示，方便您判断新旧。</p>
      </div>

      <figure class="media-frame upd-texture">
        <img src="{zhanqunpic:h:700w:1000}" width="1000" height="700" alt="暖灰沙岩底上的细网格与公告卡片纹理" loading="lazy" decoding="async">
      </figure>

      <div class="update-grid">
        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">费用</span>
            <span class="upd-time">本月第一周</span>
          </div>
          <h3 class="upd-title">国际速发价格对照表·春季版</h3>
          <p>按五个方向整理常见线路报价，北美与欧洲方向的重量段说明补上了偏远地区附加项。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">登录</span>
            <span class="upd-time">上季度末</span>
          </div>
          <h3 class="upd-title">2026常见说明面板·登录路径增补</h3>
          <p>新增从域名进入各栏目的路径说明，遇到页面跳回首页时按这条线往回找就行。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">下载</span>
            <span class="upd-time">本月第一周</span>
          </div>
          <h3 class="upd-title">推广费用周期复盘模板开放下载</h3>
          <p>一张表填完三个月的投入与产出，交给财务或管理层时不用再另做说明页。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">公告</span>
            <span class="upd-time">上季度末</span>
          </div>
          <h3 class="upd-title">公告归档包·上半年合辑</h3>
          <p>把前两个季度发布的通知收进一个压缩包，接手的同事一次就能补齐背景。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">下载</span>
            <span class="upd-time">6 周前</span>
          </div>
          <h3 class="upd-title">资料下载分类调整说明</h3>
          <p>原有的下载入口换了分组，旧收藏链接对应的文件已经挪到费用与排期两个目录下。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">费用</span>
            <span class="upd-time">上季度末</span>
          </div>
          <h3 class="upd-title">区域服务商费用问答增补</h3>
          <p>针对渠道服务商关心的季度包区间与协作方式，补了六条问答，附在费用说明后面。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">公告</span>
            <span class="upd-time">3 周前</span>
          </div>
          <h3 class="upd-title">电脑端展开体验优化记录</h3>
          <p>长条目现在点一下就地展开，不必再跳到另一页；关闭后回到原位，翻找更顺。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">费用</span>
            <span class="upd-time">本月第一周</span>
          </div>
          <h3 class="upd-title">年度费用面板汇总预告</h3>
          <p>四个季度的费用面板会在年末合并成一张总表，包含季度服务包与推广投入的完整走势。</p>
        </article>

        <article class="upd-card">
          <div class="upd-meta">
            <span class="chip chip-accent">登录</span>
            <span class="upd-time">8 周前</span>
          </div>
          <h3 class="upd-title">入口提示页更新说明</h3>
          <p>提示页补上了常见浏览器下的显示建议，在电脑上打开时栏目位置更稳定。</p>
        </article>
      </div>
    </section>

    <section class="archive" aria-labelledby="arch-title" data-reveal>
      <div class="arch-grid">
        <div class="arch-copy">
          <p class="eyebrow">04 / 分类与归档</p>
          <h2 class="section-title" id="arch-title">按方向找过去的更新</h2>
          <p>条目按四个方向挂着标签，您关心哪一块就直接看那一类。每季度末，当季发布的内容会打包归档到资料下载中心，旧版本继续保留，需要回溯时随时取。</p>
        </div>
        <ul class="arch-list">
          <li class="arch-row">
            <span class="arch-key">费用</span>
            <span class="arch-val">价格区间、季度服务包、推广投入的变动说明</span>
          </li>
          <li class="arch-row">
            <span class="arch-key">登录</span>
            <span class="arch-val">域名入口、栏目路径与页面提示的调整记录</span>
          </li>
          <li class="arch-row">
            <span class="arch-key">下载</span>
            <span class="arch-val">模板、对照表与排期文件的增减和分组变化</span>
          </li>
          <li class="arch-row">
            <span class="arch-key">公告</span>
            <span class="arch-val">发布节奏、体验变化与阶段合辑的说明</span>
          </li>
        </ul>
      </div>
    </section>

    <section class="downloads" aria-labelledby="dl-title" data-reveal>
      <div class="dl-grid">
        <div class="dl-copy">
          <p class="eyebrow">05 / 归档包与摘要</p>
          <h2 class="section-title" id="dl-title">把这一季的材料带走</h2>
          <p>公告归档包按季度合辑，更新摘要按月出一页纸。需要哪一份，展开看看里面装了什么，再找服务团队要文件；常用的费用问题也可以先在 <a class="link-inline" href="/faqs/">常见说明</a> 里翻一翻。</p>
          <figure class="media-frame dl-figure">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="季度归档文件夹、下载箭头与摘要卡片插画" loading="lazy" decoding="async">
          </figure>
        </div>

        <div class="dl-cards">
          <details class="dl-card" open>
            <summary class="dl-summary">
              <span class="dl-badge mono-num">Q</span>
              <span class="dl-name">季度公告归档包</span>
              <span class="dl-type">压缩包</span>
            </summary>
            <ul class="dl-list">
              <li>当季公告全文合集，按发布周次排序</li>
              <li>费用对照表与季度服务包说明</li>
              <li>推广排期表模板与内容节奏表</li>
              <li>季度复盘模板与归档摘要</li>
            </ul>
          </details>

          <details class="dl-card">
            <summary class="dl-summary">
              <span class="dl-badge mono-num">M</span>
              <span class="dl-name">每月更新摘要</span>
              <span class="dl-type">单页文档</span>
            </summary>
            <ul class="dl-list">
              <li>当月新增与修订的条目清单</li>
              <li>费用区间调整的一句话说明</li>
              <li>下一月预告与需要提前准备的事项</li>
            </ul>
          </details>

          <details class="dl-card">
            <summary class="dl-summary">
              <span class="dl-badge mono-num">F</span>
              <span class="dl-name">费用对照与排期合辑</span>
              <span class="dl-type">表格文件</span>
            </summary>
            <ul class="dl-list">
              <li>国际速发线路与重量段报价</li>
              <li>季度服务包区间一览</li>
              <li>三阶段推广排期与交付物清单</li>
            </ul>
          </details>

          <a class="dl-cta" href="/find-us/">向服务团队索取文件</a>
        </div>
      </div>
    </section>

    <section class="news-more" aria-label="相关入口" data-reveal>
      <p class="more-text">想先了解我们的服务团队与覆盖范围，可以从 <a class="link-inline" href="/who-we-are/">品牌坐标</a> 看起；需要费用明细，直接进 <a class="link-inline" href="/features/">服务与费用</a>；回到 <a class="link-inline" href="/">坐标首页</a> 可以按栏目重新出发。</p>
    </section>
  </div>
</main>

.page-news {
  --news-radius: 22px;
  background:
    radial-gradient(880px 420px at 90% -12%, rgba(234, 88, 12, .10), transparent 62%),
    radial-gradient(620px 320px at 4% 18%, rgba(16, 42, 67, .06), transparent 60%),
    var(--c-sand);
  color: var(--c-ink);
  padding-bottom: 3.5rem;
}

.page-news .breadcrumb {
  margin: 0;
  padding: 1.15rem 0 .25rem;
  font-family: var(--f-mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--c-sand-gray);
}

.page-news .breadcrumb .link-inline {
  color: var(--c-ink-2);
  text-decoration: none;
  border-bottom: 1px solid rgba(16, 42, 67, .22);
}

.page-news .breadcrumb .link-inline:hover {
  color: var(--c-orange);
  border-bottom-color: var(--c-orange);
}

.page-news .breadcrumb-sep {
  margin: 0 .45rem;
  color: var(--c-sand-mid);
}

.page-news .link-inline {
  color: var(--c-orange);
  text-decoration: none;
  border-bottom: 1px solid rgba(194, 65, 12, .35);
  transition: color var(--ease), border-color var(--ease);
}

.page-news .link-inline:hover {
  color: var(--c-orange-lit);
  border-bottom-color: var(--c-orange-lit);
}

.page-news .eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--f-mono);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-orange);
}

/* ---------- 首屏：刻度栏 + 门牌叙事 ---------- */
.page-news .news-hero {
  padding: 1.35rem 0 1rem;
}

.page-news .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.page-news .quarter-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  padding: .9rem;
  background: rgba(251, 247, 240, .72);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--news-radius);
}

.page-news .rail-title {
  grid-column: 1 / -1;
  margin: 0 0 .15rem;
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--c-sand-gray);
}

.page-news .rail-item {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem .7rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--c-ink);
  font-size: .82rem;
  line-height: 1.4;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}

.page-news .rail-item:hover {
  border-color: rgba(194, 65, 12, .45);
  box-shadow: var(--shadow-soft);
  transform: translateY(-2px);
}

.page-news .rail-num {
  font-weight: 700;
  color: var(--c-orange);
  font-size: .82rem;
}

.page-news .rail-label {
  color: var(--c-ink-2);
}

.page-news .hero-copy {
  border-top: 3px solid var(--c-orange);
  padding-top: 1.1rem;
}

.page-news .hero-copy h1 {
  margin: 0 0 .85rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.72rem, 6.2vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--c-ink);
}

.page-news .hero-lede {
  margin: 0 0 1.4rem;
  max-width: 60ch;
  font-family: var(--f-serif);
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.page-news .hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}

.page-news .meta-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  padding: .7rem .85rem;
  background: var(--c-paper);
  border-left: 3px solid var(--c-sand-mid);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.page-news .meta-key {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--c-sand-gray);
}

.page-news .meta-val {
  font-size: .88rem;
  font-weight: 500;
  color: var(--c-ink);
}

.page-news .mono-num {
  font-family: var(--f-mono);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---------- 公共区块头 ---------- */
.page-news .section-head {
  margin-bottom: 1.4rem;
}

.page-news .section-head .section-title {
  margin: 0 0 .7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.32rem, 4.4vw, 1.95rem);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.page-news .section-head .lede {
  margin: 0;
  max-width: 64ch;
  font-family: var(--f-serif);
  font-size: .96rem;
  line-height: 1.85;
  color: var(--c-ink-2);
}

/* ---------- 时间轴 ---------- */
.page-news .timeline {
  padding: 2.6rem 0 1rem;
}

.page-news .tl-figure {
  margin: 0 0 1.6rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--news-radius);
  border: 1px solid var(--c-line);
}

.page-news .tl-list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.35rem;
  display: grid;
  gap: 1rem;
}

.page-news .tl-list::before {
  content: "";
  position: absolute;
  left: .32rem;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background: linear-gradient(180deg, var(--c-orange), rgba(234, 88, 12, .12));
  border-radius: var(--r-pill);
}

.page-news .tl-item {
  position: relative;
  padding: 1.05rem 1.1rem 1.15rem;
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

.page-news .tl-item::before {
  content: "";
  position: absolute;
  left: -1.22rem;
  top: 1.45rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-sand);
  border: 2px solid var(--c-orange);
}

.page-news .tl-head {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .45rem;
}

.page-news .tl-q {
  font-size: .95rem;
  color: var(--c-orange);
}

.page-news .tl-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--c-ink);
}

.page-news .tl-item p {
  margin: 0;
  font-size: .9rem;
  line-height: 1.8;
  color: var(--c-ink-2);
}

/* ---------- 费用周期 ---------- */
.page-news .fee-cycle {
  margin: 2.6rem 0;
  padding: 1.6rem 1.15rem 1.5rem;
  background: var(--c-amber);
  border-radius: var(--r-lg);
  border: 1px solid rgba(194, 65, 12, .16);
}

.page-news .fee-head .section-title {
  margin: 0 0 .7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.28rem, 4.2vw, 1.85rem);
  line-height: 1.32;
}

.page-news .fee-lede {
  margin: 0 0 1.25rem;
  max-width: 60ch;
  font-family: var(--f-serif);
  font-size: .95rem;
  line-height: 1.85;
  color: var(--c-brown);
}

.page-news .fee-figure {
  margin: 0 0 1.3rem;
  aspect-ratio: 2 / 1;
  border-radius: var(--r-md);
  background: var(--c-sand-lift);
}

.page-news .cycle-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}

.page-news .cycle-step {
  position: relative;
  padding: 1.05rem 1.05rem 1.15rem;
  background: var(--c-paper);
  border-radius: var(--r-md);
  border-top: 3px solid var(--c-orange);
}

.page-news .step-num {
  display: inline-block;
  margin-bottom: .5rem;
  padding: .18rem .55rem;
  font-size: .78rem;
  color: var(--c-brown);
  background: rgba(253, 232, 181, .85);
  border-radius: var(--r-pill);
}

.page-news .step-title {
  margin: 0 0 .4rem;
  font-family: var(--f-display);
  font-size: 1.02rem;
  font-weight: 700;
}

.page-news .cycle-step p {
  margin: 0;
  font-size: .89rem;
  line-height: 1.8;
  color: var(--c-ink-2);
}

.page-news .fee-foot {
  margin: 1.15rem 0 0;
  font-size: .87rem;
  color: var(--c-brown);
}

.page-news .fee-foot .link-inline {
  color: var(--c-brown);
  border-bottom-color: rgba(124, 45, 18, .4);
}

.page-news .fee-foot .link-inline:hover {
  color: var(--c-orange);
}

/* ---------- 更新列表 ---------- */
.page-news .updates {
  padding: 1rem 0 1.5rem;
}

.page-news .upd-texture {
  margin: 0 0 1.5rem;
  aspect-ratio: 16 / 5;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-soft);
}

.page-news .update-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}

.page-news .upd-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--c-sand-lift);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  transition: box-shadow var(--ease), border-color var(--ease), background var(--ease);
}

.page-news .upd-card:hover {
  background: var(--c-paper);
  border-color: rgba(194, 65, 12, .32);
  box-shadow: var(--shadow-lift);
}

.page-news .upd-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.page-news .upd-meta .chip-accent {
  font-family: var(--f-mono);
  font-size: .72rem;
  letter-spacing: .06em;
}

.page-news .upd-time {
  font-family: var(--f-mono);
  font-size: .72rem;
  color: var(--c-sand-gray);
  white-space: nowrap;
}

.page-news .upd-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-ink);
}

.page-news .upd-card p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.78;
  color: var(--c-ink-2);
}

/* ---------- 分类与归档 ---------- */
.page-news .archive {
  margin: 1.5rem 0;
  padding: 1.6rem 1.15rem;
  background: var(--c-ink);
  border-radius: var(--r-lg);
  color: var(--c-sand);
}

.page-news .arch-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}

.page-news .archive .eyebrow {
  color: var(--c-orange-lit);
}

.page-news .archive .section-title {
  margin: 0 0 .8rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.26rem, 4.2vw, 1.8rem);
  color: var(--c-paper);
}

.page-news .arch-copy p {
  margin: 0;
  max-width: 48ch;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--c-on-ink);
}

.page-news .arch-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .55rem;
}

.page-news .arch-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .7rem;
  align-items: start;
  padding: .7rem .8rem;
  background: rgba(246, 240, 230, .06);
  border-left: 2px solid var(--c-orange);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.page-news .arch-key {
  font-family: var(--f-mono);
  font-size: .78rem;
  font-weight: 700;
  color: var(--c-amber);
}

.page-news .arch-val {
  font-size: .85rem;
  line-height: 1.7;
  color: var(--c-on-ink);
}

/* ---------- 归档包与摘要 ---------- */
.page-news .downloads {
  padding: 1.5rem 0 2rem;
}

.page-news .dl-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

.page-news .dl-copy .section-title {
  margin: 0 0 .7rem;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.28rem, 4.2vw, 1.85rem);
}

.page-news .dl-copy p {
  margin: 0 0 1.2rem;
  max-width: 56ch;
  font-size: .93rem;
  line-height: 1.85;
  color: var(--c-ink-2);
}

.page-news .dl-figure {
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--news-radius);
  border: 1px solid var(--c-line);
}

.page-news .dl-cards {
  display: grid;
  gap: .75rem;
}

.page-news .dl-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.page-news .dl-card[open] {
  border-color: rgba(194, 65, 12, .35);
  box-shadow: var(--shadow-soft);
}

.page-news .dl-summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  cursor: pointer;
  list-style: none;
  font-size: .92rem;
  font-weight: 600;
  color: var(--c-ink);
}

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

.page-news .dl-summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--c-orange);
  transition: transform var(--ease);
}

.page-news .dl-card[open] .dl-summary::after {
  content: "–";
}

.page-news .dl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--c-paper);
  background: var(--c-ink);
  border-radius: var(--r-sm);
}

.page-news .dl-name {
  flex: 1 1 auto;
}

.page-news .dl-type {
  font-family: var(--f-mono);
  font-size: .7rem;
  font-weight: 500;
  color: var(--c-sand-gray);
  padding: .18rem .5rem;
  background: var(--c-sand);
  border-radius: var(--r-pill);
}

.page-news .dl-list {
  margin: 0;
  padding: 0 1rem 1rem 1.9rem;
  list-style: none;
}

.page-news .dl-list li {
  position: relative;
  padding: .32rem 0 .32rem 0;
  font-size: .86rem;
  line-height: 1.72;
  color: var(--c-ink-2);
}

.page-news .dl-list li::before {
  content: "";
  position: absolute;
  left: -1rem;
  top: .88rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-orange-lit);
}

.page-news .dl-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.3rem;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: .9rem;
  color: var(--c-paper);
  background: var(--c-orange);
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background var(--ease), box-shadow var(--ease);
}

.page-news .dl-cta:hover {
  background: var(--c-brown);
  box-shadow: var(--shadow-lift);
}

/* ---------- 相关入口 ---------- */
.page-news .news-more {
  margin-top: .5rem;
  padding: 1.1rem 1.2rem;
  background: var(--c-sand-lift);
  border: 1px dashed var(--c-sand-mid);
  border-radius: var(--r-md);
}

.page-news .more-text {
  margin: 0;
  font-size: .9rem;
  line-height: 1.9;
  color: var(--c-ink-2);
}

.page-news .media-frame {
  overflow: hidden;
  background: var(--c-sand-mid);
}

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

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

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

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

  .page-news .arch-row {
    grid-template-columns: 4.8rem 1fr;
  }
}

@media (min-width: 900px) {
  .page-news .hero-grid {
    grid-template-columns: 232px 1fr;
    gap: 2.2rem;
  }

  .page-news .quarter-rail {
    grid-template-columns: 1fr;
    position: sticky;
    top: 6.2rem;
    padding: 1rem;
  }

  .page-news .rail-item {
    padding: .7rem .8rem;
  }

  .page-news .news-hero {
    padding: 2rem 0 1.6rem;
  }

  .page-news .hero-lede {
    font-size: 1.04rem;
  }

  .page-news .tl-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 0;
    gap: 1.1rem;
  }

  .page-news .tl-list::before {
    display: none;
  }

  .page-news .tl-item::before {
    display: none;
  }

  .page-news .tl-item:nth-child(even) {
    margin-top: 1.8rem;
  }

  .page-news .tl-figure {
    aspect-ratio: 3 / 2;
  }

  .page-news .fee-cycle {
    padding: 2.2rem 2rem 1.9rem;
  }

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

  .page-news .upd-card:nth-child(3n + 2) {
    margin-top: 1.6rem;
  }

  .page-news .arch-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    align-items: start;
  }

  .page-news .archive {
    padding: 2.2rem 2rem;
  }

  .page-news .dl-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
  }

  .page-news .upd-texture {
    aspect-ratio: 21 / 5;
  }
}