/* "Success changes things." — the list holds while each line takes its turn and
   the photograph behind the geometry answers it. Below 1100px, and with motion
   off, all five lines simply read at once and each line can select its photograph. */
.stack__plate--steps{position:relative}
.stack__plate--steps .step-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 45%;opacity:0}
.stack__plate--steps .step-img.is-on{opacity:1}
.transition__run.steps > span{position:relative}
@media screen and (min-width:1100px) and (prefers-reduced-motion:no-preference){
  /* .sec clips its full-bleed geometry, and an overflow ancestor disables
     sticky. This section carries none, so it can open up. */
  .steps-active .idea--steps{overflow:visible}
  .steps-active .idea--steps > .wrap{position:sticky;top:calc(var(--hdr-h) + 4vh)}
  .steps-active .transition__run.steps > span{
    color:rgba(42,38,32,calc(.30 + .70 * var(--on,0)));transition:none}
  /* a gold rule draws under the line that is speaking */
  .steps-active .transition__run.steps > span::before{content:"";position:absolute;left:0;bottom:-1px;
    height:1px;width:100%;background:var(--gold);transform:scaleX(var(--on,0));
    transform-origin:left center;pointer-events:none}
  .steps-active .transition__run.steps > span > b,
  .steps-active .transition__run.steps > span::after{opacity:calc(.25 + .75 * var(--on,0))}
  .steps-active .stack__plate--steps .step-img{
    opacity:var(--img-o,0);transform:scale(var(--img-s,1));transform-origin:50% 45%}
}
@media(prefers-reduced-motion:reduce),print{
  .idea--steps > .wrap{position:static!important}
  .stack__plate--steps .step-img{opacity:0!important;transform:none!important}
  .stack__plate--steps .step-img.is-on{opacity:1!important}
  .transition__run.steps > span{color:var(--ink)!important}
  .transition__run.steps > span::before{display:none!important}
}

@media screen and (min-width:1100px) and (prefers-reduced-motion:no-preference){
  /* the lines invite a click without a label saying so */
  .steps-active .transition__run.steps > span{cursor:pointer}
  .steps-active .transition__run.steps > span:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px}
}

.transition__run.steps > span{cursor:pointer;min-height:44px}
.transition__run.steps > span:focus-visible{outline:2px solid var(--gold-deep);outline-offset:6px}