/* The film strip along the bottom of the first screen: real product frames on a film base with sprocket holes, drifting slowly. Each frame's name sits in a solid bar under its picture, never over it. */
.film-strip { position: relative; z-index: 3; grid-row: 2; overflow: hidden; padding: 28px 0 26px; background: var(--ink); } /* the film base */
.film-strip::before, .film-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--sprocket-holes) repeat-x; } /* rows of sprocket holes */
.film-strip::before { top: 8px; } /* top row */
.film-strip::after { bottom: 7px; } /* bottom row */
.strip-track { display: flex; width: max-content; } /* frames in one long row; no gap, so two copies loop exactly */
.strip-frame { position: relative; flex: none; width: clamp(212px, 28vh, 266px); margin-right: 12px; overflow: hidden; border-radius: 8px; background: var(--ink-raised); color: #fff; text-decoration: none; } /* one frame, links to its project; narrower on short windows */
.strip-frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s ease; } /* the real product picture */
.strip-frame:hover img { transform: scale(1.04); } /* small zoom on hover */
.strip-frame-label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px 7px 12px; background: var(--ink-raised); font: 600 13.5px/1.3 var(--body); white-space: nowrap; } /* name and chip in one solid bar under the picture */
.strip-frame .status-chip { padding: 3px 8px 3px 7px; background: rgb(0 0 0 / 0.5); font-size: 12px; } /* smaller chip inside a frame, still readable */