/* Match the page's link specificity without depending on a footer wrapper. */
a.social-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  border-radius: 6px;
  color: var(--theme-muted);
  transition: color 150ms ease-out;
}
a.social-link:is(:hover, :focus-visible) { color: var(--theme-brand); }
.social-link .hover-hint { --hint-x: 0%; left: auto; right: 0; }
.social-link:focus-visible .hover-hint { opacity: 1; translate: 0 0; }
@media (hover: hover) {
  .social-link:hover .hover-hint { opacity: 1; translate: 0 0; transition-delay: 300ms; transition-duration: 150ms; }
}
@media (prefers-reduced-motion: reduce) {
  .social-link { transition: none; }
}