/* project cards: three in a row, each one horizontal with the screenshot on the left and the name, summary and button on the right */
.prows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); width: min(94%, 1280px); margin: 0 auto; padding: 0; list-style: none; }
.prow { display: grid; grid-template-columns: minmax(0, 50%) minmax(0, 1fr); align-items: center; gap: clamp(12px, 1.1vw, 16px); height: 100%; padding: clamp(12px, 1.1vw, 16px); background: var(--paper); border: 4px solid #c9a227; border-radius: 22px; box-shadow: 0 0 0 1px rgba(201, 162, 39, .35), 0 8px 18px rgba(201, 162, 39, .32), 0 22px 44px rgba(22, 22, 22, .2); transform: translateY(-6px); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s cubic-bezier(.2,.8,.2,1); }
.prow:hover, .prow:focus-within { transform: translateY(-12px); box-shadow: 0 0 0 2px rgba(201, 162, 39, .55), 0 12px 26px rgba(201, 162, 39, .45), 0 34px 60px rgba(22, 22, 22, .28); }
.prow-shot { align-self: start; aspect-ratio: 3 / 2; overflow: hidden; border: 2px solid var(--line); border-radius: 12px; }
.prow-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.prow-shot.poster img { object-position: 50% 50%; }
.prow-shot.tall { background: #f0e1fb; }
.prow-shot.tall img { object-fit: contain; object-position: 50% 50%; }
.prow-body { display: grid; justify-items: start; align-content: start; gap: 8px; min-width: 0; }
.prow-cat { font: 400 11px/1.3 var(--mono); color: var(--dim); }
.prow h3 { margin: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; }
.prow p { margin: 0; font-size: clamp(13px, 1vw, 15px); line-height: 1.5; color: var(--dim); }
.prow .btn { margin-top: 4px; padding: 8px 12px; font-size: 13px; line-height: 1.3; text-wrap: balance; }
@media (max-width: 1100px) { .prows { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .prows { grid-template-columns: minmax(0, 1fr); width: 100%; } .prow { grid-template-columns: minmax(0, 1fr); } .prow-shot { aspect-ratio: 3 / 2; } .prow-shot.poster img { object-position: 50% 50%; } .prow h3 { font-size: 22px; } .prow p { font-size: 15px; } .prow .btn { padding: 9px 14px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .prow { transition: none; } .prow:hover, .prow:focus-within { transform: translateY(-6px); } }