/* storytellers. CMS: real images inside the site's art frames (loaded after the site CSS) */
.post__thumb, .post-cover, .cover, .gallery__item, .project__media, .pull-next__art { position: relative; overflow: hidden; }
picture.cms-img { position: absolute; inset: 0; z-index: 1; display: block; background-size: cover; background-position: center; }
picture.cms-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cover__inner picture.cms-img { inset: 0; }
.has-media.art::before, .has-media.art::after { display: none !important; }
.post--feature .post__thumb picture.cms-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.75)); }
.prose picture.cms-img--inline, .cms-figure picture.cms-img--inline { position: relative; inset: auto; display: block; border-radius: var(--radius, 18px); overflow: hidden; }
.prose picture.cms-img--inline img { height: auto; }
.cms-figure { margin: 2.2em 0; }
.cms-figure figcaption, .cms-caption { margin-top: .7em; font-size: .8rem; color: rgba(255,255,255,.55); }
.gallery__item .cms-caption { position: absolute; left: 14px; bottom: 12px; z-index: 2; margin: 0; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.5); backdrop-filter: blur(6px); color: #fff; }
.cms-prose { max-width: 720px; }

/* case-study film (CMS video field) */
.cms-film__frame { margin: 0; width: 100%; border-radius: 18px; overflow: hidden; position: relative; }
.cms-film__frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cms-film__frame figcaption { padding: 10px 2px 0; }