/* ==========================================================================
   Contact page — details aside + message form.
   ========================================================================== */

.contact-layout {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 64rem) {
  .contact-layout {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-8);
    align-items: start;
  }
}

.contact-info__list {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-5);
}
.contact-info__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}
.contact-info__item .icon {
  color: var(--accent);
}
.contact-info__item h3 {
  font-size: 1rem;
  margin-bottom: var(--space-1);
}
.contact-info__item p {
  color: var(--text-muted);
}
.contact-info__note {
  margin-top: var(--space-4);
  color: var(--text-subtle);
  font-size: var(--fs-small);
}

.contact-note {
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--border);
  background: var(--bg-alt);
}
.contact-note h3 {
  font-size: 1rem;
  margin-bottom: var(--space-2);
}
.contact-note p {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}