/* All projects */
.project-list { list-style: none; padding: 0; margin-top: 112px; }
.project-card { padding: 32px 0 40px; border-top: 1px solid var(--line); }
.project-card:first-child { border-top-color: var(--ink); }
.project-card__link { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px 40px; text-decoration: none; }
.project-card__main { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 14px; }
.project-card__side { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 16px; justify-content: flex-end; }
.project-card__name { font-family: var(--serif); font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; }
.project-card__score { display: flex; justify-content: space-between; align-items: baseline; }
.project-card__count { font-family: var(--serif); font-size: 32px; line-height: 1; }
.project-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.person-inline { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); }
.project-past { padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.project-past__link { display: flex; justify-content: space-between; gap: 16px; text-decoration: none; color: var(--ink-soft); }

@media (max-width: 900px) {
  /* Everything spans the full width here, so the 12 columns need no gaps.
     With them, eleven 40px gaps alone are wider than a phone. */
  .project-card__link { column-gap: 0; }
  .project-card__main, .project-card__side { grid-column: 1 / -1; }
}