:root{
  --paper:#fbf7ec;
  --ink:#4a4438;
  --ink-soft:#6f6857;
  --ink-black:#241f19;
  --line:#c9bfa4;
  --sage:#a3b18a;
  --sage-pale:#e0e6d4;
  --red:#d4472a;
  --red-deep:#b4351c;
  --red-pale:#f7ddd4;
  --orange:#ef7f28;
  --mono:"Space Mono","Courier New",monospace;
  --body:"Quicksand","Trebuchet MS",sans-serif;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  background:var(--paper);
}

body{
  padding:4px;
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.62;
  overflow-x:hidden;
}

.dim{color:var(--ink-soft);}

.field{margin-bottom:12px;}

.field-label{
  display:block;
  margin-bottom:4px;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.field-label .req{color:var(--red);}

.input,.textarea{
  width:100%;
  display:block;
  font-family:var(--body);
  font-size:14px;
  color:var(--ink);
  background:#fffdf7;
  border:1.5px solid var(--ink-black);
  border-radius:9px;
  padding:9px 11px;
}

.textarea{min-height:130px;resize:vertical;line-height:1.55;}

.input:focus,.textarea:focus{
  outline:2px solid var(--orange);
  outline-offset:1px;
  background:#fff;
}

.picks{display:flex;flex-wrap:wrap;gap:7px;}

.pick{position:relative;}

.pick input{
  position:absolute;opacity:0;width:100%;height:100%;
  left:0;top:0;margin:0;cursor:pointer;
}

.pick span{
  display:block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.05em;
  padding:5px 12px;
  border:1.5px solid var(--ink-black);
  border-radius:20px;
  background:#fffdf7;
  color:var(--ink-soft);
}

.pick input:checked + span{background:var(--red);color:#fff4f0;}
.pick input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px;}

.btn-send{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.1em;
  text-transform:lowercase;
  padding:10px 26px 11px;
  color:#fff4f0;
  background:var(--red);
  border:1.5px solid var(--ink-black);
  border-radius:9px;
  box-shadow:3px 3px 0 rgba(36,31,25,.3);
  cursor:pointer;
}

.btn-send:hover{background:var(--red-deep);}
.btn-send:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(36,31,25,.3);}
.btn-send:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.btn-send[disabled]{background:#b9b1a0;cursor:not-allowed;box-shadow:none;}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.form-status{
  margin:10px 0 0;
  padding:9px 12px;
  border:1px dashed var(--line);
  border-radius:6px;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.6;
  color:var(--ink-soft);
  background:rgba(255,255,255,.6);
}

.form-status.is-warn{border-color:var(--red);color:var(--red-deep);background:var(--red-pale);}
.form-status.is-ok{border-color:var(--sage);color:#4f6135;background:var(--sage-pale);}

@media (max-width:640px){
  body{font-size:14.5px;}
}