/* ==========================================================================
   how.css — "How it works" ritual section (section CSS, loaded on index only).
   Ported from the preview's §6 HOW IT WORKS (#how / .steps / .step).
   NO global redefs here — .eyebrow/.btn live globally, .reveal lives in reveal.css.
   ========================================================================== */

#how {
  padding-block: clamp(4.5rem, 9vw, 9rem);
  position: relative;
}

/* a real 3-step sequence → the Roman numbering earns its place */
.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.step {
  background: linear-gradient(180deg, var(--shadow), rgba(25, 21, 15, 0.4));
  border: 1px solid var(--veil);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  position: relative;
  overflow: hidden;
}

/* the italic gold Roman numeral marker */
.step .n {
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 300;
  color: var(--grace);
  font-style: italic;
}
.step h3 {
  font-size: var(--step-2);
  margin: 0.6rem 0;
  font-weight: 400;
}
.step p {
  margin: 0;
  color: var(--bone-dim);
  font-size: var(--step-0);
}

/* a low gold floor-glow, like a candle set on the card — fades in on hover */
.step::before {
  content: "";
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 120px;
  background: radial-gradient(closest-side, rgba(232, 178, 89, 0.12), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.step:hover::before {
  opacity: 1;
}