:root {
  color-scheme: dark;
  --ink: #171a17;
  --ink-deep: #0e100f;
  --ink-raised: #202520;
  --ink-soft: #2a302a;
  --ivory: #f3efe4;
  --ivory-dim: #c7c5b9;
  --fog: #92998e;
  --acid: #d8ed74;
  --acid-deep: #a9c13d;
  --rust: #d66848;
  --rust-soft: #7a3d2c;
  --line: rgba(243, 239, 228, 0.17);
  --line-strong: rgba(243, 239, 228, 0.34);
  --shadow: 14px 18px 0 rgba(0, 0, 0, 0.34);
  --font-display: "Helvetica Neue", "Avenir Next", system-ui, sans-serif;
  --font-body: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --header-height: 128px;
  --page-gutter: clamp(1.2rem, 4vw, 4.5rem);
  --content-width: 1500px;
  --radius-small: 3px;
  --focus: 0 0 0 3px var(--ink), 0 0 0 6px var(--acid);
}

@media (max-width: 1100px) {
  :root { --header-height: 164px; }
}

@media (max-width: 740px), (max-height: 650px) {
  :root { --header-height: 0px; }
}