/* The Kokoon story: long-read feature image layout. Additive; scoped to article.kn-story-longfilm only.
   Every image keeps its natural ratio (width:100%, height:auto): scaled only, never cropped, no bars. */

/* Images in natural flow: the box is the image, so nothing is cropped and nothing is letterboxed. */
article.kn-story-longfilm figure .media:has(img.photo){aspect-ratio:auto;width:auto;max-width:none;margin:0;background:none}
article.kn-story-longfilm figure .media img.photo{position:static;display:block;width:100%;height:auto;max-width:none}

/* Captions: directly under their own image, on the image's left edge and within its width. */
article.kn-story-longfilm figure>.caption{font:400 14px/1.5 var(--font-ui);color:var(--muted);margin:10px 0 0;padding:0;width:auto;max-width:none;text-align:start}

/* Lead image: breakout wider than the reading column (up to the site container). */
article.kn-story-longfilm .hero{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}

/* Inline figures inside the reading column. */
article.kn-story-longfilm .prose .kn-fig{margin:40px 0}
article.kn-story-longfilm .prose .kn-fig--inset{margin:8px 0 32px}
@media (min-width:768px){
  article.kn-story-longfilm .prose .kn-fig--column{margin:48px 0}
  article.kn-story-longfilm .prose .kn-fig--inset{float:right;width:48%;margin:8px 0 24px 32px}  /* 48% at 768-1199px keeps about 30 characters a line beside it */
  article.kn-story-longfilm .prose .kn-fig--inset+p+p{clear:right}
}
@media (min-width:1200px){article.kn-story-longfilm .prose .kn-fig--inset{width:50%}}