.page-home {
  --rail-w: 84px;
  --hero-top: 116px;
  --cell-gap: 20px;
  background: var(--ink);
  color: var(--text-body);
}

.page-home .site-main,
.page-home .wrap {
  max-width: 1240px;
}

/* 窄条索引栏 */
.page-home .rail-host {
  position: relative;
}
.page-home .rail {
  display: none;
}

/* 首屏 */
.page-home .hero {
  position: relative;
  padding: 32px 0 56px;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 100% 96px, 96px 100%;
  background-position: 0 0, 24px 0;
  overflow: hidden;
}
.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto auto;
  width: 62%;
  height: 78%;
  background: radial-gradient(circle at 68% 32%, rgba(240, 217, 168, 0.16), transparent 62%);
  pointer-events: none;
}
.page-home .hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 0 var(--gutter);
}
.page-home .hero__coord {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--copper);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 10px;
}
.page-home .hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--white);
}
.page-home .hero__title-mark {
  display: block;
  color: var(--copper-bright);
}
.page-home .hero__intro {
  margin: 0 0 24px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-body);
}
.page-home .hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-home .hero__feedback {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--copper-bright);
}
.page-home .hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
}
.page-home .hero__fact dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 6px;
}
.page-home .hero__fact dd {
  margin: 0;
  font-size: 18px;
  color: var(--copper-bright);
}

/* 路径入口 */
.page-home .hero__paths {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}
.page-home .hero__paths-label {
  margin: 14px 0 10px;
  color: var(--graphite);
}
.page-home .path-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 4px 16px 0;
  border-bottom: 1px solid var(--line-dark);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.page-home .path-card:hover,
.page-home .path-card:focus-visible {
  background: var(--wash-copper);
  padding-left: 10px;
}
.page-home .path-card__idx {
  flex: none;
  font-size: 13px;
  color: var(--copper);
  padding-top: 3px;
}
.page-home .path-card__body {
  display: block;
}
.page-home .path-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.page-home .path-card__desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dim);
}
.page-home .hero__figure {
  margin: 24px 0 0;
}
.page-home .hero__figure img,
.page-home .parity__figure img,
.page-home .access__figure img,
.page-home .drawer__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

/* 变更说明 */
.page-home .changes {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark-strong);
  background: linear-gradient(180deg, rgba(192, 138, 62, 0.05), transparent 240px);
}
.page-home .drawer {
  margin-top: 28px;
}
.page-home .drawer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.page-home .drawer__hint {
  margin: 12px 0;
  font-size: 12px;
  color: var(--copper);
}
.page-home .drawer__nav {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.page-home .drawer__btn {
  padding: 8px 14px;
  font-size: 13px;
}
.page-home .drawer__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 0;
  margin: 0;
  padding: 0 0 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line-dark);
}
.page-home .drawer__item {
  scroll-snap-align: start;
  padding: 22px 20px 24px 20px;
  border-right: 1px solid var(--line-dark);
  background: var(--ink-soft);
}
.page-home .drawer__item[data-active="true"] {
  background: var(--ink-lift);
  box-shadow: inset 0 2px 0 var(--cinnabar);
}
.page-home .drawer__scope {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-dim);
}
.page-home .drawer__scope .label {
  margin-right: 8px;
  color: var(--graphite);
}
.page-home .drawer__detail {
  display: grid;
  gap: 22px;
  padding: 28px var(--gutter) 0;
}
.page-home .drawer__figure {
  margin: 0;
}
.page-home .drawer__notes p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-body);
}
.page-home .drawer__notes a {
  color: var(--copper-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark-strong);
}
.page-home .drawer__notes a:hover {
  border-bottom-color: var(--copper-bright);
}

/* 同构栏目 */
.page-home .parity {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark);
}
.page-home .parity__grid {
  display: grid;
  gap: 32px;
  padding: 0 var(--gutter);
}
.page-home .parity__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.page-home .parity__list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
}
.page-home .parity__num {
  flex: none;
  min-width: 2em;
  font-size: 20px;
  color: var(--copper-bright);
}
.page-home .parity__demo {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line-dark);
  background: rgba(20, 24, 29, 0.72);
}
.page-home .device {
  border: 1px solid var(--line-dark-strong);
  padding: 12px;
  background: var(--ink);
}
.page-home .device--phone {
  border-color: rgba(230, 185, 110, 0.5);
}
.page-home .device__bar {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--copper);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 8px;
}
.page-home .device__rows {
  display: grid;
  gap: 8px;
}
.page-home .device__row {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-dark);
}
.page-home .device__row .mono {
  flex: none;
  color: var(--copper);
  font-size: 12px;
}
.page-home .device__foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--copper-bright);
}
.page-home .parity__figure {
  margin: 0;
}

/* 固定访问 */
.page-home .access {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark);
}
.page-home .access__figure {
  margin: 28px 0 0;
}
.page-home .steps {
  display: grid;
  gap: 0;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.page-home .steps__item {
  counter-increment: step;
  padding: 22px 0;
  border-top: 1px solid var(--line-dark);
}
.page-home .steps__idx {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cinnabar);
}
.page-home .steps__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}
.page-home .steps__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 40em;
}

/* 收藏夹（宣纸米白反白区） */
.page-home .favorites {
  padding: 64px 0 60px;
  border-top: 1px solid var(--line-dark-strong);
  border-bottom: 1px solid var(--line-dark-strong);
}
.page-home .favorites__grid {
  display: grid;
  gap: 32px;
  padding: 0 var(--gutter);
}
.page-home .section-head--paper .section-head__title {
  color: var(--ink);
}
.page-home .section-head--paper .section-head__eyebrow {
  color: #8a6a2c;
}
.page-home .section-head--paper .section-head__desc {
  color: #3d3a34;
}
.page-home .favorites__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
}
.page-home .favorites__count {
  color: #6b6055;
  letter-spacing: 0.1em;
}
.page-home .favorites__count .mono {
  color: #a9772a;
  font-size: 15px;
}
.page-home .favorites__note {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #3d3a34;
  max-width: 36em;
}
.page-home .fav-groups {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-paper);
}
.page-home .fav-groups__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-paper);
}
.page-home .fav-groups__head {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.page-home .fav-groups__head .mono {
  font-size: 12px;
  color: #a9772a;
}
.page-home .fav-groups__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: #57514a;
}

/* 服务规模 */
.page-home .scale {
  padding: 64px 0 56px;
  background: var(--ink-soft);
  border-top: 1px solid var(--line-dark);
}
.page-home .stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
.page-home .stats__cell {
  background: var(--ink);
  padding: 20px 18px;
}
.page-home .stats__cell--big {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, rgba(192, 138, 62, 0.16), var(--ink) 70%);
}
.page-home .stats__key {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}
.page-home .stats__val {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  color: var(--copper-bright);
}
.page-home .stats__cell--big .stats__val {
  font-size: 40px;
}
.page-home .stats__unit {
  font-size: 14px;
  margin-left: 6px;
  color: var(--text-dim);
}
.page-home .scale__source {
  margin: 18px 0 0;
  color: var(--graphite);
  letter-spacing: 0.08em;
}
.page-home .scale__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

/* 最近更新 */
.page-home .latest {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark);
}
.page-home .latest__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.page-home .latest__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-dark);
}
.page-home .latest__meta {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--cinnabar);
  letter-spacing: 0.06em;
}
.page-home .latest__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
.page-home .latest__title a {
  color: var(--white);
  text-decoration: none;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 120ms var(--ease);
}
.page-home .latest__title a:hover,
.page-home .latest__title a:focus-visible {
  background-size: 100% 1px;
  color: var(--copper-bright);
}
.page-home .latest__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 42em;
}

/* 协助 */
.page-home .help {
  padding: 64px 0 72px;
  border-top: 1px solid var(--line-dark-strong);
  background: linear-gradient(180deg, transparent, rgba(192, 138, 62, 0.06));
}
.page-home .help__grid {
  display: grid;
  gap: 32px;
  padding: 0 var(--gutter);
}
.page-home .help__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}
.page-home .help__card {
  border: 1px solid var(--line-dark-strong);
  background: var(--ink-lift);
  padding: 22px 20px;
}
.page-home .help__card-label {
  margin: 0 0 16px;
  color: var(--copper);
}
.page-home .help__line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark);
}
.page-home .help__key {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  min-width: 5em;
}
.page-home .help__val {
  font-size: 14px;
  color: var(--copper-bright);
  word-break: break-all;
}
.page-home .help__tip {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* 平板与桌面 */
@media (min-width: 720px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 40px;
    align-items: start;
  }
  .page-home .drawer__track {
    grid-auto-columns: 46%;
  }
  .page-home .drawer__detail {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 32px;
    align-items: start;
  }
  .page-home .parity__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      "copy demo"
      "figure demo";
    gap: 32px 40px;
    align-items: start;
  }
  .page-home .parity__copy { grid-area: copy; }
  .page-home .parity__demo { grid-area: demo; }
  .page-home .parity__figure { grid-area: figure; }
  .page-home .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 28px;
  }
  .page-home .favorites__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 44px;
    align-items: start;
  }
  .page-home .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home .stats__cell--big {
    grid-column: span 1;
  }
  .page-home .latest__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
    border-top: 1px solid var(--line-dark);
  }
  .page-home .latest__item {
    padding: 22px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .page-home .help__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 40px;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .page-home .site-main {
    padding-left: 0;
  }
  .page-home .rail-host {
    position: absolute;
    top: var(--hero-top);
    left: 0;
    width: var(--rail-w);
    height: 100%;
    pointer-events: none;
    z-index: 3;
  }
  .page-home .rail {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    width: var(--rail-w);
    padding: 0 0 0 6px;
    border-right: 1px solid var(--line-dark);
    pointer-events: auto;
  }
  .page-home .rail__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--cinnabar);
  }
  .page-home .rail__link {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--graphite);
    text-decoration: none;
    padding: 6px 0;
    border-left: 1px solid transparent;
    transition: color 120ms var(--ease), border-color 120ms var(--ease);
  }
  .page-home .rail__link:hover,
  .page-home .rail__link:focus-visible,
  .page-home .rail__link[data-active="true"] {
    color: var(--copper-bright);
  }
  .page-home .rail__link[data-active="true"] {
    border-left-color: var(--copper);
  }

  .page-home .hero {
    padding-top: 56px;
  }
  .page-home .hero__grid,
  .page-home .changes .wrap,
  .page-home .parity__grid,
  .page-home .access .wrap,
  .page-home .favorites__grid,
  .page-home .scale .wrap,
  .page-home .latest .wrap,
  .page-home .help__grid,
  .page-home .drawer__bar,
  .page-home .drawer__detail {
    padding-left: calc(var(--gutter) + var(--rail-w));
    padding-right: var(--gutter);
  }
  .page-home .drawer__track {
    grid-auto-columns: 30%;
    padding-left: calc(var(--gutter) + var(--rail-w));
  }
  .page-home .timeline {
    gap: 0;
  }
  .page-home .stats__cell--big .stats__val {
    font-size: 52px;
  }
  .page-home .hero__paths {
    position: relative;
  }
  .page-home .hero__paths::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--copper);
  }
}


<main id="main-content" class="page-home">
  <div class="rail-host">
    <nav class="rail" aria-label="本页章节索引">
      <span class="rail__num">00</span>
      <a class="rail__link" href="#paths" data-spy-link>路径</a>
      <a class="rail__link" href="#changes" data-spy-link>变更说明</a>
      <a class="rail__link" href="#parity" data-spy-link>同构栏目</a>
      <a class="rail__link" href="#pin" data-spy-link>固定访问</a>
      <a class="rail__link" href="#favorites" data-spy-link>收藏夹</a>
      <a class="rail__link" href="#scale" data-spy-link>服务规模</a>
      <a class="rail__link" href="#latest" data-spy-link>最近更新</a>
      <a class="rail__link" href="#help" data-spy-link>协助</a>
    </nav>
  </div>

  <section class="hero" aria-labelledby="hero-title">
    <div class="wrap hero__grid">
      <div class="hero__lead">
        <p class="coord hero__coord">archive-kaiyuan.com.cn — 检索终端已就绪</p>
        <h1 id="hero-title" class="hero__title">今天要查的那份存档，<span class="hero__title-mark">应该在这里</span></h1>
        <p class="hero__intro">
          开元为贵单位管好每一份归档卷宗，也把每天新增的即时动向收进同一条路径里。
          打开就能看到最近改了什么、动到哪个栏目，不必再翻三封邮件去确认。
        </p>
        <div class="hero__acts">
          <button type="button" class="btn btn--primary" data-pin-toggle>固定访问本页</button>
          <a class="btn btn--ghost" href="/features/">看功能与栏目</a>
        </div>
        <p class="hero__feedback mono" data-pin-feedback hidden>已把本页放进固定访问位，下次进站直接落在这一栏。</p>
        <dl class="hero__facts">
          <div class="hero__fact">
            <dt>已服务单位</dt>
            <dd class="mono">1,800+</dd>
          </div>
          <div class="hero__fact">
            <dt>覆盖省份</dt>
            <dd class="mono">26</dd>
          </div>
          <div class="hero__fact">
            <dt>检索首屏返回</dt>
            <dd class="mono">&lt;800ms</dd>
          </div>
        </dl>
      </div>

      <div class="hero__paths" id="paths">
        <p class="label hero__paths-label">四条入口 · 按需要点</p>
        <a class="path-card" href="#changes">
          <span class="path-card__idx mono">01</span>
          <span class="path-card__body">
            <span class="path-card__title">最近改了什么</span>
            <span class="path-card__desc">卷宗编号、栏目归属、变更要点、影响范围，四项一次看全。</span>
          </span>
        </a>
        <a class="path-card" href="/features/">
          <span class="path-card__idx mono">02</span>
          <span class="path-card__body">
            <span class="path-card__title">站内检索怎么用</span>
            <span class="path-card__desc">全文命中全部已归档卷宗与即时条目，按栏目或时间排。</span>
          </span>
        </a>
        <a class="path-card" href="#parity">
          <span class="path-card__idx mono">03</span>
          <span class="path-card__body">
            <span class="path-card__title">手机上看着一样吗</span>
            <span class="path-card__desc">层级标题照常展开，一屏能完整读到 4 条记录。</span>
          </span>
        </a>
        <a class="path-card" href="#pin">
          <span class="path-card__idx mono">04</span>
          <span class="path-card__body">
            <span class="path-card__title">下次直接从这儿进</span>
            <span class="path-card__desc">一键回到上次浏览的栏目，登录与否都能用。</span>
          </span>
        </a>
        <figure class="hero__figure media-figure">
          <div class="media-frame media-frame--wide">
            <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="俯拍的档案柜抽屉局部，冷光下透出铜质编号牌的微光">
          </div>
          <figcaption class="media-frame__cap">银川信息中心 · 夜间检索灯常亮</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="changes" id="changes" aria-labelledby="changes-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-head__eyebrow label">第二栏 · 变更说明</p>
        <h2 id="changes-title" class="section-head__title">老用户进来先看这一栏</h2>
        <p class="section-head__desc">
          版本发布、栏目调整、口径修订都在这里落一条记录。看编号就知道动的是哪一卷，看影响范围就知道要不要通知其他同事。
        </p>
      </header>
    </div>

    <div class="drawer" data-drawer>
      <div class="wrap drawer__bar">
        <p class="drawer__hint mono" data-drawer-status>当前第 1 / 5 条 · 编号 KY-2024-1174</p>
        <div class="drawer__nav">
          <button type="button" class="btn btn--ghost drawer__btn" data-drawer-prev>← 上一条</button>
          <button type="button" class="btn btn--ghost drawer__btn" data-drawer-next>下一条 →</button>
        </div>
      </div>

      <ol class="timeline drawer__track" data-drawer-track>
        <li class="timeline__item drawer__item" data-drawer-item data-active="true">
          <p class="timeline__time mono">KY-2024-1174 · 功能与栏目</p>
          <h3 class="timeline__title">检索结果新增按时间排序</h3>
          <p class="timeline__text">检索面板右侧多出一组排序开关，命中列表可在栏目与时间两个维度之间切换，长词检索的首屏更快落到最近的条目上。</p>
          <p class="drawer__scope"><span class="label">影响范围</span>站内全文检索、栏目内检索；权限与日志不受影响。</p>
        </li>
        <li class="timeline__item drawer__item" data-drawer-item>
          <p class="timeline__time mono">KY-2024-1169 · 小屏栏目</p>
          <h3 class="timeline__title">手机端折叠不再收起层级标题</h3>
          <p class="timeline__text">小屏栏目的折叠改为只收起条目正文，栏目层级标题保留在视野内，一屏可完整读完 4 条记录，滚动三次覆盖近 30 天更新。</p>
          <p class="drawer__scope"><span class="label">影响范围</span>小屏栏目；桌面端展示顺序不变。</p>
        </li>
        <li class="timeline__item drawer__item" data-drawer-item>
          <p class="timeline__time mono">KY-2024-1163 · 权限与账号</p>
          <h3 class="timeline__title">权限分级扩到卷宗密级维度</h3>
          <p class="timeline__text">三级权限除部门与角色外，可按卷宗密级单独设置访问范围，密级调整会同步写入审计日志，检索、下载、导出与权限变更四类操作留痕 3 年。</p>
          <p class="drawer__scope"><span class="label">影响范围</span>账号权限配置；已授权用户日常访问方式不变。</p>
        </li>
        <li class="timeline__item drawer__item" data-drawer-item>
          <p class="timeline__time mono">KY-2024-1157 · 接口对接</p>
          <h3 class="timeline__title">标准检索接口增加到 18 类系统适配</h3>
          <p class="timeline__text">OA、ERP、合同管理系统之外，新增若干常见业务系统的字段映射方案，集成方拿沙箱做完两轮演练再切正式环境。</p>
          <p class="drawer__scope"><span class="label">影响范围</span>开放检索接口；不改变现有对接方调用方式。</p>
        </li>
        <li class="timeline__item drawer__item" data-drawer-item>
          <p class="timeline__time mono">KY-2024-1151 · 收藏与固定</p>
          <h3 class="timeline__title">收藏夹支持跨设备同步</h3>
          <p class="timeline__text">单账号最多保存 60 个常用页面，收藏夹按栏目自动分组，换一台设备登录后分组与顺序保持原样。</p>
          <p class="drawer__scope"><span class="label">影响范围</span>账号收藏数据；桌面与手机端同时生效。</p>
        </li>
      </ol>

      <div class="wrap drawer__detail">
        <figure class="media-figure drawer__figure">
          <div class="media-frame">
            <img src="{zhanqunpic:h:600w:900}" width="900" height="600" alt="铜质卷宗编号牌与纸质标签并置的侧逆光特写" loading="lazy" decoding="async">
          </div>
          <figcaption class="media-frame__cap">卷宗编号牌 · 与站内编号一一对应</figcaption>
        </figure>
        <div class="drawer__notes">
          <p>每条变更记录都带四项字段：卷宗编号给身份，栏目归属给位置，变更要点说清了什么，影响范围告诉你还需要通知谁。</p>
          <p>首页保留最近 24 条，更早的按季度归档，从<a href="/updates/">更新与动态</a>进入可以一直往回翻。</p>
        </div>
      </div>
    </div>
  </section>

  <section class="parity" id="parity" aria-labelledby="parity-title">
    <div class="wrap parity__grid">
      <div class="parity__copy">
        <header class="section-head">
          <p class="section-head__eyebrow label">同构适配</p>
          <h2 id="parity-title" class="section-head__title">在工位上和在走廊里，看到的是同一套栏目</h2>
          <p class="section-head__desc">
            手机端沿用桌面的信息层级，只是把内容折起来一部分。栏目名、编号、条目顺序都不动，
            所以同事在手机上念出编号，你在电脑前能直接定位。
          </p>
        </header>
        <ul class="parity__list">
          <li><span class="mono parity__num">4</span> 条记录一屏读完，不必反复展开又收起</li>
          <li><span class="mono parity__num">3</span> 次连续滚动覆盖近 30 天更新</li>
          <li><span class="mono parity__num">1</span> 套层级，两端共用，不必对两种排版各解释一遍</li>
        </ul>
      </div>

      <div class="parity__demo" role="img" aria-label="手机框与桌面框并排，展示同一套栏目层级在两端的一致展开效果">
        <div class="device device--desk">
          <p class="device__bar mono">桌面 · 1440</p>
          <div class="device__rows">
            <p class="device__row"><span class="mono">01</span> 平台介绍 / 服务体系</p>
            <p class="device__row"><span class="mono">02</span> 功能与栏目 / 站内检索</p>
            <p class="device__row"><span class="mono">03</span> 变更说明 / 最近条目</p>
            <p class="device__row"><span class="mono">04</span> 常见问题 / 权限配置</p>
          </div>
        </div>
        <div class="device device--phone">
          <p class="device__bar mono">手机 · 390</p>
          <div class="device__rows">
            <p class="device__row"><span class="mono">01</span> 平台介绍</p>
            <p class="device__row"><span class="mono">02</span> 功能与栏目</p>
            <p class="device__row"><span class="mono">03</span> 变更说明</p>
            <p class="device__row"><span class="mono">04</span> 常见问题</p>
          </div>
          <p class="device__foot mono">层级标题保留 · 正文折叠</p>
        </div>
      </div>

      <figure class="media-figure parity__figure">
        <div class="media-frame media-frame--portrait">
          <img src="{zhanqunpic:h:1000w:800}" width="800" height="1000" alt="缩微胶片与老式检索终端屏幕在暗处透光的局部" loading="lazy" decoding="async">
        </div>
      </figure>
    </div>
  </section>

  <section class="access" id="pin" aria-labelledby="pin-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-head__eyebrow label">固定访问</p>
        <h2 id="pin-title" class="section-head__title">临时查一条信息，走最短的那条路</h2>
        <p class="section-head__desc">
          把常进的栏目放进固定访问位，之后打开站点直接落在那一栏，中间不再经过首页。
          这条路线对登录与非登录状态都有效，临时借用同事电脑也照样能用。
        </p>
      </header>

      <figure class="media-figure access__figure">
        <div class="media-frame media-frame--wide">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="屏幕微光下键盘与索引卡片的俯拍局部" loading="lazy" decoding="async">
        </div>
        <figcaption class="media-frame__cap">临时查证 · 三步之内落到条目</figcaption>
      </figure>

      <ol class="steps">
        <li class="steps__item">
          <p class="steps__idx mono">STEP 01</p>
          <h3 class="steps__title">在最常看的栏目上点固定</h3>
          <p class="steps__text">页头右上角的固定按钮按一下，该栏目就进了你的固定访问位，按钮形态同步变化。</p>
        </li>
        <li class="steps__item">
          <p class="steps__idx mono">STEP 02</p>
          <h3 class="steps__title">下次进站直接落在那一栏</h3>
          <p class="steps__text">不需要重新走导航，也不需要回忆上次停在哪个子栏目，进来就是那一屏。</p>
        </li>
        <li class="steps__item">
          <p class="steps__idx mono">STEP 03</p>
          <h3 class="steps__title">按 / 唤起检索，就地找条目</h3>
          <p class="steps__text">键盘按斜杠键打开检索，输入编号或关键词，首屏结果在 800 毫秒内返回。</p>
        </li>
      </ol>
    </div>
  </section>

  <section class="favorites section-paper" id="favorites" aria-labelledby="favorites-title">
    <div class="wrap favorites__grid">
      <div class="favorites__copy">
        <header class="section-head section-head--paper">
          <p class="section-head__eyebrow label">收藏夹</p>
          <h2 id="favorites-title" class="section-head__title">把常看的页面留在手边</h2>
          <p class="section-head__desc">
            财务每月要核的那几卷、人事常翻的栏目、合规岗每周看一遍的条目，收起来之后不用再从导航一层层点进去。
          </p>
        </header>
        <div class="favorites__acts">
          <button type="button" class="btn btn--paper" data-fav-toggle>收藏常用页面</button>
          <span class="label favorites__count">已收藏 <span class="mono" data-fav-count>0</span> 页</span>
        </div>
        <p class="favorites__note">
          收藏夹按栏目自动分组，单账号最多保存 60 个页面，换设备登录后分组与顺序照旧。
          想看别组的页面，直接在收藏面板里切换栏目即可。
        </p>
      </div>

      <ul class="fav-groups">
        <li class="fav-groups__item">
          <p class="fav-groups__head"><span class="mono">G-01</span> 合规与审计</p>
          <p class="fav-groups__desc">权限变更记录、审计日志查询、密级调整说明，共 8 页</p>
        </li>
        <li class="fav-groups__item">
          <p class="fav-groups__head"><span class="mono">G-02</span> 档案归档</p>
          <p class="fav-groups__desc">卷宗编号规则、归档进度统计、元数据导出说明，共 11 页</p>
        </li>
        <li class="fav-groups__item">
          <p class="fav-groups__head"><span class="mono">G-03</span> 系统对接</p>
          <p class="fav-groups__desc">检索接口说明、字段映射表、沙箱演练流程，共 7 页</p>
        </li>
        <li class="fav-groups__item">
          <p class="fav-groups__head"><span class="mono">G-04</span> 日常查证</p>
          <p class="fav-groups__desc">最近更新、常见问题、服务联系，共 5 页</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="scale" id="scale" aria-labelledby="scale-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-head__eyebrow label">服务规模</p>
        <h2 id="scale-title" class="section-head__title">已经在用的单位</h2>
        <p class="section-head__desc">
          制造车间要查工艺变更，园区要留招商往来，医院要存病历归档记录，公共事业单位要对得上台账。
          这些单位分布在 26 个省份，其中制造与园区客户约占四成。
        </p>
      </header>

      <dl class="stats">
        <div class="stats__cell stats__cell--big">
          <dt class="stats__key">累计归档卷宗</dt>
          <dd class="stats__val mono">420<span class="stats__unit">万份</span></dd>
        </div>
        <div class="stats__cell">
          <dt class="stats__key">日均新增条目</dt>
          <dd class="stats__val mono">约 3,600</dd>
        </div>
        <div class="stats__cell">
          <dt class="stats__key">服务单位</dt>
          <dd class="stats__val mono">1,800<span class="stats__unit">余家</span></dd>
        </div>
        <div class="stats__cell">
          <dt class="stats__key">接口适配系统类型</dt>
          <dd class="stats__val mono">18<span class="stats__unit">类</span></dd>
        </div>
        <div class="stats__cell">
          <dt class="stats__key">单库承载规模</dt>
          <dd class="stats__val mono">500<span class="stats__unit">万份</span></dd>
        </div>
        <div class="stats__cell">
          <dt class="stats__key">版本快照可回溯</dt>
          <dd class="stats__val mono">12<span class="stats__unit">个</span></dd>
        </div>
      </dl>

      <p class="scale__source label">以上规模数据来自平台运营统计，按季度更新后同步到本栏。</p>

      <div class="scale__links">
        <a class="btn btn--ghost" href="/introduction/">看团队与服务体系</a>
        <a class="btn btn--ghost" href="/features/">看权限与接口能力</a>
      </div>
    </div>
  </section>

  <section class="latest" id="latest" aria-labelledby="latest-title">
    <div class="wrap">
      <header class="section-head">
        <p class="section-head__eyebrow label">最近更新</p>
        <h2 id="latest-title" class="section-head__title">平台还在往前走</h2>
        <p class="section-head__desc">每年两次大版本、按季度发布功能小版本，更新说明同步落进第二栏。</p>
      </header>

      <ul class="latest__list">
        <li class="latest__item">
          <p class="latest__meta mono">两周前 · 版本发布</p>
          <h3 class="latest__title"><a href="/updates/">春季大版本上线，检索面板重排</a></h3>
          <p class="latest__text">排序开关前置，命中的栏目与时间两类维度可以直接对照。</p>
        </li>
        <li class="latest__item">
          <p class="latest__meta mono">上月 · 栏目调整</p>
          <h3 class="latest__title"><a href="/updates/">常见问题按使用场景重新分组</a></h3>
          <p class="latest__text">检索、小屏、权限、上线陪跑四类问题各自成组，找人问之前先看一眼。</p>
        </li>
        <li class="latest__item">
          <p class="latest__meta mono">上月 · 行业观察</p>
          <h3 class="latest__title"><a href="/updates/">第 38 期档案信息化观察报告发布</a></h3>
          <p class="latest__text">汇总制造、园区、医疗五类行业的归档节奏变化与常见配置。</p>
        </li>
        <li class="latest__item">
          <p class="latest__meta mono">上季度 · 使用技巧</p>
          <h3 class="latest__title"><a href="/updates/">固定访问位怎么排更顺手</a></h3>
          <p class="latest__text">按班次和岗位分配固定位，交接时同事接手成本更低。</p>
        </li>
        <li class="latest__item">
          <p class="latest__meta mono">上季度 · 版本发布</p>
          <h3 class="latest__title"><a href="/updates/">同城双活与异地容灾演练完成</a></h3>
          <p class="latest__text">核心业务恢复时间目标控制在 30 分钟以内，演练结论已进归档。</p>
        </li>
      </ul>
    </div>
  </section>

  <section class="help" id="help" aria-labelledby="help-title">
    <div class="wrap help__grid">
      <div class="help__copy">
        <header class="section-head">
          <p class="section-head__eyebrow label">需要协助时</p>
          <h2 id="help-title" class="section-head__title">找不到的条目，交给我们一起找</h2>
          <p class="section-head__desc">
            存档查询协助、栏目反馈、合作与集成咨询都可以来信。附上页面名称和一张截图，
            我们会在一个工作日内回复；值班响应 7×24 小时，工作日工单平均首次响应约 12 分钟。
          </p>
        </header>
        <div class="help__acts">
          <a class="btn btn--primary" href="/contact-us/">前往联系我们</a>
          <a class="btn btn--ghost" href="/faqs/">先看常见问题</a>
        </div>
      </div>

      <div class="help__card">
        <p class="help__card-label label">直接找到人</p>
        <p class="help__line"><span class="help__key">客服邮箱</span><span class="mono help__val">contact@archive-kaiyuan.com.cn</span></p>
        <p class="help__line"><span class="help__key">服务电话</span><span class="mono help__val">400-6834-1583</span></p>
        <p class="help__tip">来信时附上页面名称与截图，能省掉一轮来回确认。</p>
      </div>
    </div>
  </section>
</main>

.page-home {
  --rail-w: 84px;
  --hero-top: 116px;
  --cell-gap: 20px;
  background: var(--ink);
  color: var(--text-body);
}

.page-home .site-main,
.page-home .wrap {
  max-width: 1240px;
}

/* 窄条索引栏 */
.page-home .rail-host {
  position: relative;
}
.page-home .rail {
  display: none;
}

/* 首屏 */
.page-home .hero {
  position: relative;
  padding: 32px 0 56px;
  background-image:
    linear-gradient(var(--line-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 100% 96px, 96px 100%;
  background-position: 0 0, 24px 0;
  overflow: hidden;
}
.page-home .hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto auto;
  width: 62%;
  height: 78%;
  background: radial-gradient(circle at 68% 32%, rgba(240, 217, 168, 0.16), transparent 62%);
  pointer-events: none;
}
.page-home .hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding: 0 var(--gutter);
}
.page-home .hero__coord {
  margin: 0 0 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--copper);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 10px;
}
.page-home .hero__title {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--white);
}
.page-home .hero__title-mark {
  display: block;
  color: var(--copper-bright);
}
.page-home .hero__intro {
  margin: 0 0 24px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--text-body);
}
.page-home .hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.page-home .hero__feedback {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--copper-bright);
}
.page-home .hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 32px 0 0;
  border-top: 1px solid var(--line-dark);
  padding-top: 20px;
}
.page-home .hero__fact dt {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 6px;
}
.page-home .hero__fact dd {
  margin: 0;
  font-size: 18px;
  color: var(--copper-bright);
}

/* 路径入口 */
.page-home .hero__paths {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line-dark);
}
.page-home .hero__paths-label {
  margin: 14px 0 10px;
  color: var(--graphite);
}
.page-home .path-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 4px 16px 0;
  border-bottom: 1px solid var(--line-dark);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.page-home .path-card:hover,
.page-home .path-card:focus-visible {
  background: var(--wash-copper);
  padding-left: 10px;
}
.page-home .path-card__idx {
  flex: none;
  font-size: 13px;
  color: var(--copper);
  padding-top: 3px;
}
.page-home .path-card__body {
  display: block;
}
.page-home .path-card__title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.page-home .path-card__desc {
  display: block;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dim);
}
.page-home .hero__figure {
  margin: 24px 0 0;
}
.page-home .hero__figure img,
.page-home .parity__figure img,
.page-home .access__figure img,
.page-home .drawer__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}

/* 变更说明 */
.page-home .changes {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark-strong);
  background: linear-gradient(180deg, rgba(192, 138, 62, 0.05), transparent 240px);
}
.page-home .drawer {
  margin-top: 28px;
}
.page-home .drawer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.page-home .drawer__hint {
  margin: 12px 0;
  font-size: 12px;
  color: var(--copper);
}
.page-home .drawer__nav {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
.page-home .drawer__btn {
  padding: 8px 14px;
  font-size: 13px;
}
.page-home .drawer__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 0;
  margin: 0;
  padding: 0 0 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line-dark);
}
.page-home .drawer__item {
  scroll-snap-align: start;
  padding: 22px 20px 24px 20px;
  border-right: 1px solid var(--line-dark);
  background: var(--ink-soft);
}
.page-home .drawer__item[data-active="true"] {
  background: var(--ink-lift);
  box-shadow: inset 0 2px 0 var(--cinnabar);
}
.page-home .drawer__scope {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-dim);
}
.page-home .drawer__scope .label {
  margin-right: 8px;
  color: var(--graphite);
}
.page-home .drawer__detail {
  display: grid;
  gap: 22px;
  padding: 28px var(--gutter) 0;
}
.page-home .drawer__figure {
  margin: 0;
}
.page-home .drawer__notes p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-body);
}
.page-home .drawer__notes a {
  color: var(--copper-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--line-dark-strong);
}
.page-home .drawer__notes a:hover {
  border-bottom-color: var(--copper-bright);
}

/* 同构栏目 */
.page-home .parity {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark);
}
.page-home .parity__grid {
  display: grid;
  gap: 32px;
  padding: 0 var(--gutter);
}
.page-home .parity__list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.page-home .parity__list li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-body);
}
.page-home .parity__num {
  flex: none;
  min-width: 2em;
  font-size: 20px;
  color: var(--copper-bright);
}
.page-home .parity__demo {
  display: grid;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--line-dark);
  background: rgba(20, 24, 29, 0.72);
}
.page-home .device {
  border: 1px solid var(--line-dark-strong);
  padding: 12px;
  background: var(--ink);
}
.page-home .device--phone {
  border-color: rgba(230, 185, 110, 0.5);
}
.page-home .device__bar {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--copper);
  border-bottom: 1px solid var(--line-dark);
  padding-bottom: 8px;
}
.page-home .device__rows {
  display: grid;
  gap: 8px;
}
.page-home .device__row {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-body);
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-dark);
}
.page-home .device__row .mono {
  flex: none;
  color: var(--copper);
  font-size: 12px;
}
.page-home .device__foot {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--copper-bright);
}
.page-home .parity__figure {
  margin: 0;
}

/* 固定访问 */
.page-home .access {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark);
}
.page-home .access__figure {
  margin: 28px 0 0;
}
.page-home .steps {
  display: grid;
  gap: 0;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.page-home .steps__item {
  padding: 22px 0;
  border-top: 1px solid var(--line-dark);
}
.page-home .steps__idx {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--cinnabar);
}
.page-home .steps__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--white);
}
.page-home .steps__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 40em;
}

/* 收藏夹（宣纸米白反白区） */
.page-home .favorites {
  padding: 64px 0 60px;
  border-top: 1px solid var(--line-dark-strong);
  border-bottom: 1px solid var(--line-dark-strong);
}
.page-home .favorites__grid {
  display: grid;
  gap: 32px;
  padding: 0 var(--gutter);
}
.page-home .section-head--paper .section-head__title {
  color: var(--ink);
}
.page-home .section-head--paper .section-head__eyebrow {
  color: #8a6a2c;
}
.page-home .section-head--paper .section-head__desc {
  color: #3d3a34;
}
.page-home .favorites__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
}
.page-home .favorites__count {
  color: #6b6055;
  letter-spacing: 0.1em;
}
.page-home .favorites__count .mono {
  color: #a9772a;
  font-size: 15px;
}
.page-home .favorites__note {
  margin: 20px 0 0;
  font-size: 14.5px;
  line-height: 1.85;
  color: #3d3a34;
  max-width: 36em;
}
.page-home .fav-groups {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-paper);
}
.page-home .fav-groups__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--line-paper);
}
.page-home .fav-groups__head {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.page-home .fav-groups__head .mono {
  font-size: 12px;
  color: #a9772a;
}
.page-home .fav-groups__desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: #57514a;
}

/* 服务规模 */
.page-home .scale {
  padding: 64px 0 56px;
  background: var(--ink-soft);
  border-top: 1px solid var(--line-dark);
}
.page-home .stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 28px 0 0;
  padding: 0;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
.page-home .stats__cell {
  background: var(--ink);
  padding: 20px 18px;
}
.page-home .stats__cell--big {
  grid-column: 1 / -1;
  background: linear-gradient(120deg, rgba(192, 138, 62, 0.16), var(--ink) 70%);
}
.page-home .stats__key {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
}
.page-home .stats__val {
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
  color: var(--copper-bright);
}
.page-home .stats__cell--big .stats__val {
  font-size: 40px;
}
.page-home .stats__unit {
  font-size: 14px;
  margin-left: 6px;
  color: var(--text-dim);
}
.page-home .scale__source {
  margin: 18px 0 0;
  color: var(--graphite);
  letter-spacing: 0.08em;
}
.page-home .scale__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}

/* 最近更新 */
.page-home .latest {
  padding: 64px 0 56px;
  border-top: 1px solid var(--line-dark);
}
.page-home .latest__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}
.page-home .latest__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--line-dark);
}
.page-home .latest__meta {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--cinnabar);
  letter-spacing: 0.06em;
}
.page-home .latest__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}
.page-home .latest__title a {
  color: var(--white);
  text-decoration: none;
  background-image: linear-gradient(var(--copper), var(--copper));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size 120ms var(--ease);
}
.page-home .latest__title a:hover,
.page-home .latest__title a:focus-visible {
  background-size: 100% 1px;
  color: var(--copper-bright);
}
.page-home .latest__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text-dim);
  max-width: 42em;
}

/* 协助 */
.page-home .help {
  padding: 64px 0 72px;
  border-top: 1px solid var(--line-dark-strong);
  background: linear-gradient(180deg, transparent, rgba(192, 138, 62, 0.06));
}
.page-home .help__grid {
  display: grid;
  gap: 32px;
  padding: 0 var(--gutter);
}
.page-home .help__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
}
.page-home .help__card {
  border: 1px solid var(--line-dark-strong);
  background: var(--ink-lift);
  padding: 22px 20px;
}
.page-home .help__card-label {
  margin: 0 0 16px;
  color: var(--copper);
}
.page-home .help__line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  margin: 0 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-dark);
}
.page-home .help__key {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--graphite);
  min-width: 5em;
}
.page-home .help__val {
  font-size: 14px;
  color: var(--copper-bright);
  word-break: break-all;
}
.page-home .help__tip {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dim);
}

/* 平板与桌面 */
@media (min-width: 720px) {
  .page-home .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 40px;
    align-items: start;
  }
  .page-home .drawer__track {
    grid-auto-columns: 46%;
  }
  .page-home .drawer__detail {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 32px;
    align-items: start;
  }
  .page-home .parity__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-areas:
      "copy demo"
      "figure demo";
    gap: 32px 40px;
    align-items: start;
  }
  .page-home .parity__copy { grid-area: copy; }
  .page-home .parity__demo { grid-area: demo; }
  .page-home .parity__figure { grid-area: figure; }
  .page-home .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 28px;
  }
  .page-home .favorites__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 44px;
    align-items: start;
  }
  .page-home .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .page-home .stats__cell--big {
    grid-column: span 1;
  }
  .page-home .latest__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 36px;
    border-top: 1px solid var(--line-dark);
  }
  .page-home .latest__item {
    padding: 22px 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .page-home .help__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 40px;
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .page-home .site-main {
    padding-left: 0;
  }
  .page-home .rail-host {
    position: absolute;
    top: var(--hero-top);
    left: 0;
    width: var(--rail-w);
    height: 100%;
    pointer-events: none;
    z-index: 3;
  }
  .page-home .rail {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    width: var(--rail-w);
    padding: 0 0 0 6px;
    border-right: 1px solid var(--line-dark);
    pointer-events: auto;
  }
  .page-home .rail__num {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--cinnabar);
  }
  .page-home .rail__link {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--graphite);
    text-decoration: none;
    padding: 6px 0;
    border-left: 1px solid transparent;
    transition: color 120ms var(--ease), border-color 120ms var(--ease);
  }
  .page-home .rail__link:hover,
  .page-home .rail__link:focus-visible,
  .page-home .rail__link[data-active="true"] {
    color: var(--copper-bright);
  }
  .page-home .rail__link[data-active="true"] {
    border-left-color: var(--copper);
  }

  .page-home .hero {
    padding-top: 56px;
  }
  .page-home .hero__grid,
  .page-home .changes .wrap,
  .page-home .parity__grid,
  .page-home .access .wrap,
  .page-home .favorites__grid,
  .page-home .scale .wrap,
  .page-home .latest .wrap,
  .page-home .help__grid,
  .page-home .drawer__bar,
  .page-home .drawer__detail {
    padding-left: calc(var(--gutter) + var(--rail-w));
    padding-right: var(--gutter);
  }
  .page-home .drawer__track {
    grid-auto-columns: 30%;
    padding-left: calc(var(--gutter) + var(--rail-w));
  }
  .page-home .stats__cell--big .stats__val {
    font-size: 52px;
  }
  .page-home .hero__paths {
    position: relative;
  }
  .page-home .hero__paths::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--copper);
  }
}