/* ============================================================
   BADGE
   The small grey label a case study wears: its market and its kind, one
   badge each. Shared, because the cards on the home page, the cards in the
   Work tab and the case study pages themselves all carry the same pair.
   ============================================================ */
.badges {
  display: flex;
  flex-wrap: wrap;
  /* Right, wherever they sit: the mark leads the row and these close it */
  justify-content: flex-end;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  background: #f3f3f3;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
  /* Fallback radius — the @supports block below carries the real corner */
  border-radius: 8px;
}

/* The same badge, grown: on the home page it carries content rather than
   metadata, so it takes the page's text colour and room to breathe. */
.badge--lg {
  padding: 10px 18px;
  font-size: 16px;
  color: var(--text);
}

/* The same chip, unfilled: the dashed edge the cards and the three boxes
   carry, for the things that sit alongside the set rather than in it. */
.badge--ghost {
  background: var(--bg);
  border: 1px dashed var(--line);
}

/* After .badge's own radius, not before it: same specificity, so source
   order decides, and declared earlier only the radius would lose. */
@supports (corner-shape: squircle) {
  .badge {
    border-radius: 16px;
    corner-shape: squircle;
  }
}