/* This page is wider than the text-based pages to make room for the grid. */
.wrap {
  max-width: 760px;
}

/* The browser creates as many 180px-or-wider columns as will fit. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.6rem;
}

.frame {
  aspect-ratio: 1;
  border: 2.5px solid #b8aecb;
  border-radius: 4px 9px 3px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c2b8d4;
  font-style: italic;
}

/* nth-child selects repeating positions: 1, 4, 7... and 3, 6, 9... */
figure:nth-child(3n) .frame {
  transform: rotate(1deg);
}

figure:nth-child(3n+1) .frame {
  transform: rotate(-1deg);
}

figcaption {
  font-size: .85rem;
  margin-top: .4rem;
}

.illustrations-note {
  margin-top: 2rem;
}


/* ── Real gallery ── */
.gallery-intro { margin-bottom: 2.5rem; max-width: 640px; }
.pieces { display:flex; flex-direction:column; gap: 3.2rem; }
.piece h2 { font-size: 1.15rem; font-weight: 600; margin-bottom: .3rem; }
.piece .piece-meta { color:#9a9a9a; font-size:.83rem; }
.piece figcaption { color:#7c7c7c; font-size:.92rem; margin-bottom:.5rem; }
.piece button { margin-top:.6rem; }
.pieces .piece:nth-child(odd)  img { transform: rotate(-.4deg); }
.pieces .piece:nth-child(even) img { transform: rotate(.4deg); }