/* Header identity refinements */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
}

.brand-mark img {
  position: absolute;
  width: 100%;
  max-width: none;
  height: 100%;
  transform: none;
}

.brand-name {
  font: 800 25px/.9 Outfit, sans-serif;
  letter-spacing: -.06em;
}

.brand-name b { color: var(--blue); }

.brand-name strong {
  display: block;
  color: var(--yellow);
  font-size: 22px;
  letter-spacing: -.055em;
}

@media (max-width: 800px) {
  .brand-mark { width: 46px; height: 46px; flex-basis: 46px; }
  .brand-name { font-size: 22px; }
  .brand-name strong { font-size: 19px; }
  .brand img { width: auto; height: auto; }
}