/* The original artwork remains the book mark. Product name and subtitle are
   live text so they stay sharp at H5 scale and when users enlarge the page. */
.brand::after {
  display: none !important;
}

.brand,
.mobile-brand {
  gap: 10px !important;
}

.brand .brand-art,
.mobile-brand .brand-art {
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
  display: block !important;
  aspect-ratio: 1 !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
  filter: none !important;
  mix-blend-mode: normal !important;
  box-shadow: none;
}

.brand-copy,
.mobile-brand-copy {
  min-width: 0;
  display: grid !important;
  align-content: center;
  gap: 5px;
  line-height: 1;
  white-space: nowrap;
}

.brand-copy strong,
.mobile-brand-copy strong {
  display: block !important;
  color: #3d2a1b !important;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif !important;
  font-size: 27px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.brand-copy small,
.mobile-brand-copy small {
  display: block !important;
  color: #775735 !important;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
}

/* The prototype uses a fixed H5 canvas on desktop too, so this must not rely
   on a browser-width media query. Keep the topbar wordmark in one row. */
.topbar .mobile-brand {
  width: auto !important;
  height: 48px !important;
  min-width: 0;
  display: flex !important;
  align-items: center !important;
  grid-column: 1;
  grid-row: 1;
  gap: 8px !important;
}

.topbar .mobile-brand .brand-art {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
}

.topbar .mobile-brand-copy {
  display: grid !important;
  align-content: center;
  gap: 4px;
}

html[data-font-size] .topbar .mobile-brand-copy strong {
  font-size: 22px !important;
}

html[data-font-size] .topbar .mobile-brand-copy small {
  font-size: 11px !important;
}

@media (max-width: 760px) {
  .mobile-brand {
    width: auto !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .mobile-brand .brand-art {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
  }

  .mobile-brand-copy {
    gap: 4px;
  }

  html[data-font-size] .topbar .mobile-brand-copy strong {
    font-size: 22px !important;
  }

  html[data-font-size] .topbar .mobile-brand-copy small {
    font-size: 11px !important;
  }
}

@media (max-width: 360px) {
  .mobile-brand .brand-art {
    width: 43px !important;
    height: 43px !important;
    flex-basis: 43px !important;
  }

  html[data-font-size] .topbar .mobile-brand-copy strong {
    font-size: 20px !important;
  }

  html[data-font-size] .topbar .mobile-brand-copy small {
    font-size: 10px !important;
  }
}

/* Show the supplied Liangcha Book artwork as one complete, readable mark.
   Header controls live on their own row instead of competing with the art. */
.brand-copy,
.mobile-brand-copy {
  display: none !important;
}

.brand .brand-art {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 900 / 418 !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

.topbar {
  min-height: 162px !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: 118px 28px !important;
  gap: 4px 8px !important;
}

.topbar .mobile-brand {
  width: 250px !important;
  height: 116px !important;
  display: block !important;
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
  align-self: center;
}

.topbar .mobile-brand .brand-art {
  width: 250px !important;
  height: 116px !important;
  display: block !important;
  aspect-ratio: auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.topbar .date-block {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  padding: 0 !important;
  align-self: center;
}

.topbar .font-size-control,
.topbar .member-switcher {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  align-self: center;
}

.topbar .font-size-control {
  grid-column: 2;
  grid-row: 2;
}

.topbar .member-switcher {
  grid-column: 3;
  grid-row: 2;
}

@media (max-width: 360px) {
  .topbar {
    min-height: 151px !important;
    grid-template-rows: 108px 27px !important;
  }

  .topbar .mobile-brand,
  .topbar .mobile-brand .brand-art {
    width: 230px !important;
    height: 106px !important;
  }
}

/* Override the legacy H5 header height that otherwise clips the full logo. */
html[data-font-size] .topbar {
  height: 162px !important;
  min-height: 162px !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  grid-template-rows: 118px 28px !important;
  gap: 4px 8px !important;
}

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

html[data-font-size] .topbar .mobile-brand .brand-art {
  width: 250px !important;
  height: 116px !important;
  display: block !important;
  background-position: center !important;
  background-size: contain !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: 2;
  align-self: center;
}

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

@media (max-width: 360px) {
  html[data-font-size] .topbar {
    height: 151px !important;
    min-height: 151px !important;
    grid-template-rows: 108px 27px !important;
  }

  html[data-font-size] .topbar .mobile-brand,
  html[data-font-size] .topbar .mobile-brand .brand-art {
    width: 230px !important;
    height: 106px !important;
  }
}

/* Compact transparent wordmark, matching the H5 top-left reference layout. */
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: normal !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;
  }
}

/* Let the original white canvas blend into the prescription-paper header. */
html[data-font-size] .brand .brand-art,
html[data-font-size] .topbar .mobile-brand .brand-art {
  background-color: transparent !important;
  mix-blend-mode: normal !important;
}

html[data-font-size] .topbar {
  height: 148px !important;
  min-height: 148px !important;
  grid-template-rows: 104px 28px !important;
}

html[data-font-size] .topbar .mobile-brand,
html[data-font-size] .topbar .mobile-brand .brand-art {
  width: 225px !important;
  height: 103px !important;
}

@media (max-width: 360px) {
  html[data-font-size] .topbar {
    height: 143px !important;
    min-height: 143px !important;
    grid-template-rows: 99px 27px !important;
  }

  html[data-font-size] .topbar .mobile-brand,
  html[data-font-size] .topbar .mobile-brand .brand-art {
    width: 210px !important;
    height: 96px !important;
  }
}