/* Shared header furniture.
   Every page on this site was written with its own hand-made header, so there
   was no single place to put the logo - it existed on the home page only. These
   rules style what brand.js injects, and are deliberately scoped tightly so they
   cannot disturb each page's own layout. */

.brand-logo {
  height: 40px;
  width: auto;
  display: block;
  border-radius: 8px;
  background: #fff;
  flex: 0 0 auto;
}

.nav-back {
  display: none;                 /* only earns its place on a phone */
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  border: 1px solid rgba(11, 22, 40, .14);
  background: #fff;
  border-radius: 10px;
  color: #0B1628;
  font-size: 1.3rem;
  line-height: 1;
  font-family: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

@media (max-width: 820px) {
  .nav-back { display: grid; }
  .brand-logo { height: 46px; }

  /* Headers here are flex rows using space-between, which flings the brand to
     the far edge the moment the bar wraps onto two lines. Start them instead,
     so the back arrow, logo and name stay together on the left. */
  .top-nav,
  .topbar {
    flex-wrap: wrap;
    row-gap: .5rem;
    justify-content: flex-start;
  }
}