/* Selected works — the 2x2 card grid from node 57:356 (1416 x 1236).

   This replaces the four-row text list the earlier frame carried. Geometry is
   the frame's: a centred 48px title, a 48px gap, then two rows of two 480-wide
   cards at a 48px gutter. */

.works {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
}

/* Onest 48/61.2, centred across the full 1416 column — the only centred
   heading on the page. */
.works__title {
  margin: 0;
  text-align: center;
  font-size: var(--step-title);
  line-height: var(--leading-title);
  font-weight: 500;
}

/* Both card rows are one grid: the frame's two row-frames share the parent's
   48 gap, so a single 48px gutter in both axes reproduces them exactly.
   justify-content centres the 1008px pair inside the 1416 column, which is what
   the row frames' primaryAxisAlignItems=CENTER does. */
.works__grid {
  display: grid;
  grid-template-columns: repeat(2, var(--card-w));
  gap: var(--gap-grid);
  justify-content: center;
}

/* ==========================================================================
   Work card — node 57:357 'card item', 480 x 539.5
   ========================================================================== */

/* 6px of surface shows around the media on three sides; the bottom carries the
   full 24 so the CTA is not crowded against the edge. */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);
  padding: calc(6 * var(--u)) calc(6 * var(--u)) var(--gap-card);
  border-radius: var(--radius-card);
  background: var(--card-surface);
  transition: background-color 240ms var(--ease-out);
}

/* 466 x 349.5 in the frame — 4:3. Held by aspect-ratio so the row cannot go
   ragged when one card's title wraps. A real screenshot drops in here as an
   <img> child; the fill is the frame's own placeholder colour until it does. */
.card__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-media);
  background: var(--card-media);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Frame 50: 16px of side inset against the card's 6, so the text sits on the
   media's inner edge rather than the card's. */
.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  padding-inline: var(--gap-sm);
}

.card__title {
  margin: 0;
  font-size: var(--step-card);
  line-height: var(--leading-title);
  font-weight: 500;
}

.card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-tag);
  margin: 0;
  padding: 0;
  list-style: none;
}

.card__tag {
  padding: calc(6 * var(--u)) var(--gap-xs);
  border-radius: 9999px;
  background: var(--tag-surface);
  color: var(--tag-ink);
  font-family: var(--font-mono);
  font-size: var(--step-fine);
  line-height: var(--leading-mono);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The whole card is one hover target, so the CTA anchor is stretched over it.
   That keeps a single tab stop and makes the pointer honest — it never sits
   over dead ground. Unlike the old list row the CTA is always visible here;
   the frame draws it at full opacity. */
.card__cta {
  padding: calc(8 * var(--u)) var(--gap-sm);
  font-family: var(--font-mono);
  font-size: var(--step-body);
  line-height: var(--leading-mono);
  font-weight: 500;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.card__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

/* Soul: hover brings a --chip surface in behind unchanged ink. */
.card:hover, .card:focus-within { background: var(--chip); }