/* The site header and top navigation, shared by the map, the full pages and the
   Timeline (a separate Next.js build). Mobile first: the base rules are the
   phone menu; wider screens add the inline navigation. No global rules, so it
   can sit on top of any page. */

:root { --site-header-h: 56px; --mini-footer-h: calc(66px + env(safe-area-inset-bottom)); }

.site-header, .site-header * { box-sizing: border-box; }
.site-header {
  --ink: #1c1c1c;
  --soft: #f5f5f3;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  height: var(--site-header-h);
  padding: 0 8px 0 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(8px, env(safe-area-inset-right));
  background: #fff;
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  transition: box-shadow .2s;
}
.site-header.fixed { position: fixed; left: 0; right: 0; }
.site-header.scrolled { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08); }
.site-header.with-title-bar { box-shadow: none; }   /* the title bar below carries the edge */
.site-header ul { margin: 0; padding: 0; list-style: none; }
.site-header a { color: inherit; }
.site-header button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.site-header .logo { display: flex; flex: none; padding: 6px; margin-left: -6px; }
.site-header .logo img { width: 32px; height: 32px; display: block; }

/* ---- phone: a menu button opens the whole hierarchy ---- */
.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; position: relative; width: 22px; height: 2px; background: var(--ink); transition: transform .2s, background .2s;
}
.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-header.menu-open .menu-toggle span { background: transparent; }
.site-header.menu-open .menu-toggle span::before { transform: translateY(7px) rotate(45deg); }
.site-header.menu-open .menu-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: var(--site-header-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 0 calc(40px + env(safe-area-inset-bottom));
  background: #fff;
}
.site-header.menu-open .site-nav { display: block; }
.nav-list { display: flex; flex-direction: column; }
.nav-item { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
.nav-item > a, .more-btn {
  display: block;
  padding: 12px 24px;
  color: var(--ink);
  font: 400 18.67px/24px var(--font);
  text-decoration: none;
  white-space: nowrap;
}
.nav-item > a { flex: 1; }
.nav-item.current > a, .nav-more.current > .more-btn { font-weight: 700; }
.sub-toggle { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; color: var(--ink); }
.chev { display: block; transition: transform .2s; }
.has-menu.open > .sub-toggle .chev { transform: rotate(180deg); }
.nav-more { display: none; }
.more-btn { display: flex; align-items: center; gap: 6px; }

.submenu { display: none; width: 100%; margin: 0; padding: 0 0 8px; list-style: none; background: #fff; }
.has-menu.open > .submenu { display: block; }
.submenu a { display: block; padding: 10px 24px 10px 44px; font: 300 16px/22px var(--font); text-decoration: none; }
.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; }

/* ---- 900 px and up: inline navigation with dropdowns ---- */
@media (min-width: 900px) {
  .site-header { padding: 0 24px; }
  .menu-toggle { display: none; }
  .site-nav { position: static; display: block; margin-left: auto; padding: 0; overflow: visible; background: none; }
  .nav-list { flex-direction: row; align-items: center; gap: 4px; }
  .nav-item { flex-wrap: nowrap; }
  .nav-item > a, .more-btn { flex: none; padding: 16px 10px; }
  .nav-item > a:hover, .more-btn:hover { text-decoration: underline; text-underline-offset: 4px; }
  .sub-toggle { min-width: 24px; min-height: 32px; padding: 8px 4px 8px 0; }   /* big enough to tap on an iPad (review of 21 Oct 2026) */
  .has-menu.open > .sub-toggle .chev { transform: none; }
  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    width: auto;
    min-width: 240px;
    max-height: 70vh;
    max-height: 70dvh;
    overflow-y: auto;
    padding: 8px 0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  }
  .has-menu:hover > .submenu, .has-menu:focus-within > .submenu { display: block; }
  .submenu a { padding: 7px 20px; font-size: 16px; white-space: nowrap; }
  .nav-more .submenu { left: auto; right: 0; min-width: 280px; }
  .more-group ul a { padding-left: 34px; }
  /* Up to 1399 px the last four sections fold into More. */
  .nav-item.in-more { display: none; }
  .nav-more { display: flex; }
}
@media (min-width: 1400px) {
  .nav-item.in-more { display: flex; }
  .nav-more { display: none; }
}

/* ---- search (Mickey, 20 Oct 2026): a magnifier after About; a click opens a line to type
   on, which pushes the menu labels left. Phones: left of the menu button. ---- */
.site-search { display: flex; align-items: center; order: 1; margin-left: auto; }
.menu-toggle { order: 2; margin-left: 0; }
.site-search-input {
  width: 0; min-width: 0; padding: 4px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: transparent; color: var(--ink); font: 300 18.67px/24px var(--font); opacity: 0; outline: 0;
  -webkit-appearance: none; appearance: none;
  transition: width .32s cubic-bezier(.2, .7, .2, 1), padding .32s, opacity .2s, border-color .2s;
}
.site-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search-input::placeholder { color: #8a8a8a; }
.site-search.open .site-search-input { width: var(--search-w, min(220px, calc(100vw - 190px))); padding: 4px 2px; opacity: 1; border-bottom-color: var(--ink); }
.search-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--ink); }
.site-nav { transition: opacity .2s; }
.site-header.search-crowded .site-nav { opacity: 0; pointer-events: none; }
@media (min-width: 900px) {
  .site-search { margin-left: 2px; }
  .site-search.open .site-search-input { width: var(--search-w, 240px); }
}
@media (prefers-reduced-motion: reduce) { .site-search-input, .site-nav { transition: none; } }

/* ---- the short footer: icons and copyright, fixed at the bottom of every page ---- */
.mini-footer, .mini-footer * { box-sizing: border-box; }
.mini-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: var(--mini-footer-h);
  padding: 0 6px env(safe-area-inset-bottom);
  background: #fff;
  border-top: 1px solid #e6e6e6;
  color: #1c1c1c;
  font: 300 11.5px/16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.mini-footer ul { display: flex; justify-content: center; margin: 0; padding: 0; list-style: none; }
.mini-footer a { display: flex; align-items: center; justify-content: center; width: min(44px, calc((100vw - 12px) / 7)); height: 44px; }
.mini-footer img { display: block; width: 20px; height: 20px; }
.mini-footer li:last-child img { width: 26px; height: 26px; }
.mini-footer p { margin: 0 0 4px; text-align: center; }
@media (min-width: 768px) {
  :root { --mini-footer-h: calc(48px + env(safe-area-inset-bottom)); }
  .mini-footer { flex-direction: row; justify-content: space-between; padding: 0 24px env(safe-area-inset-bottom); font-size: 12px; }
  .mini-footer ul { gap: 4px; margin-left: -6px; }
  .mini-footer a { width: 32px; height: 40px; }
  .mini-footer p { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header, .chev, .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { transition: none; }
}

/* ---- animated transitions (Mickey, 20 Oct 2026: "animated transitions everywhere") ----
   Between pages the browser cross-fades (View Transitions; Safari 18.2+, Chrome 126+,
   others simply change page). The header and the short footer stay put. From the map,
   the profile panel grows into the full page's banner, and its title and icon fly to
   the page's title and icon (the names below are shared with style.css and page.css). */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.mini-footer { view-transition-name: mini-footer; }
::view-transition-old(root) { animation: 200ms ease-out both vt-fade-out; }
::view-transition-new(root) { animation: 340ms cubic-bezier(.2, .7, .2, 1) both vt-rise-in; }
::view-transition-group(entry-panel), ::view-transition-group(entry-title), ::view-transition-group(entry-icon) { animation-duration: 420ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise-in { from { opacity: 0; transform: translateY(10px); } }

/* Menus slide in rather than appear. */
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.has-menu.open > .submenu { animation: menu-in .18s ease-out; }
.site-header.menu-open .site-nav { animation: menu-in .22s ease-out; }
@media (min-width: 900px) {
  .has-menu:hover > .submenu, .has-menu:focus-within > .submenu { animation: menu-in .18s ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .has-menu.open > .submenu, .site-header.menu-open .site-nav, .has-menu:hover > .submenu, .has-menu:focus-within > .submenu { animation: none; }
}

/* Keyboard users jump past the menu (review of 21 Oct 2026). */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 6px; background: #fff; color: #1c1c1c; font: 400 15px var(--font, Helvetica, Arial, sans-serif); }
.skip-link:focus { left: 12px; }