.ribbon { position: relative; --ribbon-image-height: clamp(270px, 31vw, 470px); }
.ribbon .work--ribbon {
  display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding-bottom: 0.5rem; cursor: grab;
}
.work--ribbon::-webkit-scrollbar { display: none; }
.ribbon .work--ribbon > .work__item { flex: 0 0 clamp(280px, 35vw, 620px); margin: 0; scroll-snap-align: start; }
.ribbon .work--ribbon .frame { height: var(--ribbon-image-height); aspect-ratio: auto; border: 0; }
.ribbon .work--ribbon .card__foot { margin-top: 0; padding: 1.5rem 0.5rem 0; border: 0; }
.ribbon .work--ribbon .frame__media { -webkit-user-drag: none; user-select: none; }
.ribbon.is-webgl .frame { background: transparent; clip-path: none !important; }
.ribbon.is-webgl .frame__media { opacity: 0; }
.ribbon.is-webgl .frame__badge, .ribbon.is-webgl .frame__cta { visibility: hidden; }

.ribbon.is-webgl .frame__veil { display: none; }
.ribbon__canvas { position: absolute; inset: 0 0 auto; width: 100%; height: var(--ribbon-image-height); pointer-events: none; z-index: 1; }
.ribbon .frame__badge { z-index: 2; }
.ribbon__controls { display: flex; gap: 0.8rem; align-items: center; margin-top: 2rem; }
.ribbon__controls button { border: 1px solid var(--line); width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; }
.ribbon__controls button:hover { border-color: var(--ember); color: var(--ember); }
.ribbon__controls button:disabled { opacity: 0.25; cursor: default; }
.ribbon__count { font: 0.7rem var(--mono); color: var(--ink-60); margin-left: 0.5rem; }
.ribbon__progress { height: 1px; background: var(--line); flex: 1; margin-left: 1rem; }
.ribbon__progress span { display: block; height: 100%; width: 100%; background: var(--ember); transform: scaleX(0); transform-origin: left; }
.ribbon.is-dragging .work--ribbon { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.ribbon.is-dragging .card { cursor: grabbing; }
@media print {
  .ribbon .work--ribbon { display: grid; overflow: visible; }
  .ribbon.is-webgl .frame__media { opacity: 1; }
  .ribbon__canvas, .ribbon__controls, .dither-cursor { display: none !important; }
}
@media (max-width: 700px) {
  .ribbon { --ribbon-image-height: clamp(220px, 65vw, 340px); }
  .ribbon .work--ribbon > .work__item { flex-basis: 84%; }
}