/* aaroncphelps.com — the shared mobile navigation for every masthead page.
   Above 900px nothing here shows: the masthead's four links do the work.
   At 900px and below the links hide, a "Menu" button takes their place in
   the masthead, and it opens a full-screen sheet on orange with paper type:
   the wordmark, Close, the four destinations in Alpina, and the direct
   email at the foot. menu.js opens and closes it, traps focus and closes it
   on Escape. Loads after the page's own stylesheet. */

.menu-button {
  display: none;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 9px 14px;
  border: 1px solid currentColor;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: inherit;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}
.menu-button:hover { opacity: .7; }
.menu-icon { position: relative; display: block; width: 16px; height: 9px; }
.menu-icon::before, .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
}
.menu-icon::before { top: 0; }
.menu-icon::after { bottom: 0; }

html.menu-open, html.menu-open body { overflow: hidden; }

/* the sheet */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 24px var(--gutter, 24px) 36px;
  background: #c9502b;
  color: #e8e6e1;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a, .mobile-menu button { color: inherit; }
.mobile-menu :focus-visible { outline: 2px solid #e8e6e1; outline-offset: 6px; }

.mobile-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  margin-bottom: clamp(48px, 12vh, 96px);
}
/* the wordmark on the sheet: every domino paper, the last one included */
.mobile-menu .wordmark { opacity: 1; }
.mobile-menu .mark i, .mobile-menu .mark i:last-child { background: #e8e6e1; }
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 9px 0 9px 12px;
  border: 0;
  background: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-close:hover { opacity: .7; }
.menu-close .x { font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 1; }

/* the four destinations, in the statement voice */
.mobile-menu-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.mobile-menu-links a {
  display: inline-flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 0 8px;
  font-family: var(--statement);
  font-weight: 700;
  font-size: clamp(40px, 11vw, 64px);
  line-height: .96;
  letter-spacing: -.025em;
  border-bottom: 3px solid transparent;
}
.mobile-menu-links a:hover { opacity: .75; }
.mobile-menu-links a[aria-current="page"] { border-bottom-color: currentColor; }
.mobile-menu-links a .ar {
  width: .5em;
  height: .5em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex: none;
}

/* the foot: the direct email, and the strapline */
.mobile-menu-contact {
  margin-top: auto;
  padding-top: 56px;
  display: grid;
  gap: 18px;
}
.mobile-menu-contact .caption {
  font-family: var(--caption);
  font-weight: 300;
  font-style: italic;
  font-size: 14px;
  letter-spacing: .02em;
  color: #f0cfc0;
}
.mobile-menu-contact .email {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
}
.mobile-menu-contact .email:hover { opacity: .75; }
.mobile-menu-contact .email .ar {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: square;
  stroke-linejoin: miter;
  flex: none;
}

@media (max-width: 900px) {
  .masthead nav { display: none; }
  .menu-button { display: inline-flex; }
  /* the footer keeps the wordmark and Back to top; the strapline goes */
  .site-foot > span.caption, .site-foot > span.mono { display: none; }
  .site-foot { flex-wrap: nowrap; }
  .site-foot .wordmark, .site-foot > a.caption, .site-foot > a.mono { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu .mark i { transition: none; }
}

@media print {
  .menu-button, .mobile-menu { display: none !important; }
}