/* ==========================================================================
   starstuff.css — shared styles for the Star Stuff collection
   https://starstuff.earth/

   Holds: the canonical palette tokens, the site navigation (home + prev/next),
   the shared starfield twinkle animation, and the injected per-spread footer nav.

   Each page tints its nav by setting --nav-accent on the .ss-nav element.

   PALETTE: the --sp-* tokens below are the single source of truth for the
   recurring colors. Each page's inline :root aliases (e.g. --purple, --violet,
   --void) point at these via var(), so a palette change happens here, once.
   Page-specific one-off colors still live inline in each page (by design).
   The themed starfield gradient art also stays inline per page — its per-page
   tinting (cyan for water, green for aurora, warm-white for bone) is intentional.
   ========================================================================== */

:root {
  /* Grounds / voids (darkest → card surfaces) */
  --sp-void:            #0a0a14;
  --sp-void-deep:       #07070f;
  --sp-deep:            #0d0d1a;
  --sp-page:            #0f0f1c;
  --sp-card:            #0f0f2a;
  /* Accents */
  --sp-purple:          #a78bfa;
  --sp-pink:            #f472b6;
  --sp-gold:            #fbbf24;
  --sp-cyan:            #22d3ee;
  --sp-green:           #4ade80;
  /* Text / neutrals (brightest → dimmest) */
  --sp-white:           #f9fafb;
  --sp-white-soft:      #f4f2fb;
  --sp-secondary:       #b8aed0;
  --sp-secondary-soft:  #d4d0e4;
  --sp-muted:           #c4b5d4;
  --sp-dim:             #8a86a0;
  --sp-dim-soft:        #63607a;
}

/* Shared starfield twinkle. Pages apply this via `animation: twinkle-anim …`
   on their .twinkle dots; the keyframe used to be copy-pasted into ~25 pages.
   (manifesto.html keeps its own sp-twinkle — a deliberately deeper fade.) */
@keyframes twinkle-anim {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.15; transform: scale(0.3); }
}

.ss-nav {
  --nav-accent: #a78bfa;
  position: relative;
  z-index: 5;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 2rem;
  padding: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid rgba(167, 139, 250, 0.15);
  font-family: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.ss-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #b8aed0;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.ss-nav a:hover { color: var(--nav-accent); }

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

.ss-nav-home .ss-star { color: var(--nav-accent); font-weight: 400; }

/* Make "home" explicit and obviously clickable: a small pill after the wordmark. */
.ss-nav-home::after {
  content: "home";
  padding: 0.18em 0.55em;
  border: 1px solid var(--nav-accent);
  border-radius: 999px;
  color: var(--nav-accent);
  font-size: 0.82em;
  line-height: 1;
  letter-spacing: 0.12em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ss-nav-home:hover::after,
.ss-nav-home:focus-visible::after {
  background-color: var(--nav-accent);
  color: #0a0a14;
}

/* Home + About sit together as a left-hand cluster. */
.ss-nav-home-group {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

/* "about" pill — twin of the home pill, its own real link to about.html. */
.ss-nav a.ss-nav-about {
  padding: 0.18em 0.55em;
  border: 1px solid var(--nav-accent);
  border-radius: 999px;
  color: var(--nav-accent);
  font-size: 0.82em;
  line-height: 1;
  letter-spacing: 0.12em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ss-nav a.ss-nav-about:hover,
.ss-nav a.ss-nav-about:focus-visible {
  background-color: var(--nav-accent);
  color: #0a0a14;
}

.ss-nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.ss-nav-arrow { color: var(--nav-accent); }

/* Full-bleed pages (no centered content column) need side padding to align
   with the page's own edge padding. */
.ss-nav--bleed { padding: 1.5rem 2.5rem 1rem; }

@media (max-width: 600px) {
  .ss-nav { font-size: 0.6875rem; letter-spacing: 0.1em; gap: 0.5rem; }
  .ss-nav-links { gap: 0.85rem; }
  .ss-nav--bleed { padding: 1.25rem 1.5rem 0.85rem; }
  /* Keep the arrows on small screens; drop the destination labels. */
  .ss-nav-label { display: none; }
}

@media print {
  /* Site + paging chrome never belongs on paper. */
  .ss-nav { display: none !important; }
  .nav { display: none !important; }             /* paged-zine top prev/next bar */
  .spread-nav-btn { display: none !important; }  /* injected footer prev/next buttons */

  /* Paged zines show one .spread at a time on screen (.spread.active). For print,
     reveal every spread and start each on its own sheet, so a single Cmd/Ctrl+P
     (or "Save as PDF") yields the whole zine instead of just the visible spread.
     No-op on non-paged pages, which have no .spread elements. */
  .spread {
    display: block !important;
    opacity: 1 !important;
    animation: none !important;
    page-break-after: always;
    break-after: page;
  }
  .spread:last-of-type {
    page-break-after: auto;   /* avoid a trailing blank sheet */
    break-after: auto;
  }
}

/* Respect the OS "reduce motion" setting: neutralize the starfield twinkle,
   spinning stars, fade-ins, and smooth-scroll for anyone who asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Per-spread footer navigation ──
   Prev / page-number / next controls that starstuff.js injects into each
   .spread-footer. Colors are deliberately neutral (not accent-tied) so the
   same rules read correctly across every zine's palette. "next" sits a shade
   brighter than "prev" because forward is the common direction of travel. */
.spread-footer-nav {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}
.spread-nav-btn {
  background: none;
  border: none;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a86a0;
  cursor: pointer;
  padding: 0.2rem 0;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.spread-nav-btn.next { color: #d4d0e4; }
.spread-nav-btn:hover:not(:disabled) { color: #f4f2fb; }
.spread-nav-btn:disabled { opacity: 0.25; cursor: default; }
.spread-nav-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; border-radius: 2px; }

@media (max-width: 600px) {
  .spread-footer-nav { gap: 0.7rem; }
}