/* Home brief activation */
.contact {
  display: grid;
  min-height: max(720px, 88svh);
  align-items: center;
  overflow: clip;
}

.contact-layout {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(430px, .92fr);
  gap: clamp(64px, 8vw, 156px);
  align-items: center;
}

.contact h2 {
  max-width: 11ch;
  margin: 0;
  font-size: var(--type-display-size);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--type-display-line);
  text-wrap: balance;
}

.contact-starter {
  display: grid;
  width: 100%;
  max-width: 720px;
  gap: clamp(18px, 1.6vw, 24px);
  justify-self: end;
}

.contact-starter__prompt {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--type-subheading-size);
  font-stretch: var(--stretch-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--type-subheading-line);
}

.contact-starter__surface {
  display: grid;
  min-height: clamp(270px, 26vw, 360px);
  grid-template-rows: minmax(0, 1fr) auto;
  border-radius: var(--radius);
  background: #111;
  color: var(--ink);
  transition: background-color .35s ease, color .35s ease, box-shadow .2s ease;
}

.contact-starter__surface:focus-within {
  background: var(--ink);
  color: #090909;
}

.contact-starter__surface.has-error {
  box-shadow: inset 0 0 0 2px var(--accent-2);
}

.contact-starter__input {
  width: 100%;
  min-height: 0;
  padding: clamp(24px, 2.4vw, 36px);
  border: 0;
  outline: 0;
  overflow: auto;
  resize: none;
  background: transparent;
  color: inherit;
  caret-color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(30px, 2.7vw, 46px);
  font-stretch: var(--stretch-editorial);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.04;
}

.contact-starter__input::placeholder {
  color: rgba(247, 247, 242, .3);
  opacity: 1;
}

.contact-starter__surface:focus-within .contact-starter__input::placeholder {
  color: rgba(9, 9, 9, .34);
}

.contact-starter__action-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(24px, 2.4vw, 36px) clamp(24px, 2.4vw, 36px);
}

.contact-starter__submit {
  display: inline-flex;
  align-items: baseline;
  gap: .55em;
  padding: 13px 17px;
  border: 0;
  border-radius: 4px;
  background: var(--ink);
  color: #090909;
  cursor: pointer;
  font-family: var(--font-interface);
  font-size: var(--type-body-size);
  font-weight: var(--weight-interface);
  line-height: var(--type-body-line);
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.contact-starter__surface:focus-within .contact-starter__submit {
  background: #090909;
  color: var(--ink);
}

.contact-starter__submit:hover,
.contact-starter__submit:focus-visible,
.contact-starter__surface:focus-within .contact-starter__submit:hover,
.contact-starter__surface:focus-within .contact-starter__submit:focus-visible {
  background: var(--accent);
  color: #090909;
}

.contact-starter__submit:active {
  transform: translateY(1px);
}

.contact-starter__submit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.contact-starter__arrow {
  display: inline-block;
  font-size: .75em;
  line-height: 1;
}

.contact-starter__support,
.contact-starter__error {
  max-width: 52ch;
  margin: 0;
  font-size: var(--type-detail-size);
  line-height: var(--type-detail-line);
}

.contact-starter__support {
  color: rgba(255, 255, 255, .5);
}

.contact-starter__error {
  min-height: 1.3em;
  color: #ff8c6b;
}

.contact-alternatives {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(22px, 2.4vw, 34px);
  margin-top: clamp(4px, .8vw, 10px);
}

.contact-link {
  display: inline-grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: baseline;
  gap: .4em;
  color: rgba(255, 255, 255, .58);
  font-size: var(--type-body-size);
  font-stretch: var(--stretch-body);
  font-weight: var(--weight-body);
  line-height: var(--type-body-line);
  transition: color .2s ease;
}

.contact-link-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.contact-link-icon {
  display: inline-block;
  color: currentColor;
  font-size: .72em;
  line-height: 1;
  transform: translateY(-.06em);
  transition: color .2s ease, transform .2s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  color: var(--accent);
}

.contact-link:hover .contact-link-icon,
.contact-link:focus-visible .contact-link-icon {
  transform: translate(3px, calc(-3px - .06em));
}

.contact-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 7px;
}

@media (max-width: 900px) {
  .contact {
    min-height: auto;
  }

  .contact-layout {
    grid-template-columns: 1fr;
    gap: clamp(48px, 12vw, 72px);
  }

  .contact h2 {
    max-width: 10ch;
  }

  .contact-starter {
    max-width: none;
    justify-self: stretch;
  }
}

@media (max-width: 560px) {
  .contact-starter__surface {
    min-height: 270px;
  }

  .contact-starter__input {
    font-size: clamp(28px, 8.2vw, 34px);
  }

  .contact-starter__submit {
    padding: 12px 15px;
  }
}