/* ============================================================
   191 ENCINITAS — contact page (/contact)

   One form on paper. Tokens come from styles.css; the field styles
   match the booking form in book.css so the two feel like one site.
   ============================================================ */

.cf{
  padding-top:calc(78px + clamp(2.5rem,6vw,5rem));
  padding-bottom:var(--band);
  padding-inline:var(--pad);
  background:var(--paper);
  min-height:100svh;
}
.cf__in{max-width:60ch;margin-inline:auto}

.cf__head{padding-bottom:clamp(1.75rem,4vw,2.5rem)}
.cf__title{margin-bottom:1rem}
.cf__lede{max-width:46ch}

.cf__form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.cf__form{grid-template-columns:1fr}}

.cf__field{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.cf__field--wide{grid-column:1/-1}
.cf__field label{
  font-size:.625rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.cf__field input,.cf__field textarea{
  font:inherit;font-size:.9375rem;font-weight:500;color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;
  padding:.85rem 1rem;width:100%;min-width:0;
  transition:border-color .25s;
}
.cf__field textarea{resize:vertical;line-height:1.5}
.cf__field input:hover,.cf__field textarea:hover{border-color:rgba(18,18,16,.3)}
.cf__field input:focus,.cf__field textarea:focus{outline:none;border-color:var(--accent)}
.cf__field textarea::placeholder{color:rgba(119,113,102,.55)}

/* Off-canvas rather than display:none: a bot that skips hidden fields
   would skip the trap too. */

.cf__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:.5rem}
.cf__status{margin:0;font-size:.9375rem;font-weight:600;color:var(--muted)}
.cf__status.is-ok{color:var(--ink)}
.cf__status.is-err{color:var(--accent-2)}
.cf__status a{color:inherit;font-weight:700}

.cf__alt{
  margin-top:clamp(2rem,4vw,3rem);padding-top:1.5rem;border-top:1px solid var(--line-soft);
  font-size:.9375rem;color:var(--muted);
}
.cf__alt a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:2px}
.cf__alt a:hover{color:var(--accent)}