/* ─── tokens · Modern Minimal ───────────────────────────────────────
   Linear / Vercel 风格 — 安静精确，蓝色强调色 */
:root {
  --bg:      oklch(99% 0.002 240);
  --surface: oklch(100% 0 0);
  --fg:      oklch(18% 0.012 250);
  --muted:   oklch(54% 0.012 250);
  --border:  oklch(92% 0.005 250);
  --accent:  oklch(58% 0.18 255);

  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);

  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --fs-h1: clamp(44px, 6vw, 76px);
  --fs-h2: clamp(32px, 4vw, 48px);
  --fs-h3: 22px;
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-meta: 13px;

  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 20px;
  --gap-lg: 32px;
  --gap-xl: 56px;
  --gap-2xl: 96px;
  --container: 1120px;
  --gutter: 32px;

  --radius: 10px;
  --radius-lg: 16px;
}

/* ─── reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }

/* ─── layout ────────────────────────────────────────────────────── */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(48px, 8vw, var(--gap-2xl));
}
.section + .section { border-top: 1px solid var(--border); }

/* ─── nav ───────────────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 14px;
}
.topnav .logo {
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
}
.topnav nav { display: flex; gap: var(--gap-lg); }
.topnav nav a {
  font-size: 14px; color: var(--muted);
  transition: color 0.15s ease;
}
.topnav nav a:hover { color: var(--fg); }

/* ─── hamburger menu ────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  padding: 8px; margin: -8px;
  color: var(--fg);
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 768px) {
  .nav-toggle { display: block; }
  .topnav nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--gap-md) var(--gutter);
    gap: var(--gap-md);
  }
  .topnav nav.open { display: flex; }
  .topnav nav a { font-size: 16px; padding: 8px 0; }
}

/* ─── footer ────────────────────────────────────────────────────── */
.pagefoot {
  padding-block: var(--gap-xl);
  color: var(--muted);
  font-size: 13px;
  border-top: 1px solid var(--border);
}
.pagefoot-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--gap-md);
}