/* Swipe rows (js/swipe-row.js). Below 768px the .swipe-track inside a .swipe-row wrapper becomes one
   sideways row the reader swipes: native scrolling with x snapping, each item about 86% of the viewport
   so the next one peeks, the row running to both screen edges while the first item lines up with the
   page gutter. This needs no script. The script adds the dots and arrows (.swipe-nav) and shows them
   only while the track really scrolls sideways, so on wider screens the track keeps its own layout. */
@media (max-width: 767px) {
  .swipe-row > .swipe-track {
    display: flex;
    gap: var(--s-3);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .swipe-row > .swipe-track::-webkit-scrollbar { display: none; }
  .swipe-row > .swipe-track > * { flex: 0 0 min(86vw, 420px); scroll-snap-align: start; scroll-snap-stop: always; }
  .swipe-row > .swipe-track:focus-visible { outline-offset: -2px; }
  .swipe-row.swipe-on > .swipe-track:focus-visible { outline: none; }
  .swipe-row.swipe-on > .swipe-track:focus-visible > .is-current { outline: 2px solid var(--focus); outline-offset: -2px; }
}
/* Inside a sideways scroller the items of an .rv-stagger list measure against the track, not the page,
   so their reveal never plays. On phones the track reveals as one piece instead. */
@supports (animation-timeline: view()) {
  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .swipe-row > .swipe-track.rv-stagger {
      animation: rv-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 12%;
    }
  }
}
.swipe-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.swipe-dots { display: flex; align-items: center; margin-left: calc(var(--s-2) * -1); }
.swipe-dot {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--s-2);
  border: 0;
  border-radius: var(--r-control);
  background: none;
  cursor: pointer;
}
.swipe-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: var(--line-strong);
  transition: width var(--t-fast) ease-out, background-color var(--t-fast) ease-out;
}
.swipe-arrows { display: flex; gap: var(--s-2); }
.swipe-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--t-fast) ease-out, color var(--t-fast) ease-out;
}
.swipe-arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 1.5px 1.5px 0 0;
  transform: translateX(-2px) rotate(45deg);
}
.swipe-prev::before { transform: translateX(2px) rotate(-135deg); }
/* Touch screens keep :hover after a tap, so a tapped dot or arrow would stay lit. */
@media (hover: hover) {
  .swipe-dot:hover::before { background: var(--ink-2); }
  .swipe-arrow:hover { border-color: var(--line-strong); color: var(--ink); }
}
.swipe-dot[aria-current="true"]::before { width: 20px; background: var(--teal-ink); }
.swipe-arrow[aria-disabled="true"] { border-color: var(--hairline); color: var(--ink-3); opacity: 0.45; cursor: default; }