/* Hamburger drawer, shared by every screen. Values come from tokens.css. */
.menu { position: fixed; inset: 0; z-index: 20; }
.menu-scrim { position: absolute; inset: 0; background: var(--color-scrim); opacity: 0; transition: opacity var(--duration); }
.menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column;
  width: min(300px, 82vw);
  padding: env(safe-area-inset-top) 0 max(var(--space-6), env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--color-soft);
  color: var(--color-ink);
  box-shadow: var(--shadow-panel);
  transform: translateX(100%);
  transition: transform var(--duration);
}
.menu.open .menu-scrim { opacity: 1; }
.menu.open .menu-panel { transform: none; }
/* Sits exactly where the menu button was in the header, so open and close share one spot. */
.menu-close {
  display: grid; place-content: center; flex: none;
  width: var(--tap); height: var(--tap);
  margin: calc((var(--header-height) - var(--tap)) / 2) calc(var(--gutter) - (var(--tap) - var(--icon)) / 2) var(--space-2) auto;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.menu-close img { display: block; width: var(--icon); height: var(--icon); }
.menu-list { margin: 0; padding: 0; list-style: none; }
.menu-list a, .menu-list button {
  display: block; width: 100%; padding: 14px 24px;
  border: 0; background: none; color: inherit; text-align: left;
  font: inherit; font-size: var(--text-title-3); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer;
}
.menu-list a:hover, .menu-list button:hover { background: var(--color-hover); }
.menu-divider { height: 1px; margin: 8px 24px; background: var(--color-divider); }
.menu-foot { margin-top: auto; padding: 24px 24px 0; font-size: var(--text-micro); line-height: 1.7; color: var(--color-faint); }
.menu-foot p { margin: 0; }
.menu-note { margin: 24px 24px 0; font-size: var(--text-footnote); line-height: 1.6; color: var(--color-faint); }
/* Phones: the menu covers the whole screen. */
@media (max-width: 600px) {
  .menu-panel { width: 100%; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .menu-scrim, .menu-panel { transition: none; } }