/* Blog index and post pages. Builds on index.css. */

.crumbs { display: flex; gap: 8px; margin: 0 0 56px; font-size: 14px; color: #666; }
.crumbs a { color: #000; }

.post-list a { text-decoration: none; }
.post-list a:hover .name, .post-list a:focus-visible .name { text-decoration: underline; text-underline-offset: 4px; }
.post-list .empty { padding: 10px 0; color: #666; }

.post-header h1 { font-size: 34px; line-height: 1.15; }
.post-meta { margin: 12px 0 0; font-size: 14px; color: #666; font-variant-numeric: tabular-nums; }

.post-body { margin-top: 40px; font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.post-body > * { margin: 0 0 1.2em; }
.post-body > :last-child { margin-bottom: 0; }
.post-body h2 { margin: 2em 0 0.6em; padding: 0; border: 0; font-size: 22px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; }
.post-body h3 { margin: 1.6em 0 0.5em; font-size: 18px; line-height: 1.35; font-weight: 600; }
.post-body ul, .post-body ol { padding-left: 1.4em; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { margin: 0.3em 0; }
.post-body li > p { margin: 0; }
.post-body blockquote { margin-left: 0; margin-right: 0; padding-left: 20px; border-left: 2px solid #000; color: #333; }
.post-body blockquote p { margin: 0 0 0.6em; }
.post-body blockquote p:last-child { margin-bottom: 0; }
.post-body code { padding: 0.12em 0.32em; border-radius: 4px; background: #f2f2f2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }
.post-body pre { padding: 16px 18px; border-radius: 6px; background: #f5f5f5; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.post-body pre code { padding: 0; background: none; font-size: inherit; }
.post-body hr { height: 1px; margin: 2.4em 0; border: 0; background: #ddd; }
.post-body img, .post-body video { display: block; max-width: 100%; height: auto; margin: 2em auto; border-radius: 4px; }
.post-body div[data-youtube-video] { margin: 2em 0; }
.post-body iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 4px; }

.more { margin: 14px 0 0; font-size: 14px; }

@media (max-width: 600px) {
  .crumbs { margin-bottom: 40px; }
  .post-header h1 { font-size: 28px; }
  .post-body { margin-top: 32px; font-size: 16px; }
}