/* The masthead on a phone: the wordmark and a menu button, nothing else. The
   sections slide in from the right as a panel of their own.

   Every page carries the same <nav class="nav">, and each used to decide for
   itself what a phone got: the home page and the realm wrapped the sections
   onto a second row, which cost every screen of the Overture 32px of its
   height, and the other five pages hid them outright, which left a phone no
   way off the page but the wordmark. This file is the one answer for all of
   them, so it is linked after each page's own styles and outranks them.

   The panel is .nav-links itself, not a copy, so every handler a page has
   bound to its links -- the home page's in-page scrolls above all -- still
   fires. */

.nav-burger, .nav-scrim, .nav-drawer-only { display: none; }

@media (max-width: 820px) {
  /* A fixed element inside a backdrop-filter is positioned against the filter's
     box, not the screen, so the panel would have been exactly as tall as the
     masthead. On a phone the masthead is near-opaque instead of blurred. */
  .nav {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding: 10px 8px 10px 20px !important;   /* the brand on the content's 20px gutter */
    row-gap: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(6, 5, 10, 0.94) !important;
  }
  .nav .nav-brand { flex: 0 1 auto !important; text-align: left !important; padding: 0 !important; }
  .nav .nav-sportin, .nav .nav-right, .nav .beta-tag { display: none !important; }

  .nav .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px; height: 44px; margin: 0; padding: 0;
    background: none; border: 0; cursor: pointer; position: relative; z-index: 3;
    -webkit-tap-highlight-color: transparent;
  }
  .nav .nav-burger span {
    display: block; width: 22px; height: 1.5px; background: var(--gold-2, #E9CE85);
    transition: transform 320ms cubic-bezier(.165,.84,.44,1), opacity 200ms ease;
  }
  .nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  .nav .nav-burger:focus-visible { outline: 1px solid var(--gold-3, #C9A24B); outline-offset: -4px; }

  .nav .nav-links {
    display: flex !important; flex-direction: column !important; justify-content: flex-start !important;
    align-items: stretch !important; flex: none !important; gap: 0 !important;
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
    width: min(320px, 86vw); margin: 0;
    padding: calc(var(--nav-h, 64px) + 20px) 28px calc(28px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, #0B0A0F 0%, #07060A 100%);
    border-left: 1px solid rgba(201, 162, 75, 0.35);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
    font-size: 13px !important; letter-spacing: 0.2em !important;
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); visibility: hidden;
    transition: transform 460ms cubic-bezier(.165,.84,.44,1), visibility 0s linear 460ms;
  }
  .nav.menu-open .nav-links {
    transform: none; visibility: visible;
    transition: transform 460ms cubic-bezier(.165,.84,.44,1), visibility 0s;
  }
  .nav .nav-links a {
    display: block; padding: 17px 2px !important;
    border-bottom: 1px solid rgba(201, 162, 75, 0.14) !important;
  }
  .nav .nav-links a.current { color: var(--gold-2, #E9CE85); border-bottom-color: rgba(201, 162, 75, 0.55) !important; }
  .nav .nav-links a:focus { outline: none; }
  .nav .nav-links a:focus-visible { outline: 1px solid var(--gold-3, #C9A24B); outline-offset: 2px; }
  /* the rows are already taller than a finger, so the invisible 44px band the
     inline links carry is not needed here */
  .nav .nav-links a::after { display: none; }

  .nav .nav-links .nav-drawer-only {
    display: block; margin-top: auto; padding: 22px 2px 0 !important; border: 0 !important;
    font-size: 11px; color: rgba(201, 162, 75, 0.7);
  }

  .nav .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 1;
    background: rgba(3, 3, 5, 0.62); opacity: 0; visibility: hidden;
    transition: opacity 380ms ease, visibility 0s linear 380ms;
  }
  .nav.menu-open .nav-scrim { opacity: 1; visibility: visible; transition: opacity 380ms ease, visibility 0s; }

  /* above the deck's bar and dots, and above anything a page floats */
  .nav.menu-open { z-index: 1000 !important; }
}