/* THE SHELF. A deck is sold by its face, so the face is the whole listing and
   the words around it stay out of the way. Paper ground, because every face was
   drawn against paper and half of them vanish on white. */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: #efe6d6; color: #3a2a24;
  font-family: Geist, system-ui, sans-serif;
  padding: 34px 30px 70px;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 700px) { body { padding: 24px 16px 56px; } }

header { max-width: 1180px; margin: 0 auto 26px; }
h1 { font-size: 30px; letter-spacing: -.02em; margin: 0 0 4px; }
.sub { font-size: 13px; color: #7a665e; margin: 0 0 18px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tabs button {
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer;
  background: #fffdf7; color: #7a665e;
  border: 1px solid #e3d5bd; border-radius: 999px; padding: 7px 14px;
}
.tabs button.on { background: #3a2a24; color: #fffdf7; border-color: #3a2a24; }

main { max-width: 1180px; margin: 0 auto; }
.group { margin-top: 34px; }
.group > h2 {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #8d7a70; margin: 0 0 14px;
  padding-bottom: 8px; border-bottom: 1px solid #ded0b6;
}

/* A FIXED SLOT. The faces are wildly different heights — full bleed is 3:4,
   split is a wide row, stamp is 4:5 — and left to themselves they made a
   ragged brick wall. Each one sits in a box of its own so the grid is a grid. */
.grid {
  display: grid; gap: 30px 24px;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
}
.slot { display: flex; flex-direction: column; }
.pane {
  height: 300px; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pane .face { max-width: 216px; }
.slot .meta { margin-top: 10px; }
.slot .t { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.slot .n {
  font-size: 11.5px; color: #8d7a70; margin-top: 2px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.slot .n b { font-weight: 700; color: #b07a3c; }

/* THE STYLE SHEET. One card sixteen times, so the faces are the only thing
   changing. Bigger slots than the shelf, because the point here is to look at
   one card closely and not to scan forty of them. */
.group.styles .grid {
  grid-template-columns: repeat(auto-fill, minmax(244px, 1fr));
  gap: 34px 28px;
}
.group.styles .pane { height: 340px; }
.group.styles .pane .face { max-width: 244px; }
.group.styles .slot .t { font-size: 15px; }