/* =========================================================
   The Artist Must Take Sides — Study Companion
   Visual language adapted from The People's Forum
   course deck (The Weapon of Culture, 2026).
   Built by Radical Imagination · CC-BY 4.0
   ========================================================= */

/* ---------- Tokens ---------- */

:root {
  /* Reading the Removed — inverted RI palette
     Marigold base, sunflower accent, deep gold rules, black text */
  --oxblood:       #E8A33D;  /* MARIGOLD — primary base */
  --oxblood-deep:  #B07823;  /* deeper marigold — accent panels */
  --orange:        #0a0a0a;  /* BLACK — primary heading color */
  --orange-hot:    #2a1d00;  /* near-black hover */
  --yellow:        #FFC72C;  /* SUNFLOWER — selection + highlights */
  --yellow-deep:   #FFB000;
  --ink:           #0a0a0a;
  --cream:         #0a0a0a;  /* repurposed as body text — now black */
  --white:         #ffffff;
  --rule:          rgba(0, 0, 0, 0.32);
  --rule-orange:   rgba(0, 0, 0, 0.55);
  --rule-yellow:   rgba(255, 199, 44, 0.85);
  --gold:          #8C5E0A;  /* deep gold — accents on marigold */
  --marigold:      #E8A33D;
  --sunflower:     #FFC72C;
  --black:         #0a0a0a;

  --font-display:  "Anton", "Oswald", Impact, "Arial Narrow Bold", sans-serif;
  --font-slab:     "Alfa Slab One", "Rockwell", "Roboto Slab", Georgia, serif;
  --font-body:     "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:     ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-italic:   "Open Sans", Georgia, serif;

  --measure:   65ch;
  --gutter:    clamp(16px, 4vw, 48px);
  --section-pad: clamp(48px, 9vw, 140px);

  color-scheme: light;
}

/* ---------- Reset + base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--oxblood);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); text-decoration: none; border-bottom: 1px solid rgba(233,75,37,0.4); transition: all 160ms ease; }
a:hover { color: var(--orange-hot); border-bottom-color: var(--orange-hot); }
::selection { background: var(--yellow); color: var(--oxblood); }

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400; /* Anton is 400 only */
  line-height: 0.98;
  letter-spacing: 0;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 0.4em;
}
h1 { font-size: clamp(56px, 9vw, 128px); }
h2 { font-size: clamp(36px, 5.5vw, 72px); }
h3 {
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: 0.01em;
}
h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--orange);
  line-height: 1.4;
}

p { margin: 0 0 1.1em; max-width: var(--measure); }
strong { color: var(--white); font-weight: 700; }
em { color: var(--white); font-style: italic; }

.eyebrow {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 20px;
  display: inline-block;
}

blockquote {
  margin: 2em 0;
  padding: 0 0 0 28px;
  border-left: 3px solid var(--orange);
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--white);
  max-width: var(--measure);
  font-weight: 400;
}
blockquote cite {
  display: block;
  margin-top: 14px;
  font-style: italic;
  font-size: 14px;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.06em;
}

hr {
  border: 0;
  border-top: 1px dotted var(--rule-orange);
  margin: 56px 0;
}

/* ---------- Layout ---------- */

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 880px; }
.section { padding: var(--section-pad) 0; }

/* ---------- Header + Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--oxblood-deep);
  border-bottom: 3px solid var(--orange);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--gutter);
  gap: 24px;
}
.site-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--orange);
  letter-spacing: 0.01em;
  border-bottom: 0;
}
.site-title small {
  display: block;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 2px;
  opacity: 0.7;
}
.site-title:hover { color: var(--orange-hot); }

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.tabs a {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 2px solid transparent;
  padding: 8px 0;
  opacity: 0.8;
}
.tabs a:hover { opacity: 1; color: var(--orange); }
.tabs a.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
  opacity: 1;
}

@media (max-width: 880px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; }
  .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .tabs a { white-space: nowrap; padding: 14px 6px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Pilot banner ---------- */

.pilot-banner {
  background: var(--yellow);
  color: var(--oxblood);
  border-bottom: 1px solid var(--oxblood-deep);
}
.pilot-banner.is-dismissed { display: none; }
.pilot-banner__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px var(--gutter);
  max-width: 1400px;
  margin: 0 auto;
}
.pilot-banner__pill {
  display: inline-flex;
  align-items: center;
  background: var(--oxblood);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 11px 4px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.pilot-banner__text {
  margin: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--oxblood);
  flex: 1;
}
.pilot-banner__link {
  color: var(--oxblood);
  border-bottom: 1.5px solid var(--oxblood);
  font-weight: 700;
  white-space: nowrap;
  margin-left: 4px;
}
.pilot-banner__link:hover {
  color: var(--orange-hot);
  border-bottom-color: var(--orange-hot);
}
.pilot-banner__dismiss {
  background: transparent;
  border: none;
  color: var(--oxblood);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  flex: 0 0 auto;
  font-family: var(--font-display);
  opacity: 0.7;
}
.pilot-banner__dismiss:hover { color: var(--orange-hot); opacity: 1; }
@media (max-width: 720px) {
  .pilot-banner__inner { gap: 10px; padding: 9px 14px; }
  .pilot-banner__text { font-size: 12px; line-height: 1.4; }
  .pilot-banner__pill { font-size: 11px; padding: 4px 9px 3px; }
  .pilot-banner__link { display: inline-block; margin-top: 2px; }
}

/* ---------- About — Pilot status block ---------- */

.pilot-status {
  background: rgba(255, 230, 0, 0.05);
  border-left: 4px solid var(--yellow);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  margin: 0 0 36px;
}
.pilot-status__pill {
  display: inline-block;
  background: var(--yellow);
  color: var(--oxblood);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px 11px 4px;
  border-radius: 2px;
  margin-bottom: 14px;
}
.pilot-status h2 {
  margin: 0 0 14px;
}
.pilot-status p + p {
  margin-top: 14px;
}
.pilot-status__cta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 230, 0, 0.25);
}
.pilot-status__cta strong {
  color: var(--yellow);
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}
.pilot-status__cta a {
  color: var(--yellow);
  font-weight: 700;
  border-bottom: 1.5px solid var(--yellow);
}
.pilot-status__cta a:hover {
  color: var(--orange-hot);
  border-bottom-color: var(--orange-hot);
}

/* ---------- Tab panels ---------- */

.panel { display: none; }
.panel.active { display: block; animation: fadeIn 280ms ease both; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Slide-style hero bar
   (matches the "CULTURE IS A BATTLEFIELD" poster slide)
   ============================================ */

.slide-hero {
  background: var(--orange);
  padding: clamp(60px, 11vw, 140px) var(--gutter);
  margin: 0;
  position: relative;
}
.slide-hero__inner { max-width: 1400px; margin: 0 auto; }
.slide-hero__eyebrow {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(11px, 1.4vw, 15px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 22px;
  opacity: 0.85;
}
.slide-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 11vw, 168px);
  line-height: 0.88;
  color: var(--oxblood);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.slide-hero__sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 28px 0 0;
  opacity: 0.85;
}

/* Poster-strip variant: shown on session heroes */
.poster-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  max-width: 1100px;
  margin: 40px auto 0;
}
.poster-strip__item {
  aspect-ratio: 2/3;
  background: var(--oxblood);
  border: 1px solid var(--oxblood-deep);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--orange);
  text-align: center;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
@media (max-width: 640px) {
  .poster-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Opening hero (the landing title card) ---------- */

.hero {
  background: var(--orange);
  padding: clamp(80px, 14vw, 180px) var(--gutter) clamp(60px, 10vw, 120px);
}
.hero__inner { max-width: 1400px; margin: 0 auto; }
.hero__epigraph {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.35;
  color: var(--oxblood);
  max-width: 34ch;
  margin: 0 0 12px;
}
.hero__attrib {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 52px;
  opacity: 0.9;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 13vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.005em;
  color: var(--oxblood);
  text-transform: uppercase;
  margin: 0 0 28px;
  max-width: 14ch;
}
.hero__title em {
  font-style: normal;
  color: var(--white);
}
.hero__sub {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 22px);
  color: var(--oxblood);
  max-width: 58ch;
  opacity: 0.9;
  margin: 0 0 48px;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 48px;
  padding-top: 28px;
  border-top: 2px solid var(--oxblood);
}
.hero__meta div {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
  opacity: 0.85;
}
.hero__meta div b {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
}

/* ---------- Session map grid ---------- */

.session-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px;
  background: var(--oxblood-deep);
  border: 2px solid var(--oxblood-deep);
  margin: 48px 0;
}
.session-map__cell {
  background: var(--oxblood);
  padding: 32px 28px 36px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-bottom: 3px solid transparent;
}
.session-map__cell.live {
  background: var(--orange);
  border-bottom-color: var(--oxblood);
}
.session-map__cell.ghost { opacity: 0.42; }
.session-map__num {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.session-map__cell.live .session-map__num { color: var(--oxblood); opacity: 0.75; }
.session-map__cell.ghost .session-map__num { color: var(--cream); }
.session-map__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1;
  text-transform: uppercase;
  margin: 16px 0 18px;
}
.session-map__cell.live .session-map__title { color: var(--oxblood); }
.session-map__cell.ghost .session-map__title { color: var(--cream); }
.session-map__cta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.session-map__cell.live a.session-map__cta {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
}
.session-map__cell.live a.session-map__cta:hover { color: var(--white); border-bottom-color: var(--white); }
.session-map__cell.ghost .session-map__cta { color: var(--cream); opacity: 0.7; }

/* ---------- Source list ---------- */

.source-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  border-top: 2px solid var(--orange);
}
.source-list li { border-bottom: 1px dotted var(--rule-orange); }
.source-list a {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: 24px 0;
  border-bottom: 0;
  color: var(--cream);
}
.source-list a:hover { background: rgba(233, 75, 37, 0.06); }
.source-list__num {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.02em;
  color: var(--orange);
}
.source-list__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.04;
  color: var(--white);
  text-transform: uppercase;
}
.source-list__author {
  display: block;
  margin-top: 8px;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--cream);
  opacity: 0.85;
  text-transform: none;
}
.source-list__form {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  align-self: center;
}
@media (max-width: 640px) {
  .source-list a { grid-template-columns: 48px 1fr; gap: 14px; }
  .source-list__form { grid-column: 2; margin-top: 10px; }
}

/* ---------- Source deep dive ---------- */

.source {
  max-width: 880px;
  margin: 0 auto;
}
.source__header {
  padding-bottom: 40px;
  border-bottom: 2px dotted var(--rule-orange);
  margin-bottom: 48px;
}
.source__form {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 18px;
}
.source__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(44px, 7.5vw, 88px);
  line-height: 0.94;
  color: var(--white);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.source__author {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--cream);
  margin: 0;
  max-width: 60ch;
}
.source__meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}
.source__section { margin: 56px 0; }
.source__section h3 { margin-bottom: 18px; }

/* ---------- OPPOSE / PROPOSE
   (this pattern is LITERALLY in the course deck —
    slab serif, all caps, black cards on orange ground)
   ============================================ */

.dialectic {
  margin: 56px 0;
  padding: 52px 40px 56px;
  background: var(--orange);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 56px;
  align-items: start;
  position: relative;
}
.dialectic::before {
  content: "WE MUST NOT JUST…";
  display: block;
  grid-column: 1 / -1;
  position: absolute;
  top: 20px;
  left: 40px;
  font-family: var(--font-slab);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--oxblood);
  letter-spacing: 0.01em;
}
.dialectic__side { padding-top: 60px; }
.dialectic__label {
  font-family: var(--font-slab);
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1;
  color: var(--oxblood);
  margin: 0 0 22px;
  letter-spacing: 0;
}
.dialectic__card {
  background: var(--ink);
  color: var(--white);
  border-radius: 14px;
  padding: 28px 30px;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
}
.dialectic__card p { color: var(--white); margin: 0 0 14px; max-width: none; }
.dialectic__card p:last-child { margin-bottom: 0; }
.dialectic__bridge {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-slab);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--oxblood);
}
@media (max-width: 720px) {
  .dialectic { grid-template-columns: 1fr; gap: 32px; padding: 64px 24px 40px; }
  .dialectic::before { top: 24px; left: 24px; }
  .dialectic__bridge { display: none; }
  .dialectic__side { padding-top: 0; }
}

/* ---------- Passage block ---------- */

.passage {
  margin: 40px 0;
  padding: 32px 34px;
  background: var(--oxblood-deep);
  border-left: 4px solid var(--orange);
}
.passage__text {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.45;
  color: var(--white);
  margin: 0 0 14px;
}
.passage__cite {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0;
}
.passage__commentary {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dotted var(--rule-orange);
  color: var(--cream);
  font-size: 16px;
  line-height: 1.65;
  font-style: normal;
  opacity: 0.95;
}

/* ---------- Further reading ---------- */

.further-reading {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.further-reading li {
  padding: 14px 0;
  border-bottom: 1px dotted var(--rule-orange);
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
}
.further-reading li:last-child { border-bottom: 0; }
.further-reading .tag {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: var(--orange);
  padding: 3px 10px;
  margin-right: 12px;
  vertical-align: middle;
  border-radius: 3px;
}

/* ---------- Listen block ("Hear it" media embed) ---------- */

.listen-block {
  position: relative;
  margin: 28px 0;
  padding: 26px 30px 28px 36px;
  background: var(--oxblood-deep);
  border-top: 1px dotted var(--rule-orange);
  border-right: 1px dotted var(--rule-orange);
  border-bottom: 1px dotted var(--rule-orange);
  border-left: 3px solid var(--orange);
  border-radius: 0 4px 4px 0;
}
.listen-block > h4 {
  margin-top: 0;
}
.listen-block__embed {
  margin-top: 14px;
}
.listen-block__embed iframe {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 4px;
  background: #000;
}
.listen-block__placeholder {
  border: 1px dashed var(--rule-orange);
  border-radius: 4px;
  padding: 22px 24px;
  background: rgba(0, 0, 0, 0.18);
  font-family: var(--font-body);
}
.listen-block__placeholder p {
  color: var(--cream);
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
}
.listen-block__placeholder p strong {
  color: var(--cream);
}
.listen-block__placeholder-pill {
  display: inline-block;
  background: rgba(255, 230, 0, 0.18);
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 4px 10px 3px;
  border-radius: 2px;
  margin-bottom: 8px;
}
.listen-block__placeholder-hint {
  font-size: 13px !important;
  color: var(--cream);
  opacity: 0.55;
  font-style: italic;
  margin-top: 12px !important;
}

/* ---------- Reflection field ---------- */

.reflect {
  margin: 28px 0;
  padding: 28px 30px 28px 36px;
  background: var(--oxblood-deep);
  border-top: 1px dotted var(--rule-orange);
  border-right: 1px dotted var(--rule-orange);
  border-bottom: 1px dotted var(--rule-orange);
  border-left: 3px solid var(--orange);
  border-radius: 0 4px 4px 0;
}
.reflect__prompt {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.2;
  color: var(--orange);
  text-transform: uppercase;
  margin: 0 0 16px;
  max-width: 54ch;
}
.reflect textarea {
  width: 100%;
  min-height: 130px;
  background: transparent;
  border: 0;
  border-top: 1px dotted var(--rule-orange);
  padding: 18px 0 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--white);
  resize: vertical;
  outline: none;
}
.reflect textarea::placeholder {
  color: var(--cream);
  opacity: 0.4;
  font-style: italic;
}
.reflect__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: 0.55;
}

/* ---------- Prev/Next nav ---------- */

.source-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--oxblood-deep);
  border: 2px solid var(--oxblood-deep);
  margin: 72px 0 0;
}
.source-nav a {
  background: var(--oxblood);
  padding: 28px 30px;
  border-bottom: 0;
  color: var(--cream);
  display: block;
  min-height: 110px;
}
.source-nav a small {
  display: block;
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.source-nav a strong {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  color: var(--white);
  text-transform: uppercase;
  line-height: 1.1;
}
.source-nav a:hover { background: var(--orange); }
.source-nav a:hover strong { color: var(--oxblood); }
.source-nav a:hover small { color: var(--oxblood); opacity: 0.85; }
.source-nav .next { text-align: right; }

/* ---------- Constellation ---------- */

.constellation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.constellation-node {
  padding: 28px 30px;
  background: var(--ink);
  border-radius: 10px;
  border: 2px solid var(--oxblood-deep);
}
.constellation-node h4 {
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 24px;
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
.constellation-node p { font-size: 15px; line-height: 1.55; margin-bottom: 0.6em; color: var(--cream); }
.constellation-node .figs {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dotted var(--rule-orange);
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--orange);
}

/* ---------- Glossary ---------- */

.gloss-list { list-style: none; padding: 0; margin: 40px 0; }
.gloss-list > li { border-top: 2px solid var(--orange); }
.gloss-list > li:last-child { border-bottom: 2px solid var(--orange); }
.gloss-list details { padding: 22px 0; }
.gloss-list summary {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  color: var(--white);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  line-height: 1;
}
.gloss-list summary::-webkit-details-marker { display: none; }
.gloss-list summary::after {
  content: "+";
  color: var(--orange);
  font-family: var(--font-display);
  font-size: 32px;
  margin-left: 20px;
}
.gloss-list details[open] summary::after { content: "—"; }
.gloss-list details[open] summary { color: var(--orange); }
.gloss-list .gloss-body { padding-top: 22px; max-width: var(--measure); }
.gloss-list .gloss-body .tag {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: var(--orange);
  padding: 2px 10px;
  margin-right: 10px;
  border-radius: 3px;
}

/* ---------- Reflections page ---------- */

.reflect-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 28px 0 40px;
}
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 2px solid var(--orange);
  color: var(--orange);
  background: transparent;
  cursor: pointer;
  border-radius: 0;
  transition: all 160ms ease;
}
.btn:hover { background: var(--orange); color: var(--oxblood); }
.btn.ghost { border-color: var(--rule); color: var(--cream); opacity: 0.85; }
.btn.ghost:hover { background: var(--rule); color: var(--white); }

.reflection-export {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 40px;
}
.reflection-export .entry {
  padding: 22px 24px;
  background: var(--oxblood-deep);
  border-left: 3px solid var(--orange);
}
.reflection-export .entry h4 {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--orange);
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
}
.reflection-export .entry em { color: var(--cream); font-style: italic; opacity: 0.85; }
.reflection-export .entry p { margin: 12px 0 0; color: var(--white); font-family: var(--font-body); }
.reflection-export .empty {
  padding: 48px 0;
  text-align: center;
  color: var(--cream);
  font-style: italic;
  opacity: 0.55;
}

/* ---------- Recap / numbered list (deck closer pattern) ---------- */

.recap-banner {
  background: var(--orange);
  padding: 28px var(--gutter);
  margin: 72px 0 0;
}
.recap-banner__inner { max-width: 1200px; margin: 0 auto; }
.recap-banner h2 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  font-size: clamp(32px, 5vw, 56px);
  text-transform: uppercase;
}
.recap-list {
  list-style: none;
  padding: 40px var(--gutter) 48px;
  margin: 0;
  background: var(--oxblood);
  counter-reset: item;
}
.recap-list__inner { max-width: 1200px; margin: 0 auto; }
.recap-list li {
  counter-increment: item;
  padding: 22px 0 24px;
  border-bottom: 1px dotted var(--rule-orange);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: baseline;
}
.recap-list li::before {
  content: counter(item) ".";
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--orange);
}
.recap-list li p {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 19px);
  color: var(--white);
  margin: 0;
  max-width: 62ch;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 80px var(--gutter) 100px;
  background: var(--oxblood-deep);
  border-top: 3px solid var(--orange);
  color: var(--cream);
  font-size: 14px;
  line-height: 1.65;
}
.site-footer .wrap { max-width: 1200px; }
.site-footer a { color: var(--orange); }
.site-footer .cc {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: var(--orange);
  padding: 3px 10px;
  margin-bottom: 18px;
  display: inline-block;
  border-radius: 3px;
}

/* ---------- Utilities ---------- */

.mono-label {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
}
.unverified {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--orange);
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: middle;
  border-radius: 3px;
}

/* Oval-masked portrait (the signature deck motif) */
.portrait-oval {
  display: inline-block;
  width: min(100%, 440px);
  aspect-ratio: 5 / 6;
  background: #1a0302 center/cover no-repeat;
  clip-path: ellipse(48% 48% at 50% 50%);
  filter: grayscale(0.15) contrast(1.05);
  margin: 20px 0;
}
.portrait-oval--right { float: right; margin-left: 28px; max-width: 360px; }

/* ---------- Deck graphic block
   For embedding an actual course deck slide with attribution.
   ============================================ */

.deck-graphic {
  margin: 48px 0;
  position: relative;
}
.deck-graphic__frame {
  background: var(--oxblood-deep);
  padding: 6px;
  border: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}
.deck-graphic__frame img {
  width: 100%;
  height: auto;
  display: block;
}
.deck-graphic__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: var(--yellow);
  padding: 4px 10px;
  border-radius: 2px;
}
.deck-graphic__caption {
  margin-top: 12px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--cream);
  opacity: 0.75;
  max-width: 60ch;
}
.deck-graphic__caption a { color: var(--yellow); border-bottom-color: rgba(255, 230, 0, 0.4); }
.deck-graphic__caption a:hover { color: var(--yellow-deep); border-bottom-color: var(--yellow-deep); }

/* Small version: used inside source deep-dives or sidebars */
.deck-graphic--sm { max-width: 480px; }

/* ---------- CTA pill — matches the resource page "READ HERE / LISTEN / WATCH" buttons ---------- */

.cta-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 10px 22px;
  background: var(--yellow);
  color: var(--oxblood);
  border: 0;
  border-radius: 2px;
  margin: 4px 8px 4px 0;
  transition: background 160ms ease;
}
.cta-pill:hover { background: var(--yellow-deep); color: var(--oxblood); }

.cta-pill--audio {
  background: transparent;
  color: var(--yellow);
  border: 1px solid var(--yellow);
}
.cta-pill--audio:hover { background: var(--yellow); color: var(--oxblood); }

.cta-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 24px 0;
}

/* ---------- Yellow recap numbering (overrides the orange default 10% accent move) ---------- */

.recap-list li::before {
  color: var(--yellow);
}

/* ---------- Author portrait image (real photo, oval-masked) ---------- */

.author-portrait {
  display: block;
  width: min(100%, 380px);
  aspect-ratio: 5 / 6;
  object-fit: cover;
  object-position: center top;
  clip-path: ellipse(46% 48% at 50% 50%);
  filter: contrast(1.04) saturate(0.9);
  margin: 0 auto 20px;
  background: var(--oxblood-deep);
}

/* Source header with side-by-side portrait */
.source__header--illustrated {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
@media (max-width: 760px) {
  .source__header--illustrated { grid-template-columns: 1fr; }
}

/* ---------- Full-bleed poster image for session heroes ---------- */

.poster-image {
  margin: 0;
  padding: 0;
  background: var(--orange);
  line-height: 0;
}
.poster-image img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
}

/* ---------- Constellation (D3 force graph) ---------- */

.constellation {
  margin: 40px 0 24px;
  background: var(--oxblood-deep, #2b0706);
  border: 1px solid rgba(233, 75, 37, 0.2);
  border-radius: 4px;
  padding: 16px;
  position: relative;
}
#constellation-root {
  width: 100%;
  aspect-ratio: 1200 / 760;
  max-height: 80vh;
  overflow: hidden;
}
#constellation-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#constellation-svg:active { cursor: grabbing; }
.constellation-node-g circle { transition: filter 160ms ease; }
.constellation-node-g:hover circle { filter: drop-shadow(0 0 8px rgba(255, 230, 0, 0.8)); }
.constellation-label { user-select: none; }
.constellation-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dotted rgba(233, 75, 37, 0.4);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream);
  align-items: center;
}
.constellation-legend .legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  border: 1.5px solid var(--orange);
}
.constellation-legend .legend-dot--source { background: var(--oxblood-deep, #2b0706); }
.constellation-legend .legend-dot--gloss { background: var(--yellow); }
.constellation-legend .legend-line {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: var(--orange);
  margin-right: 8px;
  vertical-align: middle;
}
.constellation-hint { opacity: 0.65; font-style: italic; letter-spacing: 0.06em; text-transform: none; font-weight: 400; }

.constellation-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--ink, #0b0b0b);
  color: var(--cream);
  padding: 10px 14px;
  border-left: 3px solid var(--yellow);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.4;
  max-width: 300px;
  z-index: 1000;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6);
}
.constellation-tooltip strong {
  color: var(--yellow);
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  #constellation-root { aspect-ratio: 4 / 5; }
  .constellation-label { font-size: 10px !important; }
}

/* ---------- Quote-card share button (on every passage) ---------- */

.quote-share-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
}
.quote-share-group .quote-share { margin: 0; }

.quote-share {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 18px 0 0;
  padding: 10px 18px;
  background: transparent;
  color: var(--orange);
  border: 1px solid var(--orange);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.quote-share:hover:not([disabled]) {
  background: var(--yellow);
  color: var(--oxblood);
  border-color: var(--yellow);
}
.quote-share[disabled] { opacity: 0.6; cursor: wait; }

/* ---------- Highlight + share popover ---------- */

.highlight-popover {
  position: absolute;
  z-index: 999;
  background: var(--ink, #0b0b0b);
  color: var(--yellow);
  border: 0;
  padding: 12px 18px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 32px rgba(0,0,0,0.5);
  border-radius: 4px;
  white-space: nowrap;
  transition: background 160ms ease;
}
.highlight-popover:hover { background: var(--oxblood); color: var(--yellow); }
.highlight-popover::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  margin-left: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--ink, #0b0b0b);
}

mark.user-highlight {
  background: var(--yellow);
  color: var(--oxblood);
  padding: 2px 4px;
  border-radius: 2px;
  box-shadow: 0 0 0 3px rgba(255, 230, 0, 0.35);
  font-weight: 700;
}

/* ============================================
   READING THE REMOVED — Vol 03 additions
   visual references · curation list · stub sources
   ============================================ */

.curation-list {
  list-style: none;
  counter-reset: curation;
  padding: 0;
  margin: 24px 0 0 0;
  display: grid;
  gap: 18px;
}
.curation-list li {
  counter-increment: curation;
  position: relative;
  padding: 18px 22px 18px 64px;
  background: rgba(245, 240, 230, 0.04);
  border-left: 3px solid var(--orange);
  color: var(--cream);
  font-size: 16px;
  line-height: 1.55;
  border-radius: 2px;
}
.curation-list li::before {
  content: counter(curation, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 18px;
  font-family: 'Anton', 'Open Sans', sans-serif;
  font-size: 22px;
  color: var(--orange);
  letter-spacing: 0.04em;
}
.curation-list li strong {
  color: var(--yellow);
  font-weight: 700;
}

.visual-refs {
  margin: 60px 0 40px;
  padding: 32px 0 0;
  border-top: 1px solid rgba(245, 240, 230, 0.18);
}
.visual-refs__head {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--yellow);
  margin: 0 0 8px 0;
  letter-spacing: 0.02em;
}
.visual-refs__intro {
  color: var(--cream);
  font-size: 15px;
  font-style: italic;
  max-width: 60ch;
  margin: 0 0 28px 0;
  opacity: 0.85;
}
.visual-refs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.visual-ref {
  background: rgba(245, 240, 230, 0.05);
  border: 1px solid rgba(245, 240, 230, 0.12);
  padding: 0 0 22px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
}
.visual-ref__placeholder {
  background: linear-gradient(135deg, rgba(233, 75, 37, 0.18), rgba(255, 230, 0, 0.06));
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.visual-ref h4 {
  font-family: 'Alfa Slab One', Georgia, serif;
  font-size: 18px;
  color: var(--cream);
  margin: 0 18px 4px;
  letter-spacing: 0.01em;
}
.visual-ref__meta {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: var(--orange);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 18px 10px;
}
.visual-ref__pairs {
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-style: italic;
  color: var(--yellow);
  margin: 0 18px 12px;
}
.visual-ref__pairs a {
  color: var(--yellow);
  border-bottom-color: rgba(255, 230, 0, 0.4);
}
.visual-ref p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--cream);
  margin: 0 18px;
}

/* Inline source portrait — for primary-source visual artists */
.source__portrait {
  margin: 18px 0 0;
  max-width: 320px;
}
.source__portrait img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border: 2px solid var(--black);
  background: var(--black);
}
.source__portrait figcaption {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 6px;
}

.source--stub .source__header { padding-bottom: 18px; }
.source--stub .source__section { padding: 14px 0; }
.source--stub .source__section h4 { font-size: 14px; }

/* ============================================
   PALETTE INVERSION — overrides
   Marigold base, sunflower accent, deep gold rules,
   black ink. These rules override the dark-mode defaults
   inherited from the Take Sides Companion engine.
   ============================================ */

::selection { background: var(--black); color: var(--sunflower); }

a {
  color: #6b1f00;  /* burnt sienna for links — readable on marigold */
  border-bottom: 1px solid rgba(107, 31, 0, 0.35);
}
a:hover { color: var(--black); border-bottom-color: var(--black); }

h1, h2, h3, h4 { color: var(--black); }

/* Hero: keep black ink on marigold base (just inherits) */
.hero { background: var(--marigold); border-bottom: 4px solid var(--black); }
.hero__epigraph { color: var(--gold); }
.hero__attrib { color: var(--black); }
.hero__title { color: var(--black); }
.hero__sub { color: var(--black); }
.hero__meta { border-top: 1px solid rgba(0,0,0,0.25); }
.hero__meta div { color: var(--black); }
.hero__meta b { color: var(--gold); }

/* Slide-hero — switch to BLACK band with marigold/sunflower text for contrast pop */
.slide-hero {
  background: var(--black);
  color: var(--sunflower);
  border-bottom: 4px solid var(--gold);
}
.slide-hero__eyebrow { color: var(--marigold); }
.slide-hero__title { color: var(--sunflower); }
.slide-hero__sub { color: var(--marigold); }

/* Site header — black band with sunflower/marigold text */
.site-header {
  background: var(--black);
  border-bottom: 1px solid var(--gold);
}
.site-title { color: var(--sunflower); }
.site-title small { color: var(--marigold); }
.tabs a { color: var(--marigold); border-bottom-color: transparent; }
.tabs a:hover, .tabs a.active { color: var(--sunflower); border-bottom-color: var(--sunflower); }

/* Site footer — black band */
.site-footer {
  background: var(--black);
  color: var(--marigold);
  border-top: 4px solid var(--gold);
}
.site-footer p { color: var(--marigold); }
.site-footer a { color: var(--sunflower); border-bottom-color: rgba(255,199,44,0.35); }
.site-footer .cc { background: var(--sunflower); color: var(--black); }

/* Section map cells — black on marigold */
.session-map__cell {
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.25);
}
.session-map__cell.live { border-color: var(--black); }
.session-map__num { color: var(--gold); }
.session-map__title { color: var(--black); }
.session-map__cta { color: var(--gold); border-bottom-color: rgba(140,94,10,0.4); }
.session-map__cta:hover { color: var(--black); border-bottom-color: var(--black); }

/* Source list cards */
.source-list a {
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.18);
  border-left: 4px solid var(--gold);
  color: var(--black);
}
.source-list a:hover {
  background: var(--black);
  color: var(--sunflower);
  border-left-color: var(--sunflower);
}
.source-list a:hover .source-list__num,
.source-list a:hover .source-list__title,
.source-list a:hover .source-list__author,
.source-list a:hover .source-list__form { color: var(--sunflower); }
.source-list__num { color: var(--gold); }
.source-list__title { color: var(--black); }
.source-list__author { color: rgba(0,0,0,0.65); }
.source-list__form { color: var(--gold); }

/* Source articles */
.source { background: transparent; }
.source__header { border-bottom: 2px solid var(--black); }
.source__form { color: var(--gold); }
.source__title { color: var(--black); }
.source__author { color: var(--black); }
.source__meta span { color: var(--gold); border-color: rgba(0,0,0,0.3); }
.source__section h4 { color: var(--gold); border-bottom-color: rgba(0,0,0,0.2); }
.source__section p { color: var(--black); }
.source__section ul li { color: var(--black); }

/* Passages — black card on marigold */
.passage {
  background: var(--black);
  border-left: 4px solid var(--sunflower);
  color: var(--sunflower);
}
.passage__text { color: var(--sunflower); }
.passage__cite { color: var(--marigold); }
.passage__commentary { color: var(--marigold); border-top-color: rgba(232,163,61,0.3); }

/* Reflect blocks */
.reflect {
  background: rgba(0,0,0,0.05);
  border-left: 3px solid var(--gold);
  border-top: 1px dotted rgba(0,0,0,0.25);
  border-right: 1px dotted rgba(0,0,0,0.25);
  border-bottom: 1px dotted rgba(0,0,0,0.25);
}
.reflect__prompt { color: var(--black); }
.reflect textarea {
  background: rgba(255, 199, 44, 0.18);
  color: var(--black);
  border: 1px solid rgba(0,0,0,0.25);
}
.reflect textarea:focus { border-color: var(--black); background: rgba(255,199,44,0.32); outline: 0; }
.reflect__saved { color: var(--gold); }

/* CTA pills — black background, sunflower text */
.cta-pill {
  background: var(--black);
  color: var(--sunflower);
  border: 1px solid var(--black);
}
.cta-pill:hover { background: var(--sunflower); color: var(--black); border-color: var(--black); }

/* Buttons */
.btn {
  background: var(--black);
  color: var(--sunflower);
  border: 1px solid var(--black);
}
.btn:hover { background: var(--sunflower); color: var(--black); border-color: var(--black); }
.btn.ghost { background: transparent; color: var(--black); border-color: var(--black); }
.btn.ghost:hover { background: var(--black); color: var(--sunflower); }

/* Visual-ref cards on marigold */
.visual-refs { border-top-color: rgba(0,0,0,0.3); }
.visual-refs__head { color: var(--gold); }
.visual-refs__intro { color: var(--black); }
.visual-ref {
  background: rgba(0,0,0,0.05);
  border: 1px solid var(--black);
  overflow: hidden;
}
.visual-ref h4 { color: var(--black); }
.visual-ref__meta { color: var(--gold); }
.visual-ref__pairs { color: var(--gold); }
.visual-ref__pairs a { color: var(--black); border-bottom-color: rgba(0,0,0,0.4); }
.visual-ref__pairs a:hover { color: var(--gold); }
.visual-ref p { color: var(--black); }
.visual-ref__placeholder {
  background: linear-gradient(135deg, var(--black) 0%, var(--gold) 100%);
  color: var(--sunflower);
}
.visual-ref--doc { border-color: var(--sunflower); }
.visual-ref--doc h4 { color: var(--gold); }
.visual-ref__placeholder--film {
  background: var(--black);
  color: var(--sunflower);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.06em;
}
.visual-ref__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  margin-bottom: 18px;
  background: var(--black);
}

/* Curation list */
.curation-list li {
  background: rgba(0,0,0,0.04);
  border-left: 3px solid var(--gold);
  color: var(--black);
}
.curation-list li::before { color: var(--gold); }
.curation-list li strong { color: var(--gold); }

/* Recap-banner / theses */
.recap-banner { background: var(--black); }
.recap-banner h2 { color: var(--sunflower); }
.recap-list { background: var(--marigold); border-top: 4px solid var(--gold); }
.recap-list li { color: var(--black); border-bottom-color: rgba(0,0,0,0.18); }
.recap-list li::before { color: var(--gold); }

/* Section + general body */
section.panel { background: var(--marigold); color: var(--black); }
section.panel p { color: var(--black); }
section.panel hr { border-color: rgba(0,0,0,0.25); }

/* Reflections list cards */
.reflection-export { color: var(--black); }
.reflection-export .empty { color: rgba(0,0,0,0.55); }

/* Mono labels (License) */
.mono-label { background: var(--black); color: var(--sunflower); }

/* Further-reading tags */
.further-reading .tag { background: var(--gold); color: var(--marigold); }

/* Footer cc badge */
.cc { background: var(--sunflower); color: var(--black); }

/* ============================================
   PER-SESSION ACCENT PALETTE
   Each session carries one regional accent color
   that touches its eyebrow, dividers, hover states,
   and a few section h4 stripes. Marigold + black
   stay constant; the accent gives each session a
   distinct emotional temperature.
   ============================================ */

[data-tab="session-1"] { --accent: #C13B1F; --accent-soft: #F4B6A6; } /* chili red — Latin America heat */
[data-tab="session-2"] { --accent: #1F7A8C; --accent-soft: #A4D2DD; } /* ocean teal — Caribbean water */
[data-tab="session-3"] { --accent: #4D7C2C; --accent-soft: #B5D49A; } /* palm green — West Africa, Vietnam */
[data-tab="session-4"] { --accent: #2D3F8B; --accent-soft: #A6B0DD; } /* lapis indigo — Middle East */
[data-tab="session-5"] { --accent: #7A2C5E; --accent-soft: #D5A6C2; } /* plum — Asian sunset */
[data-tab="opening"]   { --accent: #8C5E0A; --accent-soft: #E8C77F; } /* deep gold — book itself */

/* Slide-hero band uses the session accent on the eyebrow */
.slide-hero { background: var(--black); border-bottom-color: var(--accent, var(--gold)); }
.slide-hero__eyebrow { color: var(--accent-soft, var(--marigold)); }
.slide-hero__sub { color: var(--accent-soft, var(--marigold)); }

/* Source card left-rules pick up the accent */
.source-list a { border-left-color: var(--accent, var(--gold)); }
.source-list a:hover {
  background: var(--black);
  border-left-color: var(--accent-soft, var(--sunflower));
}

/* Section h4 underlines pick up the accent */
.source__section h4 {
  color: var(--accent, var(--gold));
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

/* Source meta pills */
.source__meta span { color: var(--accent, var(--gold)); }

/* Source list form pills sit colored by accent */
.source-list__form { color: var(--accent, var(--gold)); }
.source-list__num { color: var(--accent, var(--gold)); }

/* hr tag inside session panels picks up the accent as a soft line */
section.panel hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent, var(--black)) 30%, var(--accent, var(--black)) 70%, transparent 100%);
  margin: 60px 0;
  opacity: 0.6;
}

/* ============================================
   CUSTOM SVG DIVIDERS PER SESSION
   Hand-drawn-feeling decorative breaks. Insert
   <div class="divider divider--zigzag"></div> etc.
   between major content blocks for warmth.
   ============================================ */

.divider {
  margin: 56px auto;
  height: 28px;
  max-width: 480px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.85;
}

.divider--zigzag {
  /* Session 1 — zigzag. Made for chili-red accent. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 28' fill='none' stroke='%23C13B1F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2 14 L24 4 L46 24 L68 4 L90 24 L112 4 L134 24 L156 4 L178 24 L200 4 L222 24 L244 4 L266 24 L288 4 L310 24 L332 4 L354 24 L376 4 L398 24 L420 4 L442 24 L464 4 L478 14'/></svg>");
}
.divider--wave {
  /* Session 2 — water wave with droplets. Caribbean teal. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 28' fill='none' stroke='%231F7A8C' stroke-width='2.4' stroke-linecap='round'><path d='M2 14 Q 30 0, 60 14 T 120 14 T 180 14 T 240 14 T 300 14 T 360 14 T 420 14 T 478 14'/><circle cx='90' cy='5' r='1.6' fill='%231F7A8C'/><circle cx='240' cy='3' r='1.6' fill='%231F7A8C'/><circle cx='390' cy='5' r='1.6' fill='%231F7A8C'/></svg>");
}
.divider--asterisk {
  /* Session 3 — kola/asterisk star pattern. Palm green. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 28' fill='%234D7C2C' stroke='%234D7C2C' stroke-width='1.6' stroke-linecap='round'><line x1='2' y1='14' x2='180' y2='14' stroke-width='1.4'/><g transform='translate(220 14)'><line x1='-12' y1='0' x2='12' y2='0'/><line x1='0' y1='-12' x2='0' y2='12'/><line x1='-9' y1='-9' x2='9' y2='9'/><line x1='-9' y1='9' x2='9' y2='-9'/></g><g transform='translate(260 14)'><line x1='-8' y1='0' x2='8' y2='0'/><line x1='0' y1='-8' x2='0' y2='8'/></g><line x1='300' y1='14' x2='478' y2='14' stroke-width='1.4'/></svg>");
}
.divider--arabesque {
  /* Session 4 — geometric arabesque. Lapis indigo. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 28' fill='none' stroke='%232D3F8B' stroke-width='1.8' stroke-linecap='round'><line x1='2' y1='14' x2='180' y2='14'/><g transform='translate(220 14)'><circle cx='0' cy='0' r='8'/><circle cx='0' cy='0' r='4'/><line x1='-12' y1='0' x2='-9' y2='0'/><line x1='9' y1='0' x2='12' y2='0'/></g><g transform='translate(260 14)'><circle cx='0' cy='0' r='8'/><circle cx='0' cy='0' r='4'/></g><line x1='300' y1='14' x2='478' y2='14'/></svg>");
}
.divider--brush {
  /* Session 5 — brush stroke. Plum. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 28' fill='%237A2C5E'><path d='M8 14 Q 80 8, 160 14 T 320 14 Q 380 18, 472 12 L 472 16 Q 380 22, 320 18 T 160 18 Q 80 12, 8 18 Z' opacity='0.85'/><circle cx='6' cy='14' r='2.5'/><circle cx='474' cy='14' r='1.5'/></svg>");
}
.divider--star {
  /* Generic — opening session, four-pointed compass star. Deep gold. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 28' fill='none' stroke='%238C5E0A' stroke-width='1.6' stroke-linecap='round'><line x1='2' y1='14' x2='200' y2='14'/><g transform='translate(240 14)' fill='%238C5E0A'><polygon points='0,-10 2.5,-2.5 10,0 2.5,2.5 0,10 -2.5,2.5 -10,0 -2.5,-2.5'/></g><line x1='280' y1='14' x2='478' y2='14'/></svg>");
}

/* ============================================
   FLAG CHIPS — country flags on source cards
   ============================================ */

.flag {
  display: inline-block;
  font-size: 1.05em;
  margin-right: 6px;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.15));
  vertical-align: -1px;
}
.source-list__author .flag {
  margin-right: 8px;
}
.source__author .flag,
.source__meta .flag {
  margin-right: 4px;
}

/* ============================================
   FORM-TYPE PILLS — colored by form
   ============================================ */

.source-list__form {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.18);
  white-space: nowrap;
}
.source-list a:hover .source-list__form {
  background: var(--accent-soft, var(--sunflower));
  color: var(--black);
  border-color: var(--accent-soft, var(--sunflower));
}

/* ============================================
   PAPER TEXTURE & WARMTH
   Subtle SVG noise on the body background lifts
   the marigold off the screen. Sections get a
   gentle vignette so cards feel like they sit ON
   paper, not float.
   ============================================ */

body {
  background-color: var(--marigold);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.05  0 0 0 0 0.04  0 0 0 0 0.02  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-attachment: fixed;
}

section.panel {
  background: transparent;
}

/* Hero gets a soft radial glow */
.hero {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,199,44,0.35) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(140,94,10,0.20) 0%, transparent 55%),
    var(--marigold);
  position: relative;
}

/* Hero star scatter — small SVG dots for the "constellation of countries" feel */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='%238C5E0A' opacity='0.55'><circle cx='40' cy='60' r='1.8'/><circle cx='110' cy='30' r='1.2'/><circle cx='200' cy='80' r='1.6'/><circle cx='320' cy='40' r='1'/><circle cx='420' cy='90' r='1.8'/><circle cx='510' cy='50' r='1.2'/><circle cx='560' cy='110' r='1.4'/><circle cx='80' cy='180' r='1'/><circle cx='160' cy='220' r='1.6'/><circle cx='240' cy='160' r='1.2'/><circle cx='350' cy='200' r='1.8'/><circle cx='480' cy='240' r='1.2'/><circle cx='90' cy='310' r='1.4'/><circle cx='200' cy='340' r='1'/><circle cx='280' cy='290' r='1.6'/><circle cx='400' cy='320' r='1.2'/><circle cx='530' cy='360' r='1.8'/><circle cx='130' cy='380' r='1'/><circle cx='350' cy='370' r='1.4'/><circle cx='450' cy='380' r='1.2'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  opacity: 0.45;
}
.hero__inner { position: relative; z-index: 1; }

/* ============================================
   AUDIO BLOCK — embedded readings
   ============================================ */

.audio-block {
  margin: 24px 0;
  padding: 18px;
  background: var(--black);
  border-left: 4px solid var(--sunflower);
  border-radius: 2px;
}
.audio-block__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sunflower);
  margin: 0 0 12px;
}
.audio-block__embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 2px;
}
.audio-block__embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.audio-block--audio-only {
  padding-bottom: 18px;
}
.audio-block--audio-only .audio-block__embed {
  padding-bottom: 0;
  height: 80px;
}
.audio-block__cite {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--marigold);
  margin: 10px 0 0;
}

/* ============================================
   HARING-STYLE MOTION VOCABULARY
   Wiggle. Bounce. Twinkle. Burst. Out-of-sync.
   The page should feel alive.
   ============================================ */

/* --- core keyframes --- */

@keyframes wiggle {
  0%   { transform: rotate(-3deg)  translateY(0px); }
  25%  { transform: rotate(2deg)   translateY(-1.5px); }
  50%  { transform: rotate(-2deg)  translateY(0px); }
  75%  { transform: rotate(3deg)   translateY(-1.5px); }
  100% { transform: rotate(-3deg)  translateY(0px); }
}

@keyframes bounce-soft {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

@keyframes twinkle {
  0%   { opacity: 0.35; transform: scale(0.92); }
  50%  { opacity: 0.95; transform: scale(1.06); }
  100% { opacity: 0.35; transform: scale(0.92); }
}

@keyframes pulse-soft {
  0%   { transform: scale(1);     opacity: 0.85; }
  50%  { transform: scale(1.04);  opacity: 1;    }
  100% { transform: scale(1);     opacity: 0.85; }
}

@keyframes drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}

@keyframes burst-in {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes haring-vibrate {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20%      { transform: translate(-1px, -1px) rotate(-0.5deg); }
  40%      { transform: translate(1px, 1px) rotate(0.5deg); }
  60%      { transform: translate(-1px, 1px) rotate(-0.5deg); }
  80%      { transform: translate(1px, -1px) rotate(0.5deg); }
}

@keyframes radiate {
  0%   { transform: scale(0.8); opacity: 0; }
  60%  { opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* --- flag whimsy: each flag wiggles out of sync --- */

.flag {
  display: inline-block;
  animation: wiggle 4.2s ease-in-out infinite;
  transform-origin: 50% 80%;
  will-change: transform;
}
/* Vary durations + delays so they don't sync up */
.source-list li:nth-child(2n) .flag   { animation-duration: 5.6s; animation-delay: 0.4s; }
.source-list li:nth-child(3n) .flag   { animation-duration: 3.8s; animation-delay: 1.1s; }
.source-list li:nth-child(5n) .flag   { animation-duration: 6.2s; animation-delay: 0.7s; }
.source-list li:nth-child(7n) .flag   { animation-duration: 4.8s; animation-delay: 1.6s; }
.source-list li:nth-child(11n) .flag  { animation-duration: 5.2s; animation-delay: 2.1s; }

/* On hover the flag bounces with extra glee */
.source-list a:hover .flag {
  animation: bounce-soft 0.7s ease-in-out infinite;
}

/* --- hero star scatter twinkles --- */

.hero::before {
  animation: twinkle 6s ease-in-out infinite;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' fill='%23FFC72C' opacity='0.7'><circle cx='70' cy='110' r='1.4'/><circle cx='180' cy='60' r='1.8'/><circle cx='280' cy='130' r='1.2'/><circle cx='380' cy='70' r='1.6'/><circle cx='470' cy='150' r='1.4'/><circle cx='540' cy='80' r='1.6'/><circle cx='130' cy='250' r='1.2'/><circle cx='270' cy='280' r='1.6'/><circle cx='420' cy='270' r='1.4'/><circle cx='510' cy='320' r='1.8'/><circle cx='60' cy='340' r='1.2'/><circle cx='340' cy='350' r='1.4'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  animation: twinkle 4.2s ease-in-out infinite reverse;
  animation-delay: 1.3s;
  z-index: 0;
}

/* --- dividers drift gently --- */

.divider {
  animation: drift 7s ease-in-out infinite;
  will-change: transform;
}
.divider--zigzag    { animation-duration: 6.4s; }
.divider--wave      { animation-duration: 8.2s; animation-delay: 0.6s; }
.divider--asterisk  { animation-duration: 5.8s; animation-delay: 1.2s; }
.divider--arabesque { animation-duration: 7.6s; animation-delay: 0.3s; }
.divider--brush     { animation-duration: 9.0s; animation-delay: 1.6s; }
.divider--star      { animation-duration: 6.8s; animation-delay: 0.9s; }

/* --- source card hover: HARING BURST --- */

.source-list a {
  position: relative;
  overflow: visible;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.source-list a::before,
.source-list a::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
/* Top-right haring vibration burst — only visible on hover */
.source-list a::before {
  top: -10px;
  right: -10px;
  width: 38px;
  height: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23FFC72C' stroke-width='2' stroke-linecap='round'><line x1='20' y1='2' x2='20' y2='9'/><line x1='34' y1='6' x2='29' y2='11'/><line x1='38' y1='20' x2='31' y2='20'/><line x1='34' y1='34' x2='29' y2='29'/><line x1='6' y1='6' x2='11' y2='11'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.source-list a::after {
  bottom: -10px;
  left: -10px;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23FFC72C' stroke-width='2' stroke-linecap='round'><line x1='20' y1='38' x2='20' y2='31'/><line x1='6' y1='34' x2='11' y2='29'/><line x1='2' y1='20' x2='9' y2='20'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.source-list a:hover {
  transform: translateY(-3px) rotate(-0.3deg);
  box-shadow: 6px 6px 0 var(--accent, var(--gold));
}
.source-list a:hover::before {
  opacity: 1;
  animation: burst-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.source-list a:hover::after {
  opacity: 1;
  animation: burst-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.06s;
}

/* --- visual ref cards: gentle hover lift + image breathe --- */

.visual-ref {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.visual-ref:hover {
  transform: translate(-2px, -3px) rotate(-0.4deg);
  box-shadow: 5px 5px 0 var(--gold);
}
.visual-ref:hover .visual-ref__img,
.visual-ref:hover .visual-ref__placeholder {
  animation: haring-vibrate 0.5s ease-in-out;
}

/* --- session-map cell: pulse on hover --- */

.session-map__cell {
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.session-map__cell.live:hover {
  transform: scale(1.02) rotate(-0.3deg);
  box-shadow: 4px 4px 0 var(--accent, var(--black));
}

/* --- hero title gets a slow pulse --- */

.hero__title {
  animation: pulse-soft 6s ease-in-out infinite;
  transform-origin: center;
}

/* --- session slide-hero title bounces gently --- */

.slide-hero__title {
  animation: bounce-soft 5s ease-in-out infinite;
}
.slide-hero__eyebrow {
  animation: wiggle 7s ease-in-out infinite;
  display: inline-block;
  transform-origin: 0 100%;
}

/* --- recap-list (six theses) — each li wiggles slightly on hover --- */

.recap-list li:hover {
  transform: translateX(4px) rotate(-0.5deg);
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- source__portrait gets a Haring frame on hover --- */

.source__portrait img {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.source__portrait:hover img {
  transform: rotate(-1deg) scale(1.02);
  box-shadow: 6px 6px 0 var(--sunflower);
}

/* --- accessibility: respect reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   THE LIVING MAP
   ============================================ */

.map {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(220px, 1fr);
  gap: 28px;
  margin: 24px 0 0;
  align-items: start;
}
.map__stage {
  background: var(--marigold);
  border: 2px solid var(--black);
  border-radius: 2px;
  position: relative;
  min-height: 320px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--gold);
}
.map__loading,
.map__error {
  padding: 40px 24px;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--black);
  text-align: center;
}
.map__svg {
  display: block;
  width: 100%;
  height: auto;
}
.map__svg .country {
  fill: rgba(140, 94, 10, 0.18);
  stroke: rgba(0,0,0,0.4);
  stroke-width: 0.4;
  transition: fill 200ms ease;
}
.map__svg .country--has-sources {
  fill: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}
.map__svg .country--has-sources:hover {
  fill: var(--accent, #C13B1F);
}
.map__svg .dot-glow {
  fill: var(--sunflower);
  opacity: 0.55;
  animation: twinkle 3.4s ease-in-out infinite;
  pointer-events: none;
}
.map__svg .dot {
  fill: var(--sunflower);
  stroke: #0a0a0a;
  stroke-width: 1;
  filter: drop-shadow(0 0 4px rgba(255, 199, 44, 0.7));
  transition: r 180ms ease, fill 180ms ease;
}
.map__svg .dot:hover { fill: #fff; r: 8; }
.map__svg .dot--active { fill: #C13B1F; stroke-width: 2; }

.map__tooltip {
  position: absolute;
  background: #0a0a0a;
  color: var(--sunflower);
  padding: 10px 14px;
  border: 2px solid var(--sunflower);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  border-radius: 2px;
  pointer-events: none;
  z-index: 10;
  max-width: 220px;
  box-shadow: 3px 3px 0 var(--gold);
}
.map__tooltip strong {
  color: var(--sunflower);
  font-size: 13px;
  display: block;
  margin-bottom: 2px;
}
.map__tooltip span {
  color: var(--marigold);
  font-style: italic;
}

.map__sidebar {
  background: rgba(0,0,0,0.05);
  border-left: 3px solid var(--gold);
  padding: 18px;
  max-height: 560px;
  overflow-y: auto;
}
.map__sidebar-intro {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--black);
  margin: 0 0 14px;
  line-height: 1.5;
}
.map__sidebar-intro strong { color: var(--gold); }

.map__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}
.map__country-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--black);
  cursor: pointer;
  border-radius: 2px;
  transition: background 140ms ease, border-color 140ms ease;
}
.map__country-btn:hover {
  background: var(--black);
  color: var(--sunflower);
  border-color: var(--black);
}
.map__country-btn:hover .map__country-count {
  color: var(--sunflower);
}
.map__country-name { flex: 1; }
.map__country-count {
  background: var(--gold);
  color: var(--marigold);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 700;
}

.map__reveal {
  margin-top: 32px;
  background: rgba(0,0,0,0.05);
  border-left: 4px solid var(--accent, var(--gold));
  padding: 20px 24px;
  min-height: 0;
}
.map__reveal:empty { display: none; }
.map__reveal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.map__reveal-flag { font-size: 32px; }
.map__reveal-name {
  margin: 0;
  font-family: var(--font-display);
  color: var(--black);
  font-size: clamp(28px, 4vw, 44px);
}
.map__reveal-count {
  background: var(--black);
  color: var(--sunflower);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 700;
}
.map__reveal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}
.map__reveal-link {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) 2fr auto;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.04);
  color: var(--black);
  border: 1px solid rgba(0,0,0,0.18);
  border-bottom: 0;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  transition: background 140ms ease, color 140ms ease;
}
.map__reveal-link:hover {
  background: var(--black);
  color: var(--sunflower);
  border-color: var(--black);
}
.map__reveal-author { font-weight: 700; }
.map__reveal-title { font-style: italic; opacity: 0.85; }
.map__reveal-form {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.map__reveal-link:hover .map__reveal-form { color: var(--marigold); }

@media (max-width: 880px) {
  .map { grid-template-columns: 1fr; }
  .map__sidebar { max-height: 280px; }
}

/* ============================================
   LINEAGE — citation graph
   ============================================ */

.lineage__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 16px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--black);
  align-items: center;
}
.lineage__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lineage__legend-line {
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
}
.lineage__legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--black);
}
.lineage__legend-dot--source { background: #1F7A8C; }
.lineage__legend-dot--agent { background: var(--gold); width: 6px; height: 6px; }
.lineage__legend-divider {
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,0.3);
}

.lineage__stage {
  background: var(--marigold);
  border: 2px solid var(--black);
  border-radius: 2px;
  min-height: 600px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--gold);
}
.lineage__svg { display: block; width: 100%; height: auto; }
.lineage__node circle { transition: r 160ms ease; }
.lineage__node--source:hover circle { r: 12; fill: var(--sunflower) !important; }
.lineage__label { font-weight: 600; pointer-events: none; }
.lineage__label--agent { font-style: italic; opacity: 0.75; }

.lineage__hint {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 13px;
  color: var(--black);
  opacity: 0.75;
  margin: 14px 0 0;
}

/* ============================================
   MAKE panel + ASSIGN + TONIGHT cards
   ============================================ */

.make__stage { display: grid; gap: 56px; }
.make__session { }
.make__session-head {
  font-family: var(--font-display);
  color: var(--black);
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 20px;
  border-bottom: 3px solid var(--accent, var(--gold));
  padding-bottom: 8px;
}
.make__session[data-session="1"] { --accent: #C13B1F; }
.make__session[data-session="2"] { --accent: #1F7A8C; }
.make__session[data-session="3"] { --accent: #4D7C2C; }
.make__session[data-session="4"] { --accent: #2D3F8B; }
.make__session[data-session="5"] { --accent: #7A2C5E; }

.make__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.make-card {
  background: rgba(0,0,0,0.04);
  border: 2px solid var(--black);
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.make-card:hover {
  transform: translate(-2px, -3px);
  box-shadow: 5px 5px 0 var(--accent, var(--gold));
}
.make-card__head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: baseline;
}
.make-card__flags { font-size: 16px; }
.make-card__num {
  background: var(--accent, var(--gold));
  color: var(--marigold);
  font-family: var(--font-display);
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 2px;
}
.make-card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: var(--black);
  margin: 0;
  line-height: 1.3;
  grid-column: 1 / -1;
}
.make-card__title span {
  font-weight: 400;
  opacity: 0.75;
}
.make-card__open {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
  border-bottom-color: rgba(140,94,10,0.3);
  white-space: nowrap;
}

/* Assignment block */
.assign {
  background: rgba(255, 199, 44, 0.18);
  border-left: 3px solid var(--accent, var(--gold));
  padding: 12px 14px;
  position: relative;
}
.assign--inline { margin-top: 14px; }
.assign__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent, var(--gold));
  margin: 0 0 6px;
}
.assign__prompt {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--black);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 10px;
}
.assign__textarea {
  width: 100%;
  min-height: 84px;
  background: rgba(0,0,0,0.06);
  color: var(--black);
  border: 1px solid rgba(0,0,0,0.2);
  padding: 10px;
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  border-radius: 0;
}
.assign__textarea:focus {
  outline: 0;
  border-color: var(--black);
  background: rgba(255,199,44,0.32);
}
.assign__saved {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}
.assign__saved.is-saved { color: var(--accent, var(--gold)); }

/* Tonight You Could block */
.tonight {
  background: var(--black);
  border-left: 3px solid var(--sunflower);
  padding: 12px 14px;
  position: relative;
}
.tonight--inline { margin-top: 14px; }
.tonight__label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sunflower);
  margin: 0 0 8px;
}
.tonight__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  text-decoration: none;
  color: var(--marigold);
  border-bottom: 0;
  padding: 6px 0;
}
.tonight__link:hover {
  color: var(--sunflower);
  border-bottom: 0;
}
.tonight__org {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  color: var(--sunflower);
  display: block;
}
.tonight__what {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 12px;
  color: var(--marigold);
  display: block;
  line-height: 1.4;
  opacity: 0.9;
}
.tonight__arrow {
  font-size: 22px;
  color: var(--sunflower);
  font-weight: 700;
  align-self: center;
  transition: transform 160ms ease;
}
.tonight__link:hover .tonight__arrow { transform: translateX(4px); }

/* Inline source extras (assignment + tonight inserted into source articles) */
.source-extras {
  border-top: 2px dashed rgba(0,0,0,0.25);
  margin-top: 24px;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ============================================
   RECITATION BOOTH
   ============================================ */

.recite {
  margin: 18px 0 0;
  padding: 18px;
  background: var(--black);
  border: 2px solid var(--sunflower);
  border-radius: 2px;
}
.recite__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sunflower);
  margin: 0 0 14px;
}
.recite__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.recite__btn {
  background: transparent;
  color: var(--sunflower);
  border: 2px solid var(--sunflower);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.recite__btn:hover:not([disabled]) {
  background: var(--sunflower);
  color: var(--black);
  transform: translateY(-1px);
}
.recite__btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.recite__dot {
  width: 10px;
  height: 10px;
  background: var(--sunflower);
  border-radius: 50%;
  display: inline-block;
}
.recite__btn.is-recording {
  background: #C13B1F;
  color: var(--sunflower);
  border-color: #C13B1F;
}
.recite__btn.is-recording .recite__dot {
  background: var(--sunflower);
  animation: recite-pulse 0.8s ease-in-out infinite;
}
@keyframes recite-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.4; }
}
.recite__time {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--marigold);
  margin-left: auto;
}
.recite__waveform {
  display: block;
  width: 100%;
  height: 60px;
  background: #0a0a0a;
  border: 1px solid var(--gold);
  margin-bottom: 8px;
}
.recite__hint {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 11px;
  color: var(--marigold);
  margin: 0;
  opacity: 0.75;
}

/* ---------- Print ---------- */

@media print {
  body { background: #fff; color: #000; font-family: Georgia, serif; }
  .site-header, .tabs, .source-nav, .reflect, .site-footer, .poster-strip { display: none; }
  .panel { display: block !important; }
  a { color: #000; border: 0; }
  h1, h2, h3, h4 { color: #000; }
  .dialectic { background: #fff; color: #000; padding: 20px 0; }
  .dialectic__label { color: #000; }
  .dialectic__card { background: #000; color: #fff; }
  .passage { background: #f2f2f2; color: #000; border-color: #000; }
  .passage__text { color: #000; }
}