/*
 * Sia.L — unified image caption
 * ------------------------------------------------------------
 * Use on EVERY Collection page. Do not invent local caption styles.
 *
 * HARD RULE — caption type size must stay identical site-wide:
 *   Body / meta lines:  0.62rem / weight 300 / lh 1.85 / tracking 0.08em
 *   Title line:         same size; only color + tracking differ
 *   NEVER shrink body text for “compact” captions.
 *   --compact only tightens max-width and title margin — NOT font-size.
 *   --step is the only exception (uppercase process labels).
 *
 * Markup:
 *   <figcaption class="img-caption">
 *     <p class="img-caption__title">Title, Year</p>
 *     <p>Type</p>
 *     <p>Materials / tools</p>
 *     <p>Dimensions (optional)</p>
 *     <p>Byline (optional)</p>
 *   </figcaption>
 *
 * Variants:
 *   img-caption--compact   narrower column; SAME type size
 *   img-caption--step      numbered process labels (1. Sieving)
 *   img-caption--research  research column notes under images
 *   img-caption--on-light  dark text for light / white sections
 * ------------------------------------------------------------
 */

.img-caption {
  --caption-size: 0.62rem;
  --caption-lh: 1.85;
  --caption-track: 0.08em;
  --caption-soft: rgba(226, 221, 234, 0.55);
  --caption-dim: rgba(226, 221, 234, 0.78);

  max-width: 16rem;
  margin-top: 1rem;
}

.img-caption p {
  font-family: "Jost", "Futura", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  font-size: var(--caption-size);
  font-weight: 300;
  letter-spacing: var(--caption-track);
  line-height: var(--caption-lh);
  color: var(--caption-soft);
  margin: 0;
}

.img-caption__title,
.img-caption .meta-title {
  color: var(--caption-dim);
  letter-spacing: 0.14em;
  margin-bottom: 0.85rem;
}

/* compact — narrower only; type size MUST match standard caption */
.img-caption--compact {
  max-width: 14rem;
}

.img-caption--compact .img-caption__title,
.img-caption--compact .meta-title {
  margin-bottom: 0.55rem;
}

/* step — process grid labels only */
.img-caption--step {
  max-width: none;
  margin-top: 0.65rem;
}

.img-caption--step,
.img-caption--step p {
  font-size: var(--caption-size);
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--caption-soft);
  line-height: 1.5;
}

/* research — notes under research images */
.img-caption--research {
  max-width: none;
  margin-top: 1rem;
}

.img-caption--research p {
  font-size: var(--caption-size);
  letter-spacing: 0.05em;
  line-height: 1.75;
  color: var(--caption-dim);
}

.img-caption--research .img-caption__title,
.img-caption--research .meta-title {
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}

.img-caption--research .formula-list {
  white-space: pre-line;
}

/* on light backgrounds (e.g. development white plateau) */
.img-caption--on-light {
  --caption-soft: rgba(16, 10, 20, 0.55);
  --caption-dim: rgba(16, 10, 20, 0.78);
}