/* The shared menu (#2125): the desktop bar's current page, the phone burger, and the full-screen
   card menu that site-menu.js builds (design A from #2127). Colours, sizes and motion from the tokens. */
nav .links a[aria-current="page"] { background: var(--lx); }
.menu-btn { display: none; width: 40px; height: 40px; padding: 0; border: var(--bw-card) solid var(--line); border-radius: 50%; background: var(--bg); box-shadow: var(--shadow-small);
  place-content: center; gap: 4px; }
.menu-btn i { display: block; width: 18px; height: 2.5px; border-radius: 2px; background: var(--text); }
.menu-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.menu-btn:focus-visible { outline: 3px solid var(--pop); outline-offset: 2px; }
@media (max-width: 760px) {
  nav .links > a, nav .links > .theme-switch { display: none; }
  .menu-btn { display: grid; }
}
html.sm-lock { overflow: hidden; }

.site-menu { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; padding: 14px 16px 18px; overflow-y: auto; color: var(--text);
  background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(6px); opacity: 0; transition: opacity .35s ease; }
.site-menu[hidden] { display: none; }
.site-menu.open { opacity: 1; }
.sm-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.sm-title { font-weight: 800; font-size: 30px; letter-spacing: -.02em; }
/* #2128: the X looks exactly like the burger and site-menu.js places it on the burger's measured spot */
.sm-top { min-height: 40px; }
.sm-close { position: absolute; z-index: 1; width: 40px; height: 40px; padding: 0; border: var(--bw-card) solid var(--line); border-radius: 50%; background: var(--bg); box-shadow: var(--shadow-small); display: grid; place-content: center; }
.sm-close svg { width: 18px; height: 18px; stroke: var(--text); stroke-width: 3; stroke-linecap: round; }
.sm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sm-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--text); text-decoration: none;
  border: var(--bw-card) solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 12px 10px 14px; background: var(--tint);
  opacity: 0; transform: translateY(26px) scale(.9) rotate(var(--tilt)); transition: transform var(--ease-press), opacity .3s, box-shadow .2s; }
.site-menu.open .sm-card { opacity: 1; transform: rotate(var(--rest)); transition-delay: calc(var(--i) * 70ms + 120ms); }
.sm-card:active { transform: translate(2px, 2px) rotate(var(--rest)); box-shadow: none; transition-delay: 0s; }
.sm-card:focus-visible { outline: 3px solid var(--pop); outline-offset: 3px; }
.sm-pic { width: 100%; height: 92px; margin-bottom: 6px; }
.sm-card b { font-size: 22px; line-height: 1.1; }
.sm-card small { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.sm-go { position: absolute; right: 10px; top: 10px; font-weight: 800; background: var(--pop); color: var(--on-pop); border: var(--bw-card) solid var(--line); border-radius: 8px; padding: 0 8px; transform: scale(0) rotate(-12deg); }
.sm-foot { margin-top: auto; padding-top: var(--s3); display: flex; align-items: center; justify-content: space-between; gap: var(--s2); opacity: 0; transition: opacity .3s .5s; }
.site-menu.open .sm-foot { opacity: 1; }
.sm-socials { display: flex; gap: 6px; }
.sm-socials a { width: 38px; height: 38px; border: var(--bw-card) solid var(--line); border-radius: var(--r-sm); background: var(--card); box-shadow: var(--shadow-small); display: grid; place-content: center; color: var(--text); }
.sm-socials svg { width: 18px; height: 18px; }
.sm-socials .f-yt, .sm-socials .f-in, .sm-socials .f-rdt { fill: currentColor; } .sm-socials .f-white { fill: var(--card); }
.sm-theme { flex: none; }
/* The drawings: the illustration tokens keep their light-mode colours in dark mode too (#2129) */
.sm-pic .o { stroke: var(--ill-ink); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.sm-pic .f-card { fill: var(--ill-card); } .sm-pic .f-pop { fill: var(--ill-pop); } .sm-pic .f-lx { fill: var(--ill-lx); } .sm-pic .f-li { fill: var(--ill-li); }
.sm-pic .f-rd { fill: var(--ill-rd); } .sm-pic .f-go { fill: var(--ill-go); } .sm-pic .f-ink { fill: var(--ill-ink); }
.sm-pic text { font-family: var(--mono); }

/* Leaving: the picked card stamps GO!, the others drop away, then the whole menu fades */
.site-menu.open.leaving { opacity: 0; transition: opacity .55s ease .45s; }
.site-menu.leaving .sm-card { opacity: 0; transform: translateY(30px) scale(.92) rotate(var(--tilt)); transition: transform .5s ease-in, opacity .4s; transition-delay: calc(var(--i) * 40ms); }
.site-menu.leaving .sm-card.picked { opacity: 1; transform: scale(1.06) rotate(0deg); box-shadow: var(--shadow-lifted); transition: transform var(--ease-pop), box-shadow .2s; }
.sm-card.picked .sm-go { transform: scale(1) rotate(-8deg); transition: transform var(--ease-pop) .05s; }
.site-menu.leaving .sm-foot { opacity: 0; transition: opacity .2s; }

@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu * { transition-duration: .01s !important; transition-delay: 0s !important; }
  .site-menu.open, .site-menu.open.leaving { transition: opacity .2s !important; }
  .sm-card { transform: none !important; }
}