/* The one header used on every public page (landing, about, artists, early
   access, invite, stats). Self-contained: it does not rely on each page's own
   colours or fonts, so it looks the same everywhere. Pages pick the buttons on
   the right; everything else is shared. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 48px;
  background: rgba(244, 239, 228, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #DAD2BF;
  font-family: 'Familjen Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.2;
}
/* The landing page keeps its header fixed over the hero. */
.site-nav.site-nav-fixed { position: fixed; left: 0; right: 0; }
.site-nav-lockup { display: flex; align-items: center; gap: 8px; text-decoration: none; color: #17140F; }
.site-nav-mark { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.site-nav-wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #17140F; }
.site-nav-byline { font-size: 12px; color: #4F4838; }
.site-nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Fixed heights so the header is the same height whichever buttons a page shows. */
.site-nav-signin, .site-nav-cta { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 34px; line-height: 1; margin: 0; }
.site-nav-signin {
  font-size: 13px; font-weight: 500; color: #4F4838; background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 0 12px; border-radius: 8px; text-decoration: none; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
}
.site-nav-signin:hover { color: #17140F; background: #ECE5D4; }
.site-nav-cta {
  font-size: 13px; font-weight: 500; color: #F4EFE4; background: #17140F; border: none; padding: 0 18px;
  border-radius: 8px; cursor: pointer; font-family: inherit; text-decoration: none; white-space: nowrap;
  text-align: center; transition: opacity 0.15s;
}
.site-nav-cta:hover { opacity: 0.82; }
.site-nav-blink { transform-origin: 80px 80px; animation: site-nav-blink 5.4s ease-in-out infinite; }
.site-nav-core { transform-origin: 80px 80px; animation: site-nav-pulse 1.8s ease-in-out infinite; }
@keyframes site-nav-blink { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.05); } 97% { transform: scaleY(1); } }
@keyframes site-nav-pulse { 0%, 100% { transform: scale(1); opacity: 0.75; } 50% { transform: scale(1.12); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-nav-blink, .site-nav-core { animation: none; } }
@media (max-width: 900px) {
  .site-nav { padding: 16px 20px; gap: 6px; }
  .site-nav-signin { padding: 0 8px; font-size: 12px; height: 32px; }
  .site-nav-cta { padding: 0 12px; font-size: 12px; height: 32px; }
}
/* "For artists" has no room next to the other buttons on phones. */
@media (max-width: 600px) {
  .site-nav-artists { display: none; }
}
@media (max-width: 380px) {
  .site-nav-byline { display: none; }
}