/* Side menu: each item is a bass string of a grand piano, seen from the side (drawn and animated by
   /js/menu-strings.js). Wide screens only; phones keep the plain drop-down menu.
   Hover = key pressed: the damper lifts, the hammer strikes and the string rings. Top (longest) item is A0,
   each item below a half step higher, to E1. Links run longest (top) to shortest (bottom); the script draws
   the case behind them with its right side curving in like a grand piano's bentside. */
@media (min-width: 1041px) {
  .layout { grid-template-columns: minmax(0, 1fr) 248px; }
  .rail nav .well, .rail > .well {
    padding: 4px 0 28px;   /* room for the last hammer, which hangs below its string */
    background:
      radial-gradient(120% 50% at 30% 0%, rgba(255,255,255,.06), transparent 60%),
      linear-gradient(180deg, #0c0908, #050303);
    border: 0; box-shadow: none; overflow: hidden;   /* the script replaces the background with the curved case */
    filter: drop-shadow(8px 10px 9px rgba(0,0,0,.75));
  }
  .rail .well::after { display: none; }
  .rail .well li { position: relative; }
  .rail .well a {
    display: block; position: relative; height: 52px; margin: 0; padding: 9px 0 0 76px; text-align: left;
    background: none; box-shadow: none; opacity: 1; white-space: nowrap; overflow: visible; /* the hammer hangs below the row */
    font: 700 .98rem/1.2 var(--f-tab); letter-spacing: .01em; color: var(--link);   /* the site's red */
    text-shadow: 0 1px 0 #000;
    transition: color .3s ease, text-shadow .3s ease;
  }
  .rail .well a::after { display: none; }
  .rail .well a span { position: relative; z-index: 2; }
  .rail .well a svg.act { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; z-index: 1; pointer-events: none; }
  .rail .well a:hover, .rail .well a:focus-visible, .rail .well a[aria-current="page"] {
    color: var(--gold); text-shadow: 0 0 10px rgba(255, 220, 90, .45), 0 1px 0 #000;   /* heading yellow */
  }
  .rail .well a:focus-visible { outline: none; }
}