/* ===================================================================
   Universe of Avilium — style.css
   Brand design: avilium-brand-guide.html (Avinadal LLC)
   =================================================================== */

/* ── 1. Design Tokens ────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --void:        #08090d;
  --surface-0:   #0d0e14;
  --surface-1:   #13141c;
  --surface-2:   #1a1c27;

  /* Imperial Gold — brand signature */
  --gold:        #c8a558;
  --gold-light:  #e4cb90;
  --gold-dim:    #7a6030;
  --gold-subtle: rgba(200,165,88,0.10);
  --gold-border: rgba(200,165,88,0.22);
  --rule:        rgba(200,165,88,0.20);
  --rule-dim:    rgba(200,165,88,0.08);

  /* Institutional Blue — data, links */
  --blue:        #4a8fc7;
  --blue-light:  #7ab3e0;
  --blue-border: rgba(74,143,199,0.22);
  --blue-subtle: rgba(74,143,199,0.09);

  /* Energy forces — use only for energy-specific content */
  --myst:        #c04a6f;   /* space force, crimson-rose */
  --myst-light:  #da8aab;
  --myst-border: rgba(192,74,111,0.25);
  --malei:       #4a7bc7;   /* time force, deep azure */
  --malei-light: #7aa8e0;
  --nesuric:     #8c58c8;   /* third force — use sparingly */
  --nesuric-light:#b090e0;

  /* Text */
  --cream:       #ede7da;
  --cream-dim:   #b0a890;
  --cream-muted: #8a8070;

  /* Typography */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'EB Garamond', Garamond, Georgia, serif;
  --font-mono:    'Space Mono', monospace;

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;
  --sp-16: 4rem;

  /* Layout */
  --max-w: 860px;
  --radius: 4px;
}

/* ── 2. Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--void);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 19.8px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--blue-light); text-decoration: none; }
a:hover { color: var(--gold-light); text-decoration: underline; }

p { margin-bottom: 1.2rem; }

strong { color: var(--gold-light); font-weight: 600; }
em     { font-style: italic; color: var(--cream-dim); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
}
h1 { font-size: clamp(1.8rem, 5vw, 3rem);   color: var(--gold-light); }
h2 { font-size: clamp(1.3rem, 3vw, 2rem);   color: var(--cream); }
h3 { font-size: 1.2rem;                      color: var(--gold-light); }

h4 {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── 3. Layout Utilities ─────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 640px) { .container { padding-inline: var(--sp-8); } }

.hidden { display: none !important; }

/* ── 4. Alpha Banner ─────────────────────────────────────────────── */
.alpha-banner {
  width: 100%;
  background: var(--surface-2);
  border-top: 2px solid var(--gold);
  border-bottom: 1px solid var(--gold-border);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.alpha-banner__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--gold);
  flex-shrink: 0;
  padding-top: 0.1em;
}

.alpha-banner__text {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--cream-dim);
  line-height: 1.7;
}

/* ── 5. Navigation ───────────────────────────────────────────────── */
.site-header {
  background: var(--surface-1);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  max-width: var(--max-w);
  margin-inline: auto;
}

.nav__wordmark {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-decoration: none;
}
.nav__wordmark:hover { color: var(--gold-light); text-decoration: none; }

.nav__hamburger {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 1.4rem;
  cursor: pointer;
  padding: var(--sp-2);
  line-height: 1;
}

.nav__links {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--surface-1);
  border-bottom: 1px solid var(--rule);
  list-style: none;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  z-index: 99;
}
.nav__links[hidden] { display: none; }

.nav__links a {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-dim);
  text-decoration: none;
  transition: color 0.15s;
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--gold); text-decoration: none; }

@media (min-width: 640px) {
  .nav__hamburger { display: none; }
  .nav__links {
    position: static;
    background: none;
    border: none;
    padding: 0;
    flex-direction: row;
    gap: var(--sp-6);
  }
  .nav__links[hidden] { display: flex; }
}

/* ── 6. Gold Rule Divider ────────────────────────────────────────── */
.gold-rule {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border: none;
  margin: var(--sp-8) 0;
}

/* ── 7. Hero ─────────────────────────────────────────────────────── */
.hero {
  min-height: 65vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-16) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%, rgba(200,165,88,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 80%, rgba(74,143,199,0.04) 0%, transparent 60%);
  pointer-events: none;
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-6);
  position: relative;
}

.hero__rule-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: min(360px, 90%);
  margin: 0 auto var(--sp-6);
  position: relative;
}
.hero__rule-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.hero__rule-line.right { background: linear-gradient(90deg, var(--gold), transparent); }
.hero__glyph { font-family: var(--font-display); color: var(--gold); font-size: 1.1rem; }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin-bottom: var(--sp-4);
  position: relative;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-style: italic;
  color: var(--cream-dim);
  max-width: 64ch;
  text-wrap: balance;
  position: relative;
}

/* ── 8. Callout Block ────────────────────────────────────────────── */
.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-6);
  background: var(--gold-subtle);
  margin: var(--sp-8) 0;
}

.callout__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-2);
}

.callout__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cream-dim);
  line-height: 1.7;
  margin: 0;
}

/* ── 9. World Intro ──────────────────────────────────────────────── */
.world-intro {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--rule);
}

.world-intro p {
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.9;
  max-width: 68ch;
  margin-inline: auto;
  margin-bottom: 1.2rem;
  color: var(--cream);
}

.world-intro p.lead {
  font-size: 1.25rem;
  font-style: italic;
  color: var(--cream-dim);
}

/* ── 10. Stats Bar ───────────────────────────────────────────────── */
.stats-bar {
  display: flex;
  justify-content: center;
  gap: var(--sp-12);
  padding: var(--sp-10) 0;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.stat { text-align: center; }

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}

.stat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-muted);
  margin-top: var(--sp-2);
}

/* ── 11. Section Eyebrow ─────────────────────────────────────────── */
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--sp-6);
}

/* ── 12. CTA Tiles ───────────────────────────────────────────────── */
.cta-section {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--rule);
}

.cta-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 640px) { .cta-grid { grid-template-columns: 1fr 1fr; } }

.cta-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  background: var(--gold-subtle);
  text-align: center;
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s;
}
.cta-tile:hover {
  border-color: var(--gold);
  background: rgba(200,165,88,0.15);
  text-decoration: none;
}

.cta-tile__label {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.06em;
}

.cta-tile__sub {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-muted);
}

/* ── 13. Featured Strip ──────────────────────────────────────────── */
.featured-section {
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--rule);
}

/* ── 14. Character Card ──────────────────────────────────────────── */
.char-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-6) 0;
}
@media (min-width: 640px)  { .char-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .char-grid { grid-template-columns: repeat(4, 1fr); } }

.char-card {
  background: var(--surface-1);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.15s;
}
.char-card:hover { border-color: var(--gold-dim); transform: translateY(-2px); }

.char-card__portrait {
  aspect-ratio: 3 / 4;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold-dim);
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--rule-dim);
}

.char-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.char-card__body {
  padding: var(--sp-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.char-card__name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.3;
  letter-spacing: 0.03em;
}

.char-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

.char-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--cream-muted);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.char-card__link {
  display: block;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  padding: var(--sp-3);
  border-top: 1px solid var(--rule-dim);
  transition: background 0.15s, color 0.15s;
}
.char-card__link:hover {
  background: var(--gold-subtle);
  color: var(--gold-light);
  text-decoration: none;
}

/* ── 15. Badges ──────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 2px;
  border: 1px solid;
  line-height: 1.6;
  white-space: nowrap;
}

.badge--species  { border-color: var(--blue-border); color: var(--blue-light); background: var(--blue-subtle); }
.badge--gender   { border-color: var(--rule);         color: var(--cream-muted); background: transparent; }
.badge--canon    { border-color: var(--gold-border);  color: var(--gold);        background: var(--gold-subtle); }
.badge--lore-type{ border-color: var(--blue-border);  color: var(--blue-light);  background: var(--blue-subtle); }
.badge--tag      { border-color: var(--rule);          color: var(--cream-dim);  background: transparent; }

/* ── 16. Page Header ─────────────────────────────────────────────── */
.page-header {
  padding: var(--sp-10) 0 var(--sp-8);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-6);
}

.page-header__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--sp-3);
}

.page-header__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2);
}

.page-header__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  color: var(--cream-dim);
}

/* ── 17. Filter Bar ──────────────────────────────────────────────── */
.filter-bar {
  position: sticky;
  top: 56px;
  z-index: 90;
  background: var(--surface-1);
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-3) 0;
}

.filter-bar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.filter-bar input[type="search"],
.filter-bar select {
  background: var(--void);
  border: 1px solid var(--rule);
  color: var(--cream);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  outline: none;
  min-width: 160px;
  transition: border-color 0.15s;
}
.filter-bar input[type="search"]:focus,
.filter-bar select:focus { border-color: var(--gold-dim); }
.filter-bar select option { background: var(--surface-1); }

.filter-bar__clear {
  background: none;
  border: 1px solid var(--rule);
  color: var(--cream-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.filter-bar__clear:hover { border-color: var(--gold-dim); color: var(--gold); }

.filter-count {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--cream-muted);
  margin-left: auto;
}

.no-results {
  text-align: center;
  padding: var(--sp-12) 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--cream-muted);
}

/* ── 18. Lore Tag Pills ──────────────────────────────────────────── */
.tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
}

.tag-pill {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--cream-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: var(--sp-1) var(--sp-3);
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.6;
}
.tag-pill:hover            { border-color: var(--gold-dim); color: var(--cream-dim); }
.tag-pill.active           { border-color: var(--gold); color: var(--gold); background: var(--gold-subtle); }
.tag-pill--showall         { border-color: var(--blue-border); color: var(--blue-light); }
.tag-pill--showall.active,
.tag-pill--showall:hover   { border-color: var(--blue); color: var(--blue-light); background: var(--blue-subtle); }

/* Lore search input */
.lore-search-wrap {
  margin-bottom: var(--sp-4);
}

.lore-search-wrap input[type="search"] {
  width: 100%;
  background: var(--void);
  border: 1px solid var(--rule);
  color: var(--cream);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  outline: none;
  transition: border-color 0.15s;
}
.lore-search-wrap input[type="search"]:focus { border-color: var(--gold-dim); }

/* ── 19. Lore Entry ──────────────────────────────────────────────── */
.lore-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
}

.lore-entry {
  background: var(--surface-1);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
  overflow: hidden;
}

.lore-entry[data-canon="canonical"] { border-left-color: var(--gold-dim); }
.lore-entry[data-canon="legend"],
.lore-entry[data-canon="myth"]      { border-left-color: var(--nesuric); }
.lore-entry[data-canon="apocrypha"] { border-left-color: var(--myst); }
.lore-entry[data-canon="draft"]     { border-left-color: var(--cream-muted); }

.lore-entry__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule-dim);
  flex-wrap: wrap;
}

.lore-entry__category {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-light);
}

.lore-entry__canon-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gold-dim);
  letter-spacing: 0.1em;
}

.lore-entry__body { padding: var(--sp-6); }

.lore-entry__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-2);
}

.lore-entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  align-items: center;
}

.lore-entry__chars {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--cream-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.lore-entry__chars-label { text-transform: uppercase; letter-spacing: 0.15em; }

.lore-entry__char-link {
  color: var(--blue-light);
  text-decoration: none;
  font-size: 0.65rem;
}
.lore-entry__char-link:hover { color: var(--gold-light); }

.lore-entry__content {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--cream-dim);
}

.lore-entry[data-canon="legend"] .lore-entry__content,
.lore-entry[data-canon="myth"]   .lore-entry__content { font-style: italic; }

.lore-entry__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-4); }

/* ── 20. Character Detail ────────────────────────────────────────── */
.back-link {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--cream-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule-dim);
  transition: color 0.15s;
}
.back-link:hover { color: var(--gold); text-decoration: none; }

.char-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-8);
}
@media (min-width: 640px) { .char-header { flex-direction: row; align-items: flex-start; } }

.char-header__portrait {
  width: 96px;
  height: 128px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--gold-dim);
  flex-shrink: 0;
}

.char-header__info { flex: 1; }

.char-header__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-3);
}

.char-header__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.char-section { margin-bottom: var(--sp-10); }

.char-section__heading {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule-dim);
}

.char-section__text {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--cream-dim);
  max-width: 70ch;
}

.aliases-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }
.aliases-list__item { font-family: var(--font-body); font-size: 1rem; color: var(--cream-dim); }
.aliases-list__type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--cream-muted);
  margin-left: var(--sp-2);
}

/* Lore accordions */
.lore-accordions { display: flex; flex-direction: column; gap: var(--sp-3); }

.lore-accordion {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

.lore-accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  background: var(--surface-2);
  list-style: none;
  gap: var(--sp-4);
  user-select: none;
  transition: background 0.15s;
}
.lore-accordion summary::-webkit-details-marker { display: none; }
.lore-accordion summary:hover { background: var(--surface-1); }

.lore-accordion__title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: 0.03em;
  flex: 1;
}

.lore-accordion__indicator {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--gold-dim);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.lore-accordion[open] .lore-accordion__indicator { transform: rotate(90deg); }

.lore-accordion__body {
  padding: var(--sp-6);
  border-top: 1px solid var(--rule-dim);
  background: var(--surface-1);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--cream-dim);
}

.lore-accordion__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-bottom: var(--sp-4); }

/* Relationships */
.rel-groups { display: flex; flex-direction: column; gap: var(--sp-5); }

.rel-group__type {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: var(--sp-2);
}

.rel-group__names { display: flex; flex-direction: column; gap: var(--sp-1); margin-left: var(--sp-4); }

.rel-group__name {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--cream-dim);
  text-decoration: none;
}
.rel-group__name:hover { color: var(--gold-light); text-decoration: none; }

/* ── 21. Footer ──────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--rule);
  padding: var(--sp-12) var(--sp-4);
  text-align: center;
}

.site-footer__rule {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto var(--sp-6);
}

.site-footer__mark {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-4);
}

.site-footer__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  margin-bottom: var(--sp-6);
  list-style: none;
}

.site-footer__links a {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.site-footer__links a:hover { color: var(--gold); text-decoration: none; }

.site-footer__meta {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--cream-muted);
  line-height: 2;
}

.site-footer__meta a { color: var(--cream-dim); text-decoration: underline; }
.site-footer__meta a:hover { color: var(--gold); }

.site-footer__ai-note {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  color: var(--cream-muted);
  opacity: 0.7;
  margin-top: var(--sp-1);
}