/* 基础排版 + 导航 + 全站复用的小件（页面到 L 层为止，没有页脚） */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 62px;   /* 锚点跳转时别把屏头塞到吸顶导航底下 */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.28; }
p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
code { font-family: var(--mono); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* ── mono 小标签：10-11px / 大写 / 字距 0.15em 以上（M-4） ── */
.eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.6;
}
.eyebrow i { font-style: normal; color: var(--line-2); margin: 0 0.5em; }
/* eyebrow 行里的中文片段：Hero 的定位句、C 屏图注的「点开任意一层」都走这一条 */
.eyebrow span {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.02em; text-transform: none; color: var(--ink-2);
}

/* ── 导航 ─────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(237, 240, 241, 0.88);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 62px;
}
.nav__brand { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; padding: 8px 0; }
.nav__brand b { font-family: var(--serif); font-size: 19px; font-weight: 700; letter-spacing: 0.02em; transition: color var(--t-swap) var(--ease); }
.nav__brand i {
  font-family: var(--mono); font-style: normal; font-size: 9.5px;
  letter-spacing: 0.2em; color: var(--ink-3); transition: color var(--t-swap) var(--ease);
}
.nav__brand:hover i { color: var(--ink-2); }
.nav__list { display: flex; gap: 4px; margin-left: auto; }
/* 导航项 44px 高（--tap）；当前项和 C 屏 tab、L 屏列顶线是同一个语言：底沿一条 2px 强调线 */
.nav__item {
  position: relative;
  display: flex; align-items: baseline; gap: 8px;
  min-height: var(--tap);
  padding: 11px 14px;
  border-radius: 2px;
  transition: background var(--t-swap) var(--ease), color var(--t-swap) var(--ease), transform var(--t-press) var(--ease);
}
.nav__item b { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; white-space: nowrap; }
.nav__item i { font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.nav__item::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-swap) var(--ease-out);
}
.nav__item:hover { background: var(--panel); }
.nav__item:active { transform: translateY(1px); background: var(--sunk); }
.nav__item.is-current b { color: var(--accent); }
.nav__item.is-current i { color: var(--ink-2); }
.nav__item.is-current::after { transform: scaleX(1); }
.nav__owner {
  flex: 0 0 auto; font-size: 12px; color: var(--ink-3);
  padding-left: 22px; border-left: 1px solid var(--line);
}
.nav__prog {
  position: absolute; left: 0; bottom: -1px; height: 2px;
  width: calc(var(--pp, 0) * 100%);
  background: var(--accent);
  opacity: 0.75;
}

/* ── 屏头 ─────────────────────────────────────────────── */
.sec { padding: 80px 0 72px; position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }
/* Hero 和 C 屏之间只留一条线 + 56px：上一版这里是 22vh 空段 + 88px，老板点名「空隙太大」 */
.sec--c { padding-top: 56px; border-top: 1px solid var(--line); }

/* 面板切换的入场：C 屏面板 / tab 内容 / L 屏说明块共用这一个动作 */
@keyframes swapin { from { opacity: 0; transform: translateY(7px); } }

.shead { max-width: 860px; margin-bottom: 44px; }
.shead__t {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 16px 0 18px;
}
/* 导语第一句吃 lede 档（tokens.css 字号阶梯），补上 46px 到 15.5px 之间的空档 */
.shead__d { color: var(--ink-2); font-size: var(--fs-lede); line-height: 1.72; max-width: 40ch; }
.shead__d--sub { margin-top: 10px; color: var(--ink-3); font-size: var(--fs-body); max-width: 52ch; }

/* ── 复用小件 ─────────────────────────────────────────── */
.meta { display: flex; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.meta__k {
  flex: 0 0 132px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.meta__v { display: flex; flex-wrap: wrap; gap: 6px; }
.meta__v b {
  font-weight: 400; font-size: 12.5px; color: var(--ink-2);
  border: 1px solid var(--line); padding: 2px 9px; border-radius: 2px;
  background: var(--panel);
}

/* ── 示意数据声明：没有页脚，这一行挂在 L 屏最后 ────────── */
.mocknote {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-3); display: flex; gap: 10px; align-items: baseline;
}
.mocknote::before {
  content: "MOCK"; color: var(--accent); letter-spacing: 0.16em;
  border: 1px solid var(--accent); padding: 1px 6px; border-radius: 2px; flex: 0 0 auto;
}


@media (max-width: 900px) {
  .sec { padding: 84px 0 64px; }
  .shead { margin-bottom: 40px; }
  .nav__owner { display: none; }
  .nav__list { gap: 0; }
  .nav__item { padding: 11px 8px; }
  .nav__item::after { left: 8px; right: 8px; }
  .nav__item i { display: none; }            /* 手机上只留编号，副标题挤不下 */
  .nav__item b { font-size: 11px; letter-spacing: 0.04em; }
  .nav__brand b { font-size: 16px; }
  .nav__brand i { display: none; }
  .nav__inner { gap: 10px; height: 54px; }
  .meta { flex-direction: column; gap: 8px; }
  .meta__k { flex: none; }
  html { scroll-padding-top: 68px; }
}

/* ── 可点性 ────────────────────────────────────────────
 * 三条规矩，四屏统一：
 *   1. 任何能点的东西热区不小于 --tap，文字本身小于这个值就用 .tapx 撑开
 *   2. 键盘落焦一律是同一个焦点环，别各屏各画
 *   3. 按下有即时反馈，不能等内容切换才知道点中了
 */
.tapx { position: relative; }
/* 用伪元素撑热区，不撑视觉尺寸——排版不受影响，手指和鼠标却点得到 */
.tapx::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: max(100%, var(--tap));
  transform: translateY(-50%);
}

:where(a, button, [role="tab"], [tabindex="0"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Tab 落焦时别藏在吸顶导航底下 */
:where(a, button, [role="tab"]) { scroll-margin-top: 80px; }
/* 鼠标点击不该留下焦点环，只有键盘 Tab 才留 */
:where(a, button, [role="tab"]):focus:not(:focus-visible) { outline: none; }

/* 按下的即时反馈。位移只有 1px——门面页不做弹跳，只要「跟手」 */
:where(a, button, [role="tab"]):active { transition-duration: var(--t-press); }

/* 触屏上没有 hover，所有靠 hover 才出现的信息必须另有出路 */
@media (hover: none) {
  .asks a:hover { transform: none; }
}