/* =========================================================================
   contact.css — the contact page.

   The previous version left the form floating on the page background as a
   column of hairlines: no container, labels at --faint on near-black, and a
   headline at full display scale above it that made the whole page read as a
   title with some small print underneath.

   What changed:
     - the form is an object, on its own plate, with a heading of its own
     - fields sit in pairs, so the form is five rows instead of six
     - labels moved from --faint to --dim, which is the difference between
       decoration and something a person can read while typing
     - phone and email are large targets, not a footnote
   ========================================================================= */

.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: clamp(36px, 6vw, 88px); align-items: start;
}

/* The heading is a label on a utility page, not the argument of a landing
   page. At full display scale it was four lines tall and dwarfed the form,
   which is the thing the visitor is here to use. */
/* The grid column is the measure; a ch cap on top of it only made this
   four-word-per-line headline four lines tall. */
.contact__title { font-size: clamp(1.9rem, 3.2vw, 2.8rem); max-width: 100%; }
.contact__intro .lead { max-width: 46ch; }

/* ---------- Direct channels ---------- */
.contact__direct {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px); margin-top: clamp(1.8rem, 3vw, 2.6rem);
}
.contact__direct-item {
  display: grid; gap: .35rem; padding: 1.1rem 1.25rem;
  border-radius: var(--r-lg); background: var(--bg-lift);
  box-shadow: inset 0 0 0 1px var(--rule);
  transition: box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.contact__direct-label {
  font-family: var(--font-mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--faint);
}
.contact__direct-value {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -0.02em; color: var(--text); overflow-wrap: anywhere;
}

/* ---------- Facts ---------- */
.contact__facts { margin: clamp(1.8rem, 3vw, 2.6rem) 0 0; display: grid; gap: 0; }
.contact__facts > div {
  display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
  padding-block: 1.05rem; border-top: 1px solid var(--rule);
}
.contact__facts dt { color: var(--faint); font-size: .88rem; }
.contact__facts dd { margin: 0; color: var(--dim); font-size: .93rem; line-height: 1.55; }
.contact__facts a { color: var(--text); box-shadow: inset 0 -1px 0 var(--accent-dk); }
.contact__facts a:hover { box-shadow: inset 0 -2px 0 var(--accent); }

/* ---------- The form, as an object ---------- */
.contact__form {
  background: var(--bg-lift); border-radius: var(--r-lg);
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
}
.contact__form-title { font-size: clamp(1.15rem, 1.6vw, 1.4rem); margin-bottom: 1.6rem; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(14px, 1.8vw, 22px); }

/* Inputs on the plate need their own ground, or they read as gaps in it. */
.contact__form .field label { color: var(--dim); font-size: .82rem; }
.contact__form .field input,
.contact__form .field select,
.contact__form .field textarea {
  background: var(--bg); border: 1px solid var(--rule);
  border-radius: var(--r); padding: .8rem .85rem;
}
.contact__form .field input:focus,
.contact__form .field select:focus,
.contact__form .field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.contact__form .field--check {
  margin-top: .9rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.contact__form .field--check input { width: 18px; height: 18px; margin-top: .1rem; }
.contact__form .field--check label { color: var(--dim); font-size: .84rem; }
.contact__form .field--check a { color: var(--text); box-shadow: inset 0 -1px 0 var(--accent-dk); }
.contact__form .btn--block { margin-top: 1.3rem; }
.contact__form .form-note { margin: .9rem 0 0; }

@media (hover: hover) and (pointer: fine) {
  .contact__direct-item:hover { background: var(--plate-2); box-shadow: inset 0 0 0 1px var(--rule-lit); }
}

@media (max-width: 960px) {
  .contact__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .field-row { grid-template-columns: 1fr; }
  .contact__direct { grid-template-columns: 1fr; }
  .contact__facts > div { grid-template-columns: 1fr; gap: .3rem; }
}