/* Projects page (Figma: "project page" section, frame 1293:3577) */
body { background: var(--white); }

.projects-page {
  max-width: calc(994px + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 100px) var(--gutter) 120px;
  font-family: var(--font-nav);
}

/* Filter tabs: All · Experience Design · Information Design */
.filters { display: flex; flex-wrap: wrap; gap: 22px; margin: 0 0 49px; padding: 0; list-style: none; }
.filters button {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13px; line-height: 1.722; letter-spacing: -0.16px; color: #9f9f9f;
  transition: color .15s ease;
}
.filters button:hover, .filters button[aria-pressed="true"] { color: #000; }

/* Two columns of list entries, each between 2px black rules */
.plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; align-items: start; margin: 0; padding: 0; list-style: none; }
.plist > li[hidden] { display: none; }
.plist > li { border-top: 2px solid #000; border-bottom: 2px solid #000; }

.proj { display: flex; gap: 24px; justify-content: space-between; padding: 22px 0 24px; color: #000; text-decoration: none; }
.proj[aria-disabled="true"] { cursor: default; }
.proj__text { display: flex; flex-direction: column; align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.proj__pill { padding: 4px 8px; border: .5px solid #000; border-radius: 24px; font-size: 11px; line-height: 1.142; white-space: nowrap; }
.proj__title { margin: 13px 0 0; font-size: 25px; font-weight: 700; line-height: 1.282; letter-spacing: -0.16px; }
.proj__tags { margin: auto 0 0; padding-top: 16px; font-size: 11px; line-height: 1.142; color: #7a7a7a; }

/* Thumbnail: black and white by default, the colour version fades in on hover */
.proj__thumb { position: relative; flex: 0 0 auto; align-self: flex-start; width: calc(60% - 16px); aspect-ratio: 1; background: #000; overflow: hidden; }
.proj__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.proj__col { opacity: 0; transition: opacity .35s ease; }
.proj:hover .proj__col, .proj:focus-visible .proj__col { opacity: 1; }

@media (max-width: 760px) {
  .proj__thumb { width: clamp(110px, 40%, 200px); }
  .plist { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .proj__title { font-size: 22px; }
}