:root {
  --bg: #f5f0e8;
  --bg2: #eadfd2;
  --ink: #211b17;
  --ink-mid: #6f645b;
  --ink-dim: #938378;
  --accent: #9a6940;
  --accent-dark: #2d1912;
  --rule: #d8c9bb;
}

body {
  background: radial-gradient(circle at 85% 4%, #e8d5be 0, transparent 28rem), var(--bg);
}

p, li, h1, h2, h3 { word-break: keep-all; }

.site-header {
  width: min(1180px, calc(100% - 40px));
  max-width: none;
  min-height: 72px;
  margin: 22px auto 54px;
  padding: 13px 20px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: rgba(255, 250, 243, 0.78);
  box-shadow: 0 10px 36px rgba(65, 38, 25, 0.06);
  backdrop-filter: blur(18px) saturate(0.9);
}

.site-logo img {
  width: auto;
  height: 38px;
  filter: sepia(0.72) saturate(0.72) hue-rotate(342deg) brightness(0.63);
}

.site-nav { flex-wrap: nowrap; gap: 4px; color: #4f433b; font-size: 14px; font-weight: 650; line-height: 1.6; }
.site-nav a { padding: 8px 11px; white-space: nowrap; }

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  border-color: #cdb9a7;
  background: var(--bg2);
  color: var(--accent-dark);
}

header:not(.site-header) {
  max-width: 960px;
  margin-top: 0;
  border-color: var(--rule);
  background: rgba(255, 250, 243, 0.88);
  box-shadow: 0 20px 54px rgba(65, 38, 25, 0.09);
}

header:not(.site-header)::before {
  background: radial-gradient(ellipse 70% 80% at 50% 120%, rgba(180, 137, 89, 0.16), transparent 70%);
}

.badge {
  border-color: var(--rule);
  background: var(--bg2);
  color: var(--accent-dark);
}

.badge-dot { background: var(--accent); }

header h1,
.section h2,
footer .footer-brand { color: var(--accent-dark); }

.return-button,
.toc,
.highlight {
  border-color: var(--rule);
  background: rgba(255, 250, 243, 0.9);
  box-shadow: 0 14px 34px rgba(65, 38, 25, 0.06);
}

.return-button { color: var(--accent-dark); }
.return-button:hover { background: var(--bg2); }
.toc { border-left-color: var(--accent); }
.toc a:hover, .section-num { color: var(--accent); }
.data-table th { background: var(--bg2); color: var(--accent-dark); }
.data-table td, .data-table th, .divider, footer { border-color: var(--rule); }

@media (max-width: 900px) {
  .site-header {
    width: calc(100% - 28px);
    margin: 14px auto 38px;
    padding: 13px 16px;
    align-items: stretch;
    gap: 10px;
    height: 105px;
    min-height: 105px;
  }

  .site-nav {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar { display: none; }
  .site-logo img { height: 34px; }
  .site-nav { gap: 3px; font-size: 13px; }
  .site-nav a { padding: 5px 7px; }
  header:not(.site-header) { margin-right: 16px; margin-left: 16px; }
}