/* Header and footer show the monogram at a legible size, using the existing full logo asset. */
.brand .logo-symbol {
  display: block;
  flex: 0 0 74px;
  width: 74px;
  height: 70px;
  background-image: url("assets/logo-optimized.webp");
  background-repeat: no-repeat;
  background-size: 120px 120px;
  background-position: center 26%;
}
.brand > span:not(.logo-symbol) { display: flex; flex-direction: column; }
.header-inner .brand { gap: 3px; }
.footer-brand .logo-symbol {
  flex-basis: 62px;
  width: 62px;
  height: 58px;
  background-size: 102px 102px;
  filter: brightness(0) invert(1);
}
@media (max-width: 680px) {
  .brand .logo-symbol {
    flex-basis: 58px;
    width: 58px;
    height: 55px;
    background-size: 96px 96px;
  }
  .header-inner .brand { gap: 1px; }
  .footer-brand .logo-symbol { flex-basis: 58px; }
}