/* css.slopped.site exhibit: A slideshow that plays itself. From css/exhibits/slideshow.mjs. */
.x-slideshow .show { max-width: 640px; margin: auto; }
.x-slideshow .pick { position: absolute; opacity: 0; width: 1px; height: 1px; }
.x-slideshow .frame { overflow: hidden; border-radius: 14px; background: var(--ink); }
.x-slideshow .strip { display: flex; width: 400%; }
.x-slideshow .slide { display: grid; align-content: center; gap: 6px; width: 25%; min-height: 240px; padding: 30px; color: var(--paper); }
.x-slideshow .slide b { font: 1000 clamp(30px, 5vw, 46px)/1 var(--head); letter-spacing: -1.5px; font-synthesis: none; }
.x-slideshow .num { color: var(--acid); font: 700 13px var(--mono); }
.x-slideshow .n2 { background: linear-gradient(135deg, #1d3a4a, #171815); }
.x-slideshow .n3 { background: linear-gradient(135deg, #3b2a1a, #171815); }
.x-slideshow .n4 { background: linear-gradient(135deg, #2a2a40, #171815); }
.x-slideshow .picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.x-slideshow .pl { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; cursor: pointer; }
.x-slideshow #sl-play:checked ~ .picks [for=sl-play],
.x-slideshow #sl-1:checked ~ .picks [for=sl-1],
.x-slideshow #sl-2:checked ~ .picks [for=sl-2],
.x-slideshow #sl-3:checked ~ .picks [for=sl-3],
.x-slideshow #sl-4:checked ~ .picks [for=sl-4],
.x-slideshow #sl-pause:checked ~ .picks .pause { background: var(--ink); color: var(--paper); }
.x-slideshow #sl-play:focus-visible ~ .picks [for=sl-play],
.x-slideshow #sl-1:focus-visible ~ .picks [for=sl-1],
.x-slideshow #sl-2:focus-visible ~ .picks [for=sl-2],
.x-slideshow #sl-3:focus-visible ~ .picks [for=sl-3],
.x-slideshow #sl-4:focus-visible ~ .picks [for=sl-4],
.x-slideshow #sl-pause:focus-visible ~ .picks [for=sl-pause] { outline: 3px solid var(--focus); outline-offset: 3px; }
/* key */
@keyframes slides {
  0%, 20%   { translate: 0; }
  25%, 45%  { translate: -25%; }
  50%, 70%  { translate: -50%; }
  75%, 95%  { translate: -75%; }
  100%      { translate: 0; }
}
/* Play: the animation is the slideshow */
.x-slideshow #sl-play:checked ~ .frame .strip { animation: slides 16s ease-in-out infinite; }
/* …held still by a hover, keyboard focus on its controls, or the Pause box */
.x-slideshow .frame:hover .strip,
.x-slideshow .show:has(.pick:focus-visible) .strip,
.x-slideshow #sl-pause:checked ~ .frame .strip { animation-play-state: paused; }
/* a numbered radio stops the animation and shows its slide */
.x-slideshow #sl-2:checked ~ .frame .strip { translate: -25%; }
.x-slideshow #sl-3:checked ~ .frame .strip { translate: -50%; }
.x-slideshow #sl-4:checked ~ .frame .strip { translate: -75%; }
/* reduced motion: never moves on its own */
@media (prefers-reduced-motion: reduce) {
  .x-slideshow #sl-play:checked ~ .frame .strip { animation: none; }
  .x-slideshow .play, .x-slideshow .pause { display: none; }
}
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-checkbox-hack .sup-no { display: none; }
@supports not selector(:checked) { .sup-checkbox-hack .sup-yes { display: none; } .sup-checkbox-hack .sup-no { display: inline; } .sup-checkbox-hack { --sup: var(--no); } }
.sup-has .sup-no { display: none; }
@supports not selector(:has(*)) { .sup-has .sup-yes { display: none; } .sup-has .sup-no { display: inline; } .sup-has { --sup: var(--no); } }