1@use "../theme" as *;
2
3.contact-header { margin-bottom: 1rem; }
4.contact-header--media { margin-top: 2.5rem; }
5.contact-header__desc { font-size: 1rem; color: theme(subtle); margin: 0; max-width: 50ch; }
6
7.contact-list.list-none { display: flex; flex-direction: column; border-top: 1px solid theme(border); border-bottom: 1px solid theme(border); padding-bottom: 0.3rem; }
8.contact-item { }
9.contact-item__link, .contact-item__static { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 0; color: theme(text); transition: color 0.15s ease; }
10.contact-item__link:hover .contact-item__icon, .contact-item__link:hover .label { color: theme(accent); }
11.contact-item__icon { display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; color: theme(muted); flex-shrink: 0; transition: color 0.15s ease; }
12.contact-item__icon svg { width: 100%; height: 100%; fill: currentColor; }
13.contact-item__info { display: flex; flex-direction: column; gap: 0; transition: color 0.15s ease; }
14.contact-item__info .label { transition: color 0.15s ease; line-height: 1.2; }
15.contact-item__value { font-weight: 500; font-size: 1rem; line-height: 1.2; }
16
17.contact-extra { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); color: theme(subtle); line-height: 1.6; }