/* GENERATED by tools/gen.py from tools/design/curved-row.css (only when tools/features.json design.curvedRow is true). Do not edit. */
/* copyzor.com — curved cover row in the index hero (tools/features.json design.curvedRow; js/curved-row.js). Decorative.
   The band's height is set here (never by JS), so nothing moves when the images arrive (CLS 0). All lengths inside are container
   query units of the band: --cr-h = the tile height, --cr-R = the cylinder radius (--cr-arc × the width; js sets --cr-arc). */
.sm-cr {
  position: relative; width: 100%; height: clamp(232px, 32vw, 480px); margin-top: 24px;   /* right under the hero buttons (gen.py drops the scroll hint with the row on) */
  container-type: size; overflow: clip; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  opacity: 0; transition: opacity 900ms var(--sm-ease, ease);
}
html:not(.js) .sm-cr { display: none; }
.sm-cr.is-on { opacity: 1; }
.sm-cr__stage {
  --cr-R: calc(var(--cr-arc, 0.2455) * 100cqw);
  --cr-h: min(calc(var(--cr-tile, 0.48) * 100cqh), calc(55cqw / var(--cr-aspect, 1.9)));
  position: absolute; inset: 0; perspective: calc(1.6 * var(--cr-R)); perspective-origin: 50% 50%;
}
.sm-cr__tile {
  position: absolute; left: 50%; top: 50%;
  width: calc(var(--cr-h) * var(--cr-aspect, 1.9)); height: var(--cr-h);
  margin: calc(var(--cr-h) / -2) 0 0 calc(var(--cr-h) * var(--cr-aspect, 1.9) / -2);
  transform-style: preserve-3d; visibility: hidden;
  animation: sm-cr-spin var(--cr-dur, 16s) linear var(--cr-delay, 0s) infinite; will-change: transform;
}
/* one facet: centred on the tile centre, turned around the cylinder axis by js; shows its slice of the WHOLE cover (no crop) */
.sm-cr__s {
  position: absolute; top: 0; left: 50%; height: 100%;
  width: calc(var(--cr-h) * var(--cr-share) + 1px); margin-left: calc(var(--cr-h) * var(--cr-share) / -2);
  overflow: hidden; background: #111;
}
.sm-cr__s:last-child { width: calc(var(--cr-h) * var(--cr-share)); }
.sm-cr__s:first-child { border-radius: 8px 0 0 8px; }
.sm-cr__s:last-child { border-radius: 0 8px 8px 0; }
.sm-cr__s img {
  position: absolute; top: 0; display: block; max-width: none;
  width: calc(var(--cr-h) * var(--cr-aspect, 1.9)); height: var(--cr-h);
}
.sm-cr.is-off .sm-cr__tile { animation-play-state: paused; }
/* reduced motion: a still (the start frame), not a blank band: site.css turns every animation off (none !important), so the
   tiles get theirs back here, paused */
@media (prefers-reduced-motion: reduce) {
  .sm-cr__tile {
    animation-name: sm-cr-spin !important; animation-duration: var(--cr-dur, 16s) !important; animation-delay: var(--cr-delay, 0s) !important;
    animation-timing-function: linear !important; animation-iteration-count: infinite !important; animation-fill-mode: none !important;
    animation-play-state: paused !important;
  }
}

/* the short "all work" link that replaces the index wall */
.sm-allwork { display: flex; justify-content: center; padding: 16px 0 104px; }