:root {
  color: #19241f;
  background: #f5f5ed;
  font: 100%/1.5 system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 34rem; margin-inline: auto; padding: 2.5rem 1.25rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header label { display: grid; gap: .15rem; font-size: .875rem; }
.brand { font: 700 1.35rem Georgia, serif; }
section { margin-block-start: 1.5rem; padding: clamp(1rem, 4vw, 2.25rem); background: #fff; border: 1px solid #cbd4ca; border-radius: .75rem; }
h1 { margin: 0; font: 400 clamp(2rem, 7vw, 3rem) Georgia, serif; }
p { margin-block: .75rem 1.25rem; }
form { display: grid; gap: .375rem; }
form label { font-weight: 600; }
input, select, button { min-height: 2.75rem; border: 1px solid #677a6f; border-radius: .375rem; font: inherit; }
input, select { padding-inline: .65rem; color: inherit; background: #fff; }
input { width: 100%; margin-block-end: .65rem; }
button { background: #195746; color: #fff; border-color: #195746; font-weight: 650; cursor: pointer; }
button:disabled { opacity: .65; cursor: wait; }
:focus-visible { outline: 3px solid #225b94; outline-offset: 2px; }
#feedback { min-height: 1.5rem; margin: .5rem 0 0; }
#feedback[data-error] { color: #8a332a; }