/* 站点 9 · sand：暖砂纸 + 细网格 + 目录表格，克制的棕色调。 */

:root {
  --bg: #efe9dd;
  --surface: #f8f4ea;
  --surface-2: #e6dfd0;
  --text: #2a251d;
  --muted: #6f6555;
  --line: #d5cab5;
  --accent: #8a5a35;
  --accent-2: #4c6b57;
  --accent-contrast: #f8f4ea;
  --radius: 6px;
  --radius-sm: 4px;
  --head-font: var(--font-sans);
}

body {
  background:
    linear-gradient(90deg, rgba(138, 90, 53, 0.05) 0 1px, transparent 1px) 0 0 / 96px 100%,
    var(--bg);
}
h1 { letter-spacing: -0.02em; }
.site-head { background: rgba(239, 233, 221, 0.94); border-bottom: 1px solid var(--line); }
.brand-text em { border-color: var(--line); color: var(--accent); }
.site-nav a { color: var(--muted); }
.site-nav a.is-active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.head-cta { background: var(--accent); border-radius: 4px; }
.sub-nav { background: var(--surface-2); }

.eyebrow { color: var(--accent); letter-spacing: 0.18em; font-family: var(--font-mono); font-size: 0.7rem; }
.hero--index h1 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 24ch; }
.hero--index .lead { color: #5d5445; }
.index-chip { border-color: var(--line); background: var(--surface); color: var(--muted); font-family: var(--font-mono); font-size: 0.74rem; }
.index-chip:hover { border-color: var(--accent); color: var(--accent); }
.index-preview { background: var(--surface); border: 1px solid var(--line); }
.index-preview th, .index-preview td { border-bottom: 1px solid var(--line); }
.index-preview thead th { background: var(--surface-2); color: var(--muted); }
.index-preview tbody tr:hover { background: #f3ecdf; }

.btn--primary { background: var(--accent); }
.btn--ghost { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--ghost:hover { background: var(--accent); color: var(--accent-contrast); }
.hero-stats { border-top: 1px solid var(--accent); }
.hero-stats strong { color: var(--accent); font-family: var(--font-mono); }

.section-head { border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; }
.section-head h2 { font-weight: 600; }
.card { background: var(--surface); border-color: var(--line); }
.card:hover { border-color: #b79b76; }
.card-title { font-weight: 600; }
.card-state { border-radius: 3px; background: var(--surface); border-color: var(--line); color: var(--accent); }
.chip { border-radius: 3px; border-color: var(--line); color: var(--muted); font-size: 0.7rem; }
.topic-grid a, .guide-grid a, .doc-cards a, details, .panel, .steps li, .detail-aside { background: var(--surface); border-color: var(--line); }
.topic-grid strong { font-weight: 600; }
.row-index, .rank-no, .step-no, .article-meta { color: var(--accent); font-family: var(--font-mono); }
.article-card { border-top: 2px solid var(--accent); }
.site-foot { background: var(--surface-2); }
.cover--fallback { background: linear-gradient(135deg, #e6dfd0, #d9cfbc); }