/*
 * Contact form (live/contact.html only) — field/label/input/textarea
 * styling plus the honeypot field's visual hiding. Not folded into
 * components.css since no other page uses a form yet (same reasoning
 * as home.css/blog.css being page-scoped).
 */

.contact-form .field {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px;
}
.contact-form label {
  font-family: var(--mono); font-size: 12px;
  color: var(--muted); letter-spacing: 0.03em;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  font-family: var(--mono); font-size: 13.5px;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-radius: 0;
  padding: 10px 12px; width: 100%; box-sizing: border-box;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
  border-color: var(--signal); outline: none;
}
.contact-form textarea { resize: vertical; min-height: 120px; }

/* honeypot — real visitors never see this field; bots that blindly fill
   every input in a form still do, so a non-empty value here means spam.
   Positioned off-screen rather than display:none/visibility:hidden, since
   some bots skip fields hidden that way */
.contact-form .hp-field {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.contact-form .form-note {
  font-family: var(--mono); font-size: 12px;
  color: var(--rust); margin: -8px 0 16px;
}