/* The site nav (Oct 2026): Read / For Schools / For Libraries / For Writers | Log in | one button.
   Loaded on every page after the site's style.css and uses its tokens. Source: 03_Website/site-nav/. */

.nav-actions { display: flex; align-items: center; gap: 16px; }

/* Log in: a text trigger with the same weight as the nav links */
.nav-login-trigger {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: rgba(var(--ink-rgb), 0.55);
  background: none;
  border: 0;
  padding: 10px 4px;
  cursor: pointer;
  transition: color 0.3s;
}
.nav-login-trigger:hover, .nav-login.open > .nav-login-trigger { color: var(--text); }

/* The menu opens on hover (as the site's other dropdowns do) and on click or keyboard (.open, set by nav.js).
   Not on :focus-within, because the trigger keeps focus after a click and the menu would never close.
   .is-shut: closed by a click or Escape while the pointer is still over it, so hover cannot hold it open. */
.nav-login { position: relative; }
.nav-dropdown-menu.nav-login-menu { left: auto; right: -8px; min-width: 268px; transform: translateY(8px); }
.nav-dropdown.nav-login.open .nav-dropdown-menu { opacity: 1; visibility: visible; }
.nav-dropdown:hover .nav-dropdown-menu.nav-login-menu,
.nav-dropdown.nav-login.open .nav-dropdown-menu.nav-login-menu { transform: translateY(0); }
.nav-dropdown.nav-login.open .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown.nav-login.is-shut .nav-dropdown-menu { opacity: 0; visibility: hidden; }
.nav-dropdown.nav-login.is-shut .nav-dropdown-trigger svg { transform: none; }

.nav-login-note { margin: 4px 16px 6px; font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--muted); }
.nav-login-menu a { flex-direction: column; gap: 2px; }
.nav-login-menu a span { color: var(--text); }
.nav-login-menu a em { font-style: normal; font-size: 11px; font-weight: 400; color: var(--muted); }

/* The phone menu: the Log in group, and the button last */
.nav-mobile .nav-m-login { padding: 18px 0 8px; border-bottom: 1px solid var(--border); }
.nav-m-label { margin: 0 0 6px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.nav-mobile a.nav-m-sub { display: block; padding: 8px 0; border-bottom: 0; font-family: 'DM Sans', sans-serif; font-size: 20px; }
.nav-mobile a.nav-m-cta {
  justify-content: center;
  margin-top: 20px;
  padding: 16px 24px;
  border-bottom: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  text-align: center;
  color: #14100E;
}

/* The phone menu fades in and its rows rise in order, top to bottom; it fades out instead of cutting.
   This replaces the site's per-link slide, which counted links inside each group and so ran out of order. */
@media (max-width: 1024px) {
  .nav-mobile { display: flex; opacity: 0; visibility: hidden; transition: opacity .15s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .15s; }
  .nav-mobile.open { opacity: 1; visibility: visible; transition: opacity .2s cubic-bezier(.16, 1, .3, 1); }
  .nav-mobile a, .nav-mobile.open a { opacity: 1; transform: none; animation: none; }
}
/* `html` lifts these one step above the site's own `.nav-mobile.open a:nth-child(n)` delays */
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html .nav-mobile.open > * { animation: nmIn .3s cubic-bezier(.16, 1, .3, 1) both; }
  html .nav-mobile.open > :nth-child(2) { animation-delay: 30ms; }
  html .nav-mobile.open > :nth-child(3) { animation-delay: 60ms; }
  html .nav-mobile.open > :nth-child(4) { animation-delay: 90ms; }
  html .nav-mobile.open > :nth-child(5) { animation-delay: 120ms; }
  html .nav-mobile.open > :nth-child(6) { animation-delay: 150ms; }
  html .nav-mobile.open > :nth-child(n+7) { animation-delay: 180ms; }
}
@keyframes nmIn { from { opacity: 0; transform: translateY(6px); } }

/* The menu icon: the bars slide together, then turn (and the reverse on close), so it never forms an arrow on the way */
.nav-toggle span { transition: translate .14s cubic-bezier(.65, 0, .35, 1) .12s, rotate .14s cubic-bezier(.65, 0, .35, 1), opacity .1s .12s; }
.nav-toggle.active span { transition: translate .14s cubic-bezier(.65, 0, .35, 1), rotate .14s cubic-bezier(.65, 0, .35, 1) .12s, opacity .1s; }
.nav-toggle.active span:nth-child(1) { transform: none; translate: 0 7px; rotate: 45deg; }
.nav-toggle.active span:nth-child(3) { transform: none; translate: 0 -7px; rotate: -45deg; }