/* reset + 全局排版。[hidden] 必须在这里用 !important 压过组件 display。 */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink-body);
  font-family: var(--font-cn);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* figure 不进 reset 的话，UA 的 margin: 1em 40px 会在窄屏顶出横向溢出 */
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: var(--lh-tight);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.site-footer h2 { color: var(--ink-invert); }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
::selection { background: var(--brand-surface); color: var(--ink); }

:target { scroll-margin-top: var(--sp-6); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-img);
  background: var(--brand);
  color: #fff;
  font-size: var(--fs-small);
}
.skip-link:focus { top: var(--sp-2); }

.text-link {
  color: var(--brand-ink);
  font-size: var(--fs-small);
  font-weight: 500;
}
.text-link:hover { text-decoration: underline; }

.fineprint {
  color: var(--ink-muted);
  font-size: var(--fs-fine);
  line-height: 1.7;
}
.fineprint--invert { color: var(--ink-invert-mute); }
.fineprint a { color: var(--brand-ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}