/* Phone menu: a hamburger button that opens a full-screen list. Desktop keeps the inline menu.
   The inline menu is only hidden once site.js has run (html.js), so it still works without scripts. */
.menu-btn { display: none; }
.menu-overlay { display: none; }

@media (max-width: 639px) {
  .js nav[aria-label="Site"] { display: none !important; }
  .js .menu-btn {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; flex: 0 0 44px;
    background: rgba(0,0,0,.4); border: 1px solid #2a2a2a; border-radius: 10px;
    color: #f2f2f2; cursor: pointer;
  }
  .js header { position: relative; }
  .js header .menu-btn { position: absolute; top: 14px; right: 16px; }

  .menu-overlay.open {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 100;
    background: #000;
    padding: 14px 20px 28px; overflow-y: auto;
    text-align: left;
  }
  .menu-overlay .menu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
  .menu-overlay .menu-top img { width: 84px; height: auto; margin: 0; }
  .menu-overlay .menu-close {
    width: 44px; height: 44px; padding: 0;
    background: none; border: 1px solid #2a2a2a; border-radius: 10px;
    color: #f2f2f2; font-size: 26px; line-height: 1; cursor: pointer;
  }
  .menu-overlay a.item {
    display: block; padding: 17px 0;
    font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2;
    color: #f2f2f2; text-decoration: none; text-transform: none;
    border-bottom: 1px solid #1f1f1f;
  }
  .menu-overlay a.item[aria-current] { color: #EFC12E; }
  .menu-overlay a.get {
    display: block; margin-top: 28px; padding: 15px 20px; text-align: center;
    background: #EFC12E; color: #000; font-size: 17px; font-weight: 700;
    text-decoration: none; border-radius: 999px;
  }
  .menu-overlay .menu-note { font-size: 14px; color: #9a9a9a; text-align: center; margin: 12px 0 0; }
}