/* css.slopped.site exhibit: A carousel on rails. From css/exhibits/carousel.mjs. */
.x-carousel .carousel { max-width: 720px; margin: auto; }
.x-carousel .slide { display: grid; grid-template-rows: 1fr auto; margin: 0; border-radius: 14px; overflow: hidden; background: var(--ink); color: var(--paper); }
.x-carousel .art { min-height: 260px; }
.x-carousel figcaption { padding: 14px 18px 18px; font-size: 16px; }
.x-carousel figcaption b { display: block; font: 1000 24px/1.1 var(--head); letter-spacing: -.6px; font-synthesis: none; }
.x-carousel .s-tin .art { background: radial-gradient(circle at 75% 30%, #fff8 0 6px, transparent 7px), repeating-radial-gradient(circle at 50% 120%, #2a6f86 0 14px, #3c8aa3 14px 28px), linear-gradient(#c9ccd1, #8d9198); }
.x-carousel .s-walnut .art { background: radial-gradient(ellipse at 50% 100%, #f7d06a55, transparent 60%), repeating-linear-gradient(90deg, #7a1420 0 18px, #5e0f18 18px 36px); }
.x-carousel .s-watch .art { background: radial-gradient(circle, #f4f1e8 0 30%, #b88a2e 31% 34%, transparent 35%), conic-gradient(from 0deg, #3d4a5c, #7b8ba3, #3d4a5c, #a7b6cc, #3d4a5c); }
.x-carousel .s-cup .art { background: radial-gradient(ellipse at 50% 70%, #fff 0 22%, #e6e1d3 23% 30%, transparent 31%), linear-gradient(#9fc0d9, #dfe8ee); }
.x-carousel .dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.x-carousel .dots a { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; font-weight: 700; text-decoration: none; }
.x-carousel .dots a:hover { background: var(--acid); color: var(--on-acid); }
/* key */
/* the track is a row of full-width slides that scrolls sideways and stops on each one */
.x-carousel .track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
}
.x-carousel .slide { scroll-snap-align: start; scroll-snap-stop: always; }

/* newer browsers: CSS makes the dots and the arrows itself, so the link dots step aside */
@supports selector(::scroll-marker) {
  .x-carousel .track { scroll-marker-group: after; }
  .x-carousel .track::scroll-marker-group { display: flex; justify-content: center; gap: 10px; padding-top: 14px; }
  .x-carousel .slide::scroll-marker { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--ink); border-radius: 50%; }
  .x-carousel .slide::scroll-marker:target-current { background: var(--ink); }
  .x-carousel .track::scroll-button(left) { content: "←" / "Previous"; }
  .x-carousel .track::scroll-button(right) { content: "→" / "Next"; }
  .x-carousel .dots { display: none; }
}
/* /key */
.x-carousel .track { position: relative; anchor-name: --track; }
@supports selector(::scroll-marker) {
  .x-carousel .track::scroll-button(*) { position: absolute; position-anchor: --track; top: anchor(center); width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer; translate: 0 -50%; }
  .x-carousel .track::scroll-button(*):disabled { opacity: .35; cursor: default; }
  .x-carousel .track::scroll-button(left) { left: calc(anchor(left) + 10px); }
  .x-carousel .track::scroll-button(right) { right: calc(anchor(right) + 10px); }
}
@media (prefers-reduced-motion: reduce) { .x-carousel .track { scroll-behavior: auto; } }

/* live support notes (built from css/exhibits.js) */
.sup-scroll-snap .sup-no { display: none; }
@supports not (scroll-snap-type: x mandatory) { .sup-scroll-snap .sup-yes { display: none; } .sup-scroll-snap .sup-no { display: inline; } .sup-scroll-snap { --sup: var(--no); } }
.sup-scroll-markers .sup-no { display: none; }
@supports not selector(::scroll-marker) { .sup-scroll-markers .sup-yes { display: none; } .sup-scroll-markers .sup-no { display: inline; } .sup-scroll-markers { --sup: var(--no); } }