/* 05. process — card rack flat-lay (ref: image 7 / mobile image 31) */
#process{position:relative;width:100%;height:100svh;overflow:hidden;isolation:isolate}
#process .stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:var(--stage-w);height:var(--stage-h);z-index:2}
#process .stage > *{position:absolute}
#gl-process{inset:0;width:100%;height:100%;z-index:3;opacity:0;transition:opacity .9s ease .1s;touch-action:pan-y}
#gl-process.ready{opacity:1}
#process.hot #gl-process{cursor:pointer}

#process .eyebrow{left:calc(150 * var(--u));top:calc(156 * var(--u))}

#process .step{left:calc(150 * var(--u));top:calc(150 * var(--u));width:calc(420 * var(--u));height:calc(600 * var(--u));z-index:4}
#process .step > *{position:absolute;left:0;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
#process .step.swap > *{opacity:0;transform:translateY(calc(8 * var(--u)))}
#process .step.swap .rule{opacity:1;transform:none}
#process .n{top:calc(118 * var(--u));font-family:var(--mono);font-weight:500;font-size:max(var(--mt,0px), calc(15 * var(--u)));
  letter-spacing:.12em;color:var(--dot);line-height:1.2}
#process .t{top:calc(140 * var(--u));font-family:var(--serif);font-weight:500;font-size:calc(46 * var(--u));
  letter-spacing:.02em;color:#1A140C;line-height:1.05;text-transform:uppercase;white-space:nowrap}
#process .rule{top:calc(214 * var(--u));width:calc(47 * var(--u));height:calc(1.6 * var(--u));background:#2A2119}
#process .b{top:calc(236 * var(--u));font-family:var(--mono);font-size:max(var(--mt,0px), calc(15 * var(--u)));
  line-height:max(calc(var(--mt,0px) * 1.42), calc(25.5 * var(--u)));letter-spacing:0;color:#3D3226;white-space:nowrap}
#process .l{top:calc(415 * var(--u));list-style:none;font-family:var(--mono);font-size:max(var(--mt,0px), calc(14.5 * var(--u)));
  letter-spacing:.02em;color:#3D3226}
#process .l li{position:relative;height:calc(36 * var(--u));line-height:calc(36 * var(--u));
  padding-left:calc(45 * var(--u));white-space:nowrap}
#process .l li::before{content:"";position:absolute;left:calc(6 * var(--u));top:50%;
  width:calc(16 * var(--u));height:calc(16 * var(--u));margin-top:calc(-8 * var(--u));border-radius:50%;
  border:calc(1.6 * var(--u)) solid #2A2119;transition:background-color .4s ease,border-color .4s ease}
#process .l li.on::before{background:var(--dot);border-color:var(--dot)}

/* the step's number, large and outlined, bridging the text and the rack */
#process .bignum{left:calc(560 * var(--u));top:calc(196 * var(--u));z-index:2;pointer-events:none;
  font-family:var(--serif);font-weight:400;font-size:calc(420 * var(--u));line-height:1;letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:calc(1.8 * var(--u)) rgba(42,33,25,.26);
  transition:opacity .35s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
#process .bignum.swap{opacity:0;transform:translateY(calc(14 * var(--u)))}

/* ================= mobile: 530 x 941 ================= */
@media (max-width:860px){
  #process .eyebrow{left:calc(48 * var(--u));top:calc(100 * var(--u))}
  #process .step{left:calc(48 * var(--u));top:calc(90 * var(--u));width:calc(400 * var(--u));height:calc(340 * var(--u))}
  #process .n{top:calc(46 * var(--u));font-size:max(var(--mt,0px), calc(12 * var(--u)))}
  #process .t{top:calc(64 * var(--u));font-size:calc(32 * var(--u))}
  #process .rule{top:calc(117 * var(--u));width:calc(33 * var(--u));height:calc(1.4 * var(--u))}
  #process .b{top:calc(134 * var(--u));font-size:max(var(--mt,0px), calc(11.4 * var(--u)));line-height:max(calc(var(--mt,0px) * 1.42), calc(17.5 * var(--u)));letter-spacing:0}
  #process .l{top:calc(240 * var(--u));font-size:max(var(--mt,0px), calc(11.6 * var(--u)));letter-spacing:.02em}
  /* the step number sits to the right of the title, as on desktop */
  #process .bignum{left:auto;right:calc(48 * var(--u));top:calc(128 * var(--u));text-align:right;
    font-size:calc(150 * var(--u));-webkit-text-stroke-width:calc(1.3 * var(--u))}
  /* bullets as a 2 x 2 grid, so the rack below can span the full content width */
  #process .l{display:grid;grid-template-columns:1fr 1fr;width:calc(434 * var(--u));column-gap:calc(10 * var(--u))}
  #process .l li{height:calc(22 * var(--u));line-height:max(calc(var(--mt,0px) * 1.42), calc(22 * var(--u)));padding-left:calc(24 * var(--u))}
  #process .l li::before{left:calc(1 * var(--u));width:calc(12 * var(--u));height:calc(12 * var(--u));
    margin-top:calc(-6 * var(--u));border-width:calc(1.3 * var(--u))}
}