/* ---------------------------------------------------------------
   Product pages. The picture stays put on the left and changes
   as the notes on the right scroll past it. Each note is one
   screen: a numeral, the feature as a statement, four or five
   lines of plain words. Below: a short note on what the pictures
   are, an "I'm interested" form, and the next product.
   Under 861px, with scripts off or with motion reduced, each note
   carries its own picture above it and nothing is sticky.
   --------------------------------------------------------------- */
.steps { padding: 0 0 var(--chapter-pad); }
.steps__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.steps__stage { position: sticky; top: calc(50svh - 17.5cqw); }
.steps__grid { container-type: inline-size; }
.steps__stage .reel__frame { width: 100%; }
.steps__list { list-style: none; margin: 0; padding: 0; }
.step { min-height: 72svh; display: grid; align-content: center; padding: 2rem 0; border-top: 1px solid var(--ink-line); }
.step:first-child { border-top: 0; }
.step__fig { display: none; margin: 0 0 1.4rem; }
.step__fig img, .step__fig video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; border: 1px solid var(--ink-line); background: var(--ink-1); }
.step__n { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; color: var(--text-on-ink-faint); }
.step__n b { color: var(--accent); font-weight: 500; }
.step__t { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.15; color: var(--text-on-ink); margin: 0.9rem 0 1rem; max-width: 18ch; }
.step__p { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.6; color: var(--text-on-ink-muted); max-width: 42ch; margin: 0; }
.step.is-on .step__t { color: var(--text-on-ink); }
.step:not(.is-on) .step__t, .step:not(.is-on) .step__p { opacity: 0.55; transition: opacity 0.5s var(--ease-out); }
.step.is-on .step__t, .step.is-on .step__p { opacity: 1; transition: opacity 0.5s var(--ease-out); }

/* the short note under the pictures */
.product-note .body { max-width: 40ch; }

/* the ending: the next product, or back to all */
.product-next { padding: var(--chapter-pad) 0; border-top: 1px solid var(--ink-line); }
.product-next__link { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; margin-top: 1rem; text-decoration: none; color: var(--text-on-ink); }
.product-next__link .title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.15; max-width: 22ch; }
.product-next__arrow { font-family: var(--font-display); font-size: 2rem; color: var(--accent); transition: transform var(--dur-base); }
.product-next__link:hover .product-next__arrow { transform: translateX(6px); }
.product-next__all { margin-top: 2rem; }

/* static: each note carries its own picture */
html:not(.js) .steps__stage, .steps--static .steps__stage { display: none; }
html:not(.js) .steps__grid, .steps--static .steps__grid { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .step__fig, .steps--static .step__fig { display: block; }
html:not(.js) .step, .steps--static .step { min-height: 0; }
html:not(.js) .step .step__t, html:not(.js) .step .step__p, .steps--static .step .step__t, .steps--static .step .step__p { opacity: 1; }
@media (max-width: 860px) {
  .steps__stage { display: none; }
  .steps__grid { grid-template-columns: minmax(0, 1fr); }
  .step__fig { display: block; }
  .step { min-height: 0; }
  .step .step__t, .step .step__p { opacity: 1; }
}