/* HWD · the phone menu. Direction B: a full-screen ink panel, one thing at a time.
   Everything here is hwd- prefixed on purpose. The three pages that use it each have their own
   nav with its own class names, and a bare .menu or .top would land in the middle of one of them.
   See what a bare .cap once did to the sign-in card. */

.hwd-burger {
  display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0;
  align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--ink, #171B1F); cursor: pointer;
}
.hwd-burger svg { display: block; }
/* The links in a desktop nav become this button, at the width they leave. */
@media (max-width: 900px) { .hwd-burger { display: inline-flex; } }

.hwd-menu {
  position: fixed; inset: 0; z-index: 120;
  background: #171B1F; color: #F8F9F9;
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
}
.hwd-menu.on { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hwd-menu { transition: none; } }

.hwd-menu .hwd-mtop { flex: none; height: 64px; display: flex; align-items: center; padding: 0 18px; }
.hwd-menu .hwd-mmark {
  font-family: Michroma, monospace; font-size: 16px; letter-spacing: .22em; color: #F8F9F9;
  display: inline-flex; align-items: baseline; text-decoration: none;
}
.hwd-menu .hwd-mmark i { width: 5px; height: 5px; border-radius: 50%; background: #C69A2B; margin-left: 2px; display: inline-block; }
.hwd-menu .hwd-mx {
  margin-left: auto; margin-right: -10px; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: rgba(248,249,249,.7); cursor: pointer;
}

.hwd-menu .hwd-min { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 20px; }
.hwd-menu .hwd-msec {
  display: block; color: #C69A2B; padding: 16px 0 6px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
}
.hwd-menu .hwd-mitem {
  display: flex; flex-direction: column; gap: 3px; padding: 13px 0; text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(248,249,249,.12);
}
.hwd-menu .hwd-mitem b { color: #F8F9F9; font-weight: 200; font-size: 24px; line-height: 1.2; display: flex; align-items: center; gap: 10px; }
.hwd-menu .hwd-mitem span { color: rgba(248,249,249,.55); font-size: 14px; line-height: 1.45; }
.hwd-menu .hwd-soon { pointer-events: none; }
.hwd-menu .hwd-soon b, .hwd-menu .hwd-soon span { color: rgba(248,249,249,.32); }
.hwd-menu .hwd-pill {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(248,249,249,.45); box-shadow: inset 0 0 0 1px rgba(248,249,249,.22);
  padding: 3px 7px; font-weight: 400;
}

.hwd-menu .hwd-mfoot {
  flex: none; display: flex; flex-direction: column; gap: 14px;
  padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
}
.hwd-menu .hwd-mfoot .hwd-mgo {
  display: flex; align-items: center; justify-content: center; height: 52px;
  background: #F8F9F9; color: #171B1F; text-decoration: none;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  border: 0; cursor: pointer; width: 100%;
}
.hwd-menu .hwd-msub {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(248,249,249,.5);
}
.hwd-menu .hwd-msub a, .hwd-menu .hwd-msub button {
  color: inherit; text-decoration: none; background: transparent; border: 0; padding: 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer;
}
.hwd-menu .hwd-msub .hwd-me { color: rgba(248,249,249,.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the address is the part that can be any length, so it is the part that gives way */
.hwd-menu .hwd-msub > :first-child { min-width: 0; display: flex; align-items: center; gap: 10px; overflow: hidden; }
.hwd-menu .hwd-msub .hwd-mout { flex: none; }
.hwd-menu .hwd-mlegal { flex: none; white-space: nowrap; }

/* The page behind it does not scroll while it is open. */
body.hwd-menu-open { overflow: hidden; }