/* Social links + mailing list (2026-10-13). Icons are inline SVG in the page (currentColor = cream). */
.social { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.6rem; }
.social .sgroup { display: inline-flex; align-items: center; gap: 0.45rem; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; }
.social a.icon { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; color: inherit; transition: background 0.2s, color 0.2s; }
.social a.icon svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.social a.icon:hover, .social a.icon:focus-visible { background: #f4f2ec; color: #1c2333; }
.social a.join { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.9rem; border: 1px solid currentColor; border-radius: 2px; color: inherit; text-decoration: none; letter-spacing: 0.04em; transition: background 0.2s, color 0.2s; }
.social a.join svg { width: 1rem; height: 1rem; fill: currentColor; }
.social a.join:hover, .social a.join:focus-visible { background: #f4f2ec; color: #1c2333; }
@media (prefers-reduced-motion: reduce) { .social a { transition: none; } }