/* The contact form (blocks.py r_contact_form). It sits in the call-to-action
   section and the site's .card; these are the only rules it adds. Kept out of
   site.css so adding a form to one page did not mean re-versioning every page. */
.contact {
  display: grid;
  grid-template-columns: 1fr minmax(0, 28rem);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact-alt { margin-top: 1.4rem; color: var(--ink-soft); }
.contact-alt a { color: var(--ink); }
.contact-card { gap: 1.1rem; box-shadow: 8px 8px 0 var(--ink); border-color: var(--ink); }
.contact-card label { display: block; font: 600 .74rem/1.3 var(--label); color: var(--ink-soft); }
.contact-card input,
.contact-card select,
.contact-card textarea {
  display: block; width: 100%; margin-top: .45rem; padding: .75rem .85rem;
  border: 1px solid var(--line-dark); border-radius: 0; background: #fff; color: var(--ink);
  font: 400 .98rem/1.45 var(--body);
}
.contact-card textarea { min-height: 8rem; resize: vertical; }
.contact-card input:focus,
.contact-card select:focus,
.contact-card textarea:focus { outline: 2px solid var(--forest); outline-offset: 1px; }
.contact-card .btn { align-self: flex-start; margin-top: .4rem; }
.contact-card .btn[disabled] { opacity: .6; cursor: default; }
.contact-card .hp { position: absolute; left: -9999px; }
.form-note { margin: 0; padding: .8rem 1rem; background: var(--paper); border-left: 5px solid var(--line-dark); color: var(--muted); font-size: .92rem; }
.form-note.ok { border-left-color: var(--forest); color: var(--forest-deep); }
.form-note.bad { border-left-color: var(--red); color: var(--red-deep); }
@media (max-width: 980px) {
  .contact { grid-template-columns: 1fr; }
}