/* The phone menu in the top nav. Under 760px the pill has no room for its four links
   (Vision, Communities, Blog, Founders), so they move into a sheet behind a menu disc.
   Shared by the homepage, /vision and the pages on /landing/site.css; /landing/nav.js
   closes it on an outside tap and on Escape. Values from the app: the tinted disc
   (rgba(255,255,255,0.1)), the floating fill (#26262D) and the 0.12 hairline. */
.nav-menu { display: none; }
.nav-menu > summary {
  list-style: none; cursor: pointer; flex: none;
  width: 40px; height: 40px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  color: #e8e8e8; background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s, color 0.2s;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary svg { width: 18px; height: 18px; }
.nav-menu[open] > summary { background: #e8e8e8; color: #121212; }
.nav-sheet {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  display: grid; padding: 8px; border-radius: 20px;
  background: #26262d; border: 0.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}
.nav-sheet a { padding: 13px 16px; border-radius: 12px; font-size: 15px; line-height: 22px; font-weight: 600; color: #e8e8e8; }
.nav-sheet a:hover { background: rgba(255, 255, 255, 0.07); }
.nav-sheet a[aria-current] { background: rgba(232, 232, 232, 0.12); }

@media (max-width: 760px) {
  .nav-menu { display: block; margin-left: auto; }
}