/* Header social buttons — separate so this enhancement can be overwritten safely. */
.header-socials { display: flex; align-items: center; gap: 7px; margin-left: auto; margin-right: 12px; }
.social-button { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; color: var(--cream); text-decoration: none; background: rgba(9,22,16,.16); transition: transform .25s ease, background .25s ease, border-color .25s ease; }
.social-button span { font: 600 10px/1 var(--mono); letter-spacing: -.04em; }
.social-button:hover { background: var(--sun); border-color: var(--sun); color: var(--forest); transform: translateY(-3px) rotate(8deg); }
@media (max-width:800px) { .header-socials { margin-left: auto; margin-right: 8px; } .social-button { width: 29px; height: 29px; } }