/* Start and Portfolio are separate rows; the category flyout opens to the right. */
@media (max-width: 1024px) {
  body .site-header {
    position: relative;
  }
  body .site-header #site-nav {
    position: absolute !important;
    left: 8% !important;
    right: auto !important;
    top: calc(100% - 10px) !important;
    width: clamp(120px, 37vw, 150px) !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 16px 14px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    overflow: visible !important;
    z-index: 100 !important;
    background: var(--paper) !important;
    text-align: left !important;
  }
  body .site-header #site-nav:not(.is-open) {
    display: none !important;
  }
  body .site-header #site-nav.is-open {
    display: flex !important;
  }
  body .site-header #site-nav > .nav-start {
    order: -1 !important;
    display: block !important;
  }
  body .site-header #site-nav .portfolio-menu {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    flex: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body .site-header #site-nav > a,
  body .site-header #site-nav > span,
  body .site-header #site-nav .portfolio-menu-toggle {
    display: block !important;
    width: 100% !important;
    font: inherit !important;
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 14px !important;
    text-align: left !important;
    text-transform: lowercase !important;
    letter-spacing: .05em !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    min-height: 36px !important;
    padding: 8px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-sizing: border-box !important;
  }
  body .site-header #site-nav .portfolio-submenu {
    position: absolute !important;
    top: -8px !important;
    left: calc(100% + 22px) !important;
    right: auto !important;
    flex-basis: auto !important;
    width: min(200px, calc(92vw - clamp(120px, 37vw, 150px) - 16px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: 0 8px 24px #0002 !important;
    background: var(--paper) !important;
    color: var(--ink) !important;
    list-style: none !important;
    z-index: 101 !important;
  }
  body .site-header #site-nav .portfolio-submenu[hidden] {
    display: none !important;
  }
  body .site-header #site-nav .portfolio-submenu:not([hidden]) {
    display: block !important;
  }
  body .site-header #site-nav .portfolio-submenu a {
    font-family: 'Montserrat', Arial, sans-serif !important;
    font-size: 13px !important;
    letter-spacing: .02em !important;
    padding: 10px 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
}
/* Remove old generated labels now that the menu has explicit text buttons. */
body .site-header #site-nav .nav-start::before,
body .site-header #site-nav .nav-start::after,
body .site-header #site-nav .portfolio-menu::before,
body .site-header #site-nav .portfolio-menu::after,
body .site-header #site-nav .portfolio-menu-toggle::before,
body .site-header #site-nav .portfolio-menu-toggle::after {
  content: none !important;
  display: none !important;
}
/* One common line box for desktop and tablet navigation labels. */
@media (min-width: 1025px) {
  body .site-header #site-nav {
    display: flex !important;
    align-items: center !important;
  }
  body .site-header #site-nav > a,
  body .site-header #site-nav > span,
  body .site-header #site-nav > .portfolio-menu,
  body .site-header #site-nav .portfolio-menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    transform: none !important;
    top: auto !important;
  }
  body .site-header #site-nav .portfolio-menu-toggle {
    font: inherit !important;
    line-height: 1.4 !important;
    border: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
    color: inherit !important;
  }
}
/* The same hamburger control is used throughout the mobile/tablet range. */
@media (max-width: 1024px) {
  body .site-header .menu-toggle {
    display: block !important;
  }
}
/* Tablet: twice the 21px menu glyph, mirrored against the theme switch edge. */
@media (min-width: 701px) and (max-width: 1024px) {
  body .site-header .menu-toggle {
    position: fixed !important;
    left: 6px !important;
    right: auto !important;
    top: 24px !important;
    z-index: 1000;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 42px !important;
    line-height: 1 !important;
    background: none !important;
    border: 0 !important;
    transform: none !important;
  }
  body.admin-bar .site-header .menu-toggle {
    top: 56px !important;
  }
  body .site-header #site-nav {
    left: 6px !important;
  }
}
@media (min-width: 701px) and (max-width: 782px) {
  body.admin-bar .site-header .menu-toggle {
    top: 70px !important;
  }
}