/* Narrow screens (phones): the header's links fold into a Menu button that opens them as a list under the
   header. Wider screens never see the button, and their header is unchanged. Loaded on every page with
   the shared header (the homepage and the blog), after the other styles. */
.menu-toggle { display: none; }

@media (max-width: 760px) {
  .site-header .menu-toggle {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--ink);
    background: transparent;
    cursor: pointer;
  }
  .menu-toggle span { display: block; width: 22px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .3s ease; }
  html.menu-open .menu-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
  html.menu-open .menu-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

  .site-header .site-nav { display: none; }
  html.menu-open .site-header { z-index: 50; background: #000; border-bottom-color: var(--line); }
  html.menu-open .site-header .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    padding: 8px var(--gutter) 28px;
    border-bottom: 1px solid var(--line);
    background: #000;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    transform: none;
    animation: menu-in .25s ease-out;
  }
  html.menu-open .site-nav .nav-divider { display: none; }
  html.menu-open .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
  html.menu-open .site-nav a[aria-current] { color: var(--ink); }
  html.menu-open .site-nav a[data-book-call] { margin-top: 20px; padding: 16px; border: 0; border-radius: 999px; color: #000; background: var(--ink); font-size: 1.125rem; font-weight: 500; text-align: center; }
  @keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
}