#logo {
  width: 8em;
}
/* ----------- breakpoint 1 ------------------- */
/* #body-flex > header moves left */
@media (min-width: 38rem) {
  #body-flex {
    flex-flow: row;
  }
  #site-nav {
    align-self: flex-start;
    position: static
    top: 0;
    width: 14rem;
    flex: 1 0 auto;
  }
  #hamburger-menu .nodes,
  #masthead {
    display: block;
  }
  #hamburger-label { 
    display: none; 
  }
  #search input[type="search"] {
    max-width: 10.8rem; /* kluge */
  }
  #logo {
    width: 100%;
  }
  #body-flex > article {
    border-top: none;
    margin-left: 14rem;
    min-height: 50rem;
    margin-left: 0;
  }
  #body-flex > article > main {
    display: block;
  }
}