:root {
  --paper:        #FFFFFF;
  --paper-raised: #FAFAF9;
  --ink:          #1D1D1F;
  --ink-soft:     #4B4B4E;
  --ink-faint:    #8A8A8E;
  --rule:         #E7E7E5;
  --rule-strong:  #D4D4D1;

  --presenter:      #2C4870;
  --presenter-soft: #EEF2F8;
  --presenter-tint: #F5F7FA;

  --respondent:      #8A3532;
  --respondent-soft: #FAECEA;
  --respondent-tint: #FCF4F3;

  --scripture: #8A6A1E;
  --scripture-soft: #FBF3E1;

  --opening: #4A6741;
  --opening-soft: #EBF1E8;

  --devotion: #6B4A82;
  --devotion-soft: #F1E9F5;

  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;
  --font-meta: "Inter", -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.meta { font-family: var(--font-meta); }
::selection { background: var(--scripture-soft); }

/* ---- Views ---- */
.view { display: none; }
.view.active { display: block; }

/* ---- Top nav ---- */
.topnav-link {
  font-family: var(--font-meta); font-size: 12.5px; letter-spacing: 0.03em;
  color: var(--ink-faint); padding-bottom: 3px; border-bottom: 2px solid transparent;
  white-space: nowrap; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
}
.topnav-link.active { color: var(--ink); border-bottom-color: var(--presenter); }
.topnav-link:hover:not(.active) { color: var(--ink); }

/* ---- Hero ---- */
.hero-eyebrow {
  font-family: var(--font-meta); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* ---- Day sections (collapsible) ---- */
.day-toggle { background: none; border: none; cursor: pointer; text-align: left; color: var(--ink); width: 100%; }
.day-toggle:hover { background: var(--paper-raised); }
.day-section.open .day-chevron { transform: rotate(180deg); }
.day-chevron { color: var(--ink-faint); transition: transform .25s; }

/* ---- Type badges ---- */
.type-badge {
  font-family: var(--font-meta); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px; font-weight: 500; display: inline-block;
}
.type-badge-academic { background: var(--presenter-soft); color: var(--presenter); }
.type-badge-opening { background: var(--opening-soft); color: var(--opening); }
.type-badge-devotion { background: var(--devotion-soft); color: var(--devotion); }

/* ---- Tags ---- */
.theme-tag-sm {
  font-family: var(--font-meta); font-size: 11px; color: var(--scripture); background: var(--scripture-soft);
  padding: 2px 8px; border-radius: 20px; white-space: nowrap; display: inline-block;
}
.theme-tag {
  font-family: var(--font-meta); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--ink-soft); background: var(--paper-raised); border: 1px solid var(--rule-strong);
  padding: 3px 10px; border-radius: 20px; white-space: nowrap; display: inline-block;
}
.tag-scripture {
  font-family: var(--font-meta); font-size: 11.5px; color: var(--scripture); background: var(--scripture-soft);
  padding: 2px 9px; border-radius: 20px; white-space: nowrap; display: inline-block;
}

/* ---- Bylines ---- */
.byline-name { color: var(--presenter); font-weight: 500; }
.byline-name-resp { color: var(--respondent); font-weight: 500; }
.byline-arrow { color: var(--ink-faint); margin: 0 2px; }

/* ---- Session cards (agenda) ---- */
.session-card {
  transition: border-color .2s, box-shadow .2s, transform .2s;
  text-decoration: none; color: inherit; display: block; cursor: pointer;
}
.session-card:hover { border-color: var(--rule-strong) !important; box-shadow: 0 4px 20px rgba(0,0,0,0.06); transform: translateY(-1px); }

.video-indicator { width: 6px; height: 6px; border-radius: 50%; background: #C9843F; display: inline-block; }

/* ---- Badges (session detail header) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 10px 3px 8px; border-radius: 20px;
}
.badge-presenter { background: var(--presenter-soft); color: var(--presenter); }
.badge-respondent { background: var(--respondent-soft); color: var(--respondent); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }

.hr { border: none; border-top: 1px solid var(--rule); }

.drop-cap::first-letter {
  font-family: var(--font-display); font-size: 3.4em; line-height: 0.85; float: left;
  padding-right: 0.08em; padding-top: 0.03em; color: var(--presenter); font-weight: 600;
}

.arg-card { border-left: 3px solid var(--presenter); padding: 0 0 0 1.1rem; }
.critique-card { border-left: 3px solid var(--respondent); padding: 0 0 0 1.1rem; }
.arg-num, .critique-num { font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-faint); }

/* ---- Dialectical map ---- */
.dialectic-row { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 0; align-items: stretch; }
.dialectic-col { padding: 1.2rem 1.4rem; }
.dialectic-col.presenter { background: var(--presenter-tint); }
.dialectic-col.respondent { background: var(--respondent-tint); }
.dialectic-spine { display: flex; align-items: center; justify-content: center; position: relative; background: var(--paper); }
.dialectic-spine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--rule-strong); }
.dialectic-spine-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); position: relative; z-index: 1; }
@media (max-width: 720px) {
  .dialectic-row { grid-template-columns: 1fr; }
  .dialectic-spine { height: 24px; }
  .dialectic-spine::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}

.qa-q { font-family: var(--font-display); font-style: italic; color: var(--ink); }
.qa-a-label { font-family: var(--font-meta); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

.transcript-block { font-size: 16px; line-height: 1.75; }

/* ---- Tabs (session detail) ---- */
.tab {
  font-family: var(--font-meta); font-size: 13px; letter-spacing: 0.02em; color: var(--ink-faint);
  padding: 0.6rem 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  background: none; border-top: none; border-left: none; border-right: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab.active { color: var(--ink); border-bottom-color: var(--presenter); }
.tab:hover:not(.active) { color: var(--ink-soft); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-dot { width: 5px; height: 5px; border-radius: 50%; background: #C9843F; }
.tab-strip { scrollbar-width: none; }
.tab-strip::-webkit-scrollbar { display: none; }

.video-empty {
  background: var(--paper-raised); border: 1px dashed var(--rule-strong);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem;
}

/* ---- Explore Connections (graph) ---- */
#network { width: 100%; height: 100%; touch-action: none; }
.legend-dot { width: 9px; height: 9px; border-radius: 9999px; display: inline-block; }
.legend-shape { width: 9px; height: 9px; display: inline-block; }
.legend-shape-tri {
  width: 0; height: 0; display: inline-block;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid #33578A;
}
.vis-tooltip {
  background: var(--ink) !important; color: var(--paper) !important;
  border: none !important; border-radius: 6px !important;
  font-family: var(--font-meta) !important; font-size: 12px !important;
  padding: 6px 10px !important; box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
}

/* ---- Search ---- */
.search-result-card {
  transition: border-color .2s, box-shadow .2s;
  text-decoration: none; color: inherit; display: block; cursor: pointer;
}
.search-result-card:hover { border-color: var(--rule-strong) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.05); }
mark { background: var(--scripture-soft); color: var(--ink); padding: 0 1px; border-radius: 2px; }

/* ---- Scrollbars for chip rows ---- */
.chip-row { scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }