/* The phone menu.

   The panel is a sheet that comes down from above the screen and leaves back
   out the same edge - it never slides sideways and it never fades. The header
   is not part of it: the header sits above at z-index 51 and the sheet below
   at 49, so the mark and the control stay exactly where they were and the
   burger turns into the close under the reader's own thumb.

   Because it arrives from the top, a thumb pushes it back the way it came:
   --nav-drag is the live distance under the finger, and the same transform
   carries both the drag and the state.

   The wrapper's own opacity is what site.css used to hide this with; that is
   given back, so the sheet can travel rather than blink. */

[class*='burger-menu_wrapper'] {
  --nav-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --nav-drag: 0px;      /* live offset while a finger is on the sheet */
  --nav-top: 8.4rem;    /* the header's height, measured at runtime */

  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  padding-top: var(--nav-top);
  /* parked above the screen */
  transform: translateY(calc(-100% - var(--nav-drag)));
  touch-action: none;
  transition:
    transform 0.5s var(--nav-ease),
    visibility 0s 0.5s;
  will-change: transform;
}

[class*='burger-menu_wrapper'].is-open {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(calc(var(--nav-drag) * -1));
  transition:
    transform 0.62s var(--nav-ease),
    visibility 0s;
}

/* Under a finger there is no transition - the sheet is simply where the thumb
   put it. */
[class*='burger-menu_nav__'].is-scrollable {
  touch-action: pan-y;
}

[class*='burger-menu_wrapper'].is-dragging {
  transition: none;
}

/* ------------------------------------------------------------------ ground */

/* The sheet's own ground. It travels with the sheet, so it only has to be
   opaque - white, edge to edge, including behind the transparent header. */
[class*='burger-menu_backdrop'] {
  background-color: #fff;
}

/* The header paints over the sheet on its own z-index (50 against 49), which is
   what lets the panel open underneath the mark rather than over it. The sheet
   is a sibling of the header for that to hold: inside it, the header's own
   transform would have made it the containing block. */

/* ------------------------------------------------------------------- items */

[class*='burger-menu_nav__'] {
  gap: 1.4rem;
  padding: 5.2rem 3rem 2rem;
  /* The browser cancels a pointer the moment it decides a gesture is a scroll,
     which would kill the drag. The list gives up panning unless it genuinely
     has somewhere to scroll - nav.js measures that when the sheet opens. */
  touch-action: none;
}

[class*='burger-menu_nav-item'] {
  /* the mask each line rides out of; the padding gives descenders somewhere to
     go, since the mask is otherwise cut at the baseline */
  display: block;
  overflow: hidden;
  padding-bottom: 0.6rem;
  font-size: clamp(2.8rem, 8.8vw, 3.6rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.02em;
}

[class*='burger-menu_nav-item'] > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem;
  color: #151717;
  text-decoration: none;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform 0.34s var(--nav-ease),
    opacity 0.2s linear;
}

[class*='burger-menu_wrapper'].is-open [class*='burger-menu_nav-item'] > a {
  transform: translateY(0);
  opacity: 1;
  /* --i is set per item in nav.js, so the order comes from the markup rather
     than from a hand-written list of delays */
  transition:
    transform 0.62s var(--nav-ease) calc(0.18s + var(--i, 0) * 0.04s),
    opacity 0.3s linear calc(0.18s + var(--i, 0) * 0.04s);
}

/* Where you already are. A rule rather than a colour, so it reads at a glance
   without turning the item into a different kind of thing. */
[class*='burger-menu_nav-item'] > a[aria-current='page']::after {
  content: '';
  width: 2.4rem;
  height: 1px;
  flex: none;
  background: #151717;
  opacity: 0.45;
}

@media (pointer: fine) {
  [class*='burger-menu_nav-item'] > a:hover {
    opacity: 0.55;
  }
}

/* ----------------------------------------------------------------- actions */

[class*='burger-menu_actions'] {
  gap: 1.6rem;
  padding: 0 3rem calc(3.2rem + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  transform: translateY(1.2rem);
  transition:
    transform 0.3s var(--nav-ease),
    opacity 0.2s linear;
}

[class*='burger-menu_wrapper'].is-open [class*='burger-menu_actions'] {
  opacity: 1;
  transform: translateY(0);
  transition:
    transform 0.6s var(--nav-ease) 0.4s,
    opacity 0.34s linear 0.4s;
}

[class*='burger-menu_actions'] > a:first-child {
  width: 100%;
  justify-content: center;
}

/* The number under the button: on a phone, calling is the shortest path to a
   person, and it costs one line. */
.nav_call__Nv1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(21, 23, 23, 0.12);
  color: #151717;
  font-size: 1.5rem;
  line-height: 1.4;
  text-decoration: none;
}

.nav_call__Nv1 span:first-child {
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.45;
}

/* ------------------------------------------------------------------- hints */

/* A short mark at the top edge of the panel: the panel can be pushed away with
   a thumb, and nothing else on the page says so. */
.nav_grab__Nv2 {
  position: absolute;
  top: 0.9rem;
  left: 50%;
  width: 3.6rem;
  height: 3px;
  margin-left: -1.8rem;
  border-radius: 999px;
  background: rgba(21, 23, 23, 0.16);
  opacity: 0;
  transition: opacity 0.3s linear;
  pointer-events: none;
}

[class*='burger-menu_wrapper'].is-open .nav_grab__Nv2 {
  opacity: 1;
  transition-delay: 0.5s;
}

/* Nothing behind the sheet moves - but the scrollbar is not what stops it, so
   it stays exactly where it was. The class is still what header.js reads to
   know the menu is open. */
html.menu-open,
html.menu-open body {
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------- desktop off */

@media (min-width: 768px) {
  [class*='burger-menu_wrapper'] {
    display: none;
  }
}

/* Asked for less motion: the panel is simply there or not. */
@media (prefers-reduced-motion: reduce) {
  [class*='burger-menu_wrapper'],
  [class*='burger-menu_wrapper'].is-open,
  [class*='burger-menu_nav-item'] > a,
  [class*='burger-menu_actions'],
  [class*='burger-menu_wrapper'].is-open [class*='burger-menu_nav-item'] > a,
  [class*='burger-menu_wrapper'].is-open [class*='burger-menu_actions'] {
    transition-duration: 0.12s;
    transition-delay: 0s;
  }
}