/* Contact page (doc section 8.13). Form controls come from components.css. */
.contact-grid { display: grid; gap: 2.5rem; padding-bottom: 6rem; }
.contact-side { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-item { display: flex; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.contact-item svg { margin-top: .125rem; color: var(--primary); }
.contact-item h2 { font-family: var(--font-mono); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .18em; color: var(--muted-foreground); margin-bottom: .25rem; }
.contact-item p, .contact-item a, .contact-item address { font-size: .9375rem; font-style: normal; line-height: 1.6; }
.contact-item a { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
.contact-socials { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.contact-socials a { display: inline-flex; align-items: center; gap: .375rem; }
.contact-socials svg { margin-top: 0; }

@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: 1.6fr 1fr; gap: 4rem; align-items: start; }
}