:root {
  --paper: #f6f5f0;
  --ink: #111111;
  --stone: #68645d;
  --bronze: #9a7b4f;
  --bronze-deep: #6f5532;
  --rule: #d8d3c8;
  --error: #7b3128;
  --focus: #715328;
  --font-sans: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --step--1: clamp(.76rem, .73rem + .12vw, .84rem);
  --step-0: clamp(1rem, .95rem + .22vw, 1.12rem);
  --step-1: clamp(1.35rem, 1.17rem + .7vw, 1.8rem);
  --step-2: clamp(2rem, 1.62rem + 1.45vw, 3rem);
  --step-3: clamp(3.05rem, 2.05rem + 3.2vw, 5.8rem);
  --content-max: 112rem;
  --gutter: clamp(1rem, 4vw, 4rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 5rem;
  --space-7: 8rem;
}

* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); scroll-behavior: smooth; }
body { margin: 0; min-width: 20rem; background: var(--paper); }
button, input, textarea { font: inherit; }
a { color: inherit; text-underline-offset: .3em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
::selection { background: #dac8ab; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }