/* Shared styling for News post rich-text content (the ".article-body"
   class), used by BOTH the public /news/[slug] page and the back-office
   post editor — kept in one file, loaded independently of styles.css, so
   the two render identically and an editor can trust what they see is
   what gets published. Split out from styles.css rather than loading
   that whole stylesheet into the editor's own pages: styles.css resets
   global selectors (body background, `a` color, `img` display) that
   would otherwise clash with that layout's Tailwind-based styling.
   Values are literal colors, not var(--ink) etc., so this file works
   standalone even on pages that never load styles.css's :root
   definitions. This file is served as-is to every visitor (public/,
   no build-time comment stripping) — keep this comment free of internal
   route paths or specific tool/library names. */

.article-body {
  color: #33322e;
  font-size: 17px;
  line-height: 1.8;
}

.article-body p {
  margin: 0 0 10px;
  line-height: 1.6;
}

.article-body p:last-child {
  margin-bottom: 0;
}

.article-body strong {
  font-weight: 800;
}

.article-body h2 {
  margin: 30px 0 10px;
  color: #111111;
  font-size: 26px;
  font-weight: 900;
}

.article-body h3 {
  margin: 24px 0 8px;
  color: #111111;
  font-size: 21px;
  font-weight: 800;
}

.article-body h4 {
  margin: 20px 0 8px;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
}

.article-body ul,
.article-body ol {
  padding-left: 20px;
  margin: 0 0 10px;
  line-height: 1.6;
}

.article-body blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 3px solid #c98700;
  background: #f7f7f4;
  color: #686864;
  font-style: italic;
}

.article-body code {
  padding: 2px 5px;
  border-radius: 4px;
  background: #f7f7f4;
  font-family: "Roboto Mono", monospace;
  font-size: 0.9em;
}

.article-body pre {
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f7f7f4;
  overflow-x: auto;
}

.article-body pre code {
  padding: 0;
  background: none;
}

.article-body a {
  color: #0b5c7a;
  text-decoration: underline;
}