/* The site's one stylesheet: house tokens in the light theme, reading measures in both.
   The tokens are served by the main site on the same origin; every value has a fallback,
   so the page reads the same when they cannot be fetched. */
@import url("https://tewf.github.io/site/tokens.css");

body.quarto-light {
  --bs-body-color: var(--ink, #101014);
  --bs-body-bg: var(--paper, #F7F7F9);
  --bs-secondary-color: var(--muted, #6A6D77);
}

/* Measure 55 to 75 characters, body 18 px, leading 1.5 to 1.6: the ranges in
   evidence/typography-and-layout. */
main.content {
  font-size: 1.125rem;
  line-height: 1.55;
}
main.content p,
main.content li {
  max-width: 66ch;
}
main.content table {
  font-size: 1rem;
}

/* On a phone, a figure drawn in characters shrinks to show its 60 columns whole, down to 9 px, rather than hide
   its right side behind a scrollbar (figure-width keeps figures within 60). A monospace character is about
   0.6 em wide, so 60 columns take 36 em; on a 375 px screen that is 9 px, measured. Body text keeps its size. */
@media (max-width: 600px) {
  main.content pre {
    font-size: clamp(9px, calc((100vw - 3.5rem) / 36), 1rem);
  }
}

/* A path or command in running text may break anywhere rather than push the page wider than its screen: inline
   code otherwise keeps white-space: pre, and on a 375 px phone one long path widened the card to 456 px. */
main.content :not(pre) > code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}