.process-story { display: block; }
.process-stage { display: none; }
.process-scene figcaption span { direction: ltr; color: var(--accent); font: .75rem/1.5 Arial, sans-serif; }
.process-inline-image { width: 100%; height: auto; border-radius: 16px; margin-bottom: 24px; }
.process-story .process-steps { display: grid; grid-template-columns: 1fr; gap: 28px; }
.process-story .process-step { display: block; }
.process-story:not(.is-story) .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Pinned story: assets/process.js adds .is-story on tall desktop windows. The section sticks to the top while
   the page scrolls; the steps slide up one by one, resting on each, and the illustrations cross-fade with them. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .process-story.is-story { height: var(--process-height, auto); }
  .is-story .process-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 7%; align-items: center; padding-block: 48px; }
  .is-story .process-stage { position: relative; display: grid; border: 1px solid #cfd5c2; border-radius: 25px; background: var(--canvas); padding: 14px 14px 22px; overflow: hidden; }
  /* Progress along the four steps; RTL, so it fills from the right. */
  .is-story .process-stage::before, .is-story .process-stage::after { content: ""; position: absolute; inset-inline: 26px; bottom: 16px; height: 2px; border-radius: 2px; background: var(--line); }
  .is-story .process-stage::after { background: var(--accent); transform-origin: right; transform: scaleX(var(--process-progress, 0)); }
  .is-story .process-scene { grid-area: 1 / 1; margin: 0; background: var(--canvas); opacity: 0; will-change: opacity, transform; }
  .process-scene img { display: block; width: 100%; height: auto; max-height: calc(100svh - 230px); object-fit: contain; border-radius: 16px; }
  .process-scene figcaption { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 12px 10px; }
  .process-scene figcaption strong { font-size: 1.125rem; }
  .is-story .process-inline-image { display: none; }
  .is-story .process-window { height: 100%; min-height: 0; overflow: clip; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
  .is-story .process-steps { position: relative; gap: 0; transform: translateY(var(--steps-y, 0px)); will-change: transform; }
  .is-story .process-step { border: 0; border-top: 1px solid var(--line-olive); padding: 40px 10px; }
  .is-story .process-step.is-current { border-top-color: var(--ink); }
  .is-story .process-step h3 { font-size: 1.75rem; }
  .is-story .process-step p { font-size: 1.0625rem; }
  .is-story .step-number { margin-bottom: 20px; }
}

@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .process-story:not(.is-story) .process-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce), print {
  .process-story:not(.is-story) .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .process-story:not(.is-story) .process-steps { grid-template-columns: 1fr; }
}
@media print {
  .process-story, .process-story.is-story { display: block; height: auto; }
  .process-story .process-pin { position: static; display: block; height: auto; padding: 0; }
  .process-story .process-window { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .process-story .process-steps { transform: none; }
  .process-story .process-step { opacity: 1 !important; }
  .process-story .process-stage { display: none; }
  .process-story .process-inline-image { display: block; }
  .process-story .process-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-story .process-step { min-height: 0; break-inside: avoid; padding: 20px; }
}