/* ==========================================================================
   layout.css · 容器 / 栅格 / 顶部导航 / 抽屉 / 面包屑 / 页头 / 分区 / 屏骨架
                 / 相关内容 / 页脚 / 返回顶部 / 进度指示容器
   只引用 tokens.css 变量。
   ========================================================================== */

/* ---------- 1. 容器与栅格 ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.mt-block { margin-top: var(--pad-block); }

.mt-subblock { margin-top: var(--pad-subblock); }

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
}

@media (min-width: 1200px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ==========================================================================
   2. 顶部导航
   ========================================================================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-ink);
  transition: background-color var(--dur-base) var(--ease-state),
              color var(--dur-base) var(--ease-state),
              border-color var(--dur-base) linear;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: var(--nav-h);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: inherit;
  white-space: nowrap;
}

.topbar__nav { display: none; }

.topbar__list {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* 高度已有 44（min-height + padding-block），但二字词的命中宽只有 28，补 padding-inline
     把命中盒做到 ≥44×44。导航 <900 隐藏，故只影响 ≥900。
     2026-10-29 导航改四字词（4 字 ×14–15px ≈ 56–60px），命中盒天然 ≥44，
     padding-inline 由 space-2 收到 space-1，与下方 gap 收窄配合腾宽度（见 768 档注释）。 */
  padding-block: var(--space-3);
  padding-inline: var(--space-1);
  font-size: var(--fs-sm);
  color: inherit;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-state),
              border-color var(--dur-fast) var(--ease-state);
}

.topbar__link:hover { color: var(--color-accent-ink); }

/* 当前页：颜色 + 2px 实线 + 字重（三重标识，不只靠颜色） */
.topbar__link.is-active {
  color: var(--color-accent-ink);
  border-bottom-color: var(--color-accent);
  font-weight: var(--fw-semibold);
}

/* 首页首屏透明态（仅首页且未滚动） */
.page-index .topbar {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--color-ink-inverse);
}

.page-index .topbar.is-scrolled {
  background: var(--color-topbar-scrolled);
  border-bottom-color: var(--color-divider);
  color: var(--color-ink);
  -webkit-backdrop-filter: saturate(1.1) blur(6px);
  backdrop-filter: saturate(1.1) blur(6px);
}

.page-index .topbar:not(.is-scrolled) .topbar__link.is-active {
  color: var(--color-ink-inverse);
  border-bottom-color: var(--color-accent-soft);
}

.page-index .topbar:not(.is-scrolled) .topbar__brand { color: var(--color-ink-inverse); }

@media (min-width: 768px) {
  .topbar__nav { display: block; }
  /* 2026-10-29 四字词导航：10 项 ×(4 字 + 命中 padding) + brand + inner gap
     在 900 档需求 672px / 可用 711px（实测差 153px 才改成 gap space-2）。
     gap 16→8 与 link padding 8→4 两处收窄后：900 档余 39px、1200 档余 103px，均单行。 */
  .topbar__list { gap: var(--space-2); }
  .topbar__link { font-size: var(--fs-sm); }
}

/* 900–1199：四字词 + fs-sm(14) 在 820–1040 容器内放不下 10 项，
   导航紧凑态用 fs-caption(13)（需求 672 ≤ 可用 711，余 39px）。 */
@media (min-width: 900px) and (max-width: 1199px) {
  .topbar__link { font-size: var(--fs-caption); }
}

@media (min-width: 1200px) {
  .topbar__list { gap: var(--space-4); }
}

/* 768–900 之间若仍溢出（site-spec F5），切汉堡 + 品牌名常显 */
@media (max-width: 899px) {
  .topbar__nav { display: none; }
  .hamburger { display: inline-flex; }
}

/* ==========================================================================
   3. 汉堡按钮与移动抽屉
   ========================================================================== */
.hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: inherit;
  border-radius: var(--radius-1);
}

.hamburger__icon { display: block; }

.hamburger__icon--close { display: none; }

.hamburger[aria-expanded="true"] .hamburger__icon--open { display: none; }

.hamburger[aria-expanded="true"] .hamburger__icon--close { display: block; }

@media (min-width: 900px) {
  .hamburger { display: none; }
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--color-soil);
  color: var(--color-ink-inverse);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.drawer.is-open { opacity: 1; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--nav-h);
  padding-inline: var(--pad-x);
  border-bottom: 1px solid var(--color-line-inverse-weak);
}

.drawer__brand {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-inverse);
}

.drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-ink-inverse);
  border-radius: var(--radius-1);
}

.drawer__list {
  padding: var(--space-4) var(--pad-x) var(--space-9);
}

.drawer__item + .drawer__item { border-top: 1px solid var(--color-line-inverse-weak); }

.drawer__link {
  display: block;
  padding-block: var(--space-4);
  min-height: 48px;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--color-ink-inverse);
  border-left: 3px solid transparent;
  padding-left: var(--space-3);
  margin-left: calc(var(--space-3) * -1);
}

.drawer__link:hover { color: var(--color-accent-soft); }

.drawer__link.is-active {
  color: var(--color-accent-soft);
  border-left-color: var(--color-accent-soft);
  font-weight: var(--fw-semibold);
}

.drawer__foot {
  padding: var(--space-6) var(--pad-x) var(--space-8);
  border-top: 1px solid var(--color-line-inverse-weak);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-ink-inverse-3);
}

@media (min-width: 900px) {
  .drawer { display: none !important; }
}

/* ==========================================================================
   4. 面包屑
   ========================================================================== */
.breadcrumb-wrap {
  padding-top: var(--nav-h);
  background: var(--color-paper-deep);
}

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding-block: var(--space-4);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-normal);
  list-style: none;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  color: var(--color-ink-3);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-inline: var(--space-2);
  color: var(--color-line-strong);
}

.breadcrumb__item a {
  color: var(--color-ink-3);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-state);
}

.breadcrumb__item a:hover {
  color: var(--color-accent-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb__item[aria-current="page"] {
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

@media (min-width: 1200px) {
  .breadcrumb { padding-block: var(--space-5); }
}

/* ==========================================================================
   5. 栏目页页头
   ========================================================================== */
.page-header {
  position: relative;
  background: var(--color-paper-deep);
  padding-block: var(--space-7) var(--space-6);
  border-bottom: 1px solid var(--color-line-strong);
}

.page-header__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--color-accent-ink);
  margin-bottom: var(--space-2);
  max-width: none;
}

.page-header__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  max-width: 20em;
}

.page-header__rule {
  display: block;
  width: var(--space-6);
  height: 1px;
  background: var(--color-accent);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.page-header__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-2);
  max-width: 760px;
  /* 390 下多处末行只剩「么。」「接。」两字。pretty 只改断行位置不缩字号；
     不支持的浏览器忽略该特性，回落到现状，无回退风险。 */
  text-wrap: pretty;
}

.page-header__position {
  display: inline-block;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-line-strong);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
  max-width: 32em;
}

/* 无图栏目页的纯色深底页头变体（world / industry / tech / thought / life / standard / action） */
.page-header--deep {
  background: var(--color-soil);
  color: var(--color-ink-inverse);
  border-bottom-color: transparent;
}

.page-header--deep .page-header__title { color: var(--color-ink-inverse); }
.page-header--deep .page-header__eyebrow { color: var(--color-accent-soft); }
.page-header--deep .page-header__lead { color: var(--color-ink-inverse-2); }
.page-header--deep .page-header__position {
  color: var(--color-ink-inverse-3);
  border-top-color: var(--color-line-inverse-weak);
}

/* 有图栏目页的页头（china / practice）：图作为右侧背景带，文字压深色遮罩上 */
.page-header--image {
  background: var(--color-soil);
  color: var(--color-ink-inverse);
  border-bottom-color: transparent;
  overflow: hidden;
}

.page-header--image .page-header__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.42;
}

/* 照片上压文字的遮罩。此前只有 42% 的图压在深林绿上、没有任何遮罩，
   china / practice 的导语实测最差 1.37:1（76–100% 像素不达 4.5:1）。
   文字层 .page-header__body 已有 position:relative + z-index:var(--z-base)，
   会自动盖在 ::after 之上，不需要再调 z-index。
   用 ::after 而不是再加一个 DOM 节点：遮罩是纯装饰，不该出现在无障碍树里。 */
.page-header--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--scrim-header-image);
  pointer-events: none;
}

.page-header--image .page-header__body {
  position: relative;
  z-index: var(--z-base);
}

.page-header--image .page-header__title { color: var(--color-ink-inverse); }
/* 压在照片上的小字标签全站一个规则：一律 glow。
   理由不只是达标——accent-soft 在遮罩后实测 1440 3.31:1 / 900 3.68:1（12px 需 4.5），
   更是「屏 14 收尾屏眉标已经是 glow」，压在照片上的标签不该有两种做法。
   --deep 那 7 页是纯色土壤底，accent-soft 6.87:1 已达标，保持原值不动。 */
.page-header--image .page-header__eyebrow { color: var(--color-glow); }
.page-header--image .page-header__lead { color: var(--color-ink-inverse-2); }
/* 压在照片 + 遮罩上：ink-inverse-3(#9A9284) 在纯深林绿上就只有 4.67:1，
   照片透上来后数学上不可能达标，故有图页头单独提到 ink-inverse-2。
   --deep 那 7 页是纯色底、4.67:1 已达标，保持原值不动。 */
.page-header--image .page-header__position {
  color: var(--color-ink-inverse-2);
  border-top-color: var(--color-line-inverse-weak);
}

/* 页头内的分区快捷锚点条 */
.page-anchors {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding-bottom: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, var(--color-ink) var(--space-5),
    var(--color-ink) calc(100% - var(--space-5)), transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0, var(--color-ink) var(--space-5),
    var(--color-ink) calc(100% - var(--space-5)), transparent 100%);
}

.page-anchors::-webkit-scrollbar { display: none; }

.page-anchor {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-chip);
  font-size: var(--fs-sm);
  color: var(--color-ink-2);
  background: transparent;
  scroll-snap-align: start;
  transition: background-color var(--dur-fast) var(--ease-state),
              color var(--dur-fast) var(--ease-state),
              border-color var(--dur-fast) var(--ease-state);
}

.page-header--deep .page-anchor,
.page-header--image .page-anchor {
  border-color: var(--color-line-inverse-mid);
  color: var(--color-ink-inverse-2);
}

.page-anchor__num {
  font-family: var(--font-num);
  font-size: var(--fs-caption);
  color: var(--color-ink-3);
  margin-right: var(--space-1);
}

/* 拆成两条：--deep 是纯色底（4.67:1 达标）保留 ink-inverse-3；
   --image 压在照片上，锚点编号同样提到 ink-inverse-2。 */
.page-header--deep .page-anchor__num { color: var(--color-ink-inverse-3); }
.page-header--image .page-anchor__num { color: var(--color-ink-inverse-2); }

.page-anchor:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-ink);
  background: var(--color-accent-tint);
}

.page-anchor.is-active {
  background: var(--color-accent-tint);
  color: var(--color-accent-ink);
  border-color: var(--color-accent);
  box-shadow: inset 2px 0 0 var(--color-accent);
}

.page-header--deep .page-anchor.is-active,
.page-header--image .page-anchor.is-active {
  background: var(--color-ghost-bg-dark);
  color: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
  box-shadow: inset 2px 0 0 var(--color-accent-soft);
}

@media (min-width: 768px) {
  .page-anchors {
    flex-wrap: wrap;
    overflow-x: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .page-header { padding-block: var(--space-8) var(--space-7); }
}

@media (min-width: 1200px) {
  .page-header { padding-block: var(--space-8) var(--space-7); }
}

/* ==========================================================================
   6. 栏目页分区骨架
   ========================================================================== */
.section {
  padding-block: var(--pad-section);
  background: var(--color-paper);
  border-top: 1px solid var(--color-divider);
}

.section--alt { background: var(--color-paper-deep); }

.section:first-of-type { border-top: 0; }

.section__head { margin-bottom: var(--pad-subblock); }

.section__eyebrow {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--color-accent-ink);
  margin-bottom: var(--space-3);
  max-width: none;
}

.section__index {
  font-family: var(--font-num);
  font-size: var(--fs-num-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  color: var(--color-accent);
  line-height: 1;
}

.section__title { max-width: 24em; }

.section__title-rule {
  display: block;
  height: 1px;
  background: var(--color-line);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
}

.section__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-2);
  max-width: 760px;
  /* 同 .page-header__lead：390 下多处末行只剩两字，pretty 只调断行不缩字号 */
  text-wrap: pretty;
}

.section__body > * + * { margin-top: var(--pad-subblock); }

.subhead {
  font-size: var(--fs-h4);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  color: var(--color-ink);
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   7. 首页屏骨架
   ========================================================================== */
.screen {
  position: relative;
  padding-block: var(--pad-screen);
  background: var(--color-bg);
}

.screen--tint { background: var(--color-bg-alt); }

.screen + .screen { border-top: 1px solid var(--color-divider); }

.screen__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.screen__head { margin-bottom: var(--pad-block); }

.screen__eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  line-height: var(--lh-eyebrow);
  color: var(--color-accent-ink);
  margin-bottom: var(--space-3);
  max-width: none;
}

.screen__title { max-width: 22em; }

.screen__lead {
  margin-top: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--color-ink-2);
  max-width: 760px;
}

.screen__more {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--pad-block);
}

/* 屏内配图（除 hero / vision 外的双栏或满宽图） */
.screen__figure {
  margin-top: var(--pad-block);
}

.screen__figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-1);
}

/* 满宽分隔带（无图屏用纯色 + 细纹理，不放占位灰框） */
.screen__band {
  margin-top: var(--pad-block);
  height: 1px;
  background: var(--color-line);
}

.screen__texture {
  margin-top: var(--pad-block);
  height: 96px;
  border-radius: var(--radius-1);
  background-color: var(--color-paper-deep);
  background-image: repeating-linear-gradient(135deg,
    var(--color-texture-line) 0 1px,
    transparent 1px 8px);
}

/* ==========================================================================
   8. 相关内容（栏目页固定 3 条）
   ========================================================================== */
.related {
  background: var(--color-paper-deep);
  padding-block: var(--pad-section);
  border-top: 1px solid var(--color-line);
}

.related__title {
  position: relative;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  padding-left: var(--space-4);
  /* 标题下面现在跟着一句导语，标题与导语靠紧一点（原 32px） */
  margin-bottom: var(--space-4);
}

.related__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 4px;
  height: 1.1em;
  background: var(--color-accent);
}

/* 「相关内容」导语：只服务底部 .related 轻量块（7 页）。
   tech/industry 的 S5 是真分区，导语用 .section__lead，跟同页 S1–S4 一致
   —— 一致性跟组件类型走，不跟页面数量走。
   字号比标题小、比正文小一档，颜色比正文浅一档，保证不抢标题。
   用 ink-2 而不是 ink-3：ink-3 在雾色底上只有 4.63:1，贴着 AA 线，
   14px 的小字不该赌这 0.13。 */
.related__lead {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--color-ink-2);
  max-width: 46em;
}

/* 只有底部「相关内容」块需要补下方间距（标题的 margin-bottom 之后直接是卡片） */
.related .related__lead {
  margin-bottom: var(--space-5);
}

/* ==========================================================================
   9. 页脚
   ========================================================================== */
.footer {
  background: var(--color-soil);
  color: var(--color-ink-inverse);
  padding-top: var(--pad-footer-t);
  padding-bottom: var(--pad-footer-b);
}

/* 2026-10-30 页脚三栏改三行：<768 竖排（标题在上）；768+ 每行「标题在左、
   内容在右」（8em 标题列 + 1fr 内容列）；行间细分隔线全断点统一
   （--color-line-inverse-weak，与 footer__bottom 顶线同令牌）。 */
.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.footer__col + .footer__col {
  border-top: 1px solid var(--color-line-inverse-weak);
  padding-top: var(--space-6);
}

.footer__col-title {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-ink-inverse-3);
  margin-bottom: var(--space-5);
  max-width: none;
}

.footer__system {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-ink-inverse-2);
  letter-spacing: var(--ls-wide);
}

.footer__manifesto {
  position: relative;
  padding-left: var(--space-4);
  font-size: var(--fs-caption);
  line-height: 2;
  color: var(--color-ink-inverse-2);
  max-width: none;
}

.footer__manifesto::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--space-1);
  width: 1px;
  height: var(--space-6);
  background: var(--color-accent-soft);
}

.footer__manifesto p { max-width: none; }

.footer__manifesto p + p { margin-top: var(--space-4); }

.footer__meta {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-ink-inverse-3);
}

.footer__meta p { max-width: none; }

.footer__meta p + p { margin-top: var(--space-3); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-inverse-weak);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--color-ink-inverse-3);
}

.footer__copy { max-width: none; }

.footer__beian {
  align-self: flex-start;
  color: var(--color-ink-inverse-3);
  border-bottom: 1px dashed var(--color-line-inverse-mid);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-state);
}

.footer__beian:hover { color: var(--color-accent-soft); }

.footer__disclaimer {
  max-width: 60em;
}

@media (min-width: 768px) {
  /* 每行横排：标题左（8em）、内容右（1fr） */
  .footer__col {
    display: grid;
    grid-template-columns: 8em minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }

  .footer__col-title { margin-bottom: 0; }

  .footer__bottom {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .footer__beian { align-self: auto; }
}

/* ==========================================================================
   10. 返回顶部
   ========================================================================== */
.to-top {
  position: fixed;
  right: var(--space-4);
  bottom: 20px;
  z-index: var(--z-topbtn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-paper);
  border: 1px solid var(--color-line-control);
  border-radius: var(--radius-1);
  color: var(--color-ink-2);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-state),
              visibility var(--dur-base) var(--ease-state),
              background-color var(--dur-fast) var(--ease-state),
              border-color var(--dur-fast) var(--ease-state),
              color var(--dur-fast) var(--ease-state);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (hover: hover) {
  .to-top:hover {
    background: var(--color-accent-tint);
    border-color: var(--color-accent);
    color: var(--color-accent-ink);
  }
}

@media (min-width: 768px) {
  .to-top { right: var(--space-5); bottom: var(--space-5); }
}

@media (min-width: 1200px) {
  .to-top { right: var(--space-6); bottom: var(--space-6); }
}

/* ==========================================================================
   11. 屏间进度指示（首页专用容器，样式见 components.css）
   ========================================================================== */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
  z-index: var(--z-progress);
  transition: width var(--dur-fast) linear;
}

/* ==========================================================================
   12. 触控目标 ≥44px（仅 <768，版式零位移）
   只放热区、不动观感：padding 撑高 + 等量负 margin 抵消，行距与位置不变。
   基线值与终值（算式：内容行高 + 2×padding-block + 2×border）
     备案 a       13×1.60=20.80 + 1 + 1 = 22.80  →  padding-top 0→24 = 46.80
     面包屑 a     13×1.85=24.05            = 24.05  →  +10/边 = 44.05（行内元素不影响行高）
   （页脚导航链接栏「频道路径」已于 2026-10-29 整栏删除，其 a 的热区规则随之退役。）
   ========================================================================== */
@media (max-width: 767px) {
  /* 备案号的虚线下边框必须始终贴着文字，所以只向上加 padding：
     border-box 高度 +24、margin-top -24，外框高度与下边框位置都不变，
     多出来的 24px 全部落在文字上方（与上方版权行之间的空隙）。 */
  .footer__beian {
    padding-top: var(--space-5);
    margin-top: calc(var(--space-5) * -1);
  }

  .breadcrumb__item a {
    padding-block: calc(var(--space-1) + 6px);
  }
}

/* ≥768 同样补热区：900 / 1440 实测备案号 143×23（23 已踩 WCAG 2.5.8 的 24×24
   下限）。手法与 <768 完全一致——padding 撑高、等量负 margin 抵消，
   所以文字位置与版式高度都不动，只扩热区。 */
@media (min-width: 768px) {
  .footer__beian {
    padding-top: var(--space-5);
    margin-top: calc(var(--space-5) * -1);
  }
}