/* ===== SPECIALIZATION VS AGI STYLES ===== */

/* ===== PAGE-SPECIFIC VARIABLES ===== */
:root {
  /* Specialization camp — grounded, practical, green-teal */
  --spec: #3fb950;
  --spec-soft: #3fb95099;
  --spec-dim: #3fb95040;
  --spec-glow: #3fb95026;
  /* AGI camp — ambitious, visionary, violet */
  --agi: #c084fc;
  --agi-soft: #c084fc99;
  --agi-dim: #c084fc40;
  --agi-glow: #c084fc26;
  /* Neutral accent */
  --neutral: #8e8a82;
  --accent-line: linear-gradient(90deg, var(--spec), #88888840, var(--agi));
}

/* ===== ACCENT RULE OVERRIDE ===== */
.accent-rule { background: var(--accent-line); opacity: 0.5; }

/* ===== HERO OVERRIDES ===== */
.hero::before {
  background:
    radial-gradient(ellipse 55% 50% at 30% 50%, var(--spec-dim), transparent),
    radial-gradient(ellipse 55% 50% at 70% 50%, var(--agi-dim), transparent),
    radial-gradient(ellipse 80% 60% at 50% 80%, #0a0a1500, var(--bg-deep));
}
.hero-content { max-width: 900px; }
.hero-pub { font-size: 0.72rem; }
.hero-pub a { color: var(--spec); text-decoration: none; }
.hero-pub a:hover { text-decoration: underline; }
.hero-badge {
  display: inline-block; font-family: var(--mono);
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 3px;
  background: var(--agi-dim); color: var(--agi); margin-bottom: 2rem;
}
.hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); }
.hero h1 em {
  background: linear-gradient(135deg, var(--spec), var(--agi));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-sub { max-width: 700px; font-size: clamp(1.02rem, 2vw, 1.22rem); }
.hero-meta { font-size: 0.78rem; letter-spacing: 0.08em; }
.hero-vs {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  gap: 1.2rem; margin-bottom: 2rem; color: var(--text-tertiary);
}
.hero-vs .spec-name { color: var(--spec); }
.hero-vs .agi-name { color: var(--agi); }
.hero-vs .vs-x {
  width: 34px; height: 34px; border: 1px solid var(--border-light);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.58rem; color: var(--text-secondary); letter-spacing: 0;
}

/* ===== SCROLL HINT OVERRIDES ===== */
.scroll-hint { bottom: 3rem; }
.scroll-hint span { font-size: 0.65rem; }
.scroll-arrow { height: 30px; }

/* ===== TOC DOT OVERRIDE ===== */
.toc-dot { padding: 0; }
.toc-dot.active { background: var(--spec); transform: scale(1.5); }

/* ===== MAIN WIDTH OVERRIDE ===== */
main { max-width: 1000px; }

/* ===== SECTION OVERRIDES ===== */
.section-label { font-family: var(--mono); }
.section h3 {
  font-family: var(--sans); font-weight: 700;
}

/* ===== PULL QUOTE OVERRIDES ===== */
.pull-quote {
  padding: 1.5rem 0 1.5rem 1.5rem;
  border-left: 2px solid;
  border-image: var(--accent-line) 1;
  font-size: 1.2rem;
}
.pull-quote.spec { border-image: linear-gradient(to bottom, var(--spec), var(--spec-dim)) 1; }
.pull-quote.agi { border-image: linear-gradient(to bottom, var(--agi), var(--agi-dim)) 1; }

/* ===== DEBATE CARDS ===== */
.debate-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1.5rem; margin: 2.5rem 0;
}
.debate-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.5rem; position: relative; overflow: hidden;
}
.debate-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.debate-card.spec::before { background: var(--spec); }
.debate-card.agi::before { background: var(--agi); }
.debate-card-camp {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.5rem;
}
.debate-card.spec .debate-card-camp { color: var(--spec); }
.debate-card.agi .debate-card-camp { color: var(--agi); }
.debate-card-name {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
  color: var(--text-hero); margin-bottom: 0.3rem;
}
.debate-card-title {
  font-family: var(--mono); font-size: 0.65rem; color: var(--text-tertiary);
  margin-bottom: 1rem; letter-spacing: 0.05em;
}
.debate-card p {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; text-indent: 0;
}

/* ===== VOICE CARDS ===== */
.voices {
  display: grid; grid-template-columns: 1fr;
  gap: 1rem; margin: 2.5rem 0;
}
.voice-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.5rem 1.5rem 1.5rem 2rem;
  position: relative; overflow: hidden;
}
.voice-card::before {
  content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
}
.voice-card.spec::before { background: var(--spec); }
.voice-card.agi::before { background: var(--agi); }
.voice-card.neutral::before { background: var(--neutral); }
.voice-name {
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
  margin-bottom: 0.15rem;
}
.voice-card.spec .voice-name { color: var(--spec); }
.voice-card.agi .voice-name { color: var(--agi); }
.voice-card.neutral .voice-name { color: var(--neutral); }
.voice-role {
  font-family: var(--mono); font-size: 0.58rem; color: var(--text-tertiary);
  letter-spacing: 0.05em; margin-bottom: 0.8rem;
}
.voice-card p {
  font-size: 0.85rem; color: var(--text-secondary);
  line-height: 1.6; font-style: italic; text-indent: 0;
}

/* ===== SPECTRUM VIS ===== */
.spectrum {
  margin: 2.5rem 0; padding: 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
}
.spectrum-label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 1.2rem; text-align: center;
}
.spectrum-bar {
  height: 6px; border-radius: 3px; margin-bottom: 0.8rem;
  background: linear-gradient(90deg, var(--spec), var(--text-tertiary), var(--agi));
  position: relative;
}
.spectrum-markers {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.58rem; color: var(--text-tertiary);
}
.spectrum-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--bg-card);
}
.spectrum-dot-label {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 0.52rem; color: var(--text-secondary);
  white-space: nowrap; text-align: center;
}

/* ===== CALLOUT ===== */
.callout {
  background: var(--bg-inset); border: 1px solid var(--border);
  border-radius: 8px; padding: 1.5rem; margin: 2.5rem 0; position: relative;
  overflow: hidden;
}
.callout::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
}
.callout.spec::before { background: var(--spec); }
.callout.agi::before { background: var(--agi); }
.callout-label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem;
}
.callout.spec .callout-label { color: var(--spec); }
.callout.agi .callout-label { color: var(--agi); }
.callout p { font-size: 0.9rem; color: var(--text-secondary); text-indent: 0; }
.callout p strong { color: var(--text-primary); }

/* ===== FOOTER OVERRIDES ===== */
.footer-nav a {
  font-family: var(--mono); font-size: 0.65rem; color: var(--text-tertiary);
  text-decoration: none; letter-spacing: 0.05em; transition: color 0.2s;
}
.footer-nav a:hover { color: var(--text-primary); }
.footer-brand {
  font-family: var(--serif); font-size: 1.05rem;
  color: var(--text-hero); margin-bottom: 0.4rem;
}

/* ===== HOME NAV HOVER OVERRIDE ===== */
.home-nav a:hover { color: var(--spec); }

/* ===== BACK TO TOP HOVER OVERRIDE ===== */
.back-to-top:hover { border-color: var(--spec); color: var(--spec); }

/* ===== RESPONSIVE OVERRIDES ===== */
@media (max-width: 860px) {
  .debate-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hero h1 { font-size: 2.2rem; }
  .hero-vs { gap: 0.8rem; font-size: 0.58rem; }
}