/* ============================================================
   基础重置 + 排版尺度（§7.3）+ 8px 网格
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 calc(var(--gap) * 2) 0;
  font-weight: 600;
}

h1 { font-size: 44px; font-weight: 600; }
h2 { font-size: 30px; font-weight: 600; }
h3 { font-size: 22px; font-weight: 400; }

p { margin: 0 0 calc(var(--gap) * 2) 0; }

a {
  color: var(--clay-text);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 calc(var(--gap) * 2) 0; padding-left: 1.4em; }

code, pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
pre {
  background: var(--paper-sunk);
  padding: calc(var(--gap) * 2);
  border-radius: var(--radius);
  overflow-x: auto;
}

blockquote {
  margin: 0 0 calc(var(--gap) * 2) 0;
  padding-left: calc(var(--gap) * 2);
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
  font-style: italic;
}

/* 8px 网格容器 */
.container {
  width: 100%;
  
  
  margin: 0 auto;
  padding: 0 calc(var(--gap) * 3);
}

.measure { max-width: var(--measure); }

/* 留白节奏（§7.4） */
.whitespace-poem  { --whitespace: 60%; }
.whitespace-home   { --whitespace: 45%; }
.whitespace-write  { --whitespace: 40%; }
.whitespace-making { --whitespace: 40%; }
.whitespace-timeline { --whitespace: 35%; }
.whitespace-archive { --whitespace: 30%; }

/* 焦点可见（可访问性 P0） */
:focus-visible {
  outline: 2px solid var(--clay-text);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--gap);
  top: var(--gap);
  background: var(--paper);
  padding: var(--gap) calc(var(--gap) * 2);
  z-index: 100;
}

/* 移动端排版缩放 */
@media (max-width: 640px) {
  body { font-size: 16px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  h3 { font-size: 19px; }
}