/* Make blog content not stretch too wide on large screens */
      .blog-flow{
        max-width: 980px;
        margin: 0 auto;
      }

      /* Better readable typography */
      .blog-flow .who-text{
        line-height: 1.85;
        font-size: 1.05rem;
        color: var(--ink-900);
      }

      /* Side-by-side blocks look like a single "unit" */
      .blog-media-row{
        max-width: 980px;
        margin: 1.5rem auto;
      }

      /* Clean image framing */
      .blog-figure-card{
        border-radius: 18px;
        overflow: hidden;
        border: 1px solid var(--line-100);
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        background: var(--white);
      }

      .blog-figure-img{
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
        object-position: center;
      }

      /* Wrap images (float only on lg+) */
      .blog-wrap-figure{
        margin: 1rem 0;
      }
      @media (min-width: 992px){
        .blog-wrap-figure{
          width: 42%;
          max-width: 460px;
        }
      }

/* Article layout: preserve cover artwork and keep prose readable. */
.article-shell { max-width: 1040px; padding-block: 3rem; }
.article-content { margin-top: 2rem; }
.article-title { max-width: 24ch; font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.15; margin-bottom: 1.5rem; }
.article-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .8rem 1.5rem; margin-bottom: 1.5rem; }
#blogDate { color: var(--ink-600); font: inherit; font-size: .85rem; background: none !important; border: 0 !important; padding: 0; }
.article-topics { font-size: .85rem; color: var(--ink-600); }
.article-topics summary { cursor: pointer; color: var(--blue); }
.article-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; max-width: 70ch; }
.article-tags .badge { color: var(--ink-600) !important; background: var(--surface-100) !important; font-size: .75rem; line-height: 1.5; font-weight: 400; white-space: normal; border-color: var(--line-100) !important; }
.blog-cover { border: 1px solid var(--line-100); border-radius: 8px; margin-block: 0 2.5rem; }
#blogBody { max-width: 74ch; margin-inline: auto; }
.blog-figure-card { border-radius: 6px; box-shadow: none; }
@media (max-width: 575px) { .article-shell { padding-block: 2rem; } .blog-cover { margin-bottom: 1.5rem; } }