/* ==========================================================================
   Provision Homes — /building-process. Loads after base.css and components.css.

   A five-step timeline in alternating linen and umber bands, joined by a
   vertical rail that fills as you scroll past each step.

     ≥ 901px  head | rail | body, with the heading right-aligned against the rail
     ≤ 900px  rail down the left, heading and body stacked beside it
   ========================================================================== */

.steps { position: relative; }

.step {
  position: relative;
  padding: clamp(60px, 7vw, 104px) clamp(20px, 4vw, 80px);
}
.step--light { background: var(--cream); }
.step--dark  { background: var(--ink); color: var(--cream); }

/* The lattice sits only on the dark bands, slightly softer than the title band's. */
.step--dark .step__texture {
  position: absolute;
  inset: 0;
  opacity: .35;
  pointer-events: none;
  background-image:
    linear-gradient(45deg,  rgba(255,255,255,.08) 0 1px, transparent 1px 100%),
    linear-gradient(-45deg, rgba(255,255,255,.08) 0 1px, transparent 1px 100%);
  background-size: 56px 56px;
}

.step__inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "rail head" "rail body";
  column-gap: 18px;
  row-gap: 14px;
}

.step__head {
  grid-area: head;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}
.step__num {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.step__digits {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(52px, 6vw, 88px);
  line-height: .9;
  letter-spacing: .02em;
}
.step--light .step__digits { color: var(--wine); }
.step--dark  .step__digits { color: var(--gold); }
.step__label {
  font-size: 10px;
  letter-spacing: .24em;
}
.step--light .step__label { color: rgba(var(--ink-rgb), .65); }
.step--dark  .step__label { color: rgba(var(--cream-rgb), .7); }

.step__title {
  max-width: 16em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  text-wrap: pretty;
}
.step--light .step__title { color: var(--ink); }
.step--dark  .step__title { color: var(--cream); }

.step__body {
  grid-area: body;
  align-self: center;
  max-width: 56ch;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.8;
  text-wrap: pretty;
}
.step--light .step__body { color: rgba(var(--bitter-rgb), .76); }
.step--dark  .step__body { color: rgba(var(--cream-rgb), .8); }

/* ---------- The rail ----------
   Track and fill run past the band's padding so the line is continuous
   between steps; the first starts at its marker and the last ends at its own. */
.step__rail { grid-area: rail; position: relative; }
.step__track,
.step__fill {
  position: absolute;
  left: 50%;
  width: 1px;
  margin-left: -.5px;
  top: calc(-1 * clamp(60px, 7vw, 104px));
  bottom: calc(-1 * clamp(60px, 7vw, 104px));
}
.step:first-child .step__track,
.step:first-child .step__fill { top: 0; }
.step:last-child .step__track,
.step:last-child .step__fill { bottom: 0; }

.step--light .step__track { background: rgba(var(--ink-rgb), .16); }
.step--dark  .step__track { background: rgba(var(--cream-rgb), .18); }

.step__fill {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 120ms linear;
}
.step--light .step__fill { background: var(--wine); }
.step--dark  .step__fill { background: var(--gold); }

.step__marker {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step--light .step__marker { background: var(--cream); border: 1px solid var(--wine); }
.step--dark  .step__marker { background: var(--ink);   border: 1px solid var(--gold); }
.step__marker .mark { width: 15px; height: 13px; stroke-width: 3.2; }
.step--light .step__marker .mark { color: var(--wine); }
.step--dark  .step__marker .mark { color: var(--gold); }

/* ==========================================================================
   Breakpoints
   ========================================================================== */

@media (min-width: 901px) {
  .step__inner {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1.25fr);
    grid-template-areas: "head rail body";
    column-gap: clamp(28px, 4vw, 56px);
  }
  .step__head { align-items: flex-end; text-align: right; }
  .step__num  { flex-direction: row-reverse; }
}

@media (prefers-reduced-motion: reduce) {
  .step__fill { transform: scaleY(1); transition: none; }
}