/* The version shares the name's left edge; the mark stays centered beside it. */
.brand--versioned { align-items: center; }
.brand-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.brand-name { white-space: nowrap; }
.brand-version {
  display: block;
  color: var(--muted);
  font: 400 10px/1.4 var(--font-mono);
  letter-spacing: .04em;
  white-space: nowrap;
}
.brand--versioned .brand-mark { flex-shrink: 0; }
.brand--compact { gap: 10px; font-size: 18px; }
.brand--compact .brand-mark { height: 18px; gap: 3px; }
.brand--compact .brand-mark i { width: 4px; height: 18px; }
@media (max-width: 420px) {
  .brand--compact { font-size: 17px; }
}