/* ==========================================================================
   Before and after wipe slider, shared. Linked by build_pages.py on any page whose
   body carries data-wipe; the behavior is assets/js/wipe.js. Used for the Stafford
   homepage (/, /work/, /work/stafford/) and logo (/work/stafford/).

   The before image sits on top, clipped to --pos. A transparent range input over the
   whole frame drives it, so drag, tap and arrow keys all work with no extra code.
   The frame takes its aspect ratio from an inline style, so it never shifts on load.
   ========================================================================== */

  .wipe-fig { margin: clamp(40px, 5vw, 56px) auto 0; max-width: 680px; }
  .wipe-fig--wide { max-width: none; margin-top: clamp(48px, 6vw, 72px); }
  .wipe-fig figcaption { margin-top: 12px; font-size: 0.9375rem; color: var(--muted); text-align: center; }
  .wipe { --pos: 50%; position: relative; background: #fff; border: 1px solid var(--line); overflow: hidden; touch-action: pan-y; }
  .wipe img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .wipe__before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .wipe__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--blue); pointer-events: none; }
  .wipe__line::after { content: '\2039\203A'; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--blue); color: var(--on-dark); font: 600 20px/38px var(--f-text); text-align: center; letter-spacing: 2px; box-shadow: 0 0 0 4px #fff; }
  .wipe__tag { position: absolute; top: 10px; padding: 2px 8px; font-family: var(--f-mono); font-size: var(--data); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--on-dark); pointer-events: none; }
  .wipe__tag--b { left: 10px; background: var(--muted); }
  .wipe__tag--a { right: 10px; background: var(--blue); }
  .wipe input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
  .wipe:focus-within { outline: 3px solid var(--blue); outline-offset: 3px; }