/* Projects index and project page. From design/final (gallery.jpg). */
.project-head { padding: 56px 48px 28px; }
.project-eyebrow { margin: 0; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.25em; text-transform: uppercase; color: #999; }
.project-head h1 { margin: 12px 0 0; font: 800 44px/1.05 Inter, system-ui, sans-serif; letter-spacing: -0.02em; }
.project-writeup { max-width: 820px; margin-top: 14px; font: 400 16px/1.6 Inter, system-ui, sans-serif; color: #555; }
.project-writeup p { margin: 0 0 1em; }
.project-kit { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.project-kit li { font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid #ddd; padding: 8px 10px; border-radius: 3px; color: #444; }

/* Five across, original aspect ratios, no cropping. */
.project-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0 48px 56px; }
.project-grid figure { position: relative; margin: 0; aspect-ratio: 1; background: #f3f3f3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.project-grid a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.project-grid img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.project-grid figure.land img { width: 100%; }
.project-grid figure.port img { height: 100%; }
.project-grid figcaption { display: none; }

/* Index */
.projects-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 0 48px 56px; }
.project-card { margin: 0; }
.project-card a { display: block; text-decoration: none; }
.project-card .cover { position: relative; aspect-ratio: 4 / 3; background: #f3f3f3; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.project-card .cover img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.project-card h2 { margin: 14px 0 0; font: 700 20px/1.2 Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
.project-card .meta { margin: 6px 0 0; font: 600 11px/1 Inter, system-ui, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; color: #999; }
.projects-empty, .projects-pagination { padding: 0 48px 56px; font: 400 16px/1.6 Inter, system-ui, sans-serif; color: #555; }

@media (max-width: 1100px) {
	.projects-index { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
	.project-head { padding: 32px 18px 20px; }
	.project-head h1 { font-size: 32px; }
	.project-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 0 18px 36px; }
	.projects-index { grid-template-columns: 1fr; padding: 0 18px 36px; }
	.projects-empty, .projects-pagination { padding: 0 18px 36px; }
}