/* ── Swarm ─────────────────────────────────
   The dots on wires and the pill they gather at, for the 404 page and the
   Home loader. Each page sets the layers (z-index) it needs. See swarm.js. */
.swarm-dots,
.swarm-wires {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}
.swarm-dots { transition: opacity var(--dur-3) var(--ease-out); }
.swarm-wires { transition: opacity var(--dur-2) ease; }
.swarm-dots.is-on,
.swarm-wires.is-on { opacity: 1; }

/* The site's pill, grown up, in the type of the captions under images.
   White at rest, yellow when its fill comes up. */
.swarm-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 2.2vh, 24px) clamp(36px, 3.6vw, 56px);
  border: 1px solid var(--color-text-primary);
  border-radius: 999px;
  background: var(--color-text-primary);
  color: var(--color-bg-primary);
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.swarm-pill-fill {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
}
/* Two words share one place; the longer one, hidden, sets the width. */
.swarm-pill-label { position: relative; display: grid; justify-items: center; }
.swarm-pill-label > span { grid-area: 1 / 1; }
.swarm-pill-size { visibility: hidden; }