/* ============================================================================
   Social Ads — the audience clusters.
   A loose dot cloud gathers into named segments, then splits into one lane
   per segment. Loaded by social-ads.html only. Tokens from css/deep.css.
   ========================================================================== */

.aud{ aspect-ratio:16/10; overflow:hidden; }
.aud-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.aud .aud-fallback{ width:100%; height:auto; display:block; }
.aud-fallback .g0{ fill: rgba(169,239,253,.85); }
.aud-fallback .g1{ fill: rgba(122,216,240,.85); }
.aud-fallback .g2{ fill: rgba(42,154,214,.9); }
.aud-fallback text{ font: 600 13px var(--font-display); fill:#eaf4fa; }
.aud-fallback text.n{ font: 600 10px var(--mono); fill: rgba(191,238,255,.62); letter-spacing:.1em; }

.aud-read{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; margin-top:14px;
  font:600 10.5px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color: rgba(191,238,255,.62);
}
.aud-read b{ color: var(--accent); font-weight:700; }

@media (max-width:900px){
  .aud{ aspect-ratio:16/11; }
}