/* ============================ 12 — PRACTICE =============================== */
.s12-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(44% 40% at 76% 24%, rgba(200, 161, 85, .16), transparent 70%),
    radial-gradient(50% 44% at 18% 84%, rgba(29, 111, 106, .1), transparent 72%);
  pointer-events: none;
}

.sl-copy .steps { margin-top: 26px; }
.sl-copy .step { padding: 13px 0; }
.sl-copy .step .n { font-size: 26px; }
.sl-copy .step h4 { font-size: 21px; }
.sl-copy .step p { font-size: 13px; }
.sl-figure .cite { position: static; margin-top: 30px; max-width: 640px; }

.s12-fig {
  position: relative;
  overflow: hidden;
  height: 460px;
  background: #0e1316;
  box-shadow: 0 40px 80px -46px rgba(24, 16, 6, .7);
}
.s12-fig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.72) contrast(1.06) brightness(.88) sepia(.1);
}
.s12-fig::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 16, 18, .78), rgba(12, 16, 18, 0) 48%);
}
.s12-fig-cap {
  position: absolute;
  left: 28px;
  right: 40px;
  bottom: 24px;
  z-index: 2;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(247, 241, 230, .78);
}

.s12-quote {
  position: relative;
  margin-top: 34px;
  padding: 26px 30px 26px 30px;
  border-left: 2px solid var(--gold);
  background: linear-gradient(100deg, rgba(255, 253, 246, .6), rgba(255, 253, 246, .15));
}
.s12-quote p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  line-height: 1.28;
  color: var(--ink);
}