/* Gallery index — ragged true-aspect masonry.
   No cards: no borders, no shadows, no radius. Gallery walls don't have those. */

.masthead{
  font: 800 clamp(2.5rem, 9vw, 7rem)/0.9 var(--f-display);
  letter-spacing: var(--tracking-loud);
  text-transform: uppercase;
  padding-top: var(--s7);
  margin: 0;
  text-align: center;
}
.masthead__sub{
  margin: var(--s4) auto 0;
  max-width: var(--measure);
  text-align: center;
}

.filters{
  display: flex;
  gap: var(--s5);
  padding-top: var(--s6);
  border-bottom: 1px solid var(--hair);
}
.filters button{
  background: none;
  border: 0;
  padding: 0 0 var(--s3);
  margin-bottom: -1px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font: 500 var(--t-body)/1 var(--f-text);
  color: var(--ink-2);
  transition: color .18s ease;
}
.filters button:hover{ color: var(--ink); }
.filters button[aria-pressed="true"]{ color: var(--ink); border-bottom-color: var(--ink); }
.filters__count{ text-align: center; }

/* About sits under the piece count, above the grid. */
.masthead__about{
  display: table;
  margin: var(--s2) auto 0;
  color: var(--ink);
  border-bottom: 1px solid var(--hair);
  padding-bottom: 2px;
  transition: border-color .15s ease;
}
.masthead__about:hover{ border-bottom-color: var(--ink); }

/* CSS columns give true-aspect masonry with no JS and no layout library. */
.gallery{
  columns: 3;
  column-gap: var(--grid-gap);
  padding-block: var(--s7) var(--s8);
}
@media (max-width: 1100px){ .gallery{ columns: 2; } }
@media (max-width: 620px){  .gallery{ columns: 1; } }

.piece{
  break-inside: avoid;
  display: block;
  margin-bottom: var(--grid-gap);
}
.piece img{ width: 100%; height: auto; background: var(--hair); }

.piece__title{ display: block; margin-top: var(--s3); font-weight: 500; }
.piece .micro{ display: block; margin-top: var(--s1); }

/* Hover is the only motion on the page. */
.piece__wall{
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}
.piece:hover .piece__wall,
.piece:focus-visible .piece__wall{ opacity: 1; transform: none; }
@media (hover: none){ .piece__wall{ opacity: 1; transform: none; } }

/* A piece with no Shopify product yet — stated plainly, not hidden. */
.piece--soon .piece__status{ display: block; margin-top: var(--s1); }

.gallery__empty{ padding-block: var(--s8); color: var(--ink-2); }