/* Brand bar: the logo (static/brand-full.jpg, from static/opvote1.jpg) is the navbar's background,
   pinned top-left at the bar's full height, on a bar of the logo's own
   light tone; its top and bottom edges coincide with the bar's. Below
   1024px the square emblem crop is used so the menu button has room.
   .brand-link is an empty anchor over the logo: the click target and the
   accessible name a background image cannot provide. */
.navbar.brand-bar {
  --brand-h: 64px;
  --brand-w: 226px;
  --brand-img: url(/static/brand-full.jpg);
  min-height: var(--brand-h);
  background: var(--brand-img) left top / auto var(--brand-h) no-repeat #f4f4f5;
}
@media (min-width: 1280px) {
  .navbar.brand-bar { --brand-h: 80px; --brand-w: 282px; }
}
@media (max-width: 1023px) {
  .navbar.brand-bar { --brand-w: 64px; --brand-img: url(/static/brand-emblem.jpg); }
}
.navbar.brand-bar .brand-link {
  display: block;
  flex: none;
  width: var(--brand-w);
  height: var(--brand-h);
  margin: -0.5rem 0.5rem -0.5rem -0.5rem; /* the navbar pads 0.5rem; cover the logo exactly */
}
/* Pages with a fixed navbar pad their first section by the bar's height. */
.brand-offset { padding-top: 64px; }
@media (min-width: 1280px) { .brand-offset { padding-top: 80px; } }