/* Swipe rows on phones (8 Oct 2026, Edwina: option D).
   Any image set that would stack into more than one row on a phone swipes sideways instead.
   - every image in a set is the same height, with square corners
   - the next image peeks in from the right
   - a soft fade on the right edge while there is more to see (no fade on the left)
   - "Swipe" under the images, lighter than the caption, with space before the caption
   - only the first row a reader reaches on a page nudges left and back, once (swipe.js)
   - only the first "Swipe" line on a page has a pulsing arrow; the others are still
   - "Swipe" stays under every swipeable row (Edwina, 8 Oct 17:20)
   Mark a row with data-sw="Swipe to see the after" (the text labels the row for screen readers). Add .sw for a plain flex row,
   .sw-h for one height (--sw-h), .sw-w for one width (--sw-w, tables and wide images).
   Tablet and desktop are unchanged: nothing here applies above 48rem. */
.sw-hint{display:none}
@media (max-width:47.99rem){
  [data-sw]{overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;max-width:100%;min-width:0}
  [data-sw]::-webkit-scrollbar{display:none}
  /* a swipe row's parent never grows to the row's full width */
  :has(>[data-sw]){min-width:0;max-width:100%}
  [data-sw].sw-nudging{scroll-snap-type:none!important}
  [data-sw].sw-more{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 2.75rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 2.75rem),transparent)}
  [data-sw]:focus-visible{outline:2px solid #1F33D6;outline-offset:3px}
  [data-sw] img,[data-sw] video{border-radius:0!important}

  /* a plain row */
  .sw{display:flex!important;flex-flow:row nowrap!important;gap:.75rem!important;align-items:flex-start!important;justify-content:flex-start!important;aspect-ratio:auto!important;height:auto!important;max-height:none!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;border-radius:0!important}
  .sw>*{flex:none!important;scroll-snap-align:start;margin:0!important;min-width:0}

  /* one height per set */
  .sw-h img,.sw-h video{height:var(--sw-h,27rem)!important;width:auto!important;max-width:none!important;max-height:none!important;object-fit:contain;display:block}
  .sw-h video{aspect-ratio:var(--ar,9/16)}

  /* one width per set: tables and wide images keep one scale, so every row keeps its height */
  .sw-w>*{width:var(--sw-w,48rem)!important;max-width:none!important}
  .sw-w>img{width:var(--sw-w,48rem)!important;height:auto!important;max-width:none!important;max-height:none!important;display:block;position:static!important}
  .sw-w>*>img{width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;display:block}

  /* the line under the row */
  .sw-hint{display:flex;align-items:center;gap:.4em;margin:.6rem 0 0!important;padding:0;font-size:.875rem;line-height:1.4;font-weight:400;letter-spacing:0;text-transform:none;color:#767680}
  .sw-hint+*{margin-top:1.5rem!important}
  .sw-ar{display:inline-block}
}
@media (max-width:47.99rem) and (prefers-reduced-motion:no-preference){
  .sw-hint.sw-first .sw-ar{animation:sw-ar 1.6s ease-in-out infinite}
  @keyframes sw-ar{0%,60%,100%{transform:none}30%{transform:translateX(4px)}}
}