/* ============================================================
   402 工作室网站 · 基础样式（reset / 排版 / 工具类）
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--c-red); color: #fff; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* ---- 标题体系：宋体 ---- */
h1, h2, h3, .serif {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: .01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* ---- 等宽标注体系 ---- */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.mono-label--red { color: var(--c-red); }
.u-dark .mono-label, .section--dark .mono-label { color: var(--c-on-dark-2); }
.u-dark .mono-label--red, .section--dark .mono-label--red { color: var(--c-red); }

/* ---- 布局容器 ---- */
.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* ---- 深/浅色区块 ---- */
.section--dark {
  background: var(--c-bg-dark);
  color: var(--c-on-dark);
}
.section--gray { background: var(--c-paper-gray); }

/* ---- 区块头（编号 + 标题 + 说明 的通用图式） ---- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.sec-head__no { display: block; margin-bottom: var(--sp-1); }
.sec-head__title { font-size: var(--fs-h2); }
.sec-head__desc { color: var(--c-ink-2); max-width: 420px; font-size: var(--fs-small); line-height: 1.7; text-align: right; }
.section--dark .sec-head__desc { color: var(--c-on-dark-2); }

/* ---- 图注 ---- */
.figcap {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  letter-spacing: .04em;
  color: var(--c-ink-2);
}
.section--dark .figcap { color: var(--c-on-dark-2); }

/* ---- 入场动画基元（JS 加 .is-in 触发） ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* ---- 滚动条 ---- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-paper); }
::-webkit-scrollbar-thumb { background: var(--c-line); border: 2px solid var(--c-paper); }
::-webkit-scrollbar-thumb:hover { background: var(--c-ink-2); }

/* ---- 无障碍：动效降级 ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---- 小屏 ---- */
@media (max-width: 768px) {
  :root { --margin: 20px; --nav-h: 60px; }
  body { line-height: 1.7; }
}