/* ============================================================================
   Journal post typography — the single source of truth for how a rendered post
   looks. Loaded by BOTH journal.html (the live site) and journal-editor.html
   (the live preview), so what you see while writing is exactly what publishes.
   Tuned to the site's Inter / slate palette so posts sit inside the theme.
   ============================================================================ */
.journal-body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #374151;
  font-size: 1.075rem;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
.journal-body > *:first-child { margin-top: 0; }
.journal-body > *:last-child { margin-bottom: 0; }

.journal-body p { margin: 1.25em 0; }

.journal-body h1,
.journal-body h2,
.journal-body h3,
.journal-body h4 { color: #0f172a; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.journal-body h2 { font-size: 1.7rem; margin: 2em 0 0.55em; }
.journal-body h3 { font-size: 1.32rem; margin: 1.8em 0 0.5em; }
.journal-body h4 { font-size: 1.1rem; margin: 1.6em 0 0.4em; }

.journal-body a {
  color: #0f172a;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #cbd5e1;
  transition: text-decoration-color 0.2s ease;
}
.journal-body a:hover { text-decoration-color: #0f172a; }

.journal-body strong { font-weight: 600; color: #0f172a; }
.journal-body em { font-style: italic; }

.journal-body ul, .journal-body ol { margin: 1.25em 0; padding-left: 1.5em; }
.journal-body ul { list-style: disc; }
.journal-body ol { list-style: decimal; }
.journal-body li { margin: 0.5em 0; padding-left: 0.15em; }
.journal-body li::marker { color: #94a3b8; }

.journal-body blockquote {
  margin: 1.7em 0;
  padding: 0.25em 0 0.25em 1.25em;
  border-left: 3px solid #e2e8f0;
  color: #64748b;
  font-style: italic;
}
.journal-body blockquote p { margin: 0.4em 0; }

.journal-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  margin: 1.9em 0;
  background: #f1f5f9;
}
.journal-body figure { margin: 1.9em 0; }
.journal-body figure img { margin: 0; }
.journal-body figcaption { text-align: center; font-size: 0.9rem; color: #94a3b8; margin-top: 0.65em; }

.journal-body hr { border: none; border-top: 1px solid #e5e7eb; margin: 2.5em 0; }

.journal-body code {
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.9em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.journal-body pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 1em 1.2em;
  border-radius: 12px;
  overflow: auto;
  margin: 1.7em 0;
  font-size: 0.92rem;
  line-height: 1.6;
}
.journal-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

.journal-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.98rem; }
.journal-body th, .journal-body td { border: 1px solid #e5e7eb; padding: 0.55em 0.8em; text-align: left; }
.journal-body th { background: #f8fafc; font-weight: 600; color: #0f172a; }

/* Sized / floated images — written by the journal editor as <img class="j-left|j-right"
   style="width:NN%">. Width is a % so it stays responsive; the class adds the float + wrap. */
.journal-body img.j-left,
.journal-body img.j-right { width: 50%; }
.journal-body img.j-left  { float: left;  clear: left;  margin: 0.4em 1.6em 1em 0; }
.journal-body img.j-right { float: right; clear: right; margin: 0.4em 0 1em 1.6em; }
.journal-body h2 { clear: both; }                                   /* new sections start below any wrapped image */
.journal-body::after { content: ""; display: block; clear: both; } /* contain trailing floats */

@media (max-width: 640px) {
  /* On phones a floated image would be too cramped — let it go full width instead. */
  .journal-body img.j-left,
  .journal-body img.j-right { float: none; width: 100% !important; margin: 1.9em 0; }
}