/* =============================================================================
   THE HOLLOW: universe site theme
   Served on thehollow.exodusnds.com. Load AFTER assets/exodus/universe-site.css.

   Part 1 sets the tokens every shared component reads. Part 2 themes those
   components and the chapter pages. Part 3 is the landing page, carried over
   from the universe's promo page; its classes are already prefixed thv-.
   The printed book's palette is in shared/css/the-hollow.css.
   ============================================================================= */

/* ── Part 1: tokens ───────────────────────────────────────────────────────── */
:root {
  --us-bg:            #080807;
  --us-surface:       #F0E8D8;
  --us-surface-alt:   #E8E0CC;
  --us-text:          #161410;
  --us-text-muted:    #5A5240;
  --us-on-dark:       #E8E0CC;
  --us-on-dark-muted: rgba(192, 184, 152, 0.66);
  --us-accent:        #B8923E;
  --us-accent-2:      #7A1C24;
  --us-border:        #2A2820;
  --us-font-display:  Georgia, 'Times New Roman', serif;
  --us-font-label:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --us-font-body:     'Crimson Pro', Georgia, serif;
  --us-radius:        2px;
}

/* ── Part 2: shared components and chapter pages ──────────────────────────── */
/* Case-file restraint: serif heads, gold rules, blood for emphasis. */
.us-nav-brand { letter-spacing: 0.22em; text-transform: uppercase; font-size: 1.1rem; }
.us-page-title,
.us-band-title { font-weight: 400; letter-spacing: 0.04em; }
.us-band-title::after {
  content: '';
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: 0.7rem;
  background: var(--us-accent);
}
.us-explore-card,
.us-kit-item,
.us-pager-link,
.us-toc-box { border-width: 1px; }
.us-explore-card:hover, .us-explore-card:focus-visible,
.us-kit-item:hover, .us-kit-item:focus-visible,
.us-pager-link:hover, .us-pager-link:focus-visible { box-shadow: 0 8px 22px rgba(86, 14, 20, 0.28); border-color: var(--us-accent-2); }

.us-prose h2 { font-weight: 400; letter-spacing: 0.03em; border-bottom: 1px solid var(--us-accent); padding-bottom: 0.3rem; }
.us-prose h3 { font-weight: 400; border-bottom: 1px solid var(--us-accent); }
.us-prose h5 { color: var(--us-accent-2); letter-spacing: 0.04em; }
.us-prose th { background: #201E18; color: #B8923E; font-family: var(--us-font-label); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; }
.us-prose .note { border-left-color: var(--us-accent-2); }
.us-prose .quote { border-left-color: var(--us-accent); }
.us-prose .ends-band { border-color: var(--us-accent); }

/* ── Part 3: landing page ─────────────────────────────────────────────────── */
/* ── THV SCOPE ── all classes prefixed thv- to avoid CMS collisions */
.thv-page {
  --thv-void:        #080807;
  --thv-shadow:      #0F0D0A;
  --thv-ash:         #161410;
  --thv-stone:       #201E18;
  --thv-charcoal:    #2A2820;
  --thv-paper:       #E8E0CC;
  --thv-paper2:      #D0C8B4;
  --thv-linen:       #F0E8D8;
  --thv-gold:        #8C6C28;
  --thv-gold-lt:     #B8923E;
  --thv-gold-dk:     #5C440E;
  --thv-blood:       #560E14;
  --thv-blood-lt:    #7A1C24;
  --thv-blood-mid:   #902830;
  --thv-copper:      #7A4E2A;
  --thv-slate:       #18202C;
  --thv-text:        #C0B898;
  --thv-text-dim:    rgba(192,184,152,0.5);
  --thv-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --thv-serif: Georgia, 'Times New Roman', serif;
  --thv-mono: 'Courier New', Courier, monospace;
  font-family: var(--thv-sans);
  background: var(--thv-void);
  color: var(--thv-text);
  overflow-x: hidden;
}
.thv-page *, .thv-page *::before, .thv-page *::after { box-sizing: border-box; margin: 0; padding: 0; }

.thv-inner { max-width: 960px; margin: 0 auto; padding: 0 28px; }

.thv-eyebrow {
  font-family: var(--thv-mono);
  font-size: 0.65rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--thv-gold-lt);
  display: block;
  margin-bottom: 10px;
}

/* ─────────────────────────────────────
   HERO
───────────────────────────────────── */
.thv-hero {
  background: var(--thv-void);
  padding: 96px 28px 88px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(140,108,40,0.2);
}

/* Radial candlelight glow from center - warm against the deep dark */
.thv-hero::before {
  content: '';
  position: absolute;
  top: 60%; left: 50%;
  transform: translate(-50%, -50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse at center,
    rgba(140,108,40,0.06) 0%,
    rgba(86,14,20,0.04) 40%,
    transparent 70%);
  pointer-events: none;
}

/* Top edge - like an old case file folder */
.thv-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--thv-blood-lt) 30%, var(--thv-gold) 50%, var(--thv-blood-lt) 70%, transparent);
}

.thv-hero-label {
  display: inline-block;
  font-family: var(--thv-mono);
  font-size: 0.62rem;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--thv-text-dim);
  border: 1px solid rgba(140,108,40,0.25);
  padding: 4px 16px;
  margin-bottom: 40px;
  position: relative;
}

.thv-hero-title {
  font-family: var(--thv-sans);
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--thv-paper);
  margin-bottom: 8px;
  position: relative;
}

.thv-hero-article {
  display: block;
  font-family: var(--thv-serif);
  font-style: italic;
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  color: var(--thv-gold-lt);
  letter-spacing: 0.04em;
  margin-bottom: 48px;
  position: relative;
}

.thv-hero-lie {
  font-family: var(--thv-serif);
  font-style: italic;
  font-size: clamp(1.05rem, 2.5vw, 1.5rem);
  color: var(--thv-text);
  max-width: 580px;
  margin: 0 auto 12px;
  line-height: 1.6;
  position: relative;
}
.thv-hero-lie em { color: var(--thv-blood-mid); font-style: normal; }

.thv-hero-sub {
  font-family: var(--thv-sans);
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--thv-text-dim);
  max-width: 540px;
  margin: 0 auto 52px;
  position: relative;
}
.thv-hero-sub strong { color: var(--thv-gold-lt); font-weight: 600; }

.thv-hero-cta {
  display: inline-block;
  font-family: var(--thv-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: transparent;
  color: var(--thv-gold-lt);
  text-decoration: none;
  padding: 14px 40px;
  border: 1px solid var(--thv-gold);
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.thv-hero-cta:hover {
  background: var(--thv-gold-dk);
  color: var(--thv-paper);
}

/* ─────────────────────────────────────
   PITCH - The World Under the World
───────────────────────────────────── */
.thv-pitch {
  background: var(--thv-ash);
  padding: 80px 28px;
}
.thv-pitch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
@media (max-width: 680px) { .thv-pitch-grid { grid-template-columns: 1fr; gap: 36px; } }

.thv-section-head {
  font-family: var(--thv-sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  line-height: 1.1;
  color: var(--thv-paper);
  margin-bottom: 20px;
}
.thv-section-head em { color: var(--thv-gold-lt); font-style: normal; }
.thv-section-head .blood { color: var(--thv-blood-mid); }

.thv-body {
  font-size: 0.97rem;
  line-height: 1.78;
  color: var(--thv-text);
}
.thv-body + .thv-body { margin-top: 16px; }
.thv-body strong { color: var(--thv-paper); font-weight: 600; }
.thv-body em { color: var(--thv-gold-lt); font-style: normal; }

/* Case-file inset */
.thv-casefile {
  background: var(--thv-shadow);
  border: 1px solid rgba(140,108,40,0.2);
  border-left: 3px solid var(--thv-blood-lt);
  padding: 22px 24px;
  margin-top: 28px;
  position: relative;
}
.thv-casefile-header {
  font-family: var(--thv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--thv-blood-lt);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(122,28,36,0.3);
}
.thv-casefile-item {
  font-family: var(--thv-sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--thv-text);
  padding: 5px 0;
  border-bottom: 1px solid rgba(192,184,152,0.08);
}
.thv-casefile-item:last-child { border-bottom: none; }
.thv-casefile-item::before {
  content: '→';
  color: var(--thv-blood-mid);
  margin-right: 8px;
  font-size: 0.78rem;
}

/* ─────────────────────────────────────
   THE HOLLOW - cosmology section
───────────────────────────────────── */
.thv-cosmology {
  background: var(--thv-void);
  padding: 80px 28px;
  border-top: 1px solid rgba(140,108,40,0.12);
  border-bottom: 1px solid rgba(140,108,40,0.12);
  position: relative;
  overflow: hidden;
}
.thv-cosmology::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(86,14,20,0.07) 0%,
    transparent 65%);
  pointer-events: none;
}

.thv-cosm-intro {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
}

.thv-scale {
  display: grid;
  gap: 2px;
  margin-top: 40px;
}
.thv-scale-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 560px) { .thv-scale-row { grid-template-columns: 80px 1fr; } }

.thv-scale-num {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--thv-mono);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 20px 12px;
  letter-spacing: 0.05em;
}
.thv-scale-content {
  padding: 20px 24px;
}
.thv-scale-name {
  font-family: var(--thv-sans);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.thv-scale-desc {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--thv-text);
}

/* Stage colors - escalation */
.thv-scale-row.stage-1 { background: #121008; }
.thv-scale-row.stage-1 .thv-scale-num { color: rgba(192,184,152,0.3); background: #0C0B07; }
.thv-scale-row.stage-1 .thv-scale-name { color: rgba(192,184,152,0.5); }

.thv-scale-row.stage-2 { background: #161210; }
.thv-scale-row.stage-2 .thv-scale-num { color: rgba(140,108,40,0.5); background: #100E0C; }
.thv-scale-row.stage-2 .thv-scale-name { color: rgba(140,108,40,0.7); }

.thv-scale-row.stage-3 { background: #1A1210; }
.thv-scale-row.stage-3 .thv-scale-num { color: var(--thv-copper); background: #130E0C; }
.thv-scale-row.stage-3 .thv-scale-name { color: var(--thv-copper); }

.thv-scale-row.stage-4 { background: #1C0E0C; }
.thv-scale-row.stage-4 .thv-scale-num { color: var(--thv-blood-lt); background: #150A08; }
.thv-scale-row.stage-4 .thv-scale-name { color: var(--thv-blood-lt); }

.thv-scale-row.stage-5 { background: #200A0C; border: 1px solid rgba(144,40,48,0.3); }
.thv-scale-row.stage-5 .thv-scale-num { color: var(--thv-blood-mid); background: #180608; font-size: 1.5rem; }
.thv-scale-row.stage-5 .thv-scale-name { color: var(--thv-blood-mid); }

/* ─────────────────────────────────────
   WHAT YOU DO - the investigation
───────────────────────────────────── */
.thv-investigation {
  background: var(--thv-ash);
  padding: 80px 28px;
}
.thv-inv-intro {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

.thv-inv-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}
@media (max-width: 600px) { .thv-inv-steps { grid-template-columns: 1fr; } }

.thv-step {
  background: var(--thv-shadow);
  padding: 32px 28px 28px;
  position: relative;
  border-top: 2px solid transparent;
}
.thv-step.featured {
  grid-column: 1 / -1;
  background: var(--thv-stone);
  border-top-color: var(--thv-gold);
}
.thv-step-num {
  font-family: var(--thv-mono);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--thv-gold);
  display: block;
  margin-bottom: 10px;
}
.thv-step-head {
  font-family: var(--thv-sans);
  font-weight: 700;
  font-size: 1rem;
  color: var(--thv-paper);
  margin-bottom: 12px;
}
.thv-step-body {
  font-size: 0.91rem;
  line-height: 1.7;
  color: var(--thv-text);
}
.thv-step-body strong { color: var(--thv-paper); font-weight: 600; }
.thv-step-body em { color: var(--thv-gold-lt); font-style: normal; }

/* ─────────────────────────────────────
   FACTIONS
───────────────────────────────────── */
.thv-factions {
  background: var(--thv-void);
  padding: 80px 28px;
  border-top: 1px solid rgba(140,108,40,0.12);
}
.thv-factions-intro {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
}

.thv-faction-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
}

.thv-faction-card {
  background: var(--thv-stone);
  padding: 26px 24px 22px;
  position: relative;
  border-left: 3px solid transparent;
}
/* Faction-specific left accent colors */
.thv-faction-card.order      { border-left-color: var(--thv-gold); }
.thv-faction-card.watchfires { border-left-color: #C85820; }
.thv-faction-card.vesper     { border-left-color: #2A4060; }
.thv-faction-card.argus      { border-left-color: #304A30; }
.thv-faction-card.latchkey   { border-left-color: #483C28; }
.thv-faction-card.blackroad  { border-left-color: #3C3028; }
.thv-faction-card.lantern    { border-left-color: #604040; }
.thv-faction-card.candleless { border-left-color: var(--thv-blood-mid); }

.thv-faction-name {
  font-family: var(--thv-sans);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--thv-paper);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.thv-faction-tag {
  font-family: var(--thv-serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--thv-gold-lt);
  display: block;
  margin-bottom: 10px;
}
.thv-faction-body {
  font-size: 0.86rem;
  line-height: 1.62;
  color: var(--thv-text);
}
.thv-faction-body strong { color: var(--thv-paper); font-weight: 600; }

.thv-factions-note {
  margin-top: 44px;
  background: var(--thv-ash);
  border: 1px solid rgba(140,108,40,0.2);
  padding: 28px 32px;
  text-align: center;
}
.thv-factions-note p {
  font-family: var(--thv-serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--thv-text);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}
.thv-factions-note strong { color: var(--thv-gold-lt); font-style: normal; }

/* ─────────────────────────────────────
   THE FEEL - tone at the table
───────────────────────────────────── */
.thv-feel {
  background: var(--thv-ash);
  padding: 80px 28px;
  border-top: 1px solid rgba(140,108,40,0.12);
  border-bottom: 1px solid rgba(140,108,40,0.12);
}
.thv-feel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: start;
}
@media (max-width: 680px) { .thv-feel-grid { grid-template-columns: 1fr; gap: 36px; } }

.thv-feel-cards {
  display: grid;
  gap: 16px;
}
.thv-feel-card {
  padding: 22px 24px;
  background: var(--thv-shadow);
  border-left: 3px solid rgba(140,108,40,0.25);
}
.thv-feel-card-head {
  font-family: var(--thv-sans);
  font-weight: 700;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  color: var(--thv-gold-lt);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.thv-feel-card-body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--thv-text);
}
.thv-feel-card-body strong { color: var(--thv-paper); font-weight: 600; }

/* Play modes list */
.thv-modes {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
.thv-mode {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.thv-mode-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--thv-stone);
  border: 1px solid rgba(140,108,40,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--thv-mono);
  font-size: 0.68rem;
  color: var(--thv-gold-lt);
  letter-spacing: 0;
  margin-top: 2px;
}
.thv-mode-text {}
.thv-mode-name {
  font-family: var(--thv-sans);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--thv-paper);
  margin-bottom: 3px;
}
.thv-mode-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--thv-text-dim);
}

/* ─────────────────────────────────────
   POWER HAS A PRICE
───────────────────────────────────── */
.thv-power {
  background: var(--thv-blood);
  padding: 72px 28px;
  border-top: 1px solid var(--thv-blood-lt);
  border-bottom: 1px solid var(--thv-blood-lt);
  position: relative;
  overflow: hidden;
}
.thv-power::before {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144,40,48,0.2), transparent 65%);
  pointer-events: none;
}
.thv-power-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  margin-top: 44px;
}
@media (max-width: 720px) { .thv-power-grid { grid-template-columns: 1fr; } }
@media (min-width: 460px) and (max-width: 720px) { .thv-power-grid { grid-template-columns: 1fr 1fr; } }

.thv-power-card {
  background: rgba(8,8,7,0.5);
  border: 1px solid rgba(144,40,48,0.3);
  padding: 24px 22px 20px;
  position: relative;
}
.thv-power-head {
  font-family: var(--thv-sans);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--thv-paper);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.thv-power-body {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(192,184,152,0.72);
}
.thv-power-body strong { color: var(--thv-paper); }

/* ─────────────────────────────────────
   TABLE PROMISE
───────────────────────────────────── */
.thv-promise {
  background: var(--thv-void);
  padding: 80px 28px;
}
.thv-promise-inner {
  max-width: 700px;
  margin: 0 auto;
}
.thv-promise-list {
  list-style: none;
  margin-top: 36px;
  display: grid;
  gap: 2px;
}
.thv-promise-item {
  font-family: var(--thv-serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--thv-text);
  padding: 14px 24px;
  background: var(--thv-shadow);
  border-left: 2px solid rgba(140,108,40,0.2);
  position: relative;
}
.thv-promise-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.15s;
}
.thv-promise-item:hover::before { background: var(--thv-gold); }
.thv-promise-item strong { color: var(--thv-paper); font-style: normal; }
.thv-promise-final {
  margin-top: 28px;
  text-align: center;
  font-family: var(--thv-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--thv-paper);
  line-height: 1.6;
}
.thv-promise-final em { color: var(--thv-blood-mid); font-style: normal; }

/* ─────────────────────────────────────
   CTA
───────────────────────────────────── */
.thv-cta {
  background: var(--thv-ash);
  padding: 80px 28px 72px;
  text-align: center;
  border-top: 1px solid rgba(140,108,40,0.2);
  position: relative;
  overflow: hidden;
}
.thv-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--thv-gold) 30%, var(--thv-blood-lt) 70%, transparent);
}
.thv-cta-title {
  font-family: var(--thv-sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1.05;
  color: var(--thv-paper);
  margin-bottom: 16px;
  position: relative;
}
.thv-cta-title em { color: var(--thv-gold-lt); font-style: normal; }
.thv-cta-sub {
  font-family: var(--thv-serif);
  font-style: italic;
  font-size: 1.0rem;
  color: var(--thv-text);
  max-width: 520px;
  margin: 0 auto 36px;
  line-height: 1.65;
  position: relative;
}
.thv-cta-btn {
  display: inline-block;
  font-family: var(--thv-sans);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: var(--thv-gold-dk);
  color: var(--thv-paper);
  text-decoration: none;
  padding: 16px 48px;
  border: 1px solid var(--thv-gold);
  transition: background 0.2s;
  position: relative;
}
.thv-cta-btn:hover { background: var(--thv-gold); color: var(--thv-void); }
.thv-cta-note {
  font-family: var(--thv-mono);
  font-size: 0.62rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--thv-text-dim);
  margin-top: 20px;
  position: relative;
}

/* Landing page additions (not in the original promo). */
.thv-cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin-bottom: 22px; }
.thv-cta-actions .thv-cta-btn { margin: 0; }
.thv-cta-btn.thv-cta-btn-alt { background: transparent; color: inherit; border: 1px solid currentColor; box-shadow: none; }