/* Focused mobile behavior for the shared primary navigation and show preview. */
.site-header .primary-nav .nav-utility { display:none; }
@media (max-width:760px), (max-width:1000px) and (max-height:600px) {
  .site-header .primary-nav .nav-utility {
    display:inline-flex;
    min-height:44px;
    margin-top:.75rem;
    padding-top:.75rem;
    border-top:1px solid #b1c6d340;
    font-size:1rem;
    letter-spacing:.02em;
    color:#e1bc80;
  }
}
@media (max-width: 760px), (max-width: 1000px) and (max-height: 600px) {
  html.menu-open,
  html.menu-open body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .primary-nav {
    background: #050b13;
    padding-top: max(6rem, calc(env(safe-area-inset-top) + 5.25rem));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-bottom: max(3rem, calc(env(safe-area-inset-bottom) + 1.5rem));
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    overscroll-behavior: contain;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
  }

  .primary-nav.is-open {
    pointer-events: auto;
  }

  .site-brand {
    position: relative;
    z-index: 2;
  }

  .menu-toggle:focus-visible,
  .primary-nav a:focus-visible {
    outline: 2px solid var(--ice);
    outline-offset: 4px;
  }

  /* Vertical gestures keep moving the page around the inline theatre. */
  .explorer-stage.is-active iframe {
    touch-action: pan-y pinch-zoom;
  }
}

/* A sideways phone gets the same readable, scrollable menu. */
@media (min-width: 761px) and (max-width: 1000px) and (max-height: 600px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 72px; }
  .header-season { display: none; }
  .menu-toggle {
    position: relative; z-index: 2; display: inline-flex; align-items: center;
    gap: .7rem; min-width: 72px; min-height: 44px; padding: 0;
    background: transparent; cursor: pointer; font-size: .66rem;
    font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  }
  .menu-toggle i, .menu-toggle i::after { display: block; width: 1.1rem; height: 1px; background: currentColor; }
  .menu-toggle i::after { content: ""; transform: translateY(.35rem); }
  .menu-toggle[aria-expanded="true"] i { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::after { transform: rotate(90deg); }
  .site-header .primary-nav {
    position: fixed; inset: 0; z-index: 1; display: grid; width: 100%; height: 100svh;
    overflow-y: auto; align-content: start; justify-items: start; gap: .4rem;
    opacity: 0; visibility: hidden; transform: translateY(-1rem);
  }
  .site-header .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-header .primary-nav a {
    min-height: 44px; font: 700 1.6rem/1.2 "Open Sans", Arial, sans-serif;
    letter-spacing: -.015em; text-transform: none; color: #f4f6f3;
  }
  .menu-open .site-header { backdrop-filter: none; }
  .home-page.menu-open .site-header { background: #050b13; color: #f4f6f3; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-nav,
  .menu-toggle i,
  .menu-toggle i::after {
    transition: none;
  }
}