/* The header of every page except the planner (home, About, Contact, Changelog, Donation, Privacy, Terms): the same look as the planner's top bar, without its buttons.
 * The game version in it is filled in by build.js (<b class="gv">). */
@font-face { font-family: "Alegreya SC"; src: url("../fonts/AlegreyaSC-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-Light.ttf"); font-weight: 300 700; }
.site-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 24px; padding: 4px 14px; background: #0b0b0d; border: 12px solid transparent; border-image: url("../icons/ui/window_frame.png") 18 / 12px stretch; font-family: "Alegreya Sans", "Segoe UI", Tahoma, sans-serif; font-weight: 300; }
.site-brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.site-brand .bm { font: 400 26px "Alegreya SC", Georgia, serif; letter-spacing: 4px; color: #e2cf9e; }
.site-brand .bs { font: 400 16px "Alegreya SC", Georgia, serif; letter-spacing: 2px; color: #8d867a; }
.site-brand .beta { font: 400 18px "Alegreya SC", Georgia, serif; letter-spacing: 1px; color: #8f887b; margin-left: 8px; font-style: normal; }
.site-brand:hover .bm { filter: brightness(1.25); }
.site-ver { color: #8d867a; font-size: 19px; padding: 4px 14px; border: 1px solid #2c261e; border-radius: 12px; white-space: nowrap; }
.site-ver b { color: #e2cf9e; font-weight: 600; }
.m-only { display: none; }
@media (max-width: 820px) {
  .site-top { gap: 6px 14px; padding: 2px 8px; }
  .site-brand { gap: 6px; }
  .site-brand .bm { font-size: 22px; letter-spacing: 3px; }
  .site-brand .bs { font-size: 12px; letter-spacing: 1px; }
  .site-brand .beta { font-size: 11px; margin-left: 4px; }
  .site-ver { font-size: 16px; padding: 2px 9px; }
  .m-only { display: revert; }
  .d-only { display: none; }
}