/* ============================================================
   基础层 · 三个页面共用
   只放"每一页都需要"的东西。页面专属样式写在各自 <style> 里。
   依赖 tokens.css，必须在它之后引入。
   ============================================================ */

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--font-sans);
  background:var(--bg);color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button{font:inherit}

/* 键盘可达性：所有可聚焦元素统一的焦点环 */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- 布局 ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
section{padding:104px 0}

/* ---------- 排版组件 ---------- */
.kicker{
  color:var(--gold);font-weight:700;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;
}
.kicker::before{content:"// "}

h2{font-size:clamp(28px,4.4vw,48px);line-height:1.12;letter-spacing:-.025em;font-weight:800}
h3{font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em}

.lead{color:var(--muted);font-size:17px;line-height:1.75;max-width:62ch;margin-top:18px}

/* 深色区块里的排版反色 */
.on-dark{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.on-dark::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--dots-dark);background-size:20px 20px;opacity:.5;
}
.on-dark > .wrap{position:relative;z-index:1}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lead{color:rgba(255,255,255,.62)}