/* ==========================================================================
   Contact page
   ========================================================================== */

.contact { padding-bottom: var(--section-y); }

.contact__grid {
  display: grid;
  gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }

  .contact__info {
    position: sticky;
    top: calc(var(--header-h) + 2rem);
  }
}

.contact__info {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
}

.contact__info h1 { max-width: 12ch; }
.contact__info .lead { color: var(--c-muted); max-width: 46ch; }

.contact__facts {
  display: grid;
  width: 100%;
  border-top: 1px solid var(--c-line);
}

.contact__facts div {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--c-line);
}

.contact__facts dt {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-faint);
  padding-top: 0.2rem;
}

.contact__facts dd { font-size: var(--fs-small); line-height: 1.7; }

@media (max-width: 420px) {
  .contact__facts div { grid-template-columns: 1fr; gap: 0.3rem; }
}

.contact__panel {
  padding: clamp(1.25rem, 3vw, 2.5rem);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}

.contact__form-title {
  font-size: var(--fs-h3);
  font-weight: 500;
}