@font-face {
  font-family: Inter;
  src: url("/assets/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f7f7ee; color: #23231f; font: 16px/1.55 Inter, Arial, sans-serif; }
a { color: inherit; }
header { border-bottom: 1px solid #cecec1; padding: 15px clamp(18px, 4vw, 64px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
main { max-width: 34rem; margin: clamp(30px, 8vh, 100px) auto; padding: 0 24px 32px; }
.back { text-underline-offset: 4px; font-size: .87rem; }
h1 { font: 400 clamp(3.4rem, 9vw, 5.75rem)/.91 Baskerville, "Palatino Linotype", Georgia, serif; letter-spacing: -.055em; margin: 32px 0 24px; }
p { margin: 0 0 28px; max-width: 41ch; }
label, small { display: block; }
label { font-weight: 600; margin-bottom: 7px; }
input, button { font: inherit; }
input { width: 100%; padding: 11px 14px; border: 1px solid #787a6b; border-radius: 5px; color: inherit; background: #fffef8; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; padding: 12px 20px; border: 0; border-radius: 28px; background: #232820; color: #faf9ec; cursor: pointer; }
button:hover { background: #3d4639; }
:focus-visible { outline: 3px solid #546d43; outline-offset: 3px; }
small { color: #575a50; margin-top: 12px; }
.feedback { color: #873722; font-size: .94rem; margin: 9px 0 0; }
@media (max-width: 400px) { button { width: 100%; } }