/* Preserve each supplied photograph exactly as shot, including on hover. */
.source-step,
.source-step:hover {
  background-image: url('assets/source-ingredients.png');
}

.prepare-step,
.prepare-step:hover {
  background-image: url('assets/source-preparation.png');
}

.slow-dry-step,
.slow-dry-step:hover {
  background-image: url('assets/slow-dry.png');
}

.source-step,
.source-step:hover,
.prepare-step,
.prepare-step:hover,
.slow-dry-step,
.slow-dry-step:hover {
  background-position: center;
  background-size: cover;
  color: var(--ink);
  transition: none;
}

.source-step .step-num,
.prepare-step .step-num,
.slow-dry-step .step-num { color: var(--gold); }

.source-step p,
.prepare-step p,
.slow-dry-step p { color: #fffaf0; }

.process-step-copy {
  align-self: center;
  max-width: 100%;
  padding: 14px;
  color: #fffaf0;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .95),
    1px 0 2px rgba(0, 0, 0, .8),
    -1px 0 2px rgba(0, 0, 0, .8);
}

.process-step-copy h3 {
  margin: 9px 0 8px;
  color: #fffaf0;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, .95),
    1px 0 2px rgba(0, 0, 0, .9),
    -1px 0 2px rgba(0, 0, 0, .9);
}
.process-step-copy p { margin: 0; }

@media (max-width: 560px) {
  .source-step,
  .prepare-step,
  .slow-dry-step { min-height: 230px; display: flex; align-items: center; }
}