/* Supplied transparent calligraphy replaces the six visible headings.
   The source text stays in each heading for screen readers and search. */
.topbar .brand-text,
#homeTitle,
#characterPageTitle,
.team-drawer #drawerTitle,
.realm-dialog #realmTitle,
.lore-hero h1 {
  font-size: 0 !important;
  line-height: 0 !important;
  letter-spacing: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.topbar .brand-text {
  width: 130px;
  height: 50px;
  background-image: url('./title-haxhero.png');
}
.topbar .brand-sub { display: none !important; }

#homeTitle {
  width: min(310px, 100%);
  height: 182px;
  background-image: url('./title-home.png');
  background-position: left center;
}
#homeTitle br { display: none; }

#characterPageTitle {
  width: 215px;
  height: 74px;
  background-image: url('./title-benming.png');
  background-position: left center;
}

.team-drawer #drawerTitle {
  width: min(420px, calc(100vw - 130px));
  height: 118px;
  margin-inline: auto;
  background-image: url('./title-team.png');
}

.realm-dialog #realmTitle {
  width: min(640px, calc(100vw - 130px));
  height: 114px;
  margin-inline: auto;
  background-image: url('./title-realm.png');
}

.lore-hero h1 {
  width: min(400px, 86vw);
  height: 104px;
  margin: 8px auto !important;
  background-image: url('./title-lore.png');
}

@media (max-width: 760px) {
  #homeTitle { width: min(270px, 100%); height: 159px; }
  #characterPageTitle { width: 175px; height: 60px; }
  .team-drawer #drawerTitle { width: min(350px, calc(100vw - 105px)); height: 98px; }
  .realm-dialog #realmTitle { width: min(420px, calc(100vw - 105px)); height: 76px; }
  .lore-hero h1 { width: min(335px, 86vw); height: 88px; }
}

@media (max-width: 480px) {
  .topbar .brand-text { width: 109px; height: 42px; }
  #homeTitle { width: min(235px, 100%); height: 138px; }
  .team-drawer #drawerTitle { width: min(285px, calc(100vw - 85px)); height: 80px; }
  .realm-dialog #realmTitle { width: min(310px, calc(100vw - 85px)); height: 58px; }
}