/* Shared site header: page links with section fly-outs, and a menu panel on narrow windows. */
.nav {
  position: fixed; inset: 14px var(--gutter) auto; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 8px 8px 8px 16px;
  border-radius: 999px; transition: background 220ms var(--motion), box-shadow 220ms var(--motion);
}
.nav.is-solid { background: rgb(16 19 22 / .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgb(0 0 0 / .35), inset 0 0 0 1px var(--rim); }
.nav-links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-links > a, .nav-group > a {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 999px;
  color: var(--muted); font: 600 14px/1 Jakarta; text-decoration: none; transition: color 160ms, background 160ms;
}
.nav-links > a:hover, .nav-group:hover > a, .nav-group:focus-within > a { color: var(--text); background: var(--wash); }
.nav-links [aria-current] { color: var(--text); }
.nav-links [aria-current]::after { content: ''; width: 5px; height: 5px; margin-left: 2px; border-radius: 50%; background: var(--coral); }
.nav-caret { order: 2; width: 9px; height: 6px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; transition: transform 180ms var(--motion); }
.nav-group:hover .nav-caret, .nav-group:focus-within .nav-caret { transform: rotate(180deg); }

/* Fly-outs: the sections of the home page and the press kit. */
.nav-group { position: relative; }
.nav-flyout {
  position: absolute; top: calc(100% + 10px); left: -8px; display: grid; width: 300px; padding: 8px; border-radius: 24px;
  background: rgb(16 19 22 / .94); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px rgb(0 0 0 / .5), inset 0 0 0 1px var(--rim);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms var(--motion), transform 180ms var(--motion), visibility 0s 180ms;
}
.nav-group:last-child .nav-flyout { left: auto; right: -8px; }
.nav-flyout::before { content: ''; position: absolute; inset: -12px 0 100%; }
.nav-group:hover .nav-flyout, .nav-group:focus-within .nav-flyout { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav-flyout a { display: grid; gap: 4px; padding: 11px 14px; border-radius: 16px; text-decoration: none; transition: background 140ms; }
.nav-flyout a:hover, .nav-flyout a:focus-visible { background: var(--wash); }
.nav-flyout b { font: 700 14px/1.2 Jakarta; }
.nav-flyout span { font: 500 12.5px/1.3 Jakarta; color: var(--muted); }
.nav-flyout .nav-flyout-cta { margin-top: 6px; padding: 12px 14px; border-radius: 999px; background: var(--wash); font: 700 13px/1 Jakarta; text-align: center; color: var(--coral); }
.nav-flyout .nav-flyout-cta:hover { background: var(--coral); color: var(--ink); }

/* Menu toggle, shown once the links no longer fit. */
.nav-toggle { display: none; position: relative; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--wash); }
.nav-toggle i { position: absolute; left: 13px; width: 14px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform 200ms var(--motion); }
.nav-toggle i:first-child { top: 16px; }
.nav-toggle i:last-child { top: 22px; }
.nav.is-open .nav-toggle i:first-child { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav-toggle i:last-child { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { gap: 10px; }
  .nav .pill-small { margin-left: auto; }
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: grid; gap: 2px; margin: 0;
    max-height: calc(100svh - 100px); overflow-y: auto; padding: 12px; border-radius: 28px;
    background: rgb(16 19 22 / .96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgb(0 0 0 / .5), inset 0 0 0 1px var(--rim);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 160ms var(--motion), transform 200ms var(--motion), visibility 0s 200ms;
  }
  .nav.is-open .nav-links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav-links > a, .nav-group > a { padding: 14px; color: var(--text); font: 700 17px/1 Jakarta; }
  .nav-group:hover > a { background: none; }
  .nav-caret { display: none; }
  .nav-flyout { position: static; grid-template-columns: 1fr 1fr; width: auto; padding: 0 0 8px 8px; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; transform: none; }
  /* Follow the panel: a visible child of a hidden panel would stay clickable. */
  .nav-flyout, .nav-group:hover .nav-flyout, .nav-group:focus-within .nav-flyout { visibility: inherit; transition: none; }
  .nav-flyout::before { content: none; }
  .nav-flyout a { padding: 9px 14px; }
  .nav-flyout span { display: none; }
  .nav-flyout b { font-weight: 600; color: var(--muted); }
  .nav-flyout a:hover b { color: var(--text); }
  .nav-flyout .nav-flyout-cta { grid-column: 1 / -1; margin-top: 4px; }
}
@media (max-width: 560px) {
  .wordmark span { display: none; }
}