/* Shared, deliberately quiet navigation. */

/* Sub-page logo. The home page carries its own, larger, placement; here the
   mark sits in the same 10px..54px band the menu button occupies on the
   opposite corner, so the two read as one header line. Capping the height
   rather than the width is what holds that alignment: the lockup is nearly
   3:1, so a width cap lets it outgrow the band. */
.site-logo { position: fixed; top: 10px; left: 16px; z-index: 10; display: block; line-height: 0; }
.site-logo img { display: block; height: clamp(34px, 3.4vw, 44px); width: auto; }
.site-logo:focus-visible { outline: 2px solid #555; outline-offset: 4px; border-radius: 4px; }
.home .site-logo { display: none; }

.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; }

.site-footer {
  width: 100%;
  padding: 8px 16px 12px;
  color: #777;
  font: 400 11px/1.4 Arial, sans-serif;
  text-align: center;
}
.site-footer small { font-size: inherit; }
.home .site-footer,
.taoam-page .site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
}