/* ============================================================================
   Contact — /contact/, where the hero's "Start a conversation" lands, and the
   application forms (careers/<role>/apply/), built the same way. The page's
   two tracks: the claim in the left third, held in view, and the form in the
   right two-thirds. The head rises in as a document's does (listing.css,
   .doc-head).

   Fields are square, as everything but the pill is (DESIGN.md, Shapes): a
   label in Ink above a 1px box in Field Edge, the least contrast a control's
   boundary may have; focus thickens the box to 2px Ink.
   ============================================================================ */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: clamp(24px, 3vw, 48px);
  align-items: start;
}

/* --- The claim ----------------------------------------------------------- */

.contact__head {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}

.contact__title {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.contact__lede {
  max-width: 30ch;
  margin-top: clamp(18px, 2vw, 24px);
  color: var(--ink-2);
  font-size: clamp(17px, 1.32vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.contact__alt {
  margin-top: 20px;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 24px;
}

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

.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px clamp(16px, 2vw, 28px);
  max-width: 820px;
  padding-top: clamp(24px, 4vw, 56px);
}

/* once sent, the form gives way; its own display would otherwise outrank hidden */
.contact-form[hidden] {
  display: none;
}

.field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.field--wide,
.contact-form__end,
.contact-form__status {
  grid-column: 1 / -1;
}

.field label {
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

.field__opt {
  color: var(--ink-3);
  font-weight: 400;
}

.field__hint {
  margin-top: 4px;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 20px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--field-edge);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 22px;
  transition: border-color var(--fast) var(--ease-out), box-shadow var(--fast) var(--ease-out);
}

.field textarea {
  min-height: 152px;
  resize: vertical;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink-3);
}

/* the box itself is the focus mark: 2px of Ink, drawn inside the edge */
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

/* a field is marked wrong only once it has been left wrong */
.field input:user-invalid {
  border-color: var(--ink);
  border-style: dashed;
}

/* a file (the CV): the browser's own control, its button drawn square in Ink */
.field input[type="file"] {
  padding: 8px 14px 8px 8px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 30px;
  cursor: pointer;
}

.field input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 4px 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease-out), color var(--fast) var(--ease-out);
}

.field input[type="file"]::file-selector-button:hover {
  background: var(--ink);
  color: var(--ground);
}

/* the select draws its own chevron, in Ink */
.field__select {
  position: relative;
  display: block;
}

.field__select select {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
}

.field__select::after {
  content: "";
  position: absolute;
  right: 19px;
  top: calc(50% + 2px);
  width: 7px;
  height: 7px;
  border-right: 1.4px solid var(--ink);
  border-bottom: 1.4px solid var(--ink);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

/* until a choice is made, the prompt reads as a prompt, not an answer */
.field select:has(option[value=""]:checked) {
  color: var(--ink-3);
}

.field select option {
  background: var(--ground);
  color: var(--ink);
}

.contact-form__end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 8px;
}

.contact-form__note {
  max-width: 40ch;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 20px;
}

.pill[type="submit"] {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

/* while sending, the pill says so and rests at its hover tone */
.pill[type="submit"]:disabled {
  background: var(--action-hover);
  cursor: progress;
}

/* the field only bots fill: out of sight and out of the tab order */
.field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__status {
  max-width: 60ch;
  color: var(--ink);
  font-size: 17px;
  line-height: 27px;
}

.contact-form__status:empty {
  display: none;
}

/* --- Sent: the form gives way to a thank-you in the same track ----------- */

.contact-thanks {
  grid-column: 2;
  max-width: 34em;
  padding-top: clamp(24px, 4vw, 56px);
  animation: rise .6s var(--ease-out) backwards;
}

.contact-thanks:focus {
  outline: none;
}

.contact-thanks__title {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -.02em;
}

.contact-thanks__text {
  margin-top: 16px;
  color: var(--ink-2);
  font-size: clamp(17px, 1.32vw, 19px);
  line-height: 1.55;
  text-wrap: pretty;
}

.contact-thanks__home {
  display: inline-block;
  margin-top: 24px;
  font-size: 16px;
  font-weight: 500;
}

/* --- Narrower screens ---------------------------------------------------- */

@media (max-width: 900px) {
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-thanks {
    grid-column: auto;
  }

  .contact__head {
    position: static;
  }

  .contact__lede {
    max-width: 46ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-thanks {
    animation: none;
  }
}

@media (max-width: 560px) {
  .contact-form {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}