header > a.social-link {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

header > a.social-link .social-icon {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(238, 234, 224, 0.16);
  border-radius: 7px;
  color: #9b9891;
  background: rgba(238, 234, 224, 0.025);
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.social-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.social-icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.social-icon path { fill: currentColor; }

header > a.social-link .social-label {
  padding: 0;
  color: #c7c3ba;
  font-size: 9px;
  transition: color 160ms ease;
}

header > a.social-link .social-arrow {
  padding: 0 0 0 1px;
  color: var(--orange);
  font-size: 13px;
  opacity: 0.72;
}

header > a.social-link:hover .social-icon {
  color: var(--orange);
  border-color: rgba(255, 148, 0, 0.48);
  background: rgba(255, 148, 0, 0.06);
}

header > a.social-link:hover .social-label,
header > a.social-link:focus-visible .social-label {
  color: var(--white);
}

@media (max-width: 520px) {
  header > a.social-link { gap: 8px; }
  header > a.social-link .social-icon { width: 27px; height: 27px; }
  header > a.social-link .social-arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  header > a.social-link .social-icon { transition: none; }
  header > a.social-link .social-label { transition: none; }
}