/* Mobile menu. Below 900px the page links move into a full-height panel under the
   masthead, opened by the burger at the top right. Loaded by every page, including
   the homepage, so it relies only on the colour tokens both stylesheets define. */

.menu-toggle { display: none; }

@media (max-width: 900px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

  /* Three lines: the span is the middle one, its pseudo-elements the top and bottom */
  .menu-toggle .bars,
  .menu-toggle .bars::before,
  .menu-toggle .bars::after {
    display: block;
    width: 24px;
    height: 1.5px;
    background: currentColor;
    transition: transform 0.4s cubic-bezier(.19, 1, .22, 1), background-color 0.2s ease;
  }

  .menu-toggle .bars { position: relative; }
  .menu-toggle .bars::before,
  .menu-toggle .bars::after { content: ''; position: absolute; left: 0; }
  .menu-toggle .bars::before { transform: translateY(-7px); }
  .menu-toggle .bars::after { transform: translateY(7px); }

  .masthead.is-open .menu-toggle .bars { background-color: transparent; }
  .masthead.is-open .menu-toggle .bars::before { transform: rotate(45deg); }
  .masthead.is-open .menu-toggle .bars::after { transform: rotate(-45deg); }

  .masthead.is-open { background: var(--stone); }

  /* The panel hangs from the bottom of the sticky masthead and fills the rest of the screen */
  .masthead nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(100vh - 78px);
    height: calc(100dvh - 78px);
    overflow-y: auto;
    background: var(--stone);
    border-top: 1px solid var(--mist);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  .masthead.is-open nav {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.3s ease, visibility 0s;
  }

  .masthead .nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 24px 40px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 30px;
    letter-spacing: -0.01em;
  }

  .masthead .nav-links li { border-bottom: 1px solid var(--mist); }

  .masthead .nav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    border-bottom: 0;
  }

  /* A small dot marks the page you are on */
  .masthead .nav-links a[aria-current="page"]::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
  }

  /* Links rise in one after another as the panel opens */
  .motion .masthead .nav-links li {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.19, 1, .22, 1);
  }

  .motion .masthead.is-open .nav-links li { opacity: 1; transform: none; }
  .motion .masthead.is-open .nav-links li:nth-child(2) { transition-delay: 0.04s; }
  .motion .masthead.is-open .nav-links li:nth-child(3) { transition-delay: 0.08s; }
  .motion .masthead.is-open .nav-links li:nth-child(4) { transition-delay: 0.12s; }
  .motion .masthead.is-open .nav-links li:nth-child(5) { transition-delay: 0.16s; }

  /* Stop the page scrolling behind the open menu */
  html.menu-open { overflow: hidden; }
}