/* ============================================================
   HIGH BROW SOCIETY — The Process (self-drawing timeline)
   Ivory. A vertical line with a gold fill that grows as you
   scroll; each step reveals and a node lights as the fill passes.
   Fill driven by --fill (0→1) set in main.js.
   ============================================================ */

.process {
  position: relative;
  padding-block: var(--space-2xl);
  background-color: var(--color-cream);
}

.process__head {
  max-width: 50ch;
  margin-bottom: var(--space-xl);
}
.process__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: var(--ls-tight);
  color: var(--color-charcoal);
  margin-top: var(--space-sm);
}
.process__intro {
  margin-top: var(--space-md);
  max-width: 46ch;
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--color-charcoal-soft);
}

/* --- Timeline --- */
.process__list {
  position: relative;
  padding-left: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
/* the track + fill, pinned to the left */
.process__line {
  position: absolute;
  left: clamp(11px, 1.5vw, 19px);
  top: 0.6em;
  bottom: 2.5em;
  width: 1px;
  background: var(--color-line);
}
.process__line-fill {
  position: absolute;
  inset: 0 0 auto 0;
  width: 100%;
  height: calc(var(--fill, 0) * 100%);
  background: var(--color-champagne);
  transition: height 0.1s linear;
}

.step {
  position: relative;
  padding-bottom: var(--space-xl);
}
.step:last-child { padding-bottom: 0; }

/* node on the line */
.step::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(2.5rem, 1.5rem + 3vw, 4rem) + clamp(7px, 1.5vw, 15px));
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-ivory);
  border: 1px solid var(--color-champagne-deep);
  z-index: 1;
}

.step__num {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-champagne-deep);
  margin-bottom: var(--space-2xs);
}
.step__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--color-charcoal);
}
.step__text {
  margin-top: var(--space-sm);
  max-width: 52ch;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--color-charcoal-soft);
}

/* --- Desktop: a touch more room, numbers offset --- */
@media (min-width: 760px) {
  .process__head { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: end; }
  .process__head .eyebrow { grid-column: 1 / -1; }
  .process__intro { margin-top: 0; padding-bottom: 0.4em; }
  .step { padding-bottom: var(--space-2xl); }
}