.article-content { font-size: 18px; line-height: 1.75; overflow-wrap: anywhere; }
.article-content > * + * { margin-top: 1.25rem; }
.article-content h2, .article-content h3, .article-content h4 { font-family: "Playfair Display", serif; font-weight: 600; line-height: 1.3; margin-top: 2rem; }
.article-content h2 { font-size: 2rem; }
.article-content h3 { font-size: 1.5rem; }
.article-content h4 { font-size: 1.25rem; }
.article-content ul, .article-content ol { padding-left: 1.5rem; }
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content a { color: #7b5800; text-decoration: underline; }
.article-content img, .article-content video { max-width: 100%; height: auto; }
.article-content iframe { max-width: 100%; }
.article-content table { display: block; max-width: 100%; overflow-x: auto; }
.article-content th, .article-content td { padding: .5rem; border: 1px solid #d4c4ad; }
#gallery.article-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
#gallery.article-gallery .image-popup-vertical-fit { width: 100%; height: auto; aspect-ratio: 5 / 3; margin: 0; float: none; outline: none; }
#gallery.article-gallery img { width: 100%; height: 100%; object-fit: cover; }
main a:focus-visible, .mfp-wrap button:focus-visible { outline: 2px solid #7b5800; outline-offset: 4px; }
.mfp-wrap button.mfp-arrow, .mfp-wrap .mfp-counter { opacity: 1 !important; }
@media (min-width: 768px) { #gallery.article-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Category / Recent Posts sidebar, ported from the blog category page so the single post
   view shares the same widget markup. Bootstrap is not loaded here, so the widget classes
   are styled explicitly with the page's own tokens. */
.article-sidebar { margin-bottom: 40px; }
.article-sidebar .sidebar { padding-left: 0; }
.article-sidebar .widget { margin-bottom: 28px; }
.article-sidebar .widget:last-child { margin-bottom: 0; }
.article-sidebar .widget h2,
.article-sidebar .widget h3,
.article-sidebar .widget h4 {
    margin: 0 0 12px;
    border: 0;
    color: #201b12;
    font-family: "Playfair Display", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
}
.article-sidebar .list-group {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid rgb(130 117 97 / 18%);
    border-radius: 4px;
    background: #fff;
}
.article-sidebar .blog-sidebar-item {
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgb(130 117 97 / 16%);
    background: transparent;
    color: #504534;
    font-size: 16px;
    line-height: 1.4;
}
.article-sidebar .blog-sidebar-item:last-child { border-bottom: 0; }
.article-sidebar .blog-sidebar-item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 10px 16px;
    color: inherit;
    text-decoration: none;
}
.article-sidebar .blog-sidebar-item:hover,
.article-sidebar .blog-sidebar-item:focus-within {
    background: rgb(255 248 243 / 72%);
    color: #7b5800;
}
.article-sidebar .blog-sidebar-item > a:focus-visible {
    outline: 2px solid #7b5800;
    outline-offset: -2px;
}
.article-sidebar .badge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ece1d2;
    color: #504534;
    font-family: "Source Sans 3", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
/* Current category */
.article-sidebar .blog-sidebar-item.is-active > a,
.article-sidebar .blog-sidebar-item > a[aria-current="page"] {
    background: rgb(212 155 0 / 12%);
    box-shadow: inset 3px 0 0 #d49b00;
    color: #7b5800;
    font-weight: 700;
}
.article-sidebar .blog-sidebar-item.is-active .badge,
.article-sidebar .blog-sidebar-item > a[aria-current="page"] .badge {
    background: #d49b00;
    color: #261900;
}

/* Right column follows the reader: pinned below the fixed 73px navigation bar (72px nav + its
   1px bottom border) while the article scrolls, and scrolling on its own when it is taller than
   the viewport so the widgets and the category link stay reachable. Grid items stretch to the
   row height by default, so align-self: start is what gives sticky anywhere to travel. Desktop
   only - below lg the aside stacks under the article and must scroll with it. */
@media (min-width: 1024px) {
    .article-aside {
        align-self: start;
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 97px; /* 73px fixed nav + 24px gutter, matching the page gutter */
        max-height: calc(100vh - 121px); /* pinned top + 24px bottom breathing room */
        max-height: calc(100dvh - 121px);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgb(130 117 97 / 35%) transparent;
    }
    .article-aside::-webkit-scrollbar { width: 6px; }
    .article-aside::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgb(130 117 97 / 35%);
    }
    .article-aside::-webkit-scrollbar-track { background: transparent; }
}