/* Text links in the top menu and the footer, on every page: hover and keyboard focus brighten them to the accent
   colour with a soft glow and an underline that grows in from the left; focus also shows a ring. The brand link gets
   a gentler glow and no underline. Under reduced motion only the colour changes. */
:is(.nav-links, .nav, .foot, footer) a:not(.btn):not(.logo):not(.brand) { position: relative; text-decoration: none; transition: color .2s, text-shadow .2s; }
:is(.nav-links, .nav, .foot, footer) a:not(.btn):not(.logo):not(.brand)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, #8fa3ff, #b06cff); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
:is(.nav-links, .nav, .foot, footer) a:not(.btn):not(.logo):not(.brand):is(:hover, :focus-visible) { color: #a9b8ff; text-shadow: 0 0 12px rgba(143,163,255,.65); }
:is(.nav-links, .nav, .foot, footer) a:not(.btn):not(.logo):not(.brand):is(:hover, :focus-visible)::after { transform: scaleX(1); }
:is(.nav, .foot, footer) :is(.logo, .brand) { transition: filter .2s; }
:is(.nav, .foot, footer) a:is(.logo, .brand):is(:hover, :focus-visible) { filter: drop-shadow(0 0 10px rgba(143,163,255,.55)); }
:is(.nav-links, .nav, .foot, footer) a:focus-visible { outline: 2px solid #c9d4ff; outline-offset: 4px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  :is(.nav-links, .nav, .foot, footer) a, :is(.nav-links, .nav, .foot, footer) a::after { transition: none !important; }
  :is(.nav-links, .nav, .foot, footer) a:not(.btn)::after { display: none; }
  :is(.nav-links, .nav, .foot, footer) a:not(.btn):not(.logo):not(.brand):is(:hover, :focus-visible) { text-shadow: none; }
  :is(.nav, .foot, footer) a:is(.logo, .brand):is(:hover, :focus-visible) { filter: none; }
}

/* Phone menu (js/menu.js): a 44px Menu button in the nav, and a glassy panel under it. It shows where the top menu
   links are hidden (860px and below on the sub pages, 700px and below on the front page). */
.menu-btn { display: none; width: 44px; height: 44px; margin-left: 4px; place-items: center; flex: none; border-radius: 12px; border: 1px solid rgba(160,180,255,.22); background: rgba(16,23,43,.75); color: #e9edf9; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu-btn path { transition: transform .22s, opacity .22s; transform-box: fill-box; transform-origin: center; }
.menu-open .menu-btn .l1 { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn .l2 { opacity: 0; }
.menu-open .menu-btn .l3 { transform: translateY(-5px) rotate(-45deg); }
.menu-btn:focus-visible { outline: 2px solid #c9d4ff; outline-offset: 3px; }
@media (max-width: 860px) { header.nav .menu-btn { display: grid; } }
@media (max-width: 700px) { .nav .menu-btn { display: grid; } }
.menu-open, .menu-open body { overflow: hidden; }
.menu-open .nav { position: relative; z-index: 72; }
.menu-open header.nav { position: sticky; }
.menu-scrim { position: fixed; inset: 0; z-index: 70; background: rgba(5,8,18,.55); opacity: 0; transition: opacity .2s; }
.menu-panel { position: fixed; z-index: 71; top: 76px; left: 16px; right: 16px; max-height: calc(100dvh - 110px); overflow-y: auto; padding: 14px; border-radius: 20px;
  background: rgba(16,23,43,.88); border: 1px solid rgba(160,180,255,.2); box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 60px rgba(107,133,255,.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transform: translateY(-10px); transition: opacity .2s, transform .22s cubic-bezier(.2,.7,.2,1); }
.menu-scrim.show { opacity: 1; }
.menu-panel.show { opacity: 1; transform: none; }
.menu-panel ul { list-style: none; margin: 0; padding: 0; }
.menu-panel li a { position: relative; display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 12px; color: #e9edf9; font-weight: 600; font-size: 17px; text-decoration: none; transition: color .2s, text-shadow .2s, background .2s; }
.menu-panel li a:is(:hover, :focus-visible) { color: #a9b8ff; text-shadow: 0 0 12px rgba(143,163,255,.65); background: rgba(107,133,255,.1); outline: none; }
.menu-panel li a:focus-visible { box-shadow: 0 0 0 2px #c9d4ff inset; }
.menu-panel .menu-open { display: flex; justify-content: center; margin-top: 10px; width: 100%; }
@media (prefers-reduced-motion: reduce) { .menu-scrim, .menu-panel, .menu-btn path { transition: none; } .menu-panel { transform: none; } }