/* Match the site's title selector so the long word fits the mobile card. */
@media (max-width: 40rem) {
  #title-block-header .title {
    font-size: 1.75rem;
  }
}

/* Keep explanatory cards readable in both reading themes. */
#quarto-document-content .laymans-item .analogy,
#quarto-document-content .laymans-item .key-takeaway {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

#quarto-document-content .laymans-item .analogy::before,
#quarto-document-content .laymans-item .key-takeaway::before {
  color: inherit;
}