/* The supplied symbol is placed unchanged beside the wordmark. Its transparent
   canvas is clipped in CSS so the visible mark aligns with the text. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #212529;
  font-family: var(--font);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.065em;
  line-height: 1;
  white-space: nowrap;
}
.brand-symbol {
  display: block;
  position: relative;
  flex: none;
  width: 42px;
  height: 34px;
  overflow: hidden;
}
.brand-symbol img {
  position: absolute;
  display: block;
  width: 55.9px;
  height: 55.9px;
  max-width: none;
  left: -6.4px;
  top: -12.4px;
}
.brand-name { display: block; }
.footer-bottom .brand {
  font-size: 22px;
  gap: 9px;
}
.footer-bottom .brand-symbol {
  width: 37px;
  height: 30px;
}
.footer-bottom .brand-symbol img {
  width: 49.3px;
  height: 49.3px;
  left: -5.7px;
  top: -11px;
}
@media (max-width: 580px) {
  .site-header .brand { font-size: 21px; gap: 8px; }
  .site-header .brand-symbol { width: 35px; height: 28px; }
  .site-header .brand-symbol img {
    width: 46px;
    height: 46px;
    left: -5.3px;
    top: -10.2px;
  }
}