/* Contact: an open invitation on cyan (CJ's mock-up, 20261029). The question
   on the left, the form on the right behind a hairline. A warm introduction,
   not a funnel. */
.contact {
  --form-gap: clamp(28px, 4svh, 40px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  align-items: stretch;
  padding: clamp(96px, 15svh, 160px) var(--gutter) clamp(80px, 11svh, 120px);
  background: var(--cyan);
  color: var(--ink);
}

/* A column as tall as the form, so the lede settles at its foot. The bottom
   padding is the status line under Send (one form gap, less its -16px pull,
   plus 1.4em of 0.9rem), which sets the lede's last line level with Send. */
.contact__intro {
  grid-column: 1 / span 6;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--form-gap) - 16px + 1.26rem);
}

.contact .eyebrow {
  color: var(--ink);
}

/* The page closes well above its section size, in italic, still under the
   hero's (zwischen.ai closes on 1.2x its own). */
.contact__title {
  font-size: calc(var(--t-section) * 1.6);
  font-style: italic;
  line-height: 1;
}

.contact__title span {
  display: block;
}

.contact__lede {
  margin-top: auto;
  padding-top: clamp(32px, 5svh, 64px);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem);
  line-height: 1.45;
  text-wrap: balance;
}

/* The hairline sits in the gutter left of the form, from just above the
   first label to the foot of the button. */
.contact__form {
  position: relative;
  grid-column: 8 / span 5;
  display: grid;
  align-content: start;
  gap: var(--form-gap);
  padding-top: 0.6rem;
}

.contact__form::before {
  content: "";
  position: absolute;
  top: -1rem;
  bottom: 2.4rem;
  left: calc(-1 * clamp(24px, 3vw, 52px));
  width: 1px;
  background: rgba(11, 36, 35, 0.6);
}

.contact__field {
  display: block;
}

.contact__label {
  display: block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.contact__field :is(input, textarea) {
  display: block;
  width: 100%;
  padding: 4px 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(11, 36, 35, 0.7);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.3125rem);
  line-height: 1.4;
  resize: none;
  transition: border-color var(--quick) var(--ease), box-shadow var(--quick) var(--ease);
}

.contact__field :is(input, textarea)::placeholder {
  color: rgba(11, 36, 35, 0.58);
}

.contact__field :is(input, textarea):focus {
  outline: none;
  border-bottom-color: var(--deep);
  box-shadow: 0 1px 0 var(--deep);
}

.contact__field input[aria-invalid="true"] {
  border-bottom-color: #8e1923;
  box-shadow: 0 1px 0 #8e1923;
}

/* The deep teal primary button (css/base.css), across the form's width. */
.contact__send {
  display: flex;
  width: 100%;
  margin-top: -8px;
}

.contact__status {
  min-height: 1.4em;
  margin-top: -16px;
  font-size: 0.9rem;
  color: var(--ink);
}

.contact__status[data-tone="error"] {
  color: #8e1923;
}

.contact__status[data-tone="ok"] {
  color: var(--deep);
}

/* Portrait tablets and phones: the question, then the form under it. */
@media (max-width: 900px) {
  .contact__intro,
  .contact__form {
    grid-column: 1 / -1;
  }
  .contact__intro {
    padding-bottom: 0;
  }
  .contact__lede {
    padding-top: clamp(20px, 3svh, 32px);
  }
  .contact__form {
    margin-top: clamp(48px, 7svh, 72px);
    padding-top: 0;
  }
  .contact__form::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .contact {
    padding: 72px var(--gutter) 80px;
  }
  .contact__title {
    font-size: calc(var(--t-section) * 1.35);
  }
}

/* Too narrow for the set lines: the question wraps on its own. Inputs stay
   at 1rem or more (iOS zooms into smaller ones). */
@media (max-width: 400px) {
  .contact__title span {
    display: inline;
  }
}