/* PIGMENT homepage update. Scoped to this feature; the studio's shared CSS stays intact. */
.studio-home .pigment-story {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  padding: clamp(18px, 2.2vw, 30px);
  background: #f5f5f2;
  color: var(--ink);
}
.studio-home .pigment-step { min-width: 0; margin: 0; }
.studio-home .pigment-step-heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  font-size: .875rem;
  line-height: 1.4;
}
.studio-home .pigment-step-heading > span:first-child {
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.studio-home .pigment-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  aspect-ratio: 1 / 1;
  min-width: 0;
}
.studio-home .pigment-story img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.studio-home .pigment-step figcaption {
  position: static;
  display: block;
  padding: 0;
  margin: 16px 0 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.studio-home .pigment-entry .pigment-note {
  margin-top: 10px;
  max-width: 58ch;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.55;
}
.studio-home .pigment-entry .work-links { align-items: center; gap: 12px 24px; margin-top: 20px; }
.studio-home .pigment-try {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.studio-home .pigment-try:hover { color: var(--paper); background: var(--ink-soft); }
.studio-home .pigment-entry .work-links > a:last-child { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 1024px) and (min-width: 721px) {
  .studio-home .pigment-story { gap: 14px; padding: 18px; }
  .studio-home .pigment-step figcaption { font-size: .75rem; }
}
@media (max-width: 540px) {
  .studio-home .pigment-story { gap: 12px; padding: 14px; }
  .studio-home .pigment-step-heading { margin-bottom: 12px; gap: 8px; font-size: .8125rem; }
  .studio-home .pigment-stage { gap: 10px; }
  .studio-home .pigment-step figcaption { margin-top: 12px; font-size: .75rem; }
}