/* the dimsum — minimal overrides on the cosmo theme. Deliberately boring. */

/* Article body font: editorial serif. Headings, navbar, TOC and listings
   keep Source Sans Pro (the cosmo theme font). */
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap");

/* Listing metadata (issues index, homepage) reads as metadata, not content. */
.listing-date,
.listing-author,
.listing-reading-time,
.listing-categories {
  color: #6c757d;
  font-size: 0.9em;
}

/* Subtitles sit quieter than titles on article pages. */
.quarto-title-subtitle {
  font-weight: 400;
  opacity: 0.85;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-style: italic;
}

/* The navbar logo's cream background reads as an intentional rounded
   badge in both light and dark modes. */
.navbar-logo {
  border-radius: 22%;
}

/* --- Reading typography ------------------------------------------------
   Serif and roomier leading on article reading surfaces (paragraphs,
   lists, quotes) only; listing indexes stay sans. The :has() scope
   degrades gracefully — old browsers keep the sans default. */

body:not(:has(.quarto-listing)) main p,
body:not(:has(.quarto-listing)) main li,
body:not(:has(.quarto-listing)) main blockquote {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  line-height: 1.65;
}

/* Headings keep the sans but get real weight so sections separate. */
main h1 {
  font-weight: 600;
  letter-spacing: -0.015em;
}
main h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2.6rem;
}
main h3 {
  font-weight: 600;
}

/* Lead-in labels ("What happened.", "Why it matters." …) sit on their own
   line as bold run-in headings — full body size, heading color — so the
   structure of each item is scannable at a glance. Scoped to paragraphs
   inside sections: page intros before the first heading keep normal
   emphasis. */
body:not(:has(.quarto-listing)) main section p > strong:first-child {
  display: block;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--bs-heading-color);
  margin: 0 0 0.25em;
}
body:not(:has(.quarto-listing)) main section p:has(> strong:first-child) {
  margin-top: 1.5rem;
}

/* "Worth Testing / Reading / Watching" markers in item headings become
   quiet badge pills. Theme variables keep both modes coherent. */
body:not(:has(.quarto-listing)) main h3 > strong:last-of-type {
  display: inline-block;
  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.68em;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.22em 0.7em 0.16em;
  margin-left: 0.4em;
  border-radius: 999px;
  background-color: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
  vertical-align: 0.25em;
  white-space: nowrap;
}

/* Section dividers breathe. */
main hr {
  margin: 2.6rem 0;
  opacity: 0.35;
}

/* The per-issue aside (blockquote) reads as a quiet panel, not an
   oversized pull-quote. Translucent tint so both modes work without
   relying on theme variables the dark layer doesn't redefine. */
main blockquote {
  background-color: rgba(128, 128, 132, 0.1);
  border-left: 3px solid var(--bs-primary);
  border-radius: 0.35rem;
  padding: 1rem 1.25rem;
  font-size: 1rem;
}