/* Shared, deliberately quiet navigation. */
.site-navigation { position: fixed; top: 10px; right: 10px; z-index: 10; font: 400 15px/1.45 Arial, sans-serif; color: #242424; }
.home .site-navigation { top: clamp(30px, calc(3vw + 10px), 58px); right: clamp(30px, calc(3vw + 10px), 58px); }
.site-menu summary { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; list-style: none; cursor: pointer; border-radius: 50%; background: rgb(255 255 255 / 92%); }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu summary:hover { background: #f0f0f0; }
.site-menu summary:focus-visible, .menu-panel a:focus-visible { outline: 2px solid #555; outline-offset: 3px; }
.menu-lines { display: grid; gap: 5px; width: 20px; }
.menu-lines span { display: block; height: 1px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
.site-menu[open] .menu-lines span:first-child { transform: translateY(6px) rotate(45deg); }
.site-menu[open] .menu-lines span:nth-child(2) { opacity: 0; }
.site-menu[open] .menu-lines span:last-child { transform: translateY(-6px) rotate(-45deg); }
.menu-panel { position: absolute; right: 0; top: 54px; width: min(310px, calc(100vw - 20px)); padding: 8px; border: 1px solid #e8e8e8; border-radius: 12px; background: #fff; box-shadow: 0 10px 35px rgb(0 0 0 / 10%); }
.menu-panel a { display: block; padding: 12px 14px; border-radius: 6px; color: inherit; text-decoration: none; }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: #f3f3f3; }
@media (prefers-reduced-motion: reduce) { .menu-lines span { transition: none; } }

.menu-panel a[href="/subatomic-matter/"],
.menu-panel a[href="/the-atlas-of-advanced-mathematics/"] { color: #0048A0; }