/* Section: process */
/* ---------- process (Figma 468:3112): a light sheet with a rounded top over the dark work log. Pinned: cards enter from the right,
   the last card is the result (blue image, green type, hand-drawn ring) ---------- */
/* the rounded top lives on a strip above the section, so it has scrolled away by the time the section pins */
.pr-cap{position:relative;height:calc(var(--r-sheet) * 2);background:var(--night)}
.pr-cap::before{content:"";position:absolute;inset:0;background:var(--page);border-radius:var(--r-sheet) var(--r-sheet) 0 0}
.pr{--ink-2:var(--ink-soft);--card:rgba(255,255,255,.5);--g:max(10px, calc(16 * var(--u)));
  position:relative;height:100vh;display:flex;flex-direction:column;padding:max(calc(104px * var(--f)), calc(144 * var(--u))) calc(120 * var(--u)) max(24px, calc(76 * var(--u)));background:var(--page);color:var(--ink);overflow:hidden}
.pr-head{text-align:center}
.pr .kick{font:var(--eb-font);color:var(--ink)}
.pr h2{margin-top:max(16px, calc(32 * var(--u)));font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-display);line-height:1.1;letter-spacing:var(--ls)}
.pr-row{flex:1;min-height:0;display:flex;gap:var(--g);margin-top:max(32px, calc(68 * var(--u)))}
.pc{position:relative;flex:none;width:calc((100% - 2 * var(--g)) / 3);border-radius:max(10px, calc(16 * var(--u)));background:var(--card);color:var(--night);overflow:hidden}
.pc .v{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:6.4em;text-align:center;font-family:var(--xh);font-weight:var(--fw);font-size:var(--fs-h3);line-height:1.16;letter-spacing:-.0104em}
.pc .scrawl{position:absolute;left:50%;top:50%;width:calc(var(--fs-h3) * 7.6);height:auto;overflow:visible;transform:translate(-50%,-50%) rotate(15deg);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;pointer-events:none}
.pc .lb{position:absolute;left:max(20px, calc(32 * var(--u)));top:max(20px, calc(32 * var(--u)));display:flex;align-items:center;gap:calc(12 * var(--p));font-weight:var(--fw);font-size:var(--fs-body);line-height:1.4;white-space:nowrap}
.pc .lb svg{flex:none;width:max(calc(20px * var(--f)), calc(26 * var(--u)));height:auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pc .ix{position:absolute;left:max(20px, calc(32 * var(--u)));bottom:max(20px, calc(32 * var(--u)));font-size:var(--fs-body);line-height:1.4;opacity:.3}
/* the result: always blue, green type */
.pc.res{background:var(--blue) url(../../assets/img/blue-card.jpg) center/cover;color:var(--green)}
.pc.res .ix{opacity:.6}
/* mobile (Figma 472:5085): not pinned, the three cards stacked in full; the ring draws when the result card comes in */
@media (max-width:820px){
  .pr-cap{margin-top:calc(-100svh - 64px)}   /* the sheet follows the last case directly and slides over it while it is stuck (see .wl-list::after) */
  .pr{height:auto;padding:32px 16px 64px;overflow:visible}
  .pr h2{margin-top:20px}
  .pr-row{flex-direction:column;margin-top:68px;--g:16px}
  .pc{width:100%;display:flex;flex-direction:column;align-items:center;gap:48px;padding:16px;border-radius:12px}
  .pc .lb,.pc .v,.pc .ix{position:static;transform:none}
  .pc .lb{align-self:flex-start;gap:8px;font-size:var(--fs-body)}
  .pc .lb svg{width:22px}
  .pc .v{width:6.2em;font-size:var(--fs-h3)}
  .pc .ix{align-self:flex-start;font-size:var(--fs-body)}
  .pc.res{height:348px;justify-content:space-between;gap:0}
  .pc.res .lb,.pc.res .ix{color:var(--white)}
  .pc .scrawl{width:260px}
}