/* CrateSeek — the fonts, icons and site header that every page shares. Load it before the page's own stylesheet. */

/* Inter stands in for SF Pro only where the system has no SF (Windows, Android). Apple devices never load it. */
@font-face { font-family: "Inter CS"; src: url("assets/fonts/inter-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter CS"; src: url("assets/fonts/inter-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter CS"; src: url("assets/fonts/inter-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter CS"; src: url("assets/fonts/inter-700.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Header ---------- */

/* The header carries its own tokens, so it looks the same on pages with another stylesheet. */
.nav {
  --ink: #111111;
  --ink-2: #3c3c43;
  --line: #e5e5ea;
  --fill: #f5f5f7;
  --fill-2: #ebebef;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: clamp(16px, 4vw, 48px);

  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-bottom: 1px solid transparent;
  color: var(--ink);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter CS", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: border-color .3s;
}
.nav.is-scrolled { border-bottom-color: var(--line); }
.nav__in {
  display: flex; align-items: center; gap: 32px; height: 64px;
  width: 100%; max-width: calc(1240px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 700; font-size: 19px; letter-spacing: -.03em; }
.brand img { display: block; width: 34px; height: 34px; }
.nav__links { display: flex; gap: 28px; margin-left: auto; }
.nav__links a { font-size: 14px; color: var(--ink-2); text-decoration: none; transition: color .2s; }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px; padding: 0 18px; border-radius: 999px; border: 0;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: transform .4s var(--ease-out), background-color .2s;
}
.pill .icon { width: 17px; height: 17px; margin-top: -2px; }
.pill--ink { background: var(--ink); color: #fff; }
.pill--ink:hover { background: #2c2c2e; }
.pill--soft { background: var(--fill); color: var(--ink); }
.pill--soft:hover { background: var(--fill-2); }
.pill:active { transform: scale(.96); transition-duration: .1s; }
.nav .pill { margin-left: 4px; flex: none; }

@media (max-width: 1080px) {
  .nav__links { gap: 20px; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__in { gap: 8px; }
  .nav .pill--soft { margin-left: auto; }
}

@media (max-width: 560px) {
  .nav .pill { height: 36px; padding: 0 14px; font-size: 14px; }
  .nav .pill .icon { width: 15px; height: 15px; }
}

/* On the narrowest phones the Web player pill keeps only its icon, so the wordmark never collides with it. */
@media (max-width: 420px) {
  .nav .pill--soft { width: 36px; padding: 0; }
  .nav .pill--soft .pill__label { display: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}