/* ===========================================================================
 * 镜相 · base：reset + 排版 + 自托管字体 + 移动端基线
 * 手册 v3.0 §4.4 的四条技术基线全部落在这里，页面不用再各写一遍。
 * ========================================================================= */

/* ---- 自托管字体 ---------------------------------------------------------
 * @font-face 全部在 **static/css/fonts.css**（生成物，别手改）。
 * 那份表由 scripts/build-fonts.mjs 产出：字体从 npm 上的 Fontsource 取
 * （Google Fonts 同款分包产物，SIL OFL-1.1），按 unicode-range 切成 ~100 个
 * 分包落在 /fonts/，浏览器只下载页面上真正出现的字所在的那几个包。
 *
 * 为什么不引 CDN：README 红线 2 / 国内可达性第 2 条 —— 引 CDN 就是把首屏
 * 押在第三方域名上，无论那个域名在不在国内。
 *
 * 为什么不打成一个大子集：思源黑体全量 woff2 4.3 MB，一次性下发等于让国内
 * 移动端首屏白等十几秒。分包之后单页实际下载量见 docs/FONTS.md。
 *
 * 换字体：改 scripts/build-fonts.mjs 的 FAMILIES 表，重跑，产物进 git。
 * ---------------------------------------------------------------------- */

/* ---- reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html {
  /* iOS 横竖屏切换时不要自作主张放大正文 */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  min-height: 100dvh;                  /* 不用 100vh：iOS 地址栏会吃掉一截 */
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at  8%  8%, rgba(197,163,88,.06) 0%, transparent 45%),
    radial-gradient(circle at 92% 92%, rgba(233,169,169,.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(122,160,129,.03) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

img, svg, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

/* iOS Safari：字号 < 16px 的输入框获得焦点时整页会被放大。
 * 这是 4.4 基线里最容易漏、也最毁体验的一条。 */
input, textarea, select { font-size: 16px; }

/* 触控目标下限（Apple HIG）。桌面端也留着，鼠标点大靶子不吃亏。 */
button, .btn, a.btn, .tap { min-height: var(--tap-min); }

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
  border-radius: var(--radius);
}

/* ---- 排版 ------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-headline); font-weight: 700; line-height: 1.3; }
.font-display { font-family: var(--font-display); font-weight: 500; letter-spacing: .01em; }
.font-mono    { font-family: var(--font-mono); }

.h-hero   { font-size: clamp(1.75rem, 6vw, 2.75rem); line-height: 1.2; }
.h-page   { font-size: clamp(1.375rem, 4.5vw, 1.875rem); }
.h-card   { font-size: 1.0625rem; }
.t-lead   { font-size: 1.0625rem; color: var(--ink-soft); }
.t-body   { font-size: .9375rem; }
.t-sm     { font-size: .875rem; }
.t-xs     { font-size: .75rem; }
.t-mute   { color: var(--ink-mute); }
.t-faint  { color: var(--ink-faint); }
.t-center { text-align: center; }

/* 唯一保留渐变的强调样式——金色语境（付费 / 授权码）的视觉锚点 */
.gold-text {
  background: linear-gradient(135deg, var(--mystic) 0%, var(--mystic-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.section-label {
  font-family: var(--font-headline);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- 布局骨架 --------------------------------------------------------- */
.shell      { width: 100%; max-width: var(--shell-max);  margin-inline: auto; padding-inline: var(--space-5); }
.shell-wide { width: 100%; max-width: var(--shell-wide); margin-inline: auto; padding-inline: var(--space-5); }

.stack > * + *      { margin-top: var(--space-4); }
.stack-sm > * + *   { margin-top: var(--space-2); }
.stack-lg > * + *   { margin-top: var(--space-8); }

.row       { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row-wrap  { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.grow      { flex: 1 1 auto; min-width: 0; }

.page-top    { padding-top: var(--space-8); }
.page-bottom { padding-bottom: calc(var(--space-16) + var(--safe-b)); }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}