/* Social impacts hero: "one surface, many experiences", moving
   (assets/vibe-social.js). The still, the live canvas and the label overlay
   are stacked in one box and each is letterboxed to the frame's 5:3, so they
   line up at every size. The canvas takes over only once it has drawn; if the
   GL context is lost it fades out and the still is there again. */
.social-art{position:relative}
.social-art>img,.social-art>canvas,.social-art>svg{position:absolute;inset:0;width:100%;height:100%}
.social-art>img,.social-art>canvas{object-fit:contain}
/* the canvas fades in over the still: the first frame is the still's, and at
   smaller sizes its points are drawn a little larger, which a fade hides */
.social-art>canvas{opacity:0;transition:opacity .5s ease}
.social-art.social-live>canvas{opacity:1}
.social-labels{pointer-events:none;overflow:visible}
.social-labels text{font-family:var(--mono);fill:#a79ab5}
.social-labels .sx-caption{font-size:8px;letter-spacing:2.4px}
.social-labels .sx-tag{font-size:7.5px;letter-spacing:1.6px;fill:#cfc6da}
.sx-lead{fill:none;stroke:#91869f;stroke-opacity:.62;stroke-width:.65;vector-effect:non-scaling-stroke}
/* below 500px the frame is ~0.7 px per unit: the type grows, as .art-micro does */
@media(max-width:500px){
  .social-labels .sx-caption{font-size:12.5px;letter-spacing:1.5px}
  .social-labels .sx-tag{font-size:12px;letter-spacing:.9px}
}