/* Before and after — side by side without JavaScript; stacked with a wipe handle once assets/js/work/compare.js adds
   .is-live (the handle is a native range input laid over the picture). */
.wrk-ba{margin:0 auto;max-width:1120px}
.wrk-ba + .wrk-ba{margin-top:clamp(64px,7vw,112px)}
.wrk-ba__frame{position:relative}
.wrk-ba__stage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.wrk-ba__pane{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:var(--ar,1.6);background:var(--paper-4)}
.wrk-ba__pane picture,.wrk-ba__pane img{display:block;width:100%;height:100%}
.wrk-ba__pane img{object-fit:cover;object-position:top center}
/* a label always stays on one line inside its own half (the full text is in the title and read in full by screen readers) */
.wrk-ba__tag{position:absolute;left:12px;top:12px;z-index:2;display:block;max-width:calc(100% - 24px);min-height:28px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--ink);color:var(--on-ink);font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.08em;line-height:16px;box-shadow:var(--sh-1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wrk-ba__pane--after .wrk-ba__tag{background:var(--paper);color:var(--ink)}
.wrk-ba__handle{display:none}
.wrk-ba__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin-top:16px;font-size:var(--t-sm);line-height:1.55;color:var(--txt)}
.wrk-ba__hint{font-family:var(--f);font-size:var(--t-lbl);letter-spacing:.06em;color:var(--muted)}
/* the phone legend: each label in full beside a half-filled square — left half for before, right half for after */
.wrk-ba__legend{display:none;flex-direction:column;gap:8px;width:100%}
.wrk-ba__lk{display:flex;align-items:center;gap:10px;font-family:var(--f);font-size:var(--t-lbl);font-weight:500;letter-spacing:.06em;line-height:1.4;color:var(--ink)}
.wrk-ba__lk::before{content:"";flex:none;width:16px;height:11px;border-radius:2px}
.wrk-ba__lk--before::before{box-shadow:inset 8px 0 0 var(--ink),inset 0 0 0 1.5px var(--ink)}
.wrk-ba__lk--after::before{box-shadow:inset -8px 0 0 var(--ink),inset 0 0 0 1.5px var(--ink)}

/* frames around a pair */
.wrk-ba--browser .wrk-ba__frame{border-radius:clamp(8px,1vw,14px);background:var(--paper);overflow:hidden;box-shadow:var(--sh-2),0 0 0 1px var(--line)}
.wrk-ba--browser .wrk-ba__stage{padding:clamp(8px,1vw,14px);background:var(--paper)}
.wrk-ba--browser .wrk-ba__pane{border-radius:6px}
.wrk-ba--phone{max-width:760px}
.wrk-ba--phone .wrk-ba__pane{border:clamp(7px,1vw,11px) solid var(--ink);border-radius:clamp(30px,4.4vw,48px);box-shadow:var(--sh-2)}
.wrk-ba--phone .wrk-dev__island{display:none}

/* ---- live: one picture, wiped ---- */
.wrk-ba.is-live .wrk-ba__stage{position:relative;display:block;aspect-ratio:var(--ar,1.6);overflow:hidden;border-radius:var(--r-lg);--p:50%;padding:0}
.wrk-ba.is-live .wrk-ba__pane{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;border:0;box-shadow:none}
.wrk-ba.is-live .wrk-ba__pane--after{clip-path:inset(0 0 0 var(--p))}
.wrk-ba.is-live .wrk-ba__pane--after .wrk-ba__tag{left:auto;right:12px;top:auto;bottom:12px}
.wrk-ba.is-live .wrk-ba__tag{max-width:calc(50% - 20px)}            /* each label fits its own half at the start position */
.wrk-ba.is-live.wrk-ba--phone .wrk-ba__pane--before .wrk-ba__tag{top:auto;bottom:16px;left:16px}   /* clear of the island */
.wrk-ba.is-live.wrk-ba--phone .wrk-ba__pane--after .wrk-ba__tag{bottom:16px;right:16px}
.wrk-ba.is-live .wrk-ba__handle{position:absolute;top:0;bottom:0;left:var(--p);z-index:3;display:block;width:2px;margin-left:-1px;background:var(--paper);box-shadow:0 0 0 1px var(--line-3);pointer-events:none}
.wrk-ba__handle i{position:absolute;left:50%;top:50%;width:46px;height:46px;border-radius:50%;background:var(--paper);box-shadow:var(--sh-2);transform:translate(-50%,-50%)}
.wrk-ba__handle i::before,.wrk-ba__handle i::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-left:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink)}
.wrk-ba__handle i::before{left:12px;transform:translateY(-50%) rotate(45deg)}
.wrk-ba__handle i::after{right:12px;transform:translateY(-50%) rotate(-135deg)}
.wrk-ba__range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.wrk-ba.is-live .wrk-ba__stage:focus-within .wrk-ba__handle i{outline:2px solid var(--blue);outline-offset:3px}
.wrk-ba.is-live.wrk-ba--browser .wrk-ba__stage{border-radius:0}
.wrk-ba.is-live.wrk-ba--phone{max-width:380px}
.wrk-ba.is-live.wrk-ba--phone .wrk-ba__frame{padding:clamp(7px,1vw,11px);border-radius:clamp(36px,5vw,54px);background:var(--ink);box-shadow:var(--sh-2)}
.wrk-ba.is-live.wrk-ba--phone .wrk-ba__stage{border-radius:clamp(28px,4vw,44px)}
.wrk-ba.is-live.wrk-ba--phone .wrk-dev__island{display:block}
.wrk-ba.is-live .wrk-ba__cap{justify-content:space-between}
.wrk-ba.is-moving .wrk-ba__pane--after,.wrk-ba.is-moving .wrk-ba__handle{transition:clip-path .6s var(--e),left .6s var(--e)}

@media (max-width:640px){
  .wrk-ba.is-live .wrk-ba__tag,.wrk-ba--phone .wrk-ba__tag{display:none}
  .wrk-ba.is-live .wrk-ba__legend,.wrk-ba--phone .wrk-ba__legend{display:flex}
  .wrk-ba__tag{left:8px;top:8px;min-height:24px;padding:4px 9px;letter-spacing:.04em}
  .wrk-ba.is-live .wrk-ba__tag{max-width:calc(50% - 14px)}
  .wrk-ba.is-live .wrk-ba__pane--after .wrk-ba__tag{right:8px;bottom:8px}
  .wrk-ba.is-live.wrk-ba--phone .wrk-ba__pane--before .wrk-ba__tag{left:10px;bottom:12px}
  .wrk-ba.is-live.wrk-ba--phone .wrk-ba__pane--after .wrk-ba__tag{right:10px;bottom:12px}
  .wrk-ba__stage{grid-template-columns:minmax(0,1fr)}
  .wrk-ba--phone:not(.is-live) .wrk-ba__stage{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wrk-ba.is-live.wrk-ba--phone{max-width:300px}
}
@media (prefers-reduced-motion:reduce){.wrk-ba.is-moving .wrk-ba__pane--after,.wrk-ba.is-moving .wrk-ba__handle{transition:none}}

/* each label wraps inside its half instead of ending in an ellipsis (integrator, responsive pass) */
.wrk-ba.is-live .wrk-ba__tag{white-space:normal;overflow:visible}