.blog-breadcrumbs { margin: 0 auto 18px; max-width: 900px; padding: 0 20px; font-size: 13px; line-height: 1.6; color: inherit; opacity: .75; }
.blog-breadcrumbs ol { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; padding: 0; margin: 0; list-style: none; }
.blog-breadcrumbs li { display: inline; }
.blog-breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: #aaa; }
.blog-breadcrumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.blog-updated { margin: 14px 20px 0; font-size: 13px; line-height: 1.5; color: inherit; opacity: .75; }
.blog-related { clear: both; margin: 40px auto; padding: 24px 0 0; max-width: 860px; border-top: 1px solid #eee; }
.blog-related h2 { margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
.blog-related ul { margin: 0; padding-left: 24px; }
.blog-related li { margin: 8px 0; line-height: 1.6; }
.blog-related a { text-decoration: underline; text-underline-offset: 3px; }
.blog-archive-heading { margin: 40px auto 0; text-align: center; }
.blog-archive-heading h1 { font-size: 32px; line-height: 1.3; }
@media (max-width: 600px) {
  .blog-breadcrumbs { font-size: 12px; padding: 0 18px; margin-bottom: 14px; }
  .blog-breadcrumbs li:last-child { flex-basis: 100%; }
  .blog-breadcrumbs li:last-child::before { content: none; }
  .blog-related { margin: 30px 18px; padding-top: 20px; }
  .blog-related h2 { font-size: 20px; }
  .blog-archive-heading h1 { font-size: 26px; }
}

.postcontents { overflow-wrap: anywhere; }