/* Phone menu (#mobile-menu, the template's LayoutMenu): a calmer layout in the site's own terms
   (the user's call; the template's was a black screen cut in four by cross lines, a "Navigation"
   label, links at 30% and a contact column). Here: the paper (or the inverted night), the five
   sections set large down the left on the site's side margin, each on a hairline rule with a
   small index, the current one in cobalt; the email and the note sit at the foot. On opening the
   rules draw across and the names rise in one after another. Phones and tablets only. */
@media (max-width: 1023px) {
  html #mobile-menu {
    background: var(--c-light-primary);
    color: var(--c-dark-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--header-height, 3.5rem) + 1.75rem) var(--padding-sm) calc(1.5rem + env(safe-area-inset-bottom));
    box-sizing: border-box;
    counter-reset: pw-menu;
  }
  html #mobile-menu::before, html #mobile-menu::after { display: none; }
  html #mobile-menu .nav-wrap { display: block; padding: 0; }
  html #mobile-menu .menu-caption { display: none; }
  html #mobile-menu .menu-nav { margin: 0; padding: 0; display: flex; flex-direction: column; }
  html #mobile-menu .menu-link {
    counter-increment: pw-menu;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0;
    padding: 1.05rem 0 .95rem;
    border-top: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    font-family: var(--font-helvetica);
    font-size: clamp(2.25rem, 11vw, 3rem);
    line-height: 1;
    letter-spacing: -.045em;
    opacity: 1;
    overflow: hidden;
    position: relative;
    animation: pw-menu-in .8s cubic-bezier(.25, 1, .5, 1) both;
  }
  html #mobile-menu .menu-link:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
  /* the small index on the right, in the body text size */
  html #mobile-menu .menu-link::before {
    content: counter(pw-menu, decimal-leading-zero);
    position: static;
    order: 2;
    width: auto;
    height: auto;
    background: none;
    opacity: .45;
    font-size: .8125rem;
    letter-spacing: 0;
    transition: none;
  }
  html #mobile-menu .menu-link.active { color: #1238e8; }
  html[data-theme=dark] #mobile-menu .menu-link.active { color: #6c9bff; }
  html #mobile-menu .menu-link.active::before { opacity: .8; }
  html #mobile-menu .menu-link:nth-child(1) { animation-delay: .06s; }
  html #mobile-menu .menu-link:nth-child(2) { animation-delay: .12s; }
  html #mobile-menu .menu-link:nth-child(3) { animation-delay: .18s; }
  html #mobile-menu .menu-link:nth-child(4) { animation-delay: .24s; }
  html #mobile-menu .menu-link:nth-child(5) { animation-delay: .3s; }

  /* foot: the contact details, small, left aligned, two columns */
  html #mobile-menu .contacts-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    justify-content: start;
    animation: pw-menu-fade .7s .4s ease both;
  }
  html #mobile-menu .contact-item { text-align: left; margin: 0; }
  html #mobile-menu .contact-item > span { display: block; opacity: .45; font-size: .8125rem; }
  html #mobile-menu .contact-link { margin: .3rem 0 0; max-width: none; font-size: .9375rem; line-height: 1.3; }
  html #mobile-menu .menu-icon { display: none; }
}
@keyframes pw-menu-in {
  from { opacity: 0; transform: translateY(1.2rem); border-top-color: transparent; }
  to { opacity: 1; transform: none; }
}
@keyframes pw-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html #mobile-menu .menu-link, html #mobile-menu .contacts-wrap { animation: none; }
}