/* CHAPTER 04 — HOW WE WORK */
.process__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.process__sticky { grid-column: 1 / span 5; position: sticky; top: calc(var(--nav-h) + 24px); }
.process__steps { grid-column: 7 / span 6; position: relative; padding-left: 40px; }
.process__spine {
  position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px;
  background: var(--hair-bone);
}
.process__spine span {
  position: absolute; inset: 0; background: var(--earth);
  transform: scaleY(0); transform-origin: top center;
}
.process__list li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 24px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--hair-bone);
}
.process__list li:first-child { padding-top: 0; }
.process__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(2.2rem, 3vw, 3rem);
  line-height: .9;
  color: var(--earth);
}
.process__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 1.9vw, 1.8rem); line-height: 1.15; }
.process__line { margin-top: 8px; font-size: .98rem; font-weight: 300; line-height: 1.65; color: color-mix(in srgb, var(--ink) 74%, transparent); max-width: 50ch; }
.process__footnote {
  margin-top: 36px;
  font-size: .82rem;
  line-height: 1.6;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--ink) 70%, transparent);
  max-width: 52ch;
}
@media (max-width: 899px) {
  .process__grid { grid-template-columns: 1fr; row-gap: 40px; }
  .process__sticky { grid-column: auto; position: static; }
  .process__sticky .photo--tall { aspect-ratio: 16 / 10; }
  .process__steps { grid-column: auto; padding-left: 26px; }
  .process__list li { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; }
}