/* ==========================================================================
   site-pages.css
   Shared design language for inner (media) pages.
   Light / editorial palette — soft off-white, hairline borders, dark type.
   ========================================================================== */

:root {
  /* Surfaces */
  --sp-bg: #f7f7f5;            /* page background (soft off-white) */
  --sp-surface: #ffffff;       /* cards / panels */
  --sp-surface-2: #fbfbfa;     /* secondary surface */

  /* Lines */
  --sp-border: #e7e7e4;
  --sp-border-hover: #d0d0cc;

  /* Text */
  --sp-text: #2b2b2b;
  --sp-text-dim: #777777;
  --sp-text-bright: #111111;

  /* Accent (ties together links, listening, and the Room40 timeline label) */
  --sp-accent: #4a90e2;
  --sp-accent-dark: #357abd;

  /* Shape & depth */
  --sp-radius: 12px;
  --sp-radius-sm: 6px;
  --sp-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);

  /* Motion */
  --sp-transition: 0.3s ease;

  /* Type */
  --sp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sp-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sp-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   Unified navigation
   A single compact, translucent pill used on every inner page.
   Light variant: frosted white pill, dark text, hairline border.
   -------------------------------------------------------------------------- */
.site-pages-nav {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 200;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 4px;
  max-width: calc(100% - 32px);
  padding: 7px 12px;
  background: rgba(238, 238, 234, 0.82);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

.site-pages-nav a {
  color: rgba(0, 0, 0, 0.55);
  font-family: var(--sp-font);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  text-decoration: none;
  padding: 4px 9px;
  border-radius: 999px;
  transition: color var(--sp-transition), background var(--sp-transition);
}

.site-pages-nav a:hover,
.site-pages-nav a:focus {
  color: #111;
  background: rgba(0, 0, 0, 0.05);
  outline: none;
}

.site-pages-nav a.active {
  color: #111;
  background: rgba(0, 0, 0, 0.045);
}

/* Fallback when backdrop-filter is unsupported */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .site-pages-nav {
    background: rgba(238, 238, 234, 0.97);
  }
}

@media (max-width: 768px) {
  /* Keep the nav to a single low-profile row so it never overlaps page
     content as it would if it wrapped to multiple lines. */
  .site-pages-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .site-pages-nav::-webkit-scrollbar {
    display: none;
  }

  .site-pages-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .site-pages-nav {
    top: 10px;
    left: 10px;
    max-width: calc(100% - 20px);
    padding: 6px 8px;
  }

  .site-pages-nav a {
    font-size: 0.8rem;
    padding: 4px 7px;
  }
}

/* Respect reduced-motion globally for shared components */
@media (prefers-reduced-motion: reduce) {
  .site-pages-nav a {
    transition: none;
  }
}