/* Final compact H5 wordmark layout. This file intentionally loads last. */
html[data-font-size] .topbar {
  height: 84px !important;
  min-height: 84px !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: 46px 22px !important;
  gap: 4px 8px !important;
}

html[data-font-size] .topbar .mobile-brand {
  width: 130px !important;
  height: 46px !important;
  display: block !important;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
}

html[data-font-size] .topbar .mobile-brand .brand-art {
  width: 130px !important;
  height: 46px !important;
  display: block !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-color: transparent !important;
  mix-blend-mode: multiply !important;
}

html[data-font-size] .topbar .mobile-brand-copy {
  display: none !important;
}

html[data-font-size] .topbar .date-block {
  grid-column: 1;
  grid-row: 2;
  padding: 0 !important;
  align-self: center;
}

html[data-font-size] .topbar .font-size-control {
  position: static !important;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
}

html[data-font-size] .topbar .member-switcher {
  position: static !important;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
}

@media (max-width: 360px) {
  html[data-font-size] .topbar .mobile-brand,
  html[data-font-size] .topbar .mobile-brand .brand-art {
    width: 116px !important;
    height: 42px !important;
  }
}