/* =====================================================================
   BRIAN SCHWEINHAGEN — immersive mobile menu
   Toggle glyph is brand iconography: the logo's oval badge holding three
   forward-slanted stride marks (the speed lines behind the runner).
   Self-constructed by menu.js from the existing <nav>, so every page
   shares one source of truth.
   ===================================================================== */

.menu-toggle{
  display:none;
  position:relative;width:52px;height:52px;flex:none;
  border:0;padding:0;cursor:pointer;border-radius:14px;
  background:linear-gradient(180deg,rgba(246,246,246,.09),rgba(246,246,246,.03));
  box-shadow:inset 0 0 0 1px var(--hair),inset 0 1px 0 rgba(255,255,255,.6);
  transition:box-shadow .25s var(--ease),background .25s var(--ease);
}
.menu-toggle:hover{box-shadow:inset 0 0 0 1px rgba(227,127,28,.5),inset 0 1px 0 rgba(255,255,255,.8)}
@media (max-width:900px){ .menu-toggle{display:grid;place-items:center} }

.menu-toggle svg{width:30px;height:30px;overflow:visible}
.menu-toggle .ov{fill:none;stroke:var(--brass);stroke-width:1.6;opacity:.85;
  transition:transform .5s var(--ease),opacity .35s}
.menu-toggle .st{stroke:var(--text);stroke-width:2.2;stroke-linecap:round;
  transform-origin:center;transition:transform .45s var(--ease),opacity .3s var(--ease)}
.menu-toggle .st1{transform:translateY(-6px)}
.menu-toggle .st3{transform:translateY(6px)}
/* open state: stride marks converge into a cross, oval spins away */
body.menu-open .menu-toggle .ov{transform:rotate(90deg) scale(.82);opacity:.35}
body.menu-open .menu-toggle .st1{transform:translateY(0) rotate(45deg) scaleX(1.1)}
body.menu-open .menu-toggle .st2{opacity:0;transform:scaleX(.2)}
body.menu-open .menu-toggle .st3{transform:translateY(0) rotate(-45deg) scaleX(1.1)}

/* ---------- overlay ---------- */
.menu-overlay{
  position:fixed;inset:0;z-index:90;
  display:flex;flex-direction:column;
  background:rgba(30,34,37,.90);
  backdrop-filter:blur(26px) saturate(1.15);-webkit-backdrop-filter:blur(26px) saturate(1.15);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .45s var(--ease),visibility .45s;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-overlay[data-open="true"]{opacity:1;visibility:visible;pointer-events:auto}

/* giant slow-moving brand mark behind everything */
.menu-mark{
  position:absolute;left:50%;top:52%;width:min(126vw,880px);
  transform:translate(-50%,-50%);opacity:.055;pointer-events:none;
  filter:saturate(.2);animation:menuMark 46s var(--ease) infinite alternate;
}
@keyframes menuMark{
  0%{transform:translate(-52%,-52%) rotate(-7deg) scale(1)}
  100%{transform:translate(-46%,-46%) rotate(6deg) scale(1.13)}
}

.menu-inner{
  position:relative;z-index:2;display:flex;flex-direction:column;
  min-height:100%;padding:1.1rem 1.5rem calc(2rem + env(safe-area-inset-bottom));
  width:min(100%,var(--wrap));margin-inline:auto;
}
.menu-top{display:flex;align-items:center;justify-content:space-between;min-height:68px;gap:1rem}
.menu-top img{height:52px;width:auto;display:block}

.menu-list{list-style:none;margin:auto 0;padding:2rem 0 0;display:flex;flex-direction:column;gap:.1rem}
/* Resting state is VISIBLE. The hidden state applies only while the overlay is
   closed, so if the animation never runs the menu is still readable — content
   must never depend on an animation to become visible. */
.menu-overlay[data-open="false"] .menu-list li{opacity:0;transform:translateY(26px)}
.menu-overlay[data-open="true"] .menu-list li{
  animation:menuIn .62s var(--ease) both;
  animation-delay:calc(var(--i) * 70ms);      /* staggered 70ms apart */
}
@keyframes menuIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.menu-list a{
  position:relative;display:flex;align-items:baseline;gap:1rem;
  padding:.62rem 0;text-decoration:none;color:var(--text);
  font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(2.1rem,10.5vw,3.5rem);min-height:44px;
}
.menu-list .idx{
  font-family:var(--data);font-size:.85rem;font-weight:700;letter-spacing:.16em;
  color:var(--brass-lift);flex:none;line-height:1.5;
}
/* drawing underline */
.menu-list a::after{
  content:'';position:absolute;left:0;bottom:.22rem;height:2px;width:100%;
  background:linear-gradient(90deg,var(--brass),var(--brass-lift));
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.menu-list a:hover::after,.menu-list a:focus-visible::after{transform:scaleX(1)}

.menu-foot{margin-top:auto;padding-top:2rem;display:flex;flex-direction:column;gap:1.2rem;
  transition:opacity .5s var(--ease) .42s}
.menu-overlay[data-open="false"] .menu-foot{opacity:0}
.menu-overlay[data-open="true"] .menu-foot{opacity:1}
.menu-foot .btn{width:100%}
.menu-socials{display:flex;gap:.6rem;flex-wrap:wrap}
.menu-socials a{
  min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 1rem;border-radius:12px;text-decoration:none;
  font-family:var(--data);font-size:.85rem;font-weight:700;letter-spacing:.08em;
  color:var(--text-soft);background:rgba(246,246,246,.06);
  box-shadow:inset 0 0 0 1px var(--hair-soft);line-height:1.4;
}
.menu-socials a:hover{color:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
.menu-tag{font-family:var(--data);font-size:.84rem;letter-spacing:.1em;color:var(--text-muted);
  text-transform:uppercase;line-height:1.6}

body.menu-open{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  .menu-list li{opacity:1;transform:none;animation:none!important}
  .menu-foot{opacity:1;transition:none}
  .menu-mark{animation:none}
}
body.motion-off .menu-list li{opacity:1;transform:none;animation:none!important}
body.motion-off .menu-foot{opacity:1}

/* typographic brand inside the overlay (this site has no logo image) */
.menu-brand{font-family:var(--display);font-weight:700;font-size:1.25rem;
  letter-spacing:-.02em;color:var(--text);line-height:1.2}