header {
  position: sticky;
  top: 0;
  z-index: 1101;
}

@media (max-width: 1000px) {
  header,
  header .brand > span,
  header .brand b,
  header .brand small,
  header .menu {
    transition: height 180ms ease, padding 180ms ease, font-size 180ms ease;
  }

  header.compact {
    height: 64px;
  }

  header.compact .brand > span {
    padding: 4px 6px;
  }

  header.compact .brand b {
    font-size: 12px;
  }

  header.compact .brand small {
    font-size: 7px;
  }

  header.compact .menu {
    font-size: 21px;
  }

  header.compact.open nav {
    top: 64px;
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
  }
}