.page-news {
  --news-tag-w: 140px;
  --news-time-w: 96px;
}

/* 页头 */
.page-news .news-mast {
  padding-top: clamp(20px, 3vw, 36px);
}
.page-news .news-mast .breadcrumb {
  margin-bottom: 20px;
  font-size: 13px;
}
.page-news .news-mast__grid {
  row-gap: 26px;
  align-items: start;
}
.page-news .news-mast__lead .eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-cond);
  letter-spacing: 0.14em;
  color: var(--fir);
}
.page-news .news-mast__lead .display {
  margin: 0 0 16px;
}
.page-news .news-mast__lead .lede {
  max-width: 33em;
  margin: 0 0 22px;
  color: var(--ink-soft);
}
.page-news .news-mast__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.page-news .news-mast__link {
  font-size: 14px;
  color: var(--fir);
  text-decoration: none;
  border-bottom: 1px solid var(--ice);
  padding-bottom: 2px;
}
.page-news .news-mast__link:hover,
.page-news .news-mast__link:focus-visible {
  color: var(--maple);
  border-bottom-color: var(--maple);
}
.page-news .news-mast__panel {
  border: 1px solid var(--line);
  background: var(--paper-3);
  padding: 16px 18px 14px;
}
.page-news .news-mast__panel-title {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--maple);
}
.page-news .news-mast__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.page-news .news-mast__row:last-of-type {
  border-bottom: 0;
}
.page-news .news-mast__row span {
  color: var(--grey);
}
.page-news .news-mast__row strong {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.page-news .news-mast__panel-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--grey);
}

/* 通栏横幅 */
.page-news .news-banner {
  position: relative;
  margin: clamp(28px, 4vw, 48px) 0 0;
  border-block: 1px solid var(--line);
  background: var(--fir-deep);
  overflow: hidden;
}
.page-news .news-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(170px, 27vw, 350px);
  object-fit: cover;
}
.page-news .news-banner__cap {
  position: absolute;
  left: var(--gutter);
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(14, 54, 48, 0.82);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* 栏目头 */
.page-news .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 10px;
  margin-bottom: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line-strong);
}
.page-news .section-head__idx {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--maple);
}
.page-news .section-head__title {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.72rem);
  letter-spacing: -0.01em;
}
.page-news .section-head__note {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  color: var(--grey);
}

/* 最新一期 */
.page-news .news-latest__grid {
  row-gap: 26px;
  align-items: start;
}
.page-news .news-latest__kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--sand);
}
.page-news .news-latest__intro {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 36em;
}
.page-news .news-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-news .news-points li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-news .news-points li:last-child {
  border-bottom: 0;
}
.page-news .news-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 10px;
  height: 1px;
  background: var(--fir);
}
.page-news .news-points--tight li {
  font-size: 14px;
  padding: 7px 0 7px 18px;
}
.page-news .news-points--tight li::before {
  top: 16px;
  background: var(--maple);
}

.page-news .news-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.page-news .news-stats__cell {
  padding: 14px 14px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-news .news-stats__cell:nth-child(2n) {
  border-right: 0;
}
.page-news .news-stats__cell--wide {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
  background: var(--paper-3);
}
.page-news .news-stats__cell b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fir);
}
.page-news .news-stats__cell span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--grey);
}

/* 更新列表 */
.page-news .news-log__legend {
  margin-bottom: 18px;
  gap: 8px;
}
.page-news .news-log__legend .tag {
  font-size: 12px;
  padding: 3px 11px;
  border: 1px solid var(--fir);
  border-radius: 999px;
  color: var(--fir);
  background: transparent;
}
.page-news .log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}
.page-news .log__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 16px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line);
}
.page-news .log__tag {
  justify-self: start;
  align-self: start;
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fir);
  background: var(--paper-2);
  white-space: nowrap;
}
.page-news .log__body {
  min-width: 0;
}
.page-news .log__title {
  margin: 0 0 6px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
}
.page-news .log__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.page-news .log__time {
  font-size: 12.5px;
  color: var(--grey);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.page-news .log__more {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
}
.page-news .log__more summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--fir);
}
.page-news .log__more summary::-webkit-details-marker {
  display: none;
}
.page-news .log__more summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--maple);
}
.page-news .log__more[open] summary::after {
  content: "−";
}
.page-news .log__more summary:hover,
.page-news .log__more summary:focus-visible {
  color: var(--maple);
}

/* 首条放大 */
.page-news .log__item--lead {
  padding: 24px 0 22px;
  background: linear-gradient(90deg, rgba(231, 228, 220, 0.55), rgba(231, 228, 220, 0));
}
.page-news .log__title--lead {
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.page-news .log__item--lead .log__text {
  font-size: 15.5px;
}

.page-news .news-log__foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--grey);
}
.page-news .news-log__foot a {
  color: var(--fir);
  text-decoration: underline;
  text-decoration-color: var(--ice);
  text-underline-offset: 3px;
}
.page-news .news-log__foot a:hover,
.page-news .news-log__foot a:focus-visible {
  color: var(--maple);
  text-decoration-color: var(--maple);
}

/* 季度专题 */
.page-news .news-quarter {
  position: relative;
  overflow: hidden;
  padding-block: clamp(38px, 6vw, 78px);
  background: var(--fir-deep);
  color: var(--paper);
}
.page-news .news-quarter__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-news .news-quarter__bg img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
}
.page-news .news-quarter > .shell,
.page-news .news-quarter__track {
  position: relative;
}
.page-news .news-quarter .section-head {
  border-bottom-color: var(--line-light);
}
.page-news .news-quarter .section-head__title {
  color: var(--paper);
}
.page-news .news-quarter .section-head__note {
  color: rgba(244, 243, 239, 0.66);
}
.page-news .news-quarter__intro {
  max-width: 42em;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(244, 243, 239, 0.8);
}
.page-news .news-quarter__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 80%);
  gap: 14px;
  margin-top: clamp(22px, 3vw, 32px);
  padding: 2px var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.page-news .q-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line-light);
  background: rgba(14, 54, 48, 0.74);
  scroll-snap-align: start;
}
.page-news .q-card__no {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sand);
}
.page-news .q-card__glyph {
  height: 70px;
  border: 1px solid var(--line-light);
  background: linear-gradient(118deg, rgba(127, 182, 206, 0.5), rgba(31, 91, 78, 0.85));
}
.page-news .q-card__glyph--a {
  background:
    radial-gradient(circle at 26% 38%, rgba(127, 182, 206, 0.9), transparent 62%),
    linear-gradient(118deg, rgba(31, 91, 78, 0.9), rgba(14, 54, 48, 0.9));
}
.page-news .q-card__glyph--b {
  background:
    linear-gradient(72deg, transparent 46%, rgba(217, 169, 97, 0.75) 47%, rgba(217, 169, 97, 0.75) 49%, transparent 50%),
    linear-gradient(118deg, rgba(31, 91, 78, 0.9), rgba(127, 182, 206, 0.55));
}
.page-news .q-card__glyph--c {
  background:
    repeating-linear-gradient(90deg, rgba(244, 243, 239, 0.16) 0 1px, transparent 1px 16px),
    linear-gradient(118deg, rgba(14, 54, 48, 0.92), rgba(31, 91, 78, 0.85));
}
.page-news .q-card__glyph--d {
  background:
    radial-gradient(circle at 74% 30%, rgba(217, 169, 97, 0.85), transparent 58%),
    linear-gradient(118deg, rgba(31, 91, 78, 0.9), rgba(14, 54, 48, 0.92));
}
.page-news .q-card__title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.page-news .q-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244, 243, 239, 0.78);
  flex: 1 1 auto;
}
.page-news .q-card__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ice);
}
.page-news .q-card__parts li + li::before {
  content: "/";
  margin: 0 7px;
  color: rgba(244, 243, 239, 0.36);
}
.page-news .q-card__link {
  align-self: flex-start;
  font-size: 13.5px;
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 169, 97, 0.5);
  padding-bottom: 2px;
}
.page-news .q-card__link:hover,
.page-news .q-card__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* 年度索引 */
.page-news .news-index__grid {
  row-gap: 26px;
  align-items: start;
}
.page-news .news-index__lead {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 600;
  color: var(--ink);
}
.page-news .news-index p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 36em;
}
.page-news .news-index__meta {
  font-size: 13px;
  color: var(--grey);
  margin: 16px 0 20px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.page-news .news-index__media .media-frame {
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.page-news .news-index__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-index__media .media-frame__caption {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--grey);
  border-top: 1px solid var(--line);
}

/* 订阅与回访 */
.page-news .news-sub {
  padding-bottom: clamp(48px, 7vw, 92px);
}
.page-news .news-sub__grid {
  row-gap: 26px;
  align-items: center;
}
.page-news .news-sub__media .media-frame {
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.page-news .news-sub__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.page-news .news-sub__body .eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-cond);
  letter-spacing: 0.14em;
  color: var(--maple);
}
.page-news .news-sub__title {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.26;
  letter-spacing: -0.02em;
}
.page-news .news-sub__body p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 34em;
}
.page-news .news-sub__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 20px;
}
.page-news .news-sub__link {
  font-size: 14px;
  color: var(--fir);
  text-decoration: none;
  border-bottom: 1px solid var(--ice);
  padding-bottom: 2px;
}
.page-news .news-sub__link:hover,
.page-news .news-sub__link:focus-visible {
  color: var(--maple);
  border-bottom-color: var(--maple);
}

/* 中等屏幕起：列表三栏对齐 */
@media (min-width: 760px) {
  .page-news .log__item {
    grid-template-columns: var(--news-tag-w) minmax(0, 1fr) var(--news-time-w);
    gap: 4px 18px;
    align-items: start;
  }
  .page-news .log__time {
    text-align: right;
  }
  .page-news .log__item--lead {
    grid-template-columns: var(--news-tag-w) minmax(0, 1fr) var(--news-time-w);
    padding: 28px 18px 26px 0;
  }
}

/* 桌面端：专题卡片并排更宽 */
@media (min-width: 900px) {
  .page-news .news-mast__panel {
    justify-self: end;
    width: 100%;
    max-width: 360px;
  }
  .page-news .news-quarter__track {
    grid-auto-columns: minmax(280px, 31%);
    gap: 18px;
  }
  .page-news .news-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-news .news-index__media {
    justify-self: end;
  }
}

@media (min-width: 1120px) {
  .page-news {
    --news-tag-w: 156px;
    --news-time-w: 104px;
  }
  .page-news .log__item--lead {
    padding-right: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-quarter__track {
    scroll-snap-type: none;
  }
}


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

  <div class="shell news-mast">
    <nav class="breadcrumb" aria-label="面包屑导航">
      <a href="/">首页</a>
      <span class="breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">更新与观察</span>
    </nav>

    <div class="grid news-mast__grid">
      <div class="col-7 news-mast__lead">
        <p class="eyebrow">EDITORIAL LOG · 更新日志</p>
        <h1 class="display">资料改到哪一步，每两周一期写给你看</h1>
        <p class="lede">加拿大平台把签证材料、省区指南与案例合集的改动按期刊出。你手上那份清单是刚更新过、还是已经改过两轮，看期号和时间线索就能判断，不必再凭印象猜。</p>
        <div class="news-mast__actions">
          <a class="btn btn--primary" href="/find-us/">订阅更新清单</a>
          <a class="news-mast__link" href="#log">先看最近一期改了什么</a>
        </div>
      </div>
      <aside class="col-4 news-mast__panel" aria-label="当前更新状态">
        <p class="news-mast__panel-title mono">STATUS / 本期</p>
        <div class="news-mast__row"><span>当前期号</span><strong>第 96 期</strong></div>
        <div class="news-mast__row"><span>更新频率</span><strong>每两周一次</strong></div>
        <div class="news-mast__row"><span>本期涉及主题</span><strong>5 个</strong></div>
        <div class="news-mast__row"><span>上一期距现在</span><strong>两周前</strong></div>
        <p class="news-mast__panel-note">下期清单在两周后发布，发布当日同步发到订阅邮箱。</p>
      </aside>
    </div>
  </div>

  <figure class="news-banner">
    <img src="{zhanqunpic:h:800w:1600}" width="1600" height="800" alt="秋季枫林之间的公路，红黄树冠夹道，路面上没有车辆与行人">
    <figcaption class="news-banner__cap">秋冬交替的枫林公路 · 每一期清单都从最新的一条开始排</figcaption>
  </figure>

  <section id="latest" class="section news-latest" data-section="最新一期">
    <div class="shell">
      <div class="section-head">
        <span class="section-head__idx mono">01</span>
        <h2 class="section-head__title">最新一期清单</h2>
        <p class="section-head__note">第 96 期 · 最近一期 · 已发布</p>
      </div>

      <div class="grid news-latest__grid">
        <div class="col-7" data-reveal>
          <p class="news-latest__kicker mono">PERIOD 96</p>
          <p class="news-latest__intro">这一期动了两处材料清单的字段结构，补了一批省区城市数据，也把大屏上打不开页面的反馈归了归。要用的文件没换位置，只是里面的字段和顺序比以前更贴近窗口现场的写法。</p>
          <ol class="news-points">
            <li>学签与工签材料清单各补入 6 个字段，新旧版本的差异在条目里逐项标明。</li>
            <li>站内检索可以先把范围缩到省区，再缩到城市，找本地材料少翻两层。</li>
            <li>大屏投屏只渲染半屏的反馈归拢为 4 类成因，附了按顺序试的处理办法。</li>
          </ol>
        </div>

        <div class="col-4 news-stats" data-reveal>
          <div class="news-stats__cell">
            <b>46</b>
            <span>本期新增条目</span>
          </div>
          <div class="news-stats__cell">
            <b>31</b>
            <span>本期修订条目</span>
          </div>
          <div class="news-stats__cell">
            <b>5</b>
            <span>涉及主题数</span>
          </div>
          <div class="news-stats__cell news-stats__cell--wide">
            <b>1,240</b>
            <span>下载专区当前收录文档总数</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="log" class="section news-log" data-section="更新列表">
    <div class="shell">
      <div class="section-head">
        <span class="section-head__idx mono">02</span>
        <h2 class="section-head__title">更新列表</h2>
        <p class="section-head__note">按时间倒序 · 首条为最近一期重点</p>
      </div>

      <div class="tag-row news-log__legend" aria-label="更新栏目分类">
        <span class="tag">资源上新</span>
        <span class="tag">指南改版</span>
        <span class="tag">排查经验</span>
        <span class="tag">专题报告</span>
        <span class="tag">功能说明</span>
      </div>

      <ol class="log">

        <li class="log__item log__item--lead mark-line" data-reveal>
          <span class="log__tag">指南改版</span>
          <div class="log__body">
            <h3 class="log__title log__title--lead">魁北克省区指南重排：租房与医疗两章按办理顺序重写</h3>
            <p class="log__text">两章原来按主题分块，读者要来回跳。重排后先讲落地头两周要办的事，再讲一个月内的手续，租房合同的押金条款与家庭医生登记的先后关系一眼能看明白。</p>
            <ul class="news-points news-points--tight">
              <li>租房章补入押金上限、提前解约通知期的具体写法，配了两份合同条款对照。</li>
              <li>医疗章把登记、等待期与临时就诊三条路径分开列，不再混在同一段。</li>
              <li>两章末尾各加一份清单，可直接打印带去窗口。</li>
            </ul>
          </div>
          <span class="log__time mono">最近一期</span>
        </li>

        <li class="log__item">
          <span class="log__tag">资源上新</span>
          <div class="log__body">
            <h3 class="log__title">院校专业对照表扩充 62 个研究生项目的申请要求字段</h3>
            <p class="log__text">对照表新增语言成绩递交方式、推荐信数量与是否要求作品集三项，申请季前能少跑几趟官网。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>62 个项目覆盖安大略、不列颠哥伦比亚与魁北克三地的主要院校。</li>
                <li>每个项目标注材料截止的月份区间，不再只写学年。</li>
                <li>需要作品集的项目单列一栏，便于艺术与设计方向先筛一遍。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">最近一期</span>
        </li>

        <li class="log__item">
          <span class="log__tag">排查经验</span>
          <div class="log__body">
            <h3 class="log__title">大屏投屏只渲染半屏的四类成因与处理顺序</h3>
            <p class="log__text">会议室大屏和电视投屏上出现半屏空白，多数不是网络问题。四条成因按出现频次排了序，照着试通常第一条就能解决。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>浏览器版本低于 120 是最高频的一条，升级后页面恢复正常渲染。</li>
                <li>页面缩放比例被投屏设备改写，回到 100% 即可。</li>
                <li>部分电视浏览器不支持新版页面结构，改用电脑直连可绕过。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">上期</span>
        </li>

        <li class="log__item">
          <span class="log__tag">专题报告</span>
          <div class="log__body">
            <h3 class="log__title">亲子落地第一年：学籍与疫苗记录怎么衔接</h3>
            <p class="log__text">把入学登记、疫苗记录翻译与补充接种三件事按时间轴串起来，附了五个城市学区办公室的受理习惯。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>按抵达月份分两种情况给时间线，春季入学与秋季入学路径不同。</li>
                <li>疫苗记录的中英对照写法给了模板句式，可直接套用。</li>
                <li>列出四类常见退回原因，多数出在翻译件与姓名拼写。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">本季度</span>
        </li>

        <li class="log__item">
          <span class="log__tag">资源上新</span>
          <div class="log__body">
            <h3 class="log__title">96 组案例合集的安家路径补入押金与水电开户</h3>
            <p class="log__text">安家路径原先只写到签约，这次把入住第一周的开户流程补全，每组案例都能看到钱花在哪一步。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>水电与网络开户各写了一条最短办理路径，含所需证件。</li>
                <li>押金退还的常见争议点整理成问答，附处理顺序。</li>
                <li>费用表同步更新，与案例中的数字对得上。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">上期</span>
        </li>

        <li class="log__item">
          <span class="log__tag">功能说明</span>
          <div class="log__body">
            <h3 class="log__title">站内检索结果支持按材料类型再缩一层</h3>
            <p class="log__text">先按主题或省区筛过之后，还能再按清单、表格、地图与案例四类材料缩小范围，找一份表格不用再翻十几页。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>四个材料类型与下载专区的 12 个分类一一对应，不会出现筛完落空。</li>
                <li>筛选条件在返回上一页时保留，连续找同类文件更省事。</li>
                <li>结果页直接显示最近更新期号，判断新旧不用点进去。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">上期</span>
        </li>

        <li class="log__item">
          <span class="log__tag">指南改版</span>
          <div class="log__body">
            <h3 class="log__title">阿尔伯塔指南加入冬季用车、轮胎与保险条目</h3>
            <p class="log__text">针对十一月到次年三月的路况，补了雪胎规定、车辆保险的最低要求与常见理赔流程。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>按城市列出雪胎使用要求与道路维护的差别。</li>
                <li>新到用户的保险衔接写了两条路径，含国内驾龄证明的准备。</li>
                <li>冬季通勤时间区间单独列了一节，方便先定住处。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">上一批次</span>
        </li>

        <li class="log__item">
          <span class="log__tag">排查经验</span>
          <div class="log__body">
            <h3 class="log__title">下载文件打开乱码的三种情形与换用打开方式</h3>
            <p class="log__text">表格类文件在部分设备上打开会出现方框与乱码，三种情形对应三种处理，换一种打开方式通常就能正常显示。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>区分设备自带阅读器与办公软件的显示差异，给出替换建议。</li>
                <li>打印前需要确认的页面设置单列一条，避免出现裁切。</li>
                <li>仍无法打开时可在反馈入口提交设备与系统信息。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">较早一期</span>
        </li>

        <li class="log__item">
          <span class="log__tag">专题报告</span>
          <div class="log__body">
            <h3 class="log__title">租房半径怎么定：通勤时间与租金的取舍</h3>
            <p class="log__text">用四个都会区的通勤时段数据，把租金省下的钱与多花的通勤时间摆在一起算，给出一张可自行代入的对照表。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>早晚高峰分别计时，避免只看单程平均值。</li>
                <li>把公交月票与停车费计入月度总支出。</li>
                <li>附一份看房时可以直接问的清单。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">上一季度</span>
        </li>

        <li class="log__item">
          <span class="log__tag">资源上新</span>
          <div class="log__body">
            <h3 class="log__title">省区与城市地图资料补入 8 个城市的公共交通线路图</h3>
            <p class="log__text">线路图按市区与郊区两张分开，标注了主要换乘点与月票分区，落地前先看清住的地方属于哪一区。</p>
            <details class="log__more">
              <summary>查看本期改动要点</summary>
              <ul class="news-points news-points--tight">
                <li>每张图附一行换乘提示，写明高峰期容易堵在哪个节点。</li>
                <li>月票分区与租金对照表相互对应，可以配合着看。</li>
                <li>地图资料合计已达 38 份，覆盖 10 个省与 3 个地区。</li>
              </ul>
            </details>
          </div>
          <span class="log__time mono">更早一期</span>
        </li>

      </ol>

      <p class="news-log__foot">想看更早的批次，可在<a href="/services/">焕新版资源下载专区</a>按更新时间排列浏览；遇到页面打不开，先从<a href="/tutorial/">使用教程</a>里挑一条对应情形试。</p>
    </div>
  </section>

  <section id="reports" class="section news-quarter" data-section="季度专题">
    <div class="news-quarter__bg">
      <img src="{zhanqunpic:h:900w:1400}" width="1400" height="900" alt="雪原上空的极光，绿色与冷蓝色调，地平线平缓" loading="lazy" decoding="async">
    </div>
    <div class="shell">
      <div class="section-head">
        <span class="section-head__idx mono">03</span>
        <h2 class="section-head__title">季度专题报告</h2>
        <p class="section-head__note">每季度一期 · 围绕一个高频场景做深度拆解</p>
      </div>
      <p class="news-quarter__intro">清单解决“这一份是不是最新的”，专题解决“这件事从头到尾怎么走”。每期只挑一个场景，把时间线、材料与踩过的坑一次讲完，省掉把十几个零散搜索结果拼起来的时间。</p>
    </div>

    <div class="news-quarter__track">

      <article class="q-card">
        <p class="q-card__no mono">第 12 期 · 本季度</p>
        <div class="q-card__glyph q-card__glyph--a" aria-hidden="true"></div>
        <h3 class="q-card__title">亲子落地第一年</h3>
        <p class="q-card__text">学籍登记、疫苗记录衔接与补充接种，按抵达月份分两条时间线走。</p>
        <ul class="q-card__parts">
          <li>场景拆解</li>
          <li>办理时间线</li>
          <li>常见卡点</li>
        </ul>
        <a class="q-card__link" href="/services/">到下载专区取阅</a>
      </article>

      <article class="q-card">
        <p class="q-card__no mono">第 11 期 · 上一季度</p>
        <div class="q-card__glyph q-card__glyph--b" aria-hidden="true"></div>
        <h3 class="q-card__title">换省迁移</h3>
        <p class="q-card__text">医保、驾照与子女转学三件事的先后顺序，以及迁入省的等待期差异。</p>
        <ul class="q-card__parts">
          <li>三省对照</li>
          <li>办理顺序</li>
          <li>材料替换</li>
        </ul>
        <a class="q-card__link" href="/services/">到下载专区取阅</a>
      </article>

      <article class="q-card">
        <p class="q-card__no mono">第 10 期 · 上一季度</p>
        <div class="q-card__glyph q-card__glyph--c" aria-hidden="true"></div>
        <h3 class="q-card__title">毕业工签到期前后</h3>
        <p class="q-card__text">身份过渡期可以选的几条路径，各自要准备什么、提前多久动手。</p>
        <ul class="q-card__parts">
          <li>路径分支</li>
          <li>时间余量</li>
          <li>备选方案</li>
        </ul>
        <a class="q-card__link" href="/services/">到下载专区取阅</a>
      </article>

      <article class="q-card">
        <p class="q-card__no mono">第 9 期 · 上一年度</p>
        <div class="q-card__glyph q-card__glyph--d" aria-hidden="true"></div>
        <h3 class="q-card__title">自雇与小微企业报税</h3>
        <p class="q-card__text">报税季前三个月的准备清单，票据归档与收入分类两件事最耗时间。</p>
        <ul class="q-card__parts">
          <li>票据归档</li>
          <li>收入分类</li>
          <li>常见退回</li>
        </ul>
        <a class="q-card__link" href="/services/">到下载专区取阅</a>
      </article>

    </div>
  </section>

  <section id="index" class="section news-index" data-section="年度索引">
    <div class="shell">
      <div class="section-head">
        <span class="section-head__idx mono">04</span>
        <h2 class="section-head__title">年度资源索引</h2>
        <p class="section-head__note">每年一份 · 主题与省区双索引</p>
      </div>

      <div class="grid news-index__grid">
        <div class="col-7">
          <p class="news-index__lead mark-line">一年结束，编辑部会把当年所有新增与修订过的资料重新编一遍号，做成一册全年资源索引。</p>
          <p>索引分两条查找路径：按主题进去，从签证入境、留学升学、就业移民、生活安家、税务理财一路排下来；按省区进去，安大略、不列颠哥伦比亚、魁北克、阿尔伯塔等 10 个省与 3 个地区各有独立页签。同一条资料在两个索引里都能找到，编号一致。</p>
          <ul class="news-points">
            <li>留学与出海服务机构可以把整份索引当作资料底稿，按编号批量引用，附上期号即可。</li>
            <li>每份资料标出首次收录的季度与最近一次修订的期号，引用时能说清楚用的是哪一版。</li>
            <li>索引另附一页年度变更说明，写清哪些章节重写过、哪些分类做了合并。</li>
          </ul>
          <p class="news-index__meta">当前可查的是上一年度索引，本年度索引在年末整理完成后发布。</p>
          <a class="btn btn--ghost" href="/services/">进入资源下载专区</a>
        </div>
        <div class="col-4 news-index__media">
          <figure class="media-frame media-frame--4x3">
            <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="由细线与编号块组成的抽象档案编目示意，画面中没有任何文字内容" loading="lazy" decoding="async">
            <figcaption class="media-frame__caption">主题索引与省区索引，两条路径通向同一批编号</figcaption>
          </figure>
        </div>
      </div>
    </div>
  </section>

  <section id="subscribe" class="section news-sub" data-section="订阅与回访">
    <div class="shell">
      <div class="grid news-sub__grid">
        <div class="col-5 news-sub__media">
          <figure class="media-frame media-frame--1x1">
            <img src="{zhanqunpic:h:800w:1000}" width="1000" height="800" alt="抽象化的邮件与浏览器窗口线框图形，冷色调，没有人物" loading="lazy" decoding="async">
          </figure>
        </div>
        <div class="col-6 news-sub__body">
          <p class="eyebrow">SUBSCRIBE · 订阅</p>
          <h2 class="news-sub__title">下一期发布的那天，清单先到你的邮箱</h2>
          <p>把常用邮箱和主要关注的省区写在反馈里，编辑会把你加入当期分发名单。每两周一次，发布当日发出；季度专题单独再发一封，不夹带其他内容。</p>
          <ul class="news-points">
            <li>可按省区筛选，只看你所在或准备去的那个省，不必每期从头翻。</li>
            <li>订阅用户目前超过 3.2 万人，以准备留学、已落地就业与家庭安家三类为主。</li>
            <li>想停掉，邮件底部一键退订即可，或来信说明，不需要给理由。</li>
          </ul>
          <div class="news-sub__actions">
            <a class="btn btn--ghost" href="/find-us/">提交订阅信息</a>
            <a class="news-sub__link" href="/tutorial/">打不开页面怎么办</a>
          </div>
        </div>
      </div>
    </div>
  </section>

</main>

.page-news {
  --news-tag-w: 140px;
  --news-time-w: 96px;
}

/* 页头 */
.page-news .news-mast {
  padding-top: clamp(20px, 3vw, 36px);
}
.page-news .news-mast .breadcrumb {
  margin-bottom: 20px;
  font-size: 13px;
}
.page-news .news-mast__grid {
  row-gap: 26px;
  align-items: start;
}
.page-news .news-mast__lead .eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-cond);
  letter-spacing: 0.14em;
  color: var(--fir);
}
.page-news .news-mast__lead .display {
  margin: 0 0 16px;
}
.page-news .news-mast__lead .lede {
  max-width: 33em;
  margin: 0 0 22px;
  color: var(--ink-soft);
}
.page-news .news-mast__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}
.page-news .news-mast__link {
  font-size: 14px;
  color: var(--fir);
  text-decoration: none;
  border-bottom: 1px solid var(--ice);
  padding-bottom: 2px;
}
.page-news .news-mast__link:hover,
.page-news .news-mast__link:focus-visible {
  color: var(--maple);
  border-bottom-color: var(--maple);
}
.page-news .news-mast__panel {
  border: 1px solid var(--line);
  background: var(--paper-3);
  padding: 16px 18px 14px;
}
.page-news .news-mast__panel-title {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--maple);
}
.page-news .news-mast__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.page-news .news-mast__row:last-of-type {
  border-bottom: 0;
}
.page-news .news-mast__row span {
  color: var(--grey);
}
.page-news .news-mast__row strong {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.page-news .news-mast__panel-note {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--grey);
}

/* 通栏横幅 */
.page-news .news-banner {
  position: relative;
  margin: clamp(28px, 4vw, 48px) 0 0;
  border-block: 1px solid var(--line);
  background: var(--fir-deep);
  overflow: hidden;
}
.page-news .news-banner img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: clamp(170px, 27vw, 350px);
  object-fit: cover;
}
.page-news .news-banner__cap {
  position: absolute;
  left: var(--gutter);
  bottom: 12px;
  padding: 4px 10px;
  background: rgba(14, 54, 48, 0.82);
  color: var(--paper);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* 栏目头 */
.page-news .section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  padding-bottom: 10px;
  margin-bottom: clamp(20px, 3vw, 30px);
  border-bottom: 1px solid var(--line-strong);
}
.page-news .section-head__idx {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--maple);
}
.page-news .section-head__title {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.72rem);
  letter-spacing: -0.01em;
}
.page-news .section-head__note {
  margin: 0 0 0 auto;
  font-size: 12.5px;
  color: var(--grey);
}

/* 最新一期 */
.page-news .news-latest__grid {
  row-gap: 26px;
  align-items: start;
}
.page-news .news-latest__kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--sand);
}
.page-news .news-latest__intro {
  margin: 0 0 18px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 36em;
}
.page-news .news-points {
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-news .news-points li {
  position: relative;
  padding: 9px 0 9px 20px;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.page-news .news-points li:last-child {
  border-bottom: 0;
}
.page-news .news-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 10px;
  height: 1px;
  background: var(--fir);
}
.page-news .news-points--tight li {
  font-size: 14px;
  padding: 7px 0 7px 18px;
}
.page-news .news-points--tight li::before {
  top: 16px;
  background: var(--maple);
}

.page-news .news-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.page-news .news-stats__cell {
  padding: 14px 14px 12px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.page-news .news-stats__cell:nth-child(2n) {
  border-right: 0;
}
.page-news .news-stats__cell--wide {
  grid-column: 1 / -1;
  border-right: 0;
  border-bottom: 0;
  background: var(--paper-3);
}
.page-news .news-stats__cell b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fir);
}
.page-news .news-stats__cell span {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--grey);
}

/* 更新列表 */
.page-news .news-log__legend {
  margin-bottom: 18px;
  gap: 8px;
}
.page-news .news-log__legend .tag {
  font-size: 12px;
  padding: 3px 11px;
  border: 1px solid var(--fir);
  border-radius: 999px;
  color: var(--fir);
  background: transparent;
}
.page-news .log {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-strong);
}
.page-news .log__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px 16px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--line);
}
.page-news .log__tag {
  justify-self: start;
  align-self: start;
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fir);
  background: var(--paper-2);
  white-space: nowrap;
}
.page-news .log__body {
  min-width: 0;
}
.page-news .log__title {
  margin: 0 0 6px;
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink);
}
.page-news .log__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.page-news .log__time {
  font-size: 12.5px;
  color: var(--grey);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.page-news .log__more {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
}
.page-news .log__more summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--fir);
}
.page-news .log__more summary::-webkit-details-marker {
  display: none;
}
.page-news .log__more summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--maple);
}
.page-news .log__more[open] summary::after {
  content: "−";
}
.page-news .log__more summary:hover,
.page-news .log__more summary:focus-visible {
  color: var(--maple);
}

/* 首条放大 */
.page-news .log__item--lead {
  padding: 24px 0 22px;
  background: linear-gradient(90deg, rgba(231, 228, 220, 0.55), rgba(231, 228, 220, 0));
}
.page-news .log__title--lead {
  font-size: clamp(1.45rem, 3.4vw, 2.2rem);
  line-height: 1.24;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.page-news .log__item--lead .log__text {
  font-size: 15.5px;
}

.page-news .news-log__foot {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.75;
  color: var(--grey);
}
.page-news .news-log__foot a {
  color: var(--fir);
  text-decoration: underline;
  text-decoration-color: var(--ice);
  text-underline-offset: 3px;
}
.page-news .news-log__foot a:hover,
.page-news .news-log__foot a:focus-visible {
  color: var(--maple);
  text-decoration-color: var(--maple);
}

/* 季度专题 */
.page-news .news-quarter {
  position: relative;
  overflow: hidden;
  padding-block: clamp(38px, 6vw, 78px);
  background: var(--fir-deep);
  color: var(--paper);
}
.page-news .news-quarter__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-news .news-quarter__bg img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.26;
}
.page-news .news-quarter > .shell,
.page-news .news-quarter__track {
  position: relative;
}
.page-news .news-quarter .section-head {
  border-bottom-color: var(--line-light);
}
.page-news .news-quarter .section-head__title {
  color: var(--paper);
}
.page-news .news-quarter .section-head__note {
  color: rgba(244, 243, 239, 0.66);
}
.page-news .news-quarter__intro {
  max-width: 42em;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: rgba(244, 243, 239, 0.8);
}
.page-news .news-quarter__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(248px, 80%);
  gap: 14px;
  margin-top: clamp(22px, 3vw, 32px);
  padding: 2px var(--gutter) 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.page-news .q-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  border: 1px solid var(--line-light);
  background: rgba(14, 54, 48, 0.74);
  scroll-snap-align: start;
}
.page-news .q-card__no {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sand);
}
.page-news .q-card__glyph {
  height: 70px;
  border: 1px solid var(--line-light);
  background: linear-gradient(118deg, rgba(127, 182, 206, 0.5), rgba(31, 91, 78, 0.85));
}
.page-news .q-card__glyph--a {
  background:
    radial-gradient(circle at 26% 38%, rgba(127, 182, 206, 0.9), transparent 62%),
    linear-gradient(118deg, rgba(31, 91, 78, 0.9), rgba(14, 54, 48, 0.9));
}
.page-news .q-card__glyph--b {
  background:
    linear-gradient(72deg, transparent 46%, rgba(217, 169, 97, 0.75) 47%, rgba(217, 169, 97, 0.75) 49%, transparent 50%),
    linear-gradient(118deg, rgba(31, 91, 78, 0.9), rgba(127, 182, 206, 0.55));
}
.page-news .q-card__glyph--c {
  background:
    repeating-linear-gradient(90deg, rgba(244, 243, 239, 0.16) 0 1px, transparent 1px 16px),
    linear-gradient(118deg, rgba(14, 54, 48, 0.92), rgba(31, 91, 78, 0.85));
}
.page-news .q-card__glyph--d {
  background:
    radial-gradient(circle at 74% 30%, rgba(217, 169, 97, 0.85), transparent 58%),
    linear-gradient(118deg, rgba(31, 91, 78, 0.9), rgba(14, 54, 48, 0.92));
}
.page-news .q-card__title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.page-news .q-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(244, 243, 239, 0.78);
  flex: 1 1 auto;
}
.page-news .q-card__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--ice);
}
.page-news .q-card__parts li + li::before {
  content: "/";
  margin: 0 7px;
  color: rgba(244, 243, 239, 0.36);
}
.page-news .q-card__link {
  align-self: flex-start;
  font-size: 13.5px;
  color: var(--sand);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 169, 97, 0.5);
  padding-bottom: 2px;
}
.page-news .q-card__link:hover,
.page-news .q-card__link:focus-visible {
  color: var(--paper);
  border-bottom-color: var(--paper);
}

/* 年度索引 */
.page-news .news-index__grid {
  row-gap: 26px;
  align-items: start;
}
.page-news .news-index__lead {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 600;
  color: var(--ink);
}
.page-news .news-index p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 36em;
}
.page-news .news-index__meta {
  font-size: 13px;
  color: var(--grey);
  margin: 16px 0 20px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.page-news .news-index__media .media-frame {
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.page-news .news-index__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}
.page-news .news-index__media .media-frame__caption {
  padding: 8px 10px;
  font-size: 12px;
  color: var(--grey);
  border-top: 1px solid var(--line);
}

/* 订阅与回访 */
.page-news .news-sub {
  padding-bottom: clamp(48px, 7vw, 92px);
}
.page-news .news-sub__grid {
  row-gap: 26px;
  align-items: center;
}
.page-news .news-sub__media .media-frame {
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.page-news .news-sub__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.page-news .news-sub__body .eyebrow {
  margin: 0 0 8px;
  font-family: var(--font-cond);
  letter-spacing: 0.14em;
  color: var(--maple);
}
.page-news .news-sub__title {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.26;
  letter-spacing: -0.02em;
}
.page-news .news-sub__body p {
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--ink-soft);
  max-width: 34em;
}
.page-news .news-sub__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 20px;
}
.page-news .news-sub__link {
  font-size: 14px;
  color: var(--fir);
  text-decoration: none;
  border-bottom: 1px solid var(--ice);
  padding-bottom: 2px;
}
.page-news .news-sub__link:hover,
.page-news .news-sub__link:focus-visible {
  color: var(--maple);
  border-bottom-color: var(--maple);
}

/* 中等屏幕起：列表三栏对齐 */
@media (min-width: 760px) {
  .page-news .log__item {
    grid-template-columns: var(--news-tag-w) minmax(0, 1fr) var(--news-time-w);
    gap: 4px 18px;
    align-items: start;
  }
  .page-news .log__time {
    text-align: right;
  }
  .page-news .log__item--lead {
    grid-template-columns: var(--news-tag-w) minmax(0, 1fr) var(--news-time-w);
    padding: 28px 18px 26px 0;
  }
}

/* 桌面端：专题卡片并排更宽 */
@media (min-width: 900px) {
  .page-news .news-mast__panel {
    justify-self: end;
    width: 100%;
    max-width: 360px;
  }
  .page-news .news-quarter__track {
    grid-auto-columns: minmax(280px, 31%);
    gap: 18px;
  }
  .page-news .news-index__media {
    justify-self: end;
  }
}

@media (min-width: 1120px) {
  .page-news {
    --news-tag-w: 156px;
    --news-time-w: 104px;
  }
  .page-news .log__item--lead {
    padding-right: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-quarter__track {
    scroll-snap-type: none;
  }
}