/* scene 3: the source files, on a full blue band */
.scale { overflow: hidden; padding-top: clamp(80px, 13vh, 150px); padding-bottom: clamp(80px, 13vh, 150px); }
.scale-grid { position: absolute; inset: 0; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
.scale-in { position: relative; }
.scale-big { margin-top: 0; }
.scale-big .sv { font-size: clamp(3.4rem, 11vw, 11rem); line-height: 1; color: var(--on-blue); display: flex; }
.scale-big p, .scale-row p { margin: 12px 0 0; font-size: var(--s-lead); color: rgba(255, 255, 255, .84); }
.scale-row { margin-top: clamp(36px, 6vh, 70px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; border-top: 1px dotted rgba(255, 255, 255, .5); padding-top: 26px; max-width: 1000px; }
.scale-row .sv { font-size: clamp(2.6rem, 4.4vw, 4.2rem); line-height: 1; display: flex; }
.scale .wheel.lead, .scale .sep.lead { color: rgba(255, 255, 255, .28); }
.scale .sv .wheels { --cell: 1em; }   /* the reels are exactly one line tall, so nothing below moves while they roll */
.scale-line { margin: clamp(36px, 6vh, 64px) 0 0; font-size: var(--s-lead); line-height: 1.5; color: var(--on-blue); max-width: 36rem; }
@media (max-width: 860px) {
  .scale-row { grid-template-columns: 1fr; gap: 18px; }
}

.scale .scale-grid { background-attachment: fixed; }