/* ── tags.css — clickable tags shared across case studies ── */

/* Base tag — used everywhere */
.tag {
  display: inline-block;
  border: 1px solid rgba(7,2,4,0.15);
  padding: 4px 10px; border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600; font-size: 14px; color: #070204;
  white-space: nowrap; text-decoration: none;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.5;
}

/* Hover — invert */
.tag:hover {
  background: #070204;
  border-color: #070204;
  color: #ffffff;
}

/* Active — green on dark (used in work.html when a filter matches) */
.tag.active {
  background: #070204;
  border-color: #070204;
  color: #05ff00;
}

/* In dark backgrounds (hero sections of case studies) */
.tag-dark {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  background: transparent;
}
.tag-dark:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.6);
  color: #ffffff;
}