@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&family=Montserrat:wght@700;800;900&family=Noto+Sans+Symbols+2&display=swap");

:root {
  --mudan-logo-main-size: clamp(1.04rem, 1.12vw + 0.52rem, 1.95rem);
  --mudan-logo-mark-scale: 0.89;
  --mudan-logo-gap-x: 0.18;
  --mudan-logo-sub-scale: 0.35;
  --mudan-logo-gap-y: 0.30;
  --mudan-logo-main-track: 0.06em;
  --mudan-logo-sub-track: 0.12em;
}

.logo,
a.brand,
.brandbar .logo {
  display: inline-grid !important;
  grid-template-columns: auto 1fr;
  column-gap: calc(var(--mudan-logo-main-size) * var(--mudan-logo-gap-x));
  align-items: start !important;
  text-decoration: none;
  color: inherit;
}

.logo-symbol,
.brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: calc(var(--mudan-logo-main-size) * var(--mudan-logo-mark-scale)) !important;
  height: calc(var(--mudan-logo-main-size) * var(--mudan-logo-mark-scale)) !important;
  font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", "Segoe UI Symbol", sans-serif !important;
  font-size: calc(var(--mudan-logo-main-size) * var(--mudan-logo-mark-scale)) !important;
  font-weight: 700 !important;
  line-height: 0.92 !important;
  transform: translateY(calc(var(--mudan-logo-main-size) * 0.03)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.logo-text,
a.brand > span:not(.brand-mark) {
  display: grid !important;
  grid-template-rows: auto auto;
  row-gap: calc(var(--mudan-logo-main-size) * var(--mudan-logo-gap-y));
  align-content: start;
  min-width: 0;
}

.logo-text .brand,
.logo-text strong,
a.brand > span:not(.brand-mark) > strong {
  font-family: "Montserrat", sans-serif !important;
  font-size: var(--mudan-logo-main-size) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: var(--mudan-logo-main-track) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

.logo-sub,
.logo-text > span:last-child,
a.brand > span:not(.brand-mark) > span {
  display: block !important;
  font-family: "Inter", sans-serif !important;
  font-size: calc(var(--mudan-logo-main-size) * var(--mudan-logo-sub-scale)) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: var(--mudan-logo-sub-track) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  justify-self: center !important;
  margin: 0 !important;
}

header .logo,
header a.brand {
  --mudan-logo-main-size: clamp(1rem, 0.86vw + 0.72rem, 1.6rem);
}

footer .logo,
footer a.brand,
.footer-logo {
  --mudan-logo-main-size: clamp(0.92rem, 0.46vw + 0.7rem, 1.18rem);
}

.brandbar .logo {
  --mudan-logo-main-size: clamp(0.96rem, 0.82vw + 0.6rem, 1.35rem);
  color: #fff !important;
}

@media (max-width: 700px) {
  header .logo,
  header a.brand {
    --mudan-logo-main-size: clamp(0.94rem, 1.4vw + 0.55rem, 1.2rem);
  }
}