:root {
  --ink: #10233b;
  --muted: #526174;
  --paper: #f5f7fb;
  --green: #1557b0;
  --lime: #ffca3a;
  --line: #d8e0eb;
}

.brand {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 10px;
  letter-spacing: -0.035em;
}

.brand-mark {
  display: block;
  flex: 0 0 auto;
}

.brand-wordmark {
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1;
}

.brand-tld {
  color: var(--green);
}

@media (max-width: 480px) {
  .brand-mark {
    height: 34px;
    width: 34px;
  }

  .brand-wordmark {
    font-size: 1.05rem;
  }
}