.blog-post { overflow-wrap: anywhere; }
.blog-post img { max-width: 100%; height: auto; }
.blog-post pre { overflow-x: auto; overflow-wrap: normal; }
.lang-switch { margin-bottom: 1.5rem; }
.changelog { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid #ded5bc; font-size: 0.9em; }
.changelog h2 { font-size: 1.4em; }
@media (max-width: 575px) {
  .intro-header .post-heading h1 { font-size: 2rem; overflow-wrap: anywhere; }
}

.home-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; margin: 2.5rem 0 3rem; }
.home-pick { background: #f5ecd9; border: 1px solid #e0d3b7; border-radius: 8px; padding: 1.5rem; }
.home-pick-random { background: #e8f0df; border-color: #cad9bc; }
.home-pick .pick-label { font-family: 'Open Sans', sans-serif; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #56634f; margin: 0 0 1rem; }
.home-pick h2 { font-size: 1.5rem; margin: 0 0 1rem; overflow-wrap: anywhere; }
.home-pick h2 a { color: #29362e; }
.home-pick h2 a:hover { color: #286044; }
.home-pick p { font-size: 1rem; }
.pick-shuffle { display: block; margin-top: 1.25rem; padding: 0.5rem 0.9rem; border: 1px solid #286044; border-radius: 4px; background: transparent; color: #194b33; cursor: pointer; font: inherit; font-size: 0.9rem; }
.pick-shuffle:hover { background: #d7e5cb; }
.pick-shuffle:focus-visible, .home-pick a:focus-visible { outline: 3px solid #286044; outline-offset: 3px; }
.latest-heading { font-size: 1.75rem; }
.intro-header .page-heading { text-align: left; }
.intro-header .page-heading hr.small { margin-left: 0; }
.intro-header .page-heading h1 { overflow-wrap: anywhere; }
.intro-header .row { display: block; margin-left: 0; margin-right: 0; }
.intro-header .row > div { width: 100%; max-width: 100%; margin-left: 0; padding-left: 0; padding-right: 0; }
@media (min-width: 1200px) {
  .intro-header .page-heading { padding-right: calc(270px + 3rem); }
}

.posts-list .post-preview { border-bottom-color: #ded5bc; }
.posts-list .post-preview .post-meta, .intro-header .post-heading .post-meta { color: #56634f; }
.intro-header .page-heading hr.small { border-color: #286044; }
::selection { background: #d7e5cb; color: #194b33; }

.article-titles { margin: 1rem 0 2rem; }
.article-titles li { margin-bottom: 0.65rem; overflow-wrap: anywhere; }
.article-titles a:focus-visible { outline: 3px solid #286044; outline-offset: 3px; }

.site-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.site-content { min-width: 0; }
.article-sidebar { grid-row: 1; font-size: 0.95rem; }
.article-navigation { border: 1px solid #ded5bc; border-radius: 6px; padding: 1rem; }
.article-navigation summary { cursor: pointer; font-weight: 700; }
.article-navigation summary:focus-visible { outline: 3px solid #286044; outline-offset: 3px; }
.article-navigation h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.article-navigation nav { margin-top: 1rem; }
.article-navigation .article-titles { margin-bottom: 0; }
.article-navigation a[aria-current="page"] { font-weight: 700; color: #194b33; text-decoration: underline; }
@media (min-width: 1200px) {
  .site-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 3rem; }
  .article-sidebar { grid-row: auto; align-self: start; position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
  .article-navigation > summary { display: none; }
  .article-navigation > nav { display: block; margin-top: 0; }
  .article-navigation { border: 0; border-left: 1px solid #ded5bc; border-radius: 0; padding: 0 0 0 1.5rem; }
}
