/* Under 56rem the section links fold into a menu, and the logo morphs into its button: each <i> starts exactly over one
   of the mark's three bands, thins, then levels into a line. The SVG mark hands over at the start and takes back over
   once they settle, so the logo at rest is always the real mark. */
html.nav-lock { overflow: hidden; scrollbar-gutter: stable; }

@media (max-width: 56rem) {
  .nav { --morph: 480ms; --morph-ease: cubic-bezier(0.65, 0, 0.35, 1); }
  .logo-mark { transition: opacity 0s var(--morph); }
  .logo-word { transition: opacity 240ms ease 160ms, transform 370ms var(--ease-out) 110ms; }
  .nav.is-compact .logo { visibility: hidden; transition: visibility 0s 300ms; }
  .nav.is-compact .logo-mark { opacity: 0; transition: none; }
  .nav.is-compact .logo-word { opacity: 0; transform: translateX(-0.75rem); transition: opacity 200ms ease, transform 300ms ease-in; }

  .js .nav-menu {
    display: block; position: absolute; left: -0.75rem; top: calc(50% - 1.375rem); width: 2.75rem; height: 2.75rem;
    border: 0; border-radius: 0.5rem; background: none; color: var(--fg); cursor: pointer; -webkit-tap-highlight-color: transparent;
    visibility: hidden; transition: visibility 0s var(--morph);
  }
  .js .nav.is-compact .nav-menu { visibility: visible; transition: none; }
  .nav-menu i {
    position: absolute; left: 0.75rem; top: calc(50% - 14 * var(--u)); width: calc(19.5 * var(--u)); height: calc(2.7 * var(--u));
    translate: calc(var(--x) * var(--u)) calc(12.805 * var(--u)); rotate: 46.4deg; opacity: 0;
    transition: translate var(--morph) var(--morph-ease), rotate var(--morph) var(--morph-ease), opacity 0s var(--morph);
  }
  /* The lines thin throughout the turn, a little ahead of it, so they part without ever merging. */
  .nav-menu i::before {
    content: ""; position: absolute; inset: 0; border-radius: var(--u); background: currentColor;
    transform: skewX(46.4deg) scale(1.057, 4.112); transition: transform var(--morph) cubic-bezier(0.12, 0, 0.39, 0);
  }
  .nav-menu i:nth-child(1) { --x: -2.77; --y: 19.55; }
  .nav-menu i:nth-child(2) { --x: 7.03; --y: 12.65; }
  .nav-menu i:nth-child(3) { --x: 16.95; --y: 5.75; }
  .nav.is-compact .nav-menu i {
    translate: 0 calc(var(--y) * var(--u)); rotate: 0deg; opacity: 1;
    transition: translate var(--morph) var(--morph-ease), rotate var(--morph) var(--morph-ease);
  }
  .nav.is-compact .nav-menu i::before { transform: skewX(0) scale(1, 1); transition: transform var(--morph) cubic-bezier(0.61, 1, 0.88, 1); }

  .nav::after {
    content: ""; position: fixed; inset: 0; z-index: -2; background: rgba(0, 0, 0, 0.32);
    opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s 240ms;
  }
  .nav.is-open::after { opacity: 1; visibility: visible; transition: opacity 240ms ease; }
  .nav.is-open::before { opacity: 1; visibility: visible; bottom: 0; mask: none; }
  .js .nav.is-compact .nav-sheet { display: block; }
  .nav-sheet {
    position: absolute; z-index: -1; top: 100%; left: 0; right: 0;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); border-bottom: 1px solid var(--grey-200);
    visibility: hidden; opacity: 0; transform: translateY(-0.5rem);
    transition: opacity 180ms ease, transform 240ms ease, visibility 0s 240ms;
  }
  .nav.is-open .nav-sheet { visibility: visible; opacity: 1; transform: none; transition: opacity 160ms ease-out, transform 420ms var(--ease-out); }
  .nav-sheet nav { display: flex; flex-direction: column; padding-block: 0.25rem 1.25rem; }
  .nav-sheet a {
    display: flex; align-items: center; min-height: 3.25rem; border-top: 1px solid var(--grey-200);
    font-family: var(--font-display); font-weight: 500; font-size: 1.375rem; letter-spacing: -0.025em;
    transition: color var(--fast) ease;
  }
  .nav-sheet a:first-child { border-top: 0; }
  .nav-sheet a:hover { color: var(--accent); }
  .nav-sheet a[target]:not([data-demo])::after { content: "\2192"; display: inline-block; margin-left: 0.375rem; font-size: 0.75em; color: var(--grey-500); rotate: -45deg; }
}