/* Reserve the cover before bytes arrive, including during the R2 fallback. */
.feed-thumb {
  aspect-ratio: var(--work-preview-ratio, 720 / 500);
}
.feed-thumb > img {
  min-height: 0;
  height: 100% !important;
}
.feed-thumb > img, .card-thumb img {
  display: block;
  color: transparent;
  font-size: 0;
}
.work-previews-js .feed-thumb > img,
.work-previews-js .card-thumb img { transition: opacity 180ms ease-out; }
/* Enabled only by the successfully loaded head script; no-JS images still work. */
.work-previews-js .feed-thumb > img:not([data-preview-ready="1"]),
.work-previews-js .card-thumb img:not([data-preview-ready="1"]) {
  opacity: 0;
  transition: none;
}
html .feed-card .feed-thumb,
html .post-card .card-thumb {
  background-color: var(--work-preview-color, #101522) !important;
}
html[data-theme="light"] .feed-card .feed-thumb,
html[data-theme="light"] .post-card .card-thumb {
  background-color: var(--work-preview-color, #eef0f4) !important;
}
@media (prefers-reduced-motion: reduce) {
  .work-previews-js .feed-thumb > img,
  .work-previews-js .card-thumb img { transition: none; }
}
.feed-thumb.work-preview-error, .card-thumb.work-preview-error {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23808aa0' stroke-width='2'%3E%3Crect x='5' y='7' width='38' height='34' rx='5'/%3E%3Ccircle cx='16' cy='18' r='3'/%3E%3Cpath d='m6 34 12-11 8 7 6-5 10 10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 48px !important;
}