/* Mobile navigation: the wordmark and a hamburger, laid over whatever the page
 * opens with. Five destinations wrapped across three ragged lines below the
 * hero; one button does not.
 *
 * Kept in its own file so it can be linked from the front page too, whose
 * styles are inline and would otherwise fight proto.css.
 */

.burger{
  display:none;
  border:0; background:none; padding:.4rem; margin:-.4rem;
  cursor:pointer; color:inherit; line-height:0;
}
.burger svg{width:1.45rem; height:1.45rem; display:block}
.burger .bar{
  transform-origin:center;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), opacity .25s linear;
}
.burger:focus-visible{outline:1px solid currentColor; outline-offset:4px}

@media (max-width:820px){
  /* over the image, not below it */
  .top{
    position:fixed !important; top:0; left:0; right:0; z-index:20;
    flex-direction:row !important; align-items:center !important;
    justify-content:space-between !important;
    gap:1rem !important; padding:1.15rem 5vw !important;
  }
  .top .mark{font-size:.64rem !important}
  .burger{display:block}

  /* The bar blends by difference so the wordmark reads over the photograph.
     A child cannot opt out of an ancestor's blend mode, so with the sheet open
     the whole bar — sheet included — was being inverted against the page: the
     paper turned black and the links vanished into the figure. While the sheet
     is up there is nothing to blend against anyway, so the bar simply stops
     blending and takes ink on paper. */
  body.nav-open .top{mix-blend-mode:normal; color:var(--ink,#111110)}

  /* the links become a sheet the button opens */
  .top nav{
    position:fixed; inset:0; z-index:1;
    display:flex !important; flex-direction:column; justify-content:center;
    gap:1.4rem !important; padding:0 5vw;
    background:var(--paper,#eeeeec);
    opacity:0; visibility:hidden;
    transform:translateY(-1.5rem);
    transition:opacity .38s cubic-bezier(.22,.61,.36,1),
               transform .45s cubic-bezier(.22,.61,.36,1),
               visibility 0s linear .45s;
  }
  .top nav a{
    font-size:1.55rem !important; letter-spacing:-.02em !important;
    opacity:1 !important; padding-bottom:.35rem !important;
    font-weight:600;
  }
  .top nav a::after{display:none}
  .top nav .ig svg{width:1.4rem; height:1.4rem}

  body.nav-open .top nav{
    opacity:1; visibility:visible; transform:none;
    transition-delay:0s, 0s, 0s;
  }
  /* the sheet covers the page, so the mark and button ride above it */
  .top .mark,.burger{position:relative; z-index:2}
  body.nav-open{overflow:hidden}

  body.nav-open .burger .top-bar{transform:translateY(5px) rotate(45deg)}
  body.nav-open .burger .mid-bar{opacity:0}
  body.nav-open .burger .bot-bar{transform:translateY(-5px) rotate(-45deg)}

  /* pages that open with type rather than an image need room for the bar */
  .head{padding-top:6.5rem !important}
}

@media (prefers-reduced-motion:reduce){
  .top nav,.burger .bar{transition:none}
}