/* =========================================================
   2/5 · 基础层 base.css
   ---------------------------------------------------------
   只做两件事：
     1. 抹平浏览器默认样式（reset 的轻量版）
     2. 定义全站共用的「骨架」：版心、入场动画

   ⚠️ 这里**不放任何组件样式**（按钮、卡片、表单都在 components.css），
      也不放任何页面专属样式（在 pages/*.css）。
      判断标准：删掉这个文件，任何页面都不该只是「丑一点」，
      而应该直接排版塌掉 —— 那才是基础层该有的东西。
   ========================================================= */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: #fff;
    color: var(--ink);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.28; letter-spacing: -.01em; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* 版心：所有区块都用它定宽 */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* 滚动进场（由 layouts/main.htm 的脚本加 .in） */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}