/* ===== ffs-before-after: draggable photo ↔ artwork comparison (shared by A and B) =====
   Both layers are positioned so the FACE sits on the same vertical axis at any width:
   --par  photo aspect ratio (w/h)          --pfx  face x in the photo (0–1)
   --ax   face x in the 300×360 artboard    --at   artboard top offset (tunes face height)
   The artwork photo is a face-centred focal-point crop (the build’s imgfp directive) so its face fills the portrait. */
.slider{position:relative;aspect-ratio:1.18/1;border-radius:var(--r);overflow:hidden;background:var(--paper);user-select:none;-webkit-user-select:none;
  touch-action:pan-y;cursor:ew-resize;container-type:size;--x:50%;--par:1.778;--pfx:.5;--ax:.5;--at:1.5%}
.slider__a,.slider__b{position:absolute;inset:0}
.slider__a>img{position:absolute;top:0;height:100%;width:auto;max-width:none;left:calc(50% - var(--pfx)*var(--par)*100cqh);pointer-events:none}
.slider__b{clip-path:inset(0 0 0 var(--x));background:var(--paper)}
.slider__b .ffs-print{position:absolute;top:var(--at);height:97%;width:auto;left:calc(50% - var(--ax)*80.833cqh)}
.slider__h{position:absolute;top:0;bottom:0;left:var(--x);width:0;z-index:3}
.slider__h::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--black)}
.slider__h button{position:absolute;top:50%;left:0;translate:-50% -50%;width:58px;height:58px;border-radius:50%;border:0;background:var(--black);color:var(--ivory);cursor:ew-resize;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:scale .4s var(--ease)}
.slider:active .slider__h button{scale:1.08}
.slider__h button svg{width:26px;height:26px}
.slider .tagl{position:absolute;z-index:2;top:16px;padding:8px 12px;border-radius:var(--pill);font:700 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
.slider .t1{left:16px;background:rgba(255,255,255,.92);color:var(--black)}
.slider .t2{right:16px;background:var(--black);color:var(--ivory)}
.ba__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(14px,1.6vw,24px)}
.ba__worn{position:relative;border-radius:var(--r);overflow:hidden}
.ba__worn .ffs-frame{position:absolute;inset:0;--fy:46%}
.ba__worn .tagl{position:absolute;z-index:2;left:16px;top:16px;padding:8px 12px;border-radius:var(--pill);background:var(--orange);color:var(--black);font:700 11px/1 var(--font-body);letter-spacing:.16em;text-transform:uppercase}
@media (max-width:860px){.ba__grid{grid-template-columns:1fr}.ba__worn{aspect-ratio:4/5}}