/* ───────────────────────────────────────────────────────────────
   style-a.css: "Cosmic" base styles
   Used by the world-level pages: index.html (cosmology landing),
   grand-gods.html, magic.html.

   Page-specific tweaks live in the page's small inline <style>.
   ─────────────────────────────────────────────────────────────── */

:root {
  --bg:        #06060a;
  --bg2:       #0c0c14;
  --bg3:       #12121e;
  --text:      #c8c4d8;
  --text-dim:  #8e8aa6;
  --text-bright: #eeeaf8;
  --divider:   rgba(200,196,220,0.08);
  --gold:      #c8a84a;
  --gold-dim:  #9a8240;
  --gold-bright: #f0d080;

  /* Planar tints (used on cosmology page) */
  --prelife:   #c084fc;
  --life:      #34d399;
  --postlife:  #f87171;

  /* God accents (used by gods page; left in scope so future pages can reuse) */
  --araphel:        #4a2a6a;  --araphel-light:  #9a60c0;
  --fisaya:         #3a7a9a;  --fisaya-light:   #70c8e8;
  --komo:           #8a2a10;  --komo-light:     #e06030;
  --sarrum:         #4a3a20;  --sarrum-light:   #a07840;
  --shuun:          #1a4a6a;  --shuun-light:    #40a0c8;
  --iro:            #7a6a10;  --iro-light:      #e8d040;
  --enki:           #1a3a5a;  --enki-light:     #4080b0;
  --forseti:        #2a2a4a;  --forseti-light:  #6878c0;
  --hinka:          #3a1a10;  --hinka-light:    #a04030;
  --jianna:         #2a4a2a;  --jianna-light:   #60a060;
  --tani:           #3a2a4a;  --tani-light:     #9070b0;
  --vesuna:         #4a3a10;  --vesuna-light:   #c09030;
  --cronus:         #1a3a3a;  --cronus-light:   #50a0a0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(74,42,106,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(26,58,106,0.1)  0%, transparent 50%);
  min-height: 100vh;
  font-family: 'Crimson Pro', Georgia, serif;
  color: var(--text);
  overflow-x: hidden;
}

@keyframes fadeUp    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes starPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.8; } }
@keyframes orbFloat  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── STARFIELD ────────────────────────────────────────────── */

.starfield { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.star      { position: absolute; background: white; border-radius: 50%;
             animation: starPulse var(--d, 3s) ease-in-out infinite var(--delay, 0s); }

/* ── PAGE HEADER ──────────────────────────────────────────── */

.header {
  position: relative; z-index: 1;
  text-align: center;
  padding: 56px 24px 40px;
  border-bottom: 1px solid var(--divider);
  max-width: 1100px;
  margin: 0 auto;
}
.header-ornament {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 16px;
  display: block;
}
.header-title {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: clamp(2.2rem, 7vw, 4rem);
  font-weight: 400;
  color: var(--gold-bright);
  letter-spacing: 0.08em;
  text-shadow: 0 0 60px rgba(200, 168, 74, 0.3);
  line-height: 1.1;
  margin-bottom: 8px;
}
.header-sub {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 28px;
}
.header-flavor {
  font-family: 'Crimson Pro', serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  max-width: 680px;
  margin: 0 auto 24px;
}
.header-groups {
  display: flex; justify-content: center; gap: 14px;
  flex-wrap: wrap;
}
.group-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 5px 14px;
  border: 1px solid var(--divider);
  border-radius: 2px;
  color: var(--text-dim);
}

/* ── MAIN ─────────────────────────────────────────────────── */

.main {
  position: relative; z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── GROUP DIVIDER ────────────────────────────────────────── */

.group-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 48px 0 28px;
}
.group-divider:first-child { margin-top: 0; }
.gdiv-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(200, 196, 220, 0.15), transparent); }
.gdiv-label {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.gdiv-sublabel {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text);
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Inline divider (used inside long-form sections) */
.divider {
  display: flex; align-items: center; gap: 16px;
  margin: 48px 0 32px;
}
.div-line  { flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(200, 168, 74, 0.25), transparent); }
.div-glyph { color: var(--gold-dim); font-size: 0.85rem; }

/* ── SECTION ──────────────────────────────────────────────── */

.section {
  margin-bottom: 32px;
}
.section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  text-align: center;
}
.section-body {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  max-width: 760px;
  margin: 0 auto;
}
.section-body p { margin-bottom: 1em; }
.section-body p:last-child { margin-bottom: 0; }
.section-body a { color: var(--gold); }

/* ── GLOBAL LINK COLOURS · low-specificity defaults so context-specific
   rules (card-links, breadcrumbs, etc.) still override ─────────────── */
:where(a:link)    { color: var(--gold); }
:where(a:visited) { color: var(--gold-dim); }
:where(a:hover)   { color: var(--gold-bright); }

/* ── CALLOUT / CONCLAVE BOX ───────────────────────────────── */

.conclave-box {
  background: rgba(200, 168, 74, 0.04);
  border: 1px solid rgba(200, 168, 74, 0.15);
  border-radius: 4px;
  padding: 20px 24px;
  margin: 32px auto;
  max-width: 760px;
  text-align: center;
}
.conclave-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 10px;
}
.conclave-text {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text);
  font-style: italic;
  max-width: 680px;
  margin: 0 auto;
}

/* ── PORTAL CARDS (used on landing / cosmology page) ──────── */

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
}
.portal-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg2);
  border: 1px solid var(--divider);
  border-radius: 4px;
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.portal-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, var(--gold)); opacity: 0.7;
}
.portal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(200, 168, 74, 0.3);
  background: var(--bg3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.portal-tag {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 10px;
}
.portal-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  margin-bottom: 8px;
}
.portal-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-dim);
  font-style: italic;
}
.portal-arrow {
  margin-top: 14px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex; align-items: center; gap: 6px;
}

/* Portal accent classes */
.p-cosmos    { --accent: var(--prelife); }
.p-gods      { --accent: var(--gold); }
.p-talan     { --accent: var(--life); }
.p-magic     { --accent: #8a3a8a; }
.p-history   { --accent: #8a6a2a; }
.p-factions  { --accent: #c89040; }

/* ── PLANAR DIAGRAM (cosmology page) ──────────────────────── */

.planar-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
  margin: 24px auto 0;
}
.plane {
  background: var(--bg2);
  border: 1px solid var(--divider);
  border-left: 4px solid var(--plane-accent, var(--gold));
  border-radius: 0 4px 4px 0;
  padding: 18px 22px 16px;
}
.plane.prelife  { --plane-accent: var(--prelife); }
.plane.life     { --plane-accent: var(--life); }
.plane.postlife { --plane-accent: var(--postlife); }
.plane-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--plane-accent, var(--gold-dim));
  margin-bottom: 4px;
}
.plane-name {
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--text-bright);
  margin-bottom: 8px;
}
.plane-desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text);
  font-style: italic;
}
.plane-sub {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 10px;
}
.plane-sub-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--divider);
  color: var(--text-dim);
}

/* ── GOD GRID + GOD CARD (gods page) ──────────────────────── */

.god-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.section-body + .god-grid { margin-top: 24px; }
.god-grid.life-grid {
  grid-template-columns: minmax(280px, 480px);
  justify-content: center;
}
.god-grid.life-grid:has(.god-card.expanded) {
  grid-template-columns: 1fr;
  justify-content: stretch;
}
.god-card {
  background: var(--bg2);
  border: 1px solid var(--divider);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  position: relative;
}
.god-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent, #888);
  opacity: 0.7;
}
.god-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.god-card.expanded { grid-column: 1 / -1; }

.card-top {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--divider);
}
.god-orb {
  width: 44px; height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  animation: orbFloat 4s ease-in-out infinite;
  background: var(--orb-bg, #111);
  box-shadow: 0 0 16px var(--orb-glow, transparent);
}
.god-title { flex: 1; }
.god-name {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-bright);
  line-height: 1.2;
  margin-bottom: 3px;
}
.god-domain-primary {
  font-family: 'Cinzel', serif;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent, #888);
  margin-bottom: 2px;
}
.god-city {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-dim);
}
.expand-hint {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  align-self: center;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 4px 9px;
  border: 1px solid rgba(200, 168, 74, 0.35);
  border-radius: 2px;
  background: rgba(200, 168, 74, 0.05);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.god-card:hover .expand-hint {
  color: var(--gold-bright);
  border-color: rgba(200, 168, 74, 0.6);
  background: rgba(200, 168, 74, 0.1);
}
.card-summary {
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
}
.domain-row {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 0 16px 14px;
}
.domain-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.46rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--divider);
  color: var(--text-dim);
}

/* Expanded card body */
.card-expanded {
  display: none;
  border-top: 1px solid var(--divider);
  padding: 20px;
  animation: fadeUp 0.22s ease;
}
.god-card.expanded .card-expanded { display: block; }
.god-card.expanded .expand-hint   { display: none; }

.expanded-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 600px) {
  .expanded-grid { grid-template-columns: 1fr; }
}

.exp-section { margin-bottom: 16px; }
.exp-label {
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--divider);
}
.exp-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text);
}
.exp-text.italic { font-style: italic; }

/* Per-card quick-stats block (used by the shared god-card builders in
   /setting/assets/god-cards.js, and by grand-gods.html's bound-god cards). */
.god-stats {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 16px;
  margin-top: 4px;
}
.stat-row { display: contents; }
.stat-label {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 4px;
  align-self: start;
}
.stat-val {
  color: var(--text);
  font-size: 0.92rem;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .god-stats { grid-template-columns: 1fr; gap: 2px 0; }
  .stat-label { padding-top: 10px; }
  .stat-val { padding-bottom: 4px; }
}

.worship-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--divider);
  border-left: 3px solid var(--accent, #888);
  border-radius: 0 3px 3px 0;
  padding: 10px 14px;
  margin-top: 4px;
}
.worship-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text);
  font-style: italic;
}
.depiction-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--divider);
  border-radius: 3px;
  padding: 10px 14px;
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text-dim);
  font-style: italic;
}

/* Domain link row inside expanded card (added Phase 3) */
.god-domain-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
  text-decoration: none;
  padding: 6px 12px;
  margin-top: 6px;
  border: 1px solid var(--accent, var(--gold));
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.15s, transform 0.15s;
}
.god-domain-link:hover {
  background: rgba(255, 255, 255, 0.06);
  transform: translateX(2px);
}

/* ── THREE-TIER KNOWLEDGE: GM SECRET (red) ───────────────── */

.secret-section {
  border-top: 1px solid rgba(180, 40, 40, 0.25);
  margin-top: 18px;
  padding-top: 14px;
}
.secret-toggle {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(225, 115, 115, 0.95);
  background: rgba(150, 30, 30, 0.06);
  border: 1px solid rgba(180, 40, 40, 0.2);
  border-radius: 2px;
  padding: 6px 14px;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.secret-toggle:hover {
  color: rgba(220, 90, 90, 0.95);
  border-color: rgba(200, 60, 60, 0.45);
  background: rgba(150, 30, 30, 0.12);
}
.secret-content {
  display: none;
  margin-top: 10px;
  background: rgba(120, 20, 20, 0.1);
  border: 1px solid rgba(180, 40, 40, 0.25);
  border-left: 3px solid rgba(200, 60, 60, 0.5);
  border-radius: 0 3px 3px 0;
  padding: 12px 14px;
  animation: fadeUp 0.2s ease;
}
.secret-content.revealed { display: block; }
.secret-label {
  font-family: 'Cinzel', serif;
  font-size: 0.46rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(230, 125, 125, 0.95);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(180, 40, 40, 0.2);
}
.secret-text {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text);
  font-style: italic;
}

/* ── SCALE ROW (magic page) ───────────────────────────────── */

.scale-row {
  display: flex; flex-direction: column;
  gap: 12px;
  margin: 14px auto;
  max-width: 760px;
}
.scale-item {
  display: flex; align-items: flex-start;
  gap: 14px;
  background: var(--bg2);
  border: 1px solid var(--divider);
  border-radius: 3px;
  padding: 14px 16px;
}
.scale-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.scale-content { flex: 1; }
.scale-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.scale-desc {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--text);
}

/* ── INFO CARD GRID ───────────────────────────────────────── */

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
}
.info-card {
  background: var(--bg2);
  border: 1px solid var(--divider);
  border-radius: 3px;
  padding: 16px 18px;
}
.info-card-title {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 8px;
}
.info-card-body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text);
}

/* ── FOOTER ───────────────────────────────────────────────── */

.footer-note {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.5rem;
  letter-spacing: 0.28em;
  color: rgba(220, 185, 90, 0.6);
  text-transform: uppercase;
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--divider);
}

@media (max-width: 600px) {
  .header { padding: 36px 16px 28px; }
  .main   { padding: 24px 16px 60px; }
  .header-groups { gap: 8px; }
  .header-sub { letter-spacing: 0.18em; }
  .gdiv-label { letter-spacing: 0.16em; font-size: 0.78rem; }
  .gdiv-sublabel { letter-spacing: 0.10em; font-size: 0.65rem; }
}

/* ── WIP BANNER ──────────────────────────────────────────────
   Drop <div class="wip-banner">✎ Writing in Progress</div>
   anywhere in <body> to flag a page that's mid-edit. Floats in
   the top-right corner, ignores clicks, gently pulses. Remove
   the element when the page is ready. */

.wip-banner {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 195;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-bright, #f0d080);
  background: rgba(40, 28, 12, 0.78);
  border: 1px dashed rgba(240, 200, 110, 0.5);
  border-radius: 2px;
  padding: 7px 14px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  animation: wipPulse 2.5s ease-in-out infinite;
}
@keyframes wipPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
@media (max-width: 600px) {
  .wip-banner { font-size: 0.5rem; letter-spacing: 0.22em; padding: 5px 10px; top: 8px; right: 8px; }
}

/* ── "CONTINUE READING" PANEL ────────────────────────────────
   Foot-of-page related-links panel, the cosmic-palette twin of the
   one in style-b.css (same markup: <div class="see-also"> with an
   <h3> and a <ul> of Title-arrow links + one-line glosses). */

.see-also {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--divider);
  border-left: 4px solid var(--gold-dim);
  border-radius: 4px;
  padding: 18px 24px;
  margin: 28px auto;
  max-width: 880px;
}
.see-also h3 {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0 0 10px;
}
.see-also ul { list-style: none; margin: 0; padding: 0; }
.see-also li {
  margin: 7px 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}
.see-also li a { color: var(--gold-bright); text-decoration: none; }
.see-also li a:hover { color: var(--text-bright); }
.see-also li a b { color: var(--gold-bright); }