:root {
  --cream: #faf3ea;
  --paper: #fffaf3;
  --terra: #c35f3c;
  --terra-deep: #a34a2c;
  --olive: #5b6324;
  --gold: #d9a03f;
  --ink: #3b3326;
  --dim: #7a6f5e;
  --line: #e6d8c3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1f1b15;
    --paper: #2a241c;
    --ink: #f1e8d8;
    --dim: #c2b49c;
    --line: #4a3f30;
    --olive: #b8c06a;
    --terra: #e0805d;
    --terra-deep: #c8603e;
  }
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--cream);
  color: var(--ink);
  font: 400 1.0625rem/1.6 Lato, system-ui, sans-serif;
}
.card {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px 24px 20px;
  text-align: center;
}
.logo { width: 160px; height: auto; border-radius: 50%; margin: 0 auto 4px; display: block; }
h1 {
  font: 700 2.1rem/1.1 "Cormorant Garamond", Georgia, serif;
  color: var(--olive);
  margin: 8px 0 12px;
}
p { margin: 0 0 1em; }
form { text-align: left; margin: 20px 0 8px; }
label { display: block; font-weight: 700; font-size: .9rem; margin: 12px 0 4px; }
.opt { font-weight: 400; color: var(--dim); }
input {
  width: 100%;
  font: inherit;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
}
input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
button {
  width: 100%;
  margin-top: 18px;
  font: 700 1rem Lato, system-ui, sans-serif;
  padding: 13px;
  border: 0;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
  cursor: pointer;
}
button:hover { background: var(--terra-deep); }
.small { font-size: .875rem; color: var(--dim); }
a { color: var(--terra); }