/* contact.css — the contact form. */

.contact-sheet { max-width: 44rem; }

.contact-intro {
  font-family: BookSanity, serif;
  font-size: .95rem;
  line-height: 1.55;
  color: #3b3226;
  margin: 0 0 1.4rem;
}

.contact-form { display: flex; flex-direction: column; gap: 1rem; }

.contact-field { display: flex; flex-direction: column; gap: .25rem; }

.contact-field > span {
  font-family: WalterTurncoat;
  font-size: 1.05em;
  color: #58180D;
}

.contact-field input,
.contact-field textarea {
  font-family: BookSanity, serif;
  font-size: .95rem;
  color: #3b3226;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(88, 24, 13, .35);
  border-radius: 3px;
  padding: .45rem .55rem;
  width: 100%;
  box-sizing: border-box;
}

.contact-field textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: #58180D;
  box-shadow: 0 0 0 2px rgba(201, 173, 106, .45);
}

.contact-field small {
  font-family: BookSanity, serif;
  font-size: .8rem;
  font-style: italic;
  color: #5a4632;
}

/* The honeypot. Off-screen rather than display:none — some bots skip fields
   that are outright hidden, but happily fill one that merely sits elsewhere. */
.contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-actions { display: flex; align-items: center; gap: .9rem; }

.contact-send {
  font-family: WalterTurncoat;
  font-size: 1.05em;
  color: #fdf5e6;
  background: #58180D;
  border: none;
  border-radius: 3px;
  padding: .5rem 1.6rem;
  cursor: pointer;
}

.contact-send:hover:not(:disabled) { background: #7a2211; }
.contact-send:disabled { opacity: .5; cursor: default; }

.contact-status {
  font-family: BookSanity, serif;
  font-size: .88rem;
  color: #5a4632;
}

.contact-status.contact-ok { color: #007618; }
.contact-status.contact-error { color: #a52a2a; }

.contact-legal {
  font-family: BookSanity, serif;
  font-size: .78rem;
  color: #5a4632;
  margin: .2rem 0 0;
}

.contact-legal a { color: #007618; }

@media (max-width: 600px) {
  .contact-actions { flex-direction: column; align-items: flex-start; }
}