.mp-article-content .mp-article-infographic{display:block;clear:both;width:100%;max-width:100%;margin:clamp(2rem,5vw,4rem) 0;padding:0;overflow:hidden;border:1px solid rgba(23,23,25,.1);border-radius:18px;background:#fffdfa;box-shadow:0 14px 38px rgba(23,23,25,.08)}.mp-article-infographic img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1200/760;object-fit:contain;background:#f3f0e8}.mp-article-infographic figcaption{padding:12px 16px;color:#68655f;background:#fffdfa;font:600 12px/1.5 Inter,Arial,sans-serif;letter-spacing:.04em}.mp-article-infographic figcaption:before{content:"";display:inline-block;width:7px;height:7px;margin:0 9px 1px 0;border-radius:50%;background:#ed6049}@media(max-width:640px){.mp-article-content .mp-article-infographic{margin:2rem 0;border-radius:14px}.mp-article-infographic figcaption{padding:10px 12px}}

/* Reading comfort and still presentation for every blog article. */
body.mp-post,
body.mp-post *,
body.mp-post *::before,
body.mp-post *::after {
  animation: none !important;
  transition: none !important;
}

/* Reveal elements remain visible without scroll-triggered motion. */
body.mp-post .site-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Justify article copy while keeping headings and interface labels natural. */
body.mp-post .mp-article-content :is(p, li, blockquote, td, th, dd) {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

body.mp-post .mp-article-content :is(h1, h2, h3, h4, h5, h6, figcaption, summary) {
  text-align: left;
}
/* Keep article contents links immediate and motion-free. */
body.mp-post .mp-article-toc a{transition:none!important}