/* /contact — the page the "Get in touch" button now opens instead of seizing
   the visitor's mail client.

   The layout is two columns that become one: the form is the default path
   because it works for everybody, and every direct channel sits beside it
   because the high-intent visitor should never be forced through a form to
   reach an address that is not a secret.

   ⚠️ Fields are styled CONTAINER-SCOPED and TYPE-AGNOSTIC (.fld input, not
   input[type=text]). A tag-and-type-scoped selector is how a phone field once
   shipped rendering as an unstyled browser default on another build: the new
   input's type simply was not in the selector list, and nothing said so. This
   way any control dropped into .fld inherits the look automatically. */

.doc__head--contact { min-height: auto; padding-block: 12vh 4vh; }

.ct {
  display: grid;
  gap: clamp(34px, 5vw, 64px);
  grid-template-columns: 1fr;
  align-items: start;
  padding-bottom: 8vh;
}
@media (min-width: 880px) {
  .ct { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

.ct__h {
  margin: 0 0 20px;
  font-size: clamp(19px, 2.2vw, 24px); line-height: 1.15;
  letter-spacing: -.012em; font-weight: 800; color: var(--fg);
}

/* ------------------------------------------------------------------ form --- */

.ct__form { display: grid; gap: 18px; max-width: 46ch; }

.fld { display: grid; gap: 7px; }
.fld label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-dim);
}
/* container-scoped and type-agnostic — see the note at the top of this file */
.fld input,
.fld textarea {
  width: 100%;
  font: inherit; font-size: 15px; line-height: 1.5;
  color: var(--fg);
  background: rgba(220, 230, 221, .04);
  border: 1px solid rgba(220, 230, 221, .18);
  border-radius: 5px;
  padding: 11px 13px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.fld textarea { resize: vertical; min-height: 120px; }
.fld input:hover,
.fld textarea:hover { border-color: rgba(220, 230, 221, .3); }
.fld input:focus-visible,
.fld textarea:focus-visible {
  outline: none;
  border-color: var(--amber);
  background: rgba(240, 168, 60, .05);
  box-shadow: 0 0 0 3px rgba(240, 168, 60, .16);
}
/* the browser's own invalid styling is inconsistent and fires too early; this
   only paints once the field has actually been marked by the script */
.fld.is-bad input,
.fld.is-bad textarea { border-color: #E5484D; }
.fld__err {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #E5484D; margin: 0;
}

.ct__send { justify-self: start; cursor: pointer; border: 1px solid var(--amber); }
.ct__send[disabled] { opacity: .55; cursor: default; }

/* the honeypot: off-screen for sighted users, hidden from assistive tech by the
   aria-hidden on its wrapper, and never display:none — some bots skip fields
   that are display:none, which would defeat the point */
.ct__hp {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.ct__status {
  margin: 0; min-height: 1.4em;
  font-size: 14px; line-height: 1.55; color: var(--fg-dim);
}
.ct__status.is-ok { color: var(--amber); }
.ct__status.is-bad { color: #E5484D; }
.ct__status a { color: var(--amber); }

/* ---------------------------------------------------------------- direct --- */

.ct__direct {
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(240, 168, 60, .16);
  border-radius: 6px;
  background: rgba(240, 168, 60, .028);
}

.ct__row { padding-block: 14px; border-top: 1px solid rgba(220, 230, 221, .09); }
.ct__row:first-of-type { border-top: none; padding-top: 0; }

.ct__k {
  margin: 0 0 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-dim);
}
.ct__v { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg); }
.ct__link { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.ct__link:hover { color: var(--amber); }

.ct__acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.ct__btn {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none;
  color: var(--fg-dim); cursor: pointer;
  background: rgba(220, 230, 221, .04);
  border: 1px solid rgba(220, 230, 221, .18);
  border-radius: 4px; padding: 7px 11px;
  transition: border-color .2s ease, color .2s ease;
}
.ct__btn:hover { color: var(--amber); border-color: rgba(240, 168, 60, .5); }
.ct__btn.is-done { color: var(--amber); border-color: rgba(240, 168, 60, .5); }

@media (prefers-reduced-motion: reduce) {
  .fld input, .fld textarea, .ct__btn { transition: none; }
}