:root {
  color-scheme: dark;
  --bg: #0f0f0e;
  --surface: #171716;
  --border: #34322d;
  --text: #f1f0eb;
  --muted: #aaa59a;
  --accent: #f2cb62;
  font-family: Aptos, "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.65; }
a { color: inherit; }
.topbar { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 30px; border-bottom: 1px solid var(--border); }
.topbar img { width: 154px; height: auto; display: block; }
.topbar nav { display: flex; gap: 16px; align-items: center; }
.topbar a { color: var(--muted); text-decoration: none; font-weight: 750; }
.topbar a:hover { color: var(--text); }
main { width: min(820px, 100%); margin: 0 auto; padding: 58px 30px 80px; }
h1 { margin: 0 0 8px; font-size: clamp(38px, 7vw, 68px); line-height: 1; }
h2 { margin: 38px 0 8px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 22px; }
p, li { color: var(--muted); }
.effective { margin: 0 0 34px; color: var(--accent); font-weight: 800; }
ul { padding-left: 22px; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 18px 30px; border-top: 1px solid var(--border); color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 680px) {
  .topbar, main, footer { padding-left: 16px; padding-right: 16px; }
  .topbar nav a:not(:last-child) { display: none; }
  main { padding-top: 38px; }
  footer { flex-direction: column; }
}