/* Phones get a hamburger in place of the nav pill */
.burger, .menu { display: none; }
@media (max-width: 760px) {
  .site-head .nav { display: none; }
  .logo { position: relative; z-index: 2; }
  .burger { display: block; position: relative; z-index: 2; flex: none; width: 27px; height: 17px; -webkit-tap-highlight-color: transparent; }
  .burger::before { content: ""; position: absolute; inset: -14px -9px; } /* 44 to tap */
  .burger i { position: absolute; left: 0; width: 100%; height: 3px; border-radius: 2px; background: var(--blue); transition: transform .32s cubic-bezier(.2, .7, .2, 1), top .32s cubic-bezier(.2, .7, .2, 1), opacity .16s; }
  .burger i:nth-child(1) { top: 0; }
  .burger i:nth-child(2) { top: 7px; }
  .burger i:nth-child(3) { top: 14px; }
  .menu-open .burger i:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .menu-open .burger i:nth-child(2) { opacity: 0; }
  .menu-open .burger i:nth-child(3) { top: 7px; transform: rotate(-45deg); }
  html.menu-open { overflow: hidden; }

  .menu { display: block; position: fixed; inset: 0; z-index: 1; visibility: hidden; opacity: 0; overscroll-behavior: contain; transition: opacity .28s, visibility 0s .28s; }
  .menu-open .menu { visibility: visible; opacity: 1; transition: opacity .28s; }
  .menu-links { display: flex; flex-direction: column; }
  .menu-links a { display: flex; align-items: center; color: var(--blue); -webkit-tap-highlight-color: transparent; }
  .menu-links a.on::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

  /* The whole screen, big type, links rise in one after another */
  .menu { background: var(--bg); padding: calc(var(--header) + 24px) var(--margin) 0; }
  .menu-links { gap: 16px; }
  .menu-links a { width: max-content; gap: 12px; font-size: 48px; line-height: 1.2; opacity: 0; transform: translateY(12px); filter: blur(6px); transition: opacity .2s, transform .2s, filter .2s; }
  .menu-open .menu-links a { opacity: 1; transform: none; filter: none; transition: opacity .5s calc(var(--i) * 55ms + 60ms), transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--i) * 55ms + 60ms), filter .5s calc(var(--i) * 55ms + 60ms); }
  .menu-foot { display: flex; position: absolute; left: var(--margin); right: var(--margin); bottom: calc(32px + env(safe-area-inset-bottom)); justify-content: space-between; font: 400 12px/18px Poppins, sans-serif; letter-spacing: -.02em; color: #1a1a1a; }
  .menu-foot div { display: flex; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .menu, .menu *, .burger i { transition: none !important; } }