.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.brand__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  /* Tightened from 0.18em: the wordmark went from 3 characters to 11. */
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.brand__word-accent {
  color: var(--accent);
}

.brand__tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.brand--hero .brand__word {
  /* clamp so an 11-character wordmark still fits a 320px phone */
  font-size: clamp(1.9rem, 8.5vw, 2.75rem);
  letter-spacing: 0.01em;
}

.brand--hero .brand__tag {
  margin-top: 8px;
  font-size: 0.75rem;
}