/* Demo C, "Rullino": the same app read as a roll of 35mm. Sprocket edges,
   edge codes and frame numbers, a contact-sheet mode, a pull-down advance. */
:root {
  --edge: #c9a978;                 /* faded edge-print amber, used sparingly */
  --base: #121110;                 /* film base around the frames */
  /* one perforation, centred in its tile; scales with the row height */
  --hole: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22' preserveAspectRatio='xMidYMid meet'%3E%3Crect x='7' y='4.5' width='26' height='13' rx='3.5' fill='%23000'/%3E%3C/svg%3E");
  --advance: .52s;
  --advance-ease: cubic-bezier(.7, 0, .2, 1);
}

.wordmark, .kicker, .album-meta, .credits dt, .tabbar a, .v-title span, .reel-label span {
  font-family: var(--mono); letter-spacing: .08em;
}
.wordmark { letter-spacing: .28em; color: var(--edge); opacity: .9; }
.tabbar a { font-size: 9px; text-transform: uppercase; }

/* 4-perf 35mm: every frame shows exactly four perforations on each edge, one
   per quarter of its width. Each band = perforation row (--row, next to the
   image) + outer margin where the edge print sits, as on real film. */
.album .cover, .reel-tile, .grid.sheet .thumb {
  --margin: calc(var(--band) - var(--row));
  border-radius: 2px;
  background:
    var(--hole) 0 var(--margin) / 25% var(--row) repeat-x,
    var(--hole) 0 calc(100% - var(--margin)) / 25% var(--row) repeat-x,
    var(--base) !important;
}
.reel-tile { --row: 20px; --band: 30px; padding: var(--band) 0; }
.reel-tile .reel-label { bottom: var(--band); }
.album .cover { --row: calc(var(--cardw) * .055); --band: calc(var(--row) + 12px); padding: var(--band) 0; }
.album .cover:not(.empty) { display: block; } /* image fills the frame between the two bands */
.album .cover::after {
  content: "AF 5219  " attr(data-edge); content: "AF 5219  " attr(data-edge) / "";
  position: absolute; left: 10px; bottom: 0; font: 8px/var(--margin) var(--mono); letter-spacing: .12em; color: var(--edge); opacity: .75;
}
.album .cover.empty::after { content: none; }

/* Projects as big 3:2 frames: one per row on phones, three per row on wider
   screens. Rows fill automatically, however many projects there are. */
.albums { --g: 24px; --cardw: calc(100cqw - 2 * var(--pad)); grid-template-columns: 1fr; gap: 36px var(--g); }
.album .cover { aspect-ratio: auto; height: min(62svh, calc(var(--cardw) / 1.5 + 2 * var(--band))); }
.album-title { margin-top: 10px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.album-meta { font-size: 12px; }
@container (min-width: 700px) {
  .albums { --cardw: calc((100cqw - 2 * var(--pad) - 2 * var(--g)) / 3); grid-template-columns: repeat(3, 1fr); }
  .album .cover { height: calc(var(--cardw) / 1.5 + 2 * var(--band)); }
}

/* Thumbnails: frame number in the corner */
.thumb::after {
  content: attr(data-frame); content: attr(data-frame) / "";
  position: absolute; left: 4px; bottom: 2px; z-index: 1; font: 9px var(--mono); color: var(--edge);
  text-shadow: 0 0 4px #000, 0 0 2px #000; opacity: .9;
}

/* Contact sheet: native aspect ratios, strips with sprockets, edge codes */
.grid.sheet { display: flex; flex-wrap: wrap; gap: 16px 0; padding: 8px var(--pad) 0; }
.grid.sheet .thumb {
  --h: 92px; --row: 13px; --band: 22px;
  aspect-ratio: auto; height: calc(var(--h) + 2 * var(--band)); width: calc(var(--h) * var(--ar) + 6px); padding: var(--band) 3px;
}
.grid.sheet .thumb::after { bottom: 0; left: 6px; font: 8px/var(--margin) var(--mono); text-shadow: none; content: attr(data-frame) "A"; content: "▸" attr(data-frame) "A" / ""; }
.grid.sheet li:nth-child(4n + 1) .thumb::before {
  content: attr(data-edge); content: attr(data-edge) / "";
  position: absolute; top: 0; left: 6px; width: auto; height: auto; border-radius: 0; background: none;
  font: 8px/var(--margin) var(--mono); letter-spacing: .12em; color: var(--edge); opacity: .75; white-space: nowrap;
}
@container (min-width: 700px) { .grid.sheet .thumb { --h: 132px; } }

/* Viewer: a mechanical pull-down between frames, with a brief soft gate */
.v-slide { --slide-gap: 3px; }
.v-track.advancing .v-media { animation: gate var(--advance) var(--advance-ease); }
@keyframes gate {
  0%, 100% { filter: none; }
  45% { filter: blur(1.2px) brightness(.8); }
}
.v-title span { color: var(--edge); }