/* ============================================================================
   Slot 1 — the audience line. Four marks, one job: say who this is for in a
   way that is this brand's and not a template's.

   Every one is token-driven, so all four work in dark and light and follow the
   accent. None of them is a plain tinted pill, which is the shape every
   generated page reaches for.
   ============================================================================ */

/* --- B. Split label -------------------------------------------------------
   Two segments: the preposition in ink, the audience in the accent. The most
   structural — it reads as a field and its value, which suits a page that is
   about qualifying the reader. */
.tag-split{display:inline-flex;align-items:stretch;border-radius:4px;overflow:hidden;
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.tag-split .k{background:var(--ink);color:var(--bg);padding:7px 10px}
.tag-split .v{background:var(--accent-fill);color:var(--accent-on-fill);padding:7px 12px}

/* --- D. Avatar cluster ----------------------------------------------------
   Three stacked discs then the words. The only one that pictures people rather
   than naming them — closest to the platform the workshop is about.
   The discs are plain accent shades, not invented faces. */
.tag-stack{display:inline-flex;align-items:center;gap:11px;
  font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.005em}
.tag-stack .s{display:flex;flex:none}
.tag-stack .s i{width:23px;height:23px;border-radius:50%;
  border:2px solid var(--bg);margin-left:-8px}
.tag-stack .s i:first-child{margin-left:0;background:var(--accent-200)}
.tag-stack .s i:nth-child(2){background:var(--accent-400)}
.tag-stack .s i:nth-child(3){background:var(--accent-600)}