/* The two pixel marks share the width and right edge of the arrow's top bar. */
#contact .section-head {position:relative}
#contact .contact-socials {
 --contact-social-width:clamp(40px,5.4vw,83px);
 --contact-social-right:clamp(1px,.25vw,4px);
 position:absolute;
 top:calc(100% + 14px);
 right:var(--contact-social-right);
 width:var(--contact-social-width);
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:clamp(6px,.65vw,10px);
}
#contact .contact-social-link {
 display:grid;
 place-items:center;
 position:relative;
 width:100%;
 aspect-ratio:1;
 line-height:0;
 touch-action:manipulation;
}
#contact .contact-social-link::before {
 content:"";
 position:absolute;
 inset:-6px -2px;
}
#contact .contact-social-icon {
 display:block;
 width:100%;
 height:auto;
 aspect-ratio:1;
 pointer-events:none;
}
@media (hover:hover) and (pointer:fine) {
 #contact .contact-social-link:hover .contact-social-icon {
  animation:contact-hover-static-pulse 220ms steps(1,end) infinite;
 }
}
/* Match the arrow's top bar on mobile too; enlarge only the vertical tap area. */
@media(max-width:700px),(pointer:coarse) {
 #contact .contact-socials {gap:12%;top:calc(100% + 10px)}
 #contact .contact-social-link::before {
  top:50%;bottom:auto;left:-1px;right:-1px;height:44px;
  transform:translateY(-50%);
 }
}
@media(prefers-reduced-motion:reduce) {
 #contact .contact-social-link:hover .contact-social-icon {animation:none}
}