/* ═══════════════════════════════════════════════════════════════════
   Reset & Base — 全局重置与基础排版
   ═══════════════════════════════════════════════════════════════════ */

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

/* Author display rules (flex/grid) must never re-show a hidden element. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
  font-size: clamp(14px, 0.24vw + 13.2px, 16px);
}

body {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  background: var(--bg-canvas, var(--bg-app, #f5f7fa));
  min-height: 100vh;
  min-height: 100dvh;
}

/* Subtle paper texture overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(25, 38, 43, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 38, 43, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 80%);
}

a {
  color: inherit;
  text-decoration: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, p, ol, ul {
  margin-top: 0;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
}

p, li, label, input, select, textarea {
  line-height: var(--leading-relaxed);
}

img, video {
  max-width: 100%;
  height: auto;
}

/* ── Focus Ring ── */
:focus-visible {
  outline: 3px solid rgba(168, 78, 47, 0.18);
  outline-offset: 2px;
}

/* ── Selection ── */
::selection {
  background: rgba(168, 78, 47, 0.18);
  color: var(--color-ink);
}