/* ---------- Collection: one header tab's paintings, spaced out with captions, laid over the mosaic ---------- */
.collection {
  position: fixed; inset: 0; z-index: 8;            /* above the mosaic, below the site header (10) */
  overflow-y: auto; overscroll-behavior: contain;
  padding: calc(var(--header-h) + 40px) 24px 80px; background: #fff;
  opacity: 0; transition: opacity .3s ease;
}
.collection[hidden] { display: none; }
.collection.open { opacity: 1; }
.collection .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 56px 40px; max-width: 1206px; margin: 0 auto;
}
.collection figure { margin: 0; text-align: center; opacity: 0; transform: translateY(18px); }
.collection.open figure {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(min(var(--n), 12) * 45ms + .15s);   /* cards arrive one after another */
}
.collection figure button { position: relative; padding: 0; border: 0; background: none; cursor: zoom-in; }
.collection figure button:disabled { cursor: default; }   /* sold or untitled: no dialog */
.collection img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; }
.collection figcaption {
  margin-top: 14px; white-space: pre-line;
  font: 13px/1.5 "Open Sans", system-ui, sans-serif; color: var(--header-link);
}

/* leaving the mosaic: paintings that are not in the chosen collection drift outward and fade */
.mosaic .tile.out {
  transform: translate(var(--dx), var(--dy)) scale(.8); opacity: 0;
  transition: transform .5s cubic-bezier(.4,0,.8,.4), opacity .5s ease;
}

/* text pages (bio, contact) shown in the same overlay */
.collection .page {
  grid-column: 1 / -1; opacity: 0; transition: opacity .45s ease .15s;
  font: 14px/1.7 "Open Sans", system-ui, sans-serif; color: var(--header-title);
}
.collection.open .page { opacity: 1; }
.collection .page h1 { margin: -16px 0 40px; font-size: 18px; font-weight: 400; text-align: center; letter-spacing: .04em; }
.collection .page .cols { display: flex; flex-wrap: wrap; gap: 32px 48px; justify-content: center; align-items: flex-start; }
.collection .page .cols > * { flex: 0 1 auto; }
.collection .page .prose { flex: 1 1 420px; max-width: 604px; }
.collection .page p { margin: 0 0 1.2em; }
.collection .page a { color: inherit; }
.collection .page form { flex: 1 1 320px; max-width: 426px; }
.collection .page label { display: flex; gap: 12px; margin-bottom: 10px; }
.collection .page label span { flex: 0 0 78px; }
.collection .page input, .collection .page textarea {
  flex: 1; min-width: 0; padding: 4px 6px; border: 1px solid #c8c8c8; font: inherit; color: var(--ink);
}
.collection .page textarea { height: 100px; resize: vertical; }
.collection .page form button {
  display: block; margin: 16px 0 0 auto; padding: 8px 28px; border: 0; cursor: pointer;
  background: var(--header-menu); color: #fff; font: inherit;
}