/* Header and menus — shared by every page including the homepage.
   Menus open as an extra line of text under the nav and push the page down: no boxes, nothing overlaps. */
.top { padding: 21px 21px 0; }
.sig { display: inline-block; }
.sig img { width: 160px; height: auto; display: block; opacity: .85; transition: opacity .2s; }
.sig:hover img { opacity: 1; }

.nav { margin-top: 20px; font-family: Helvetica, Arial, sans-serif; font-size: 8.4px; line-height: 1.8; color: #6c6c6c; }
.nav-row, .subrow-in { display: flex; flex-wrap: wrap; gap: 0 16px; }
.nav a { color: #6c6c6c; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a:focus-visible { color: red; outline: none; }
.nav a.current { color: red; }
.nav .toggle[aria-expanded="true"] { color: #1a1a1a; }
.nav .toggle.current[aria-expanded="true"] { color: red; }

.subrow { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s ease, opacity .18s ease; }
.subrow.open { grid-template-rows: 1fr; opacity: 1; }
.subrow-in { min-height: 0; overflow: hidden; gap: 0 14px; }
.subrow .subrow-in a { color: #8c8c8c; }
.subrow .subrow-in a:hover, .subrow .subrow-in a:focus-visible, .subrow .subrow-in a.current { color: red; }
.subrow .subrow-in a.toggle[aria-expanded="true"] { color: #1a1a1a; }

@media (max-width: 700px) {
  .top { padding: 16px 16px 0; }
  .sig img { width: 120px; }
  .nav { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { .subrow { transition: none; } }