:root {
  --paper: #f4ede0;
  --ink: #2b211a;
  --muted: #6f6152;
  --walnut: #4a2f1f;
  --rule: #d9cdb8;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1d1612; --ink: #eadfcd; --muted: #a8977f; --walnut: #c9a46c; --rule: #3a2d24; }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 18px/1.6 "Iowan Old Style", "Palatino", Georgia, serif;
}
main { max-width: 640px; margin: 0 auto; padding: 56px 20px 80px; }
.eyebrow { margin: 0; letter-spacing: 0.18em; text-transform: uppercase; font-size: 13px; color: var(--walnut); }
h1 { font-weight: normal; font-size: 40px; margin: 6px 0 12px; }
h2 { font-weight: normal; font-variant: small-caps; letter-spacing: 0.06em; font-size: 22px;
     margin: 40px 0 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.lede { font-size: 20px; }
.meta { color: var(--muted); font-size: 15px; }
a { color: var(--walnut); }
code { font-size: 15px; }
dt { font-style: italic; margin-top: 18px; }
dd { margin: 2px 0 0; }

footer { max-width: 640px; margin: 0 auto; padding: 0 20px 48px; color: var(--muted); font-size: 15px; }
form { display: grid; gap: 6px; margin-top: 12px; }
label { font-style: italic; margin-top: 10px; }
input, textarea { font: inherit; font-size: 17px; color: var(--ink); background: transparent; border: 1px solid var(--rule);
  border-radius: 6px; padding: 10px 12px; width: 100%; }
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--walnut); outline-offset: 1px; }
button { justify-self: start; margin-top: 16px; font: inherit; color: var(--paper); background: var(--walnut); border: 0;
  border-radius: 6px; padding: 10px 22px; cursor: pointer; }
.hidden { position: absolute; left: -9999px; }