/* ================================================================
   CANVERSAL. Blog — archive header extras + single post
   ================================================================ */

/* ── Single post ── */
.single-post-head { max-width: 760px; margin: 0 auto 40px; text-align: left; padding-top: 56px; }
.back-link { margin-bottom: 24px; }
.back-link .arrow-back svg { transform: rotate(180deg); }
.single-post-cat { margin-bottom: 16px; }
.single-post-head h1 { font-size: clamp(30px, 4.5vw, 44px); margin-bottom: 16px; }
.single-post-meta { color: var(--muted); font-size: 15px; }

.single-post-media { max-width: 920px; margin: 0 auto 48px; border-radius: var(--radius); overflow: hidden; }

/* ── Prose (post content) ── */
.prose { max-width: 760px; margin: 0 auto 64px; }
.prose > *:first-child { margin-top: 0; }
.prose p { margin: 0 0 22px; font-size: 18px; line-height: 1.75; color: var(--ink); }
.prose h2 { font-size: 28px; margin: 48px 0 18px; }
.prose h3 { font-size: 22px; margin: 36px 0 14px; }
.prose ul, .prose ol { margin: 0 0 22px; padding-left: 24px; font-size: 18px; line-height: 1.75; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-dk); }
.prose blockquote {
  margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent);
  font-size: 20px; font-style: italic; color: var(--muted);
}
.prose img { border-radius: var(--radius); margin: 8px 0 22px; }
.prose figcaption { font-size: 14px; color: var(--muted); margin-top: -14px; margin-bottom: 22px; }
.prose code { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; font-size: 15px; }
.prose pre { background: var(--dark); color: var(--dark-ink); padding: 20px; border-radius: var(--radius); overflow-x: auto; margin: 0 0 22px; }
.prose pre code { background: none; padding: 0; }

.related-posts .post-grid { margin-top: 8px; }

@media (max-width: 640px) {
  .single-post-head { padding-top: 32px; }
  .prose p, .prose ul, .prose ol { font-size: 16.5px; }
}