body { background: #e0dfda; }

/* ================= PAGE HEAD ================= */

.category-page {
    padding: 18vh 8vw 12vh;
}

.category-head {
    max-width: 700px;
    margin-bottom: 5rem;
}

.back-link {
    display: inline-block;
    margin-bottom: 2rem;
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
    color: #111;
    text-decoration: none;
    opacity: 0.6;
}

.back-link:hover { opacity: 1; }

.category-head h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    letter-spacing: 0.3rem;
}

.category-head p {
    margin-top: 0.8rem;
    font-size: 0.95rem;
    opacity: 0.7;
}

/* ================= GRID ================= */

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 4rem 3rem;
}

.project-card {
    color: #111;
    text-decoration: none;
    display: block;
}

.project-card .card-image {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    filter: grayscale(10%);
    transition: transform 0.6s ease, filter 0.6s ease;
}

.project-card:hover .card-image {
    transform: scale(1.03);
    filter: grayscale(0%);
}

.card-info { margin-top: 1.2rem; }

.card-info h2 { font-size: 1.15rem; }

.card-meta {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    opacity: 0.6;
}

.card-role {
    margin-top: 0.8rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Card with no page yet */
.project-card.no-link { cursor: default; }
.project-card.no-link:hover .card-image { transform: none; }

/* ================= RESPONSIVE ================= */

@media (max-width: 700px) {
    .project-grid { grid-template-columns: 1fr; gap: 3rem; }
    .category-head { margin-bottom: 3rem; }
}