/* ─── Blog reading styles ─────────────────────────────────────────
   Loaded on blog pages only (see base.html). Body text is set in
   Literata, a face drawn for long-form reading, so posts read like a
   book rather than an app screen. Headings stay in Playfair Display.
   Georgia is the fallback while Literata loads or if it can't. */

.blog-content {
  font-family: 'Literata', Georgia, 'Times New Roman', serif;
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;               /* comfortable line length */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.blog-content p,
.blog-content ul,
.blog-content ol {
  margin-bottom: 1.15em;
}

.blog-content .lead {
  font-size: 1.25rem;
  line-height: 1.7;
  font-weight: 400;
  color: var(--color-text);
}

/* Drop cap on the opening paragraph, like the first page of a chapter.
   float + ::first-letter rather than initial-letter, which only Safari
   supports; this works in every browser and the Android WebView. */
.blog-content > p:first-of-type::first-letter {
  float: left;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 3.6em;
  line-height: 0.82;
  padding: 0.08em 0.1em 0 0;
  color: var(--color-brand);
}

.blog-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 2em 0 0.6em;
}
.blog-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  margin: 1.6em 0 0.5em;
}

.blog-content li { margin-bottom: 0.35em; }
.blog-content li::marker { color: var(--color-brand); }

.blog-content a {
  color: var(--color-brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.blog-content a:hover { text-decoration-thickness: 2px; }
/* Buttons styled as links keep their own look. */
.blog-content a.btn { text-decoration: none; }

.blog-content blockquote {
  margin: 1.5em 0;
  padding: 0.25em 0 0.25em 1.1em;
  border-left: 3px solid var(--color-brand);
  font-style: italic;
  color: var(--color-muted);
}

/* Formulas and code: set apart, and scroll sideways on a phone rather than
   pushing the page wider. */
.blog-content pre {
  margin: 1.25em 0;
  padding: 14px 16px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.85rem;
  line-height: 1.6;
}
.blog-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}
.blog-content pre code { font-size: inherit; color: var(--color-text); }

.blog-content img { border-radius: var(--radius-sm); }

@media (max-width: 575.98px) {
  .blog-content { font-size: 1.05rem; line-height: 1.7; }
  .blog-content .lead { font-size: 1.12rem; }
  .blog-content h2 { font-size: 1.4rem; }
  /* Posts size some screenshots inline for desktop (25% wide), which is
     unreadable on a phone. */
  .blog-content img[style*="max-width"] { max-width: 75% !important; }
  /* Wrap rather than hide the end of a formula off-screen. */
  .blog-content pre { white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; }
}