/* The minimal site shell. The visual design is #17's. */
:root {
  --paper: #f4efe6;
  --ink: #1f2a24;
  --muted: #4a5a50;
  --accent: #9a3b1f;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #161b18; --ink: #ece6da; --muted: #a9b3ab; --accent: #e08a62; }
}
* { box-sizing: border-box; }
body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 0 16px;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.6 system-ui, sans-serif;
}
a { color: var(--accent); }
header.site { padding: 1rem 0; }
header.site .name { color: var(--ink); font-weight: 700; text-decoration: none; }
footer.site { margin-top: 4rem; padding: 1rem 0; color: var(--muted); font-size: 0.875rem; }
.tagline { color: var(--muted); margin: 0.25rem 0; }
button, a.draw {
  display: inline-block;
  margin: 1.5rem 0.5rem 0 0;
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
button.draw { background: var(--ink); color: var(--paper); }
.where-when { color: var(--muted); margin-bottom: 0; }
.error { color: var(--accent); }
.life .found, .life .missing { display: none; }
.life[data-state="found"] .found, .life[data-state="missing"] .missing { display: block; }