/* The site header and top navigation, shared by the full pages and the
   Timeline (a separate Next.js build). Kept free of global rules so it can sit
   on top of any page. */
:root { --site-header-h: 56px; }
.site-header, .site-header * { box-sizing: border-box; }
.site-header {
  --ink: #1c1c1c;
  --soft: #f5f5f3;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --header-h: var(--site-header-h);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.site-header ul { margin: 0; padding: 0; list-style: none; }
.site-header a { color: inherit; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  height: var(--header-h);
  padding: 0 24px;
  background: #fff;
  transition: box-shadow .2s;
}
.site-header.scrolled { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); }
.logo { display: flex; flex: none; }
.logo img { width: 32px; height: 32px; display: block; }
.site-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item > a, .more-btn {
  display: block;
  padding: 16px 10px;
  color: var(--ink);
  font: 400 18.67px/24px var(--font);
  text-decoration: none;
  white-space: nowrap;
}
.nav-item.current > a, .nav-more.current > .more-btn { font-weight: 700; }
.nav-item > a:hover, .more-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-header button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.sub-toggle { display: flex; align-items: center; padding: 8px 6px 8px 0; color: var(--ink); }
.more-btn { display: flex; align-items: center; gap: 6px; }
.chev { display: block; }

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  min-width: 240px;
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}
.nav-more .submenu { left: auto; right: 0; min-width: 280px; }
.has-menu:hover > .submenu,
.has-menu:focus-within > .submenu,
.has-menu.open > .submenu { display: block; }
.submenu a { display: block; padding: 7px 20px; font-size: 16px; line-height: 22px; font-weight: 300; text-decoration: none; white-space: nowrap; }
.submenu a:hover { background: var(--soft); }
.more-group > .more-head { font-weight: 700; }
.more-group ul { margin: 0 0 6px; padding: 0; list-style: none; }
.more-group ul a { padding-left: 34px; }

/* Wide screens show every section; narrower ones fold the last four into More. */
.nav-more { display: none; }
@media (max-width: 1399px) {
  .nav-item.in-more { display: none; }
  .nav-more { display: flex; }
}

.menu-toggle { display: none; }
@media (max-width: 899px) {
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    display: block; width: 22px; height: 2px; background: var(--ink); position: relative;
  }
  .menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
  .menu-toggle span::before { top: -7px; }
  .menu-toggle span::after { top: 7px; }
  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    overflow-y: auto;
    background: #fff;
    padding: 8px 0 40px;
  }
  .site-header.menu-open .site-nav { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item, .nav-item.in-more { display: flex; flex-wrap: wrap; }
  .nav-more { display: none !important; }
  .nav-item > a { flex: 1; padding: 12px 24px; }
  .sub-toggle { padding: 12px 24px; }
  .submenu { position: static; display: none; width: 100%; max-height: none; box-shadow: none; padding: 0 0 8px; }
  .has-menu:hover > .submenu, .has-menu:focus-within > .submenu { display: none; }
  .has-menu.open > .submenu { display: block; }
  .submenu a { padding-left: 44px; }
}