/* ---------- Mosaic: evenly spaced grid, true aspect ratios, white space between paintings ---------- */
html { overflow-anchor: none; scrollbar-width: none; }   /* no anchoring fights during loop jumps; scrollbar is meaningless in a loop */
html::-webkit-scrollbar { display: none; }
.mosaic { display: block; overflow-x: clip; transition: opacity .26s ease; }
.mosaic.swap { opacity: 0; }
.tile.fading { opacity: 0; transition: opacity .45s ease; }   /* filtered out */
.row {   /* the space above each row is part of the row, so the endless loop repeats cleanly */
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--gap); place-items: end center;   /* bottoms line up, so the titles in a row share a line */
  box-sizing: content-box; height: var(--h); max-width: 1720px; margin: 0 auto; padding: var(--rgap) var(--pad) 0;
}
.tile {
  position: relative;
  aspect-ratio: var(--ar);   /* width is set in mosaic.js */
  margin: 0; padding: 0; border: 0;
  background: #f4f2ee;
  cursor: pointer;
  display: block;
}
.art { position: absolute; inset: 0; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* soft reveal each time a painting scrolls into view (mosaic.js sets .in and --from: 1 from below, -1 from above); `translate`, so it never fights the fly-out's `transform` */
.tile { transition: opacity 1.7s ease-in-out calc(var(--c, 0) * 150ms), translate 1.7s cubic-bezier(.25,.8,.25,1) calc(var(--c, 0) * 150ms); }
.tile:not(.in) { opacity: 0; translate: 0 calc(var(--from, 1) * 28px); transition-duration: 0s; transition-delay: 0s; }   /* resets at once, off screen */
@media (prefers-reduced-motion: reduce) { .tile:not(.in) { opacity: 1; translate: none; } }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* title under the painting, with a small red dot when it is sold */
.cap {
  position: absolute; top: 100%; left: 50%; translate: -50% 0; width: var(--cell); padding-top: 9px;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  font: 400 11px/1.3 "Open Sans", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--header-title);
}
.cap b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }
.cap b:empty { display: none; }
.sold-dot { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #c8202a; vertical-align: middle; }

/* phones: the first painting sits close under the opening video (45px instead of the 135px between paintings) */
@media (max-width: 599px) {
  .mosaic { margin-top: -90px; pointer-events: none; }   /* the pulled-up empty strip must not block taps on the video */
  .tile { pointer-events: auto; }
}