/*
 * Site strip — a self-contained brand/navigation bar for pages that predate
 * the shared navigation (portfolio, archived projects, WebXR).
 *
 * Deliberately does NOT depend on core/_variables.css or the shared nav CSS:
 * these legacy pages carry their own global element styles (jQuery-era
 * `button`, `a`, `header` rules) that would fight the shared nav. Every rule
 * here is scoped under .site-strip so nothing leaks either direction.
 */
.site-strip {
  --strip-bg: #0a0f1a;
  --strip-fg: #e2e8f0;
  --strip-muted: #94a3b8;
  --strip-accent: #67e8f9;
  --strip-border: rgba(148, 163, 184, 0.25);

  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* px on purpose: the legacy pages set html { font-size: 62.5% }, so rem
     units here would render at 60% of the intended size. */
  gap: 10px 28px;
  width: 100%;
  margin: 0;
  padding: 13px clamp(16px, 3vw, 32px);
  background: var(--strip-bg);
  color: var(--strip-fg);
  border-bottom: 1px solid var(--strip-border);
  /* Just under body copy: readable at a glance, still clearly a utility bar. */
  font: 500 15px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.015em;
}

.site-strip--overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.site-strip a {
  color: var(--strip-fg);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.site-strip a:hover {
  color: var(--strip-accent);
  border-bottom-color: var(--strip-accent);
}

.site-strip a:focus-visible {
  outline: 2px solid var(--strip-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.site-strip__brand {
  font-weight: 700;
  font-size: 17px;
  margin-right: 4px;
  color: var(--strip-accent);
}

.site-strip__note {
  color: var(--strip-muted);
  font-weight: 400;
}

.site-strip__note strong {
  color: var(--strip-fg);
  font-weight: 600;
}

.site-strip__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-left: auto;
  padding: 0;
  list-style: none;
}

.site-strip__links li {
  margin: 0;
  padding: 0;
}

.site-strip__links a[aria-current="page"] {
  color: var(--strip-accent);
  border-bottom-color: var(--strip-accent);
}

@media (max-width: 640px) {
  .site-strip__links {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-strip a {
    transition: none;
  }
}