/* A light, size-preserving placeholder also works before JavaScript arrives.
   No wrappers, hidden images or extra downloads: links and editing stay intact. */
:where(main, dialog) img:not(.brand-logo):not([src$=".svg"]):not([data-image-loading="off"]) {
  background-color: #e8e4dc;
}
/* Natural-ratio photos need a ratio before the first bytes arrive, too. */
.hero-sidebar .side-story img,
article[data-story="yeotaskin-malaysian-herbal-skincare"] .article-cover img {
  aspect-ratio: auto var(--photo-ratio, 3 / 2);
}
img[data-image-state="loading"] {
  background-image: linear-gradient(110deg, transparent 30%, rgba(255, 253, 248, .65) 48%, transparent 66%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  animation: photo-loading 1.6s ease-in-out 3;
}
img[data-image-state="revealed"] {
  animation: photo-reveal .3s ease-out;
}
img[data-image-state="error"] {
  background-image: none;
  animation: none;
  color: #5d5b54;
  font: 13px/1.5 Arial, sans-serif;
}
@keyframes photo-loading {
  from { background-position: 140% 0; }
  to { background-position: -100% 0; }
}
@keyframes photo-reveal {
  from { opacity: .35; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  img[data-image-state] { animation: none; }
}
/* HTML dimensions match each served file, reserving the final natural ratio. */
.article-body .rich-gallery img,
.article-body .rich-product img { aspect-ratio: auto var(--photo-ratio); }
.article-body .rich-clip video {
  aspect-ratio: var(--video-ratio, 9 / 16);
  height: auto;
  max-height: none;
}
/* YouTube consent-to-play keeps the same frame height before and after activation. */
.article-body .rich-video { aspect-ratio:16/9;display:grid;place-content:center;box-sizing:border-box;padding:20px; }
.article-body .rich-video:has(iframe) {padding:0;display:block;}
.article-body .rich-video iframe {display:block;width:100%;height:100%;aspect-ratio:16/9;}