@font-face {
  font-family: "Wanted UI";
  src: url('/assets/site/wanted/RobotoCondensed-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

.site-header {
  --header-gutter: 24px;
  --header-paper: #f1ecde;
  --header-ink: #0b0c0a;
  box-sizing: border-box;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  min-height: 68px;
  margin: 0;
  padding: 8px max(var(--header-gutter), calc((100% - var(--site-content-width, 1200px)) / 2 + var(--header-gutter)));
  background: var(--header-paper);
  color: var(--header-ink);
  font: 400 14px/normal "Wanted UI", sans-serif;
}
.site-header a { color: inherit; text-decoration: none; }
.site-header a:focus-visible, .site-header summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.site-header .skip-link { position: absolute; top: -100px; z-index: 3; padding: 12px; background: var(--header-paper); }
.site-header .skip-link:focus { top: 8px; }
.site-header .wordmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  min-height: 44px;
  color: var(--header-ink);
  font: 400 29px/normal Anton, sans-serif;
  letter-spacing: -1px;
  white-space: nowrap;
}
.site-header .wordmark > span { animation: none; }
.site-header .wordmark-label { position: relative; z-index: 1; transform: scaleX(.82); }
.site-header .header-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-inline-start: auto;
}
.site-header .header-links a, .site-header .header-download {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  white-space: nowrap;
}
.site-header nav a:is(:hover, [aria-current]) {
  color: var(--header-ink);
  text-decoration: underline 2px #e83b22;
  text-underline-offset: 6px;
}
.site-header .header-download {
  justify-content: center;
  padding-inline: 16px;
  background: #f50c06;
  border-radius: 5px;
  color: white;
  line-height: 1.4;
}
.site-header .header-download:hover { background: #cc2411; }
.site-header .header-menu { display: none; flex: none; }
.header-menu > summary {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 6px;
  list-style: none;
  cursor: pointer;
}
.header-menu > summary::-webkit-details-marker { display: none; }
.header-menu > summary:hover, .header-menu-panel a:hover { background: rgb(19 20 17 / .06); }
.header-menu > summary span { display: flex; }
.header-menu .symbol { display: block; width: 24px; height: 24px; }
.header-menu > summary .menu-close-icon, .header-menu[open] > summary .menu-open-icon { display: none; }
.header-menu[open] > summary .menu-close-icon { display: flex; }
.header-menu-panel {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: var(--header-gutter);
  width: min(320px, calc(100% - 2 * var(--header-gutter)));
  max-height: calc(100dvh - 96px);
  overflow-y: auto;
  padding: 8px;
  background: var(--header-paper);
  border: 1px solid #d4d0c3;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgb(19 20 17 / .18);
}
.header-menu-panel nav { display: grid; }
.header-menu-panel nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: 6px;
  font: 400 18px/1.5 "Wanted UI", sans-serif;
}
@media (max-width: 960px) {
  .site-header .header-links { display: none; }
  .site-header .header-menu { display: block; }
  .site-header .header-download { margin-inline-start: auto; }
}
@media (max-width: 759px) {
  .site-header { --header-gutter: 20px; min-height: 60px; gap: 12px; }
  .site-header .wordmark { font-size: 27px; }
  .site-header .header-download { padding-inline: 12px; }
}
@media (max-width: 380px) {
  .site-header .wordmark { font-size: 24px; }
  .site-header .header-download { padding-inline: 10px; }
}
@media (max-width: 359px) { .site-header { --header-gutter: 16px; } }

/* The front half of the orbit crosses the lettering, and the far half passes behind it. */
.site-header .wordmark { width: 128px; height: 44px; justify-content: center; }
.site-header .wordmark-orbit { display: contents; }
.wordmark-orbit .orbit-star {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;
  background: center / contain no-repeat url('/assets/site/wanted/hero-star-reference.webp');
  offset-path: path('M 121 14 C 121 21 95 30 64 34 C 33 38 7 37 7 30 C 7 23 33 14 64 10 C 95 6 121 7 121 14 Z');
  offset-rotate: 0deg;
  offset-distance: calc(var(--star) * 100% / 6);
  animation: wanted-orbit 12s linear infinite, wanted-star-depth 12s linear infinite;
  animation-delay: calc(var(--star) * -2s);
  animation-play-state: paused;
}
.site-header[data-orbit-running] .orbit-star { animation-play-state: running; }
@keyframes wanted-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes wanted-star-depth {
  0%, 100% { transform: scale(.79) rotate(-6deg); opacity: .85; }
  25% { transform: scale(1.08) rotate(6deg); opacity: 1; }
  50% { transform: scale(.79) rotate(-6deg); opacity: .85; }
  75% { transform: scale(.63) rotate(-12deg); opacity: .63; }
  0%, 49.99% { z-index: 2; }
  50%, 100% { z-index: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark-orbit .orbit-star { animation: none; }
  .wordmark-orbit .orbit-star:nth-child(n + 4) { transform: scale(.7); opacity: .65; }
}