/* ==========================================================================
   ZONE 2 RUNNERS CLUB - the menu button and full-screen menu, on every page.
   The button is the "dock": a frosted black square, top centre, holding the
   platinum mark. On the home page it only appears once the photo logo has
   been scrolled up into it (index.html script). Every other page carries it
   with data-static, so it's there from the start (assets/nav.js).
   Literal values so pages without site.css (track, gallery) can use it too.
   ========================================================================== */
.dock { position: fixed; z-index: 70; top: 14px; left: 50%; width: 56px; height: 56px; margin-left: -28px;
        padding: 0; border: 0; background: none; cursor: pointer;
        visibility: hidden; transition: visibility 0s linear 300ms; }
.dock::before { content: ""; position: absolute; inset: 0; border-radius: 6px;
                background: rgba(16,17,20,0.62); border: 1px solid rgba(237,230,218,0.14);
                -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
                box-shadow: 0 6px 24px rgba(0,0,0,0.28);
                opacity: 0; transform: scale(0.6); transition: opacity 280ms ease, transform 420ms cubic-bezier(.2,.8,.2,1); }
.dock-mark { position: absolute; left: 50%; top: 50%; width: auto; height: 42px; max-width: none; transform: translate(-45.9%, -50%);
             opacity: 0; }
.is-docked .dock, .menu-open .dock, .dock[data-static] { visibility: visible; transition: none; }
.is-docked .dock::before, .menu-open .dock::before { opacity: 1; transform: none; transition-delay: 160ms, 120ms; }
.dock[data-static]::before { opacity: 1; transform: none; transition: border-color 200ms ease; }
.is-docked .dock-mark, .menu-open .dock-mark, .dock[data-static] .dock-mark { opacity: 1; transition: none; }
.menu-open .dock::before, .dock[data-static]:hover::before { border-color: rgba(237,230,218,0.35); }
.dock:focus-visible { outline: 2px solid #6E8BA4; outline-offset: 4px; }

/* No bar on any page: the square floats over the page, which runs to the top.
   Pages that open with text give it room themselves (about 100px). */

.menu { position: fixed; inset: 0; z-index: 60; background: #101114; display: flex; flex-direction: column;
        padding: 96px 24px calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.menu[hidden] { display: none; }
.menu ul { list-style: none; width: 100%; max-width: 1200px; margin: auto auto 0; padding: 0; }
.menu li + li { border-top: 1px solid rgba(237,230,218,0.14); }
.menu a { display: block; padding: 16px 0; text-align: center; font-family: 'TT Prosto Sans', 'TT Prosto Sans Trial', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
          font-weight: 700; font-size: clamp(22px, 5.6vw, 32px); line-height: 1.1;
          text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; color: #EDE6DA; transition: color 200ms ease; }
.menu a:hover, .menu a[aria-current] { color: #6E8BA4; }
body.menu-open { overflow: hidden; }

/* The socials along the bottom of the menu: icon with its label centred
   underneath, as in the footer. All four on one row, small enough to fit a phone. */
.menu-icons { width: 100%; max-width: 1200px; margin: 0 auto; padding-top: 16px; border-top: 1px solid rgba(237,230,218,0.14);
              display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.menu-icons a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 4px;
                color: rgba(237,230,218,0.6); text-decoration: none; transition: color 200ms ease; }
.menu-icons svg { width: 21px; height: 21px; fill: currentColor; }
.menu-icons svg.stroked { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.menu-icons .icon-label { font-family: 'TT Prosto Sans', 'TT Prosto Sans Trial', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
                          font-size: 8px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
                          white-space: nowrap; color: rgba(237,230,218,0.52); transition: color 200ms ease; }
.menu-icons a:hover { color: #EDE6DA; }
.menu-icons a:hover .icon-label { color: #EDE6DA; }

/* The hoodie drop, in the space above the links (assets/drop.js). The hero
   photo runs edge to edge from the top of the menu down to the links, under
   the dock's logo square, with the words sat on the bottom of the photo. */
.menu-drop { position: relative; flex: 1 0 auto; min-height: 280px; width: calc(100% + 48px); margin: -96px -24px 0;
             display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; text-align: center;
             font-family: 'TT Prosto Sans', 'TT Prosto Sans Trial', 'Futura', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif; color: #EDE6DA; }
.menu-drop + ul { margin-top: 0; }
.md-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.menu-drop::after { content: ""; position: absolute; inset: 0; pointer-events: none;
                    background: linear-gradient(180deg, rgba(16,17,20,0.45) 0%, rgba(16,17,20,0) 22%, rgba(16,17,20,0.35) 40%, rgba(16,17,20,0.88) 75%, #101114 100%); }
.md-copy { position: relative; z-index: 1; padding: 120px 24px 20px; }
.md-kicker { margin: 0 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: #6E8BA4; }
.md-title { margin: 0; font-weight: 700; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.3em;
             color: rgba(237,230,218,0.6); }
.md-date { margin: 6px 0 0; font-size: 9px; font-weight: 700; letter-spacing: 0.25em; color: rgba(237,230,218,0.4); }

/* Desktop: not full screen - the menu drops down as a box from the square,
   the phone menu at a slightly bigger size, over a dimmed page. Click
   anywhere outside it to close (nav.js / index.html). */
@media (min-width: 900px) {
  .menu { inset: auto; top: 82px; left: 50%; width: 440px; max-height: calc(100vh - 100px); margin-left: -220px;
          padding: 0 28px 22px; border: 1px solid rgba(237,230,218,0.14); border-radius: 10px;
          box-shadow: 0 24px 64px rgba(0,0,0,0.5); animation: menu-in 260ms cubic-bezier(.2,.8,.2,1); }
  .menu-drop { flex: none; height: 300px; min-height: 0; width: calc(100% + 56px); margin: 0 -28px; }
  .md-copy { padding: 0 28px 18px; }
  .menu a { font-size: 26px; padding: 15px 0; }
  .menu-icons { padding-top: 18px; }
  .menu-icons .icon-label { font-size: 9px; }
  body.menu-open::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(10,11,13,0.55);
                           -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .menu { animation: none; } }