/* ==========================================================================
   Header — logo, "Coming soon" pill, rule; plus the floating dock nav
   ========================================================================== */

.site-header {
  position: relative;
  padding-top: clamp(22px, 1.8vw, 28px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;               /* logo and pill can never touch */
  height: clamp(86px, 7.4vw, 118px);
}
.site-header__bar > * { flex-shrink: 0; }

.site-header__rule {
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
}

/* Logo ------------------------------------------------------------------- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 14px);
  height: 100%;
}
.logo__mark {
  height: clamp(62px, 6.2vw, 100px);
  width: auto;
  transform-origin: 50% 50%;
}
.logo__word {
  height: clamp(30px, 3.32vw, 54px);
  width: auto;
  margin-top: 2px;
}
.logo:hover .logo__mark { animation: logoNudge 0.9s var(--ease-out); }
@keyframes logoNudge {
  0% { transform: translateX(0) rotate(0); }
  40% { transform: translateX(3px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0); }
}

/* Coming soon pill -------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  height: clamp(42px, 3.5vw, 54px);
  padding-inline: clamp(18px, 1.9vw, 30px);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: rgba(248, 244, 236, 0.35);
  backdrop-filter: blur(6px);
}
.pill__dot {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
}
.pill__dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: pillPing 2.6s ease-out infinite;
}
@keyframes pillPing {
  0% { transform: scale(0.5); opacity: 0.8; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}

/* Floating dock nav ------------------------------------------------------- */
.dock {
  position: fixed;
  /* centred with auto margins (not left:50%, which only leaves half the screen
     for the dock to size itself in and pushed "Join beta" out on phones) */
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100vw - 16px);
  white-space: nowrap;
  top: 16px;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: rgba(248, 244, 236, 0.78);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 18px 40px -22px rgba(30, 20, 5, 0.45);
  transform: translate3d(0, -140%, 0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.8s var(--ease-out), opacity 0.5s ease;
}
.dock.is-shown {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  pointer-events: auto;
}
.dock__mark { height: 30px; width: auto; margin-right: 8px; }
.dock__link {
  position: relative;
  padding: 9px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.3s, background 0.3s;
}
.dock__link:hover { color: var(--ink); }
.dock__link.is-active { color: var(--ink); background: rgba(166, 124, 71, 0.16); }
.dock__cta {
  margin-left: 4px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.3s, transform 0.4s var(--ease-out);
}
.dock__cta:hover { background: var(--gold); transform: translateY(-1px); }

/* Tablets and phones: keep every link, just tighter, and never wider than the screen */
@media (max-width: 860px) {
  .dock { top: 12px; gap: 2px; padding: 5px 5px 5px 10px; }
  .dock__mark { height: 26px; margin-right: 4px; }
  .dock__link { padding: 8px 10px; font-size: 11px; letter-spacing: 0.08em; }
  .dock__cta { margin-left: 2px; padding: 9px 12px; font-size: 11px; letter-spacing: 0.08em; white-space: nowrap; }
}
@media (max-width: 400px) {
  .dock { top: 10px; padding: 4px 4px 4px 8px; }
  .dock__mark { height: 22px; margin-right: 2px; }
  .dock__link { padding: 7px 7px; font-size: 9.5px; letter-spacing: 0.05em; }
  .dock__cta { padding: 8px 10px; font-size: 9.5px; letter-spacing: 0.05em; }
}

@media (max-width: 560px) {
  .site-header__bar { height: 84px; }
  .logo__mark { height: 54px; }
  .logo__word { height: 24px; }
  .pill { height: 38px; padding-inline: 14px; gap: 9px; font-size: 10.5px; letter-spacing: 0.1em; white-space: nowrap; }
  .pill__dot { width: 9px; height: 9px; }
}

/* Very narrow screens (small phones, or a zoomed-in browser) */
@media (max-width: 420px) {
  .site-header__bar { height: 72px; gap: 12px; }
  .logo { gap: 6px; }
  .logo__mark { height: 44px; }
  .logo__word { height: 20px; }
  .pill { height: 34px; padding-inline: 11px; gap: 7px; font-size: 9.5px; letter-spacing: 0.08em; }
  .pill__dot { width: 8px; height: 8px; }
  .pill__dot::after { inset: -4px; }
}
@media (max-width: 330px) {
  .pill__dot { display: none; }
}