/* Keep the seven primary links readable at tablet and smaller desktop widths. */
@media (min-width: 821px) and (max-width: 1080px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--rule-dark); padding: 0 17px 12px; z-index: 25; }
  .site-nav.open { display: block; }
  .site-nav ul { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .site-nav li { width: 100%; }
  .site-nav a { display: block; padding: .55rem 0; }
  .publications-page .site-nav { top: 100%; }
}

/* Shared sticky header, 2026-10-30. Loaded by all site sections. */
@media screen {
  :root { --spp-site-header-height: 73px; }
  .site-header { position: sticky; top: 0; z-index: 30; }

  /* Publications already accounts for both of its navigation bars. */
  body:not(.publications-page) main[id],
  body:not(.publications-page) main [id] {
    scroll-margin-top: calc(var(--spp-site-header-height) + 16px);
  }
}

@media screen and (max-width: 1080px) {
  /* Anchor the dropdown to the sticky header, including on short screens. */
  .site-header .site-nav {
    top: 100%;
    max-height: calc(100vh - var(--spp-site-header-height));
    max-height: calc(100dvh - var(--spp-site-header-height));
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}

@media screen and (max-width: 820px) {
  :root { --spp-site-header-height: 69px; }
}