/* /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; }
/* 🔴 iOS SAFARI ZOOMS THE PAGE WHEN YOU FOCUS A FIELD UNDER 16px, AND DOES NOT
   ZOOM BACK. At 15px every field above triggered it: tapping NAME on an iPhone
   scaled the page up and left it there, mid-form, on the one page whose whole
   job is getting a message from someone who wants to hire him. 16px is the
   threshold, so this is a 1px change nobody will see and the zoom stops.
   Keyed on `pointer: coarse`, not on width — a 15px field zooms on an iPad at
   1000px too, so a max-width query would have fixed the phone and left the
   tablet broken. Container-scoped and type-agnostic, like the rule above it. */
@media (pointer: coarse) {
  .fld input, .fld textarea { font-size: 16px; }
}
.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); }
/* COPY ADDRESS / OPEN IN MAIL APP measured 31px tall. They are the fallback for
   anyone who does not want to use the form, so they are the last thing that
   should be fiddly on the device most people will read this on. The border is
   drawn by padding, so growing the padding grows the visible pill too — which is
   correct here: unlike the HUD glyph, this control is a button and should look
   like one big enough to press. */
@media (pointer: coarse) {
  .ct__btn { padding: 14px 16px; }
}

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