/* ============================================
   PROGRESSIVE IMAGE LOADING
   The wrapper carries the photo's dominant colour (inline style,
   computed at build time); the photo fades in over it once loaded.
   ============================================ */

img.prog-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Invisible until loaded — the wrapper's dominant colour shows behind.
     transform stays in the list so card hover zooms keep animating. */
  opacity: 0;
  /* same dissolve as the about-page gallery */
  transition: opacity 1.2s var(--ease), transform 400ms var(--ease);
}

/* Full image loaded: fade in over the colour */
img.prog-img.prog-loaded {
  opacity: 1;
}

.prog-img-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  background: #f5f4f0; /* fallback while loading — inline style carries the dominant colour */
}

/* Texture overlay — overlay blend */
.prog-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/Texture.jpg') repeat;
  background-size: 600px auto;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Photographer credit — a quiet line underneath the picture, only where
   the picture is shown as itself on a page. Thumbnails, covers and cards
   never show it (hidden by default, enabled per context). */
.img-credit-line {
  display: none;
  font-family: var(--font-inter);
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--mid-grey);
  text-align: right;
  margin-top: 0.35rem;
}

.featured-image .img-credit-line,
.content .img-credit-line,
.note-page-body .img-credit-line,
.note-photo .img-credit-line {
  display: block;
}

/* inside a note photo's white mat, the line sits like a pencil caption */
.note-photo .img-credit-line {
  text-align: center;
  margin: 0.3rem 0 0.05rem;
}