:root {
  --ppp-cream: #eee8da;
  --ppp-paper: #f8f4e9;
  --ppp-ink: #202928;
  --ppp-rust: #a0512a;
  --ppp-rust-dark: #74381f;
  --ppp-navy: #2d4c56;
  --ppp-blue: #557682;
  --ppp-green: #596b57;
  --ppp-gold: #b7832f;
}

.reveal {
  font-family: "Avenir Next", Avenir, system-ui, sans-serif;
  color: var(--ppp-cream);
}

.reveal .slides section {
  box-sizing: border-box;
  padding: 42px 64px;
  text-align: left;
}

.reveal .slides section:nth-of-type(4n + 1) { background: var(--ppp-ink); }
.reveal .slides section:nth-of-type(4n + 2) { background: var(--ppp-navy); }
.reveal .slides section:nth-of-type(4n + 3) { background: var(--ppp-ink); }
.reveal .slides section:nth-of-type(4n) { background: var(--ppp-paper); color: var(--ppp-ink); }

.reveal .slides section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 9px;
  background: linear-gradient(90deg, var(--ppp-navy) 0 34%, var(--ppp-rust) 34% 55%, var(--ppp-gold) 55% 70%, var(--ppp-green) 70% 84%, var(--ppp-ink) 84% 100%);
}

.reveal #title-slide {
  background:
    linear-gradient(90deg, rgba(160, 81, 42, 1) 0 36%, rgba(160, 81, 42, 0) 36%),
    url("../images/rivera-detroit-industry.png") right center / 64% 100% no-repeat,
    var(--ppp-rust) !important;
  color: var(--ppp-paper);
  padding: 95px 62px !important;
}
.reveal #title-slide::before { z-index: 5; }
.reveal #title-slide .title { color: var(--ppp-paper); width: 31%; font-size: 2.55em; line-height: 0.9; text-transform: uppercase; margin: 0 0 2.2em; }
.reveal #title-slide .subtitle,
.reveal #title-slide .author,
.reveal #title-slide .date { color: var(--ppp-paper); width: 31%; font-family: "Avenir Next", sans-serif; font-size: 0.72em; font-weight: 700; text-transform: uppercase; }

.reveal h1,
.reveal h2,
.reveal h3 {
  font-family: "Avenir Next Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-transform: none;
}

.reveal h2 {
  color: inherit;
  font-size: 1.75em;
  margin: 0 0 0.7em;
}

.reveal h3 { color: var(--ppp-gold); }
.reveal p, .reveal li { font-family: Georgia, serif; line-height: 1.25; }
.reveal ul,
.reveal ol {
  display: block;
  margin: 0.3em 0 0.55em 1.15em;
  padding-left: 0.65em;
}
.reveal ul { list-style-type: disc !important; }
.reveal ul ul { list-style-type: square !important; }
.reveal ol { list-style-type: decimal !important; }
.reveal li { margin: 0.3em 0; padding-left: 0.16em; }
.reveal li::marker {
  color: var(--ppp-gold);
  font-family: "Avenir Next", Avenir, sans-serif;
  font-size: 1.08em;
  font-weight: 800;
}
.reveal strong { color: var(--ppp-gold); }
.reveal blockquote { border-left: 7px solid var(--ppp-gold); padding-left: 0.8em; width: 90%; }

.reveal .cover-slide {
  background: var(--ppp-rust) !important;
  padding: 0 !important;
}
.reveal .cover-slide::before { z-index: 5; }
.cover-grid { display: grid; grid-template-columns: 36% 64%; height: 100%; }
.cover-copy { display: flex; flex-direction: column; justify-content: center; padding: 70px 54px; }
.cover-copy h1 { color: var(--ppp-paper); font-size: 3.15em; line-height: 0.88; margin: 0 0 1.3em; }
.cover-copy p { color: var(--ppp-paper); font-family: "Avenir Next", sans-serif; font-size: 0.72em; font-weight: 700; text-transform: uppercase; }
.cover-art { background: url("../images/rivera-detroit-industry.png") center / cover no-repeat; }

.reveal .section-slide { background: var(--ppp-rust-dark) !important; color: var(--ppp-paper); }
.reveal .section-slide h2 { font-size: 2.8em; max-width: 82%; margin-top: 1.2em; text-transform: uppercase; }
.reveal .section-slide p { color: var(--ppp-gold); font-family: "Avenir Next Condensed", sans-serif; font-size: 2.2em; font-weight: 700; }

.reveal .columns { gap: 1.1em; align-items: center; }
.reveal img { border-radius: 10px; max-height: 520px; }
.reveal .figure img { margin: 0; }
.reveal .caption { font-size: 0.48em; font-family: "Avenir Next", sans-serif; font-style: italic; }
.reveal .prompt { font-size: 1.28em; }
.reveal .formula { font-family: Georgia, serif; font-size: 2.2em; color: var(--ppp-gold); }

.reveal .owid-frame {
  width: 100%; height: 500px; border: 0; background: white; border-radius: 8px;
}
.reveal .source-line { font-family: "Avenir Next", sans-serif; font-size: 0.4em; opacity: 0.82; }

.reveal table { font-size: 0.67em; width: 100%; }
.reveal table th { background: var(--ppp-rust); color: var(--ppp-paper); }
.reveal table td { background: var(--ppp-navy); color: var(--ppp-paper); }
.reveal table tr:nth-child(even) td { background: var(--ppp-blue); }
.reveal .progress { color: var(--ppp-rust); }
.reveal .slide-number { color: var(--ppp-gold); background: transparent; }