/* ============================================================
   Solto — Contact ("Let's talk")
   Dark green stage (book-ends the dark Home). Invitation left,
   form right. Form is proxy-first: posts to a Cloudflare Pages
   Function (server-side) — the browser never holds a secret or
   touches the DB. Honeypot + required fields here; real validation
   + rate-limit + insert + notify live in the Function.
   ============================================================ */

.contact { padding-block: clamp(4.5rem, 3.5rem + 5vw, 8rem) clamp(5rem, 4rem + 5vw, 9rem); }
.contact-grid { max-width: var(--page-max); margin-inline: auto; display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
@media (min-width: 860px) {
  .contact-grid { grid-template-columns: 1fr 1fr; column-gap: clamp(3rem, 1.5rem + 5vw, 6rem); align-items: start; }
}

/* --- invitation (left) --- */
.contact-title {
  font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); color: var(--display-fg);
  line-height: var(--display-leading); letter-spacing: var(--display-tracking);
  margin-top: var(--space-md); max-width: 16ch;
}
.contact-sub { margin-top: var(--space-lg); font-size: var(--type-lead); line-height: 1.55; color: var(--muted-fg); max-width: 40ch; }
.contact-alt {
  margin-top: var(--space-xl); font-family: var(--font-mono); font-size: var(--type-mono);
  letter-spacing: 0.04em; color: var(--muted-fg);
}
.contact-alt a {
  color: var(--display-fg); text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--display-fg) 45%, transparent); padding-bottom: 1px;
  transition: border-color var(--dur-hover) var(--ease-soft);
}
.contact-alt a:hover { border-color: var(--display-fg); }

/* --- form (right) --- */
.contact-form { display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field label {
  font-family: var(--font-mono); font-size: var(--type-mono); letter-spacing: var(--tracking-mono);
  text-transform: uppercase; color: var(--muted-fg);
}
.field .opt { text-transform: none; letter-spacing: 0.02em; color: var(--faint-fg); }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.0625rem; color: var(--page-fg);
  background: var(--ground-deep); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 0.85rem 1rem; transition: border-color var(--dur-hover) var(--ease-soft), box-shadow var(--dur-hover) var(--ease-soft);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--blush); box-shadow: 0 0 0 1px var(--blush);
}
/* keep autofilled fields on-theme (browsers force a light box + dark text otherwise) */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--page-fg);
  -webkit-box-shadow: 0 0 0 1000px var(--ground-deep) inset;
  caret-color: var(--page-fg);
  transition: background-color 9999s ease-out 0s;   /* defeat the autofill flash */
}
/* native invalid state only after the field has been interacted with (set by JS later) */
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--terracotta); }

.cf-turnstile { margin-top: var(--space-xs); min-height: 65px; }
.contact-form .btn { margin-top: var(--space-sm); justify-self: start; }
.contact-form .btn[disabled] { opacity: 0.6; cursor: default; }
.form-note { margin-top: var(--space-2xs); font-size: var(--type-small); color: var(--faint-fg); }
.form-note a { color: var(--muted-fg); text-decoration: underline; text-underline-offset: 2px; }
.form-note a:hover { color: var(--display-fg); }
.form-status { min-height: 1.3em; font-size: var(--type-small); color: var(--muted-fg); }
.form-status.is-ok { color: var(--blush); }
.form-status.is-error { color: var(--terracotta); }

/* per-field validation (set by contact.js from the Function's {errors}) */
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--terracotta); }
.field-error { margin-top: 0.3rem; font-size: var(--type-small); color: var(--terracotta); }

/* honeypot — off-screen, not announced, skipped by keyboard; bots fill it */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 859px) {
  .contact-title { max-width: none; }
}