/* Contact page — uses tokens and the shared .card only */
.contact-page { max-width: 48rem; margin: 0 auto; padding: calc(var(--nav-height) + var(--space-5)) var(--space-4) var(--space-8); }
.contact-page h1 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.contact-lead { font-size: var(--text-base); line-height: 1.7; color: var(--text-secondary); margin-bottom: var(--space-5); }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.contact-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.contact-card h2 { font-size: var(--text-base); font-weight: 700; }
.contact-card p { font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary); flex: 1; }
.contact-card a { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); overflow-wrap: anywhere; }
.contact-card a:hover { text-decoration: underline; }
.contact-note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-5); }
@media (max-width: 600px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }