.brand .brand-mark,
.topbar .brand-mark,
.desktop-footer .brand-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  border: 1px solid #815500;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 32% 24%,
      #fff0a2 0 8%,
      #e4b83f 29%,
      #b57908 66%,
      #704300 100%) !important;
  box-shadow:
    inset 0 0 0 3px #f9dd72,
    inset 0 0 0 5px #8b5b05,
    0 5px 14px #5f3b0030 !important;
  color: #231605 !important;
  font: 900 0/1 Georgia, serif !important;
  text-shadow: 0 1px #fff0a8;
}
.brand .brand-mark::before {
  content: "G";
  position: absolute;
  inset: 6px;
  display: grid;
  place-items: center;
  border: 1px solid #fff0a899;
  border-radius: 50%;
  color: #231605;
  font: 900 22px/1 Georgia, serif;
  text-shadow: 0 1px #fff0a8;
  z-index: 1;
}
.brand .brand-mark::after {
  content: "" !important;
  position: absolute !important;
  top: 4px !important;
  left: 9px !important;
  width: 13px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #fff8c68c !important;
  filter: blur(1px);
}
.topbar .brand {
  gap: 12px;
}
.topbar .brand > span:last-child {
  font-weight: 650;
  letter-spacing: -.025em;
}
.topbar .brand > span:last-child b {
  color: #a46d06;
}
.desktop-footer .brand {
  gap: 12px;
}
.desktop-footer .brand-mark {
  width: 39px;
  height: 39px;
  flex-basis: 39px;
}
.desktop-footer .brand-mark::before {
  font-size: 20px;
}
@media (max-width: 760px) {
  .brand .brand-mark,
  .topbar .brand-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }
  .brand .brand-mark::before,
  .topbar .brand-mark::before {
    font-size: 19px;
  }
  .topbar .brand {
    gap: 9px;
  }
}
img.brand-mark {
  object-fit: cover;
  display: block;
}