/* Works — masonry, placed by js/works.js. Wider than the text column. */
.works {
  width: calc(100% - 120px);
  max-width: var(--grid);
  margin: 160px auto 0;
  scroll-margin-top: 50px;
}
.works-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  font-size: 16px; line-height: 1.6;
}
.works-head > span { font-weight: 500; }
.works-filters { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 28px; }
.works-filters button { color: var(--muted); transition: color 0.25s ease; white-space: nowrap; }
.works-filters button:hover { color: var(--ink); }
.works-filters button[aria-pressed="true"] { color: var(--ink); font-weight: 500; }

.works-grid { position: relative; margin-top: 25px; }
.works-grid.settled .tile {
  transition: top 0.5s var(--ease-out), left 0.5s var(--ease-out),
              opacity 0.35s ease, transform 0.5s var(--ease-out);
}
.tile.out { opacity: 0; transform: scale(0.97); pointer-events: none; }

.tile {
  position: absolute;
  border-radius: calc(32px * var(--k, 1));
  overflow: hidden;
  background: var(--surface);
  border: 0.5px solid var(--stroke);
}
.tile.on-dark { background: #121212; border-color: #121212; }

/* Placeholder artwork: a framed hint of where the screen goes. */
.tile-ph {
  position: absolute;
  inset: calc(70px * var(--k, 1)) calc(25px * var(--k, 1));
  border-radius: calc(18px * var(--k, 1));
  border: 1px dashed #d6d6d6;
  display: grid; place-items: center;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: calc(11px * var(--k, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b0b0b0;
}
.tile.on-dark .tile-ph { border-color: #2c2c2c; color: #555; }
.tile.block .tile-ph { bottom: calc(170px * var(--k, 1)); }

.tile-cap { display: flex; align-items: center; justify-content: space-between; white-space: nowrap; gap: 12px; }
.tile-cap.fixed { position: absolute; left: calc(25px * var(--k, 1)); right: calc(25px * var(--k, 1)); }
.tile-cap.top    { top: calc(25px * var(--k, 1)); }
.tile-cap.bottom { bottom: calc(25px * var(--k, 1)); }
.tile-id { display: flex; align-items: center; gap: calc(15px * var(--k, 1)); font-size: calc(15px * var(--k, 1)); line-height: 1.6; min-width: 0; }
.tile-num  { color: rgba(10, 10, 10, 0.5); }
.tile-name { color: rgba(10, 10, 10, 0.75); overflow: hidden; text-overflow: ellipsis; }
.tile-label {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size: calc(13px * var(--k, 1)); line-height: 1.6;
  letter-spacing: -0.07px;
  text-transform: uppercase;
  color: rgba(10, 10, 10, 0.6);
}
.tile.on-dark .tile-num   { color: rgba(237, 237, 237, 0.5); }
.tile.on-dark .tile-name  { color: #ededed; }
.tile.on-dark .tile-label { color: rgba(237, 237, 237, 0.6); }

/* Cards that carry copy: caption, blurb, link, anchored to the bottom. */
.tile-block {
  position: absolute;
  left: calc(25px * var(--k, 1)); right: calc(25px * var(--k, 1)); bottom: calc(25px * var(--k, 1));
  display: flex; flex-direction: column;
  gap: calc(20px * var(--k, 1));
}
.tile-desc { font-size: calc(15px * var(--k, 1)); line-height: 1.4; color: rgba(10, 10, 10, 0.6); }
.tile-stat { font-size: calc(15px * var(--k, 1)); line-height: 1.4; color: var(--ink); }
.tile.on-dark .tile-desc { color: rgba(237, 237, 237, 0.6); }
.tile.on-dark .tile-stat { color: #ededed; }

@media (max-width: 1100px) { .works { margin-top: 120px; } }
@media (max-width: 640px) {
  .works { width: calc(100% - 50px); margin-top: 80px; }
  .works-head { flex-direction: column; align-items: flex-start; font-size: 14px; }
  .works-filters { gap: 18px; overflow-x: auto; max-width: 100%; }
}

.tile-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; }