/* The bar across the top of every page: plain pills on the left, the wordmark in the middle, Try
   Otto on the right. At the very top the wordmark is whole; once the page moves it folds into
   a pair of glasses (O—O), and opens again back at the top (header.js). */
.site-head {
  --h-ink: #131313; --h-fill: rgba(19, 19, 19, 0.055); --h-fill-2: rgba(19, 19, 19, 0.1); --h-bg: #FAF9F6;
  position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 64px; padding: 0 clamp(16px, 4vw, 48px); color: var(--h-ink);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
  transition: background-color 240ms ease, color 240ms ease, box-shadow 240ms ease;
}
.site-head.collapsed { background: color-mix(in srgb, var(--h-bg) 84%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site-head .l, .site-head .r { display: flex; gap: 8px; }
.site-head .r { justify-self: end; }
.site-head .pill {
  display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--h-fill); color: inherit; font-weight: 500; font-size: 15px; line-height: 1; font-family: inherit; text-decoration: none; cursor: pointer;
  transition: background-color 180ms ease;
}
.site-head .pill:hover, .site-head .pill:focus-visible, .site-head .pill[aria-current="page"], .site-head .pill[aria-expanded="true"] { background: var(--h-fill-2); outline: none; }
.site-head .split { display: flex; gap: 2px; }
.site-head .split .pill:first-child { border-radius: 999px 6px 6px 999px; padding-right: 14px; }
.site-head .split .pill:last-child { border-radius: 6px 999px 999px 6px; padding: 0 13px 0 11px; }

/* the wordmark: OttO, the t's crossbars one line joining the O's. Folding: the t's fade, the O's glide together as the
   line shortens into a bridge, then the letters thin into a pair of round glasses and the arms grow out; opening runs
   it backwards. The phases overlap so it never stops between them. */
.site-head .mark { display: block; color: var(--h-ink); --glide: cubic-bezier(0.65, 0, 0.35, 1); --thin: cubic-bezier(0.33, 0, 0.2, 1); }
.site-head .mark svg { display: block; width: auto; height: 26px; fill: currentColor; overflow: visible; }
.site-head .mark .o1, .site-head .mark .o2 { transition: translate 600ms var(--glide) 340ms, opacity 320ms ease 140ms; }
.site-head .mark .t { transition: opacity 300ms ease-out 760ms; }
.site-head .mark .barx { transform-box: fill-box; transform-origin: 50% 50%; transition: scale 600ms var(--glide) 340ms; }
.site-head .mark .bar { transform-box: fill-box; transform-origin: 50% 50%; transition: translate 460ms var(--thin), scale 460ms var(--thin); }
.site-head .mark .lens { fill: none; stroke: currentColor; r: 22px; stroke-width: 15px; opacity: 0; transition: r 460ms var(--thin), stroke-width 460ms var(--thin), opacity 320ms ease 140ms; }
.site-head .mark .temple { transform-box: fill-box; scale: 0 1; transition: scale 220ms ease-in; }
.site-head .mark .temple.l { transform-origin: 100% 50%; }
.site-head .mark .temple.r { transform-origin: 0 50%; }
.site-head.collapsed .mark .o1 { translate: 20.3px 0; }
.site-head.collapsed .mark .o2 { translate: -20.7px 0; }
.site-head.collapsed .mark .o1, .site-head.collapsed .mark .o2 { opacity: 0; transition: translate 640ms var(--glide) 60ms, opacity 260ms ease 600ms; }
.site-head.collapsed .mark .t { opacity: 0; transition: opacity 240ms ease-in; }
.site-head.collapsed .mark .barx { scale: 0.421 1; transition: scale 640ms var(--glide) 60ms; }
.site-head.collapsed .mark .bar { translate: 0 6.2px; scale: 1 1.079; transition: translate 420ms var(--thin) 520ms, scale 420ms var(--thin) 520ms; }
.site-head.collapsed .mark .lens { r: 25.8px; stroke-width: 6px; opacity: 1; transition: r 420ms var(--thin) 520ms, stroke-width 420ms var(--thin) 520ms, opacity 200ms ease-out 520ms; }
.site-head.collapsed .mark .temple { scale: 1 1; transition: scale 280ms cubic-bezier(0.2, 0, 0, 1) 760ms; }

body.headed { padding-top: 64px; }

@media (max-width: 640px) {
  .site-head { height: 56px; }
  /* (one pill on a phone: Features and News are in the footer) */
  .site-head .l .pill:not([href="/research"]) { display: none; }
  .site-head .pill { height: 30px; padding: 0 12px; font-size: 13.5px; }
  .site-head .mark svg { height: 22px; }
  body.headed { padding-top: 56px; }
}
@media (prefers-reduced-motion: reduce) { .site-head, .site-head .mark * { transition: none !important; } }