.blog-post img {
    width: 100%;
}

/* Post thumbnail in list views (blog index, search results) */
.post-thumbnail-lg {
    width: 100%;
    max-height: 250px;
    object-fit: cover;
}

/* Post thumbnail in compact views (home page, 404 suggestions) */
.post-thumbnail-sm {
    width: 120px;
    height: 90px;
    object-fit: cover;
}

/* Quick Takeaways callout box — blockquote in blog post Markdown */
.blog-post blockquote {
    background-color: rgba(0, 133, 161, 0.07);
    border-left: 4px solid #0085A1;
    border-radius: 0 0.375rem 0.375rem 0;
    padding: 2rem 1.5rem;
    margin: 1.75rem 0 2rem;
}

    .blog-post blockquote p strong {
        color: #0085A1;
        display: block;
        margin: 0 auto;
        text-align: center;
    }

    .blog-post blockquote p:first-child {
        margin-top: 0;
    }



    .blog-post blockquote > *:last-child {
        margin-bottom: 0;
    }

    .blog-post blockquote ul,
    .blog-post blockquote ol {
        padding-left: 1.25rem;
    }

/* ---------------------------------------------------------------------
   Comments (Artalk) brand theming
   Scoped to #artalk-comments so it never leaks outside the widget.
   This site (Clean Blog theme) is light — white body, dark Lora/Open
   Sans text — so Artalk's own light-mode defaults are left in place;
   only the accent color is overridden to the site's teal brand color
   (--bs-primary: #0085A1, see clean-blog.css) so the "Send" button,
   comment count, and usernames pick up the DreamAtlas palette instead
   of Artalk's default blue.
--------------------------------------------------------------------- */
.comments-title {
    color: #0085A1;
}

#artalk-comments {
    --at-color-main: #0085A1;
}

/* ---- Symbol Explorer ---- */
.explorer-list-panel { max-height: 560px; overflow-y: auto; }
.explorer-map { max-height: 360px; }
.explorer-edge { stroke-width: 1.5; }
.explorer-edge-related { stroke: #0085a1; }
.explorer-edge-shared { stroke: #adb5bd; stroke-dasharray: 4 4; }
.explorer-node { cursor: pointer; }
.explorer-node text { font-size: 13px; fill: #212529; }
.explorer-node-related circle { fill: #0085a1; }
.explorer-node-shared circle { fill: #fff; stroke: #6c757d; stroke-width: 2; }
.explorer-node:hover text, .explorer-node:focus text { text-decoration: underline; }
.explorer-node:focus { outline: none; }
.explorer-node:focus circle { stroke: #212529; stroke-width: 3; }
.explorer-center circle { fill: #212529; }
.explorer-center text { fill: #fff; font-size: 13px; font-weight: 700; }
.explorer-empty { fill: #6c757d; font-size: 13px; }
.explorer-key { display: inline-block; width: 18px; height: 0; vertical-align: middle; margin-right: 4px; border-top: 2px solid #0085a1; }
.explorer-key-shared { border-top: 2px dashed #adb5bd; }

/* ---- Dream Journal ---- */
.journal-text { white-space: pre-wrap; }
.journal-search { max-width: 220px; }