:root {
  --reader-book: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --reader-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

.reading-deck,
.reading-main > section > p:not(.eyebrow),
.reading-main #phrases li,
.reading-main #questions li,
.reading-main #retelling li,
.reading-main #output li,
.reading-main blockquote {
  font-family: var(--reader-book);
  font-size: 18.5px;
  line-height: 1.78;
  letter-spacing: 0.002em;
  font-kerning: normal;
  text-wrap: pretty;
  hyphens: auto;
}

.reading-main > section > p:not(.eyebrow),
.reading-main #phrases li,
.reading-main #questions li,
.reading-main #retelling li,
.reading-main #output li {
  max-width: 68ch;
}

.reading-deck {
  max-width: 65ch;
  font-size: 21px;
  line-height: 1.58;
  letter-spacing: 0;
}

.reading-main h2 {
  max-width: 25ch;
  line-height: 1.12;
}

.reading-main blockquote {
  max-width: 31ch;
  font-size: 26px;
  line-height: 1.55;
}

.reading-main table,
.reading-main .timeline,
.reading-main .source-list,
.reading-aside,
.meta-strip,
.reader-font-toggle {
  font-family: var(--reader-sans);
}

.reading-main td {
  line-height: 1.55;
}

html[data-reading-font="sans"] .reading-deck,
html[data-reading-font="sans"] .reading-main > section > p:not(.eyebrow),
html[data-reading-font="sans"] .reading-main #phrases li,
html[data-reading-font="sans"] .reading-main #questions li,
html[data-reading-font="sans"] .reading-main #retelling li,
html[data-reading-font="sans"] .reading-main #output li,
html[data-reading-font="sans"] .reading-main blockquote {
  font-family: var(--reader-sans);
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: -0.005em;
}

html[data-reading-font="sans"] .reading-deck {
  font-size: 20px;
  line-height: 1.5;
}

html[data-reading-font="sans"] .reading-main blockquote {
  font-size: 25px;
  line-height: 1.5;
}

.reader-font-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--text);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 160ms ease;
}

.reader-font-toggle:hover {
  transform: translateY(-1px);
}

.reader-font-toggle:active {
  transform: scale(0.97);
}

.reader-font-toggle > span {
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 700;
}

.reader-font-toggle > small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

@media (max-width: 560px) {
  .reading-main > section > p:not(.eyebrow),
  .reading-main #phrases li,
  .reading-main #questions li,
  .reading-main #retelling li,
  .reading-main #output li {
    max-width: none;
  }

  .reader-font-toggle {
    right: 12px;
    bottom: 12px;
    min-height: 42px;
  }
}