/*
 * starfield.css — Shared starfield + AAS ambient system
 * Edit this file to change star density, colors, or AAS behavior across ALL pages.
 *
 * Each page sets --aas in its own :root (-5 = dark/red, +5 = light/blue).
 * The home page overrides --aas dynamically via JS slider.
 * Book pages set it statically from books.js data.
 */

/* ── CSS tokens (shared across all pages) ───────────────────────────── */
:root {
  --void:         #010206;
  --space-deep:   #04080f;
  --space-mid:    #070d1a;
  --gold:         #c9a84c;
  --gold-bright:  #e8c96b;
  --gold-dim:     rgba(201,168,76,0.2);  /* borders, dividers — always semi-transparent */
  --silver:       #8a9ab0;
  --text-primary: #e8e0d0;
  --text-muted:   #7a7060;
  --text-dim:     #3a3530;
  --border-dim:   #1a1810;
  --nav-h:        65px;

  /* ── Type scale ────────────────────────────────────────────────────
     5 actual sizes, 10 semantic tokens. Tokens share sizes — they are
     distinguished by font-family, weight, letter-spacing, and style,
     NOT by size. Change sizes here to update the whole site.

     SIZE MAP:
       0.70rem → --t-micro, --t-label, --t-caption
       0.90rem → --t-small
       1.05rem → --t-body, --t-lead
       1.55rem → --t-sub, --t-heading
       2.80rem → --t-title, --t-hero

     ROLE GUIDE (how to tell them apart without size):
       --t-micro   : Cinzel, uppercase, letter-spacing --ls-wider
       --t-label   : Cinzel, uppercase, letter-spacing --ls-wide
       --t-caption : EB Garamond italic, letter-spacing --ls-tight
       --t-small   : EB Garamond, normal weight
       --t-body    : EB Garamond, normal weight, line-height 1.8
       --t-lead    : EB Garamond, normal or italic, line-height 1.75
       --t-sub     : Cinzel, weight 600, letter-spacing --ls-normal
       --t-heading : Cinzel, weight 700, gold underline rule
       --t-title   : Cinzel Decorative, weight 700
       --t-hero    : Cinzel Decorative, weight 700, homepage only
  */
  --t-micro:   0.70rem;
  --t-label:   0.70rem;
  --t-caption: 0.70rem;
  --t-small:   0.95rem;
  --t-body:    1.40rem;
  --t-lead:    1.40rem;
  --t-sub:     1.65rem;
  --t-heading: 1.65rem;
  --t-title:   2.80rem;
  --t-hero:    2.80rem;

  /* ── Letter-spacing scale ───────────────────────────────────────────
     4 values only. Reference these instead of hardcoding em values.
       --ls-tight  : body text when tracking is needed
       --ls-normal : subheadings, card titles
       --ls-wide   : labels, nav, buttons
       --ls-wider  : eyebrows, badges
  */
  --ls-tight:  0.03em;
  --ls-normal: 0.08em;
  --ls-wide:   0.15em;
  --ls-wider:  0.25em;

  /* ── Zone accent colors ─────────────────────────────────────────────
     One color per content category. Used for section titles, active
     borders, badge text, tag labels ONLY — nothing else.
  */
  --c-war:      #aa2222;   /* The War — dark red */
  --c-science:  #6655cc;   /* Science — deep violet */
  --c-history:  #1d9070;   /* History — teal */
  --c-sw:       #8844aa;   /* War + Science — purple */
  --c-hs:       #3a9060;   /* History + Science — green-teal */
  --c-hw:       #b84420;   /* War + History — burnt orange */
  --c-lock:     #991010;   /* Locked state eyebrow only */
  --c-success:  #3fb950;   /* Unlock confirmed state only */

  /* ── AAS default — overridden per page */
  --aas:   1;
  --aas-t: calc((var(--aas) + 5) / 10);

  /* ── Star density knob ──────────────────────────────────────────────
     Change --star-opacity to adjust brightness of all stars at once.
     Change --star-scale to adjust perceived density (1.0 = default).
  */
  --star-opacity: 1.0;
  --star-scale:   1.0;

  /* ── Accent amber (warm orange-gold — used for section eyebrows, hooks) */
  --amber: #c87820;
}

/* ── Shared nav styles ───────────────────────────────────────────────── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px;
  background: url('/nav-ribbon-book1.png') center center / 100% 100% no-repeat;
  border: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.7);
}
.nav-logo {
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 13px; letter-spacing: 0.25em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  display: flex; align-items: center; gap: 12px;
}
.nav-logo-line { width: 24px; height: 1px; background: var(--gold-dim); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-link {
  font-family: 'Cinzel', serif; font-size: var(--t-caption); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #b89a6a; background: none; cursor: pointer;
  padding: 6px 12px; border-radius: 3px;
  border: 1px solid transparent;
  transition: all 0.2s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.nav-link:hover  { color: var(--gold-bright); border-color: rgba(201,168,76,0.3); }
.nav-link.active { color: var(--gold-bright); }
.nav-unlock {
  font-family: 'Cinzel', serif; font-size: var(--t-micro); font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--void); background: var(--gold);
  padding: 7px 16px; border-radius: 2px;
  border: none; cursor: pointer; transition: background 0.2s;
}
.nav-unlock:hover { background: var(--gold-bright); }

/* Nav actions group — Login + Unlock, always visible */
.nav-actions {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
  margin-left: auto;
  padding-right: 32px; /* match logo's left padding */
}
.nav-login {
  font-family: 'Cinzel', serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); background: none;
  padding: 6px 12px; border-radius: 2px;
  border: 1px solid rgba(201,168,76,0.35);
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.nav-login:hover { background: rgba(201,168,76,0.1); border-color: var(--gold); }

@media (max-width: 599px) {
  .nav-actions { gap: 6px; }
  .nav-login { font-size: 10px; padding: 5px 8px; }
  .nav-unlock { font-size: 10px !important; padding: 5px 8px !important; }
}

/* Hamburger — mobile nav toggle */
.nav-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 36px; height: 36px;
  background: none; border: none; cursor: pointer; padding: 4px;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--gold); border-radius: 2px;
}
.mobile-nav-drawer {
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: rgba(1,2,6,0.97);
  border-bottom: 1px solid rgba(201,168,76,0.2);
  flex-direction: column; align-items: stretch;
  padding: 12px 0; z-index: 199;
  display: none;
}
.mobile-nav-drawer.open { display: flex; }
.mobile-nav-drawer .nav-link {
  font-size: 0.85rem; padding: 14px 24px;
  text-align: left; border: none; border-radius: 0;
  border-bottom: 1px solid rgba(201,168,76,0.08);
}
.mobile-nav-drawer .nav-unlock { margin: 12px 24px 4px; border-radius: 2px; }

@media (max-width: 599px) {
  .nav-links { display: none !important; }
  .top-nav > .nav-unlock { display: none !important; } /* standalone unlock outside nav-actions */
  .nav-hamburger { display: flex !important; flex-shrink: 0; }
  .nav-logo { flex: 1; justify-content: center; }
}

/* ── Starfield ───────────────────────────────────────────────────────── */
.starfield {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 80% 25% at 60% 45%, rgba(80,90,160,0.18) 0%, transparent 100%),
    radial-gradient(ellipse at 20% 30%, rgba(40,60,120,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(80,20,40,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 10%, rgba(30,40,80,0.1) 0%, transparent 50%),
    var(--void);
}
.starfield::before, .starfield::after { content: ''; position: absolute; inset: 0; }
.starfield::before {
  opacity: var(--star-opacity);
  background-image:
    radial-gradient(2.5px 2.5px at 8% 12%, rgba(255,255,255,1.0) 0%, transparent 100%),
    radial-gradient(2px 2px at 83% 7%, rgba(210,225,255,1.0) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 91% 88%, rgba(255,255,255,1.0) 0%, transparent 100%),
    radial-gradient(2px 2px at 4% 91%, rgba(255,255,255,1.0) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 52% 3%, rgba(210,230,255,1.0) 0%, transparent 100%),
    radial-gradient(2px 2px at 19% 96%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 73% 52%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 37% 28%, rgba(210,225,255,0.95) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,240,0.92) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 10%, rgba(255,255,240,0.85) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 65% 35%, rgba(255,255,240,0.88) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 15%, rgba(200,220,255,0.88) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 55%, rgba(255,255,240,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 50%, rgba(255,255,240,0.78) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 70%, rgba(255,255,240,0.72) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,255,240,0.85) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 70% 85%, rgba(200,220,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 90%, rgba(255,255,240,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 5% 45%, rgba(255,255,240,0.78) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 25%, rgba(255,255,240,0.75) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 50%, rgba(255,255,240,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 75%, rgba(255,255,240,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 60%, rgba(255,255,240,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 18% 38%, rgba(255,255,240,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 67% 14%, rgba(255,255,240,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 38% 62%, rgba(200,220,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 84% 32%, rgba(255,255,240,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 2% 72%, rgba(255,255,240,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 59% 88%, rgba(200,220,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 43% 17%, rgba(255,255,240,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 43%, rgba(255,255,240,0.48) 0%, transparent 100%),
    radial-gradient(1px 1px at 11% 58%, rgba(200,220,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 77%, rgba(255,255,240,0.48) 0%, transparent 100%);
}
.starfield::after {
  opacity: var(--star-opacity);
  background-image:
    radial-gradient(2.5px 2.5px at 39% 5%, rgba(255,255,255,1.0) 0%, transparent 100%),
    radial-gradient(2px 2px at 76% 96%, rgba(210,225,255,1.0) 0%, transparent 100%),
    radial-gradient(2.5px 2.5px at 1% 55%, rgba(255,255,255,1.0) 0%, transparent 100%),
    radial-gradient(2px 2px at 61% 44%, rgba(255,255,255,0.95) 0%, transparent 100%),
    radial-gradient(2px 2px at 24% 79%, rgba(210,230,255,0.95) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 22% 8%, rgba(255,255,240,0.88) 0%, transparent 100%),
    radial-gradient(1px 1px at 58% 22%, rgba(255,255,240,0.82) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 88% 40%, rgba(255,255,240,0.88) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 62%, rgba(200,220,255,0.82) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 78%, rgba(255,255,240,0.78) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 92%, rgba(255,255,240,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 3% 33%, rgba(255,255,240,0.78) 0%, transparent 100%),
    radial-gradient(1px 1px at 97% 67%, rgba(255,255,240,0.72) 0%, transparent 100%),
    radial-gradient(1px 1px at 48% 42%, rgba(255,255,240,0.7) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 58%, rgba(200,220,255,0.85) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 18%, rgba(255,255,240,0.58) 0%, transparent 100%),
    radial-gradient(1px 1px at 44% 33%, rgba(255,255,240,0.52) 0%, transparent 100%),
    radial-gradient(1px 1px at 77% 48%, rgba(200,220,255,0.58) 0%, transparent 100%),
    radial-gradient(1px 1px at 14% 82%, rgba(255,255,240,0.52) 0%, transparent 100%),
    radial-gradient(1px 1px at 93% 15%, rgba(255,255,240,0.58) 0%, transparent 100%),
    radial-gradient(1px 1px at 33% 47%, rgba(200,220,255,0.52) 0%, transparent 100%),
    radial-gradient(1px 1px at 56% 95%, rgba(255,255,240,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 86% 73%, rgba(255,255,240,0.52) 0%, transparent 100%),
    radial-gradient(1px 1px at 17% 29%, rgba(255,255,240,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 69% 37%, rgba(200,220,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 41% 54%, rgba(255,255,240,0.48) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 19%, rgba(255,255,240,0.5) 0%, transparent 100%);
}

/* ── AAS ambient overlay ─────────────────────────────────────────────── */
/* Applied to a .aas-overlay div on each page */
.aas-overlay {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  transition: background 1.5s ease;
}

/* ── Shared footer ───────────────────────────────────────────────────── */
.site-footer {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 250;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 24px;
  background: rgba(1,2,6,0.95);
  border-top: 1px solid rgba(201,168,76,0.12);
}
.footer-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
}
.footer-links {
  display: flex; align-items: center; gap: 16px;
}
.footer-right {
  display: flex; align-items: center;
}
.footer-link {
  font-family: 'Cinzel', serif; font-size: var(--t-caption, 0.80rem); font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text-muted, #7a7060); text-decoration: none;
  transition: color 0.2s;
}
.footer-link:hover {
  color: var(--gold, #c9a84c);
}
.footer-sep {
  color: var(--text-dim, #3a3530); font-size: 0.9rem; user-select: none;
}
.footer-copy {
  font-family: 'EB Garamond', Georgia, serif;
  font-size: var(--t-micro, 0.62rem); color: var(--text-dim, #3a3530);
  letter-spacing: 0.05em;
}