.project-shell {
    gap: 1rem;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.project-grid .card,
.project-shell > .card {
    display: grid;
    gap: 0.8rem;
}

.project-card-link {
    display: grid;
    gap: 0.8rem;
    cursor: pointer;
    color: inherit;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.project-card-link:hover,
.project-card-link:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-color) 60%, var(--card-border));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    background: color-mix(in srgb, var(--card-bg) 86%, var(--accent-color));
}

.project-card-link:hover h2,
.project-card-link:focus-visible h2 {
    color: var(--accent-color);
}

.project-card-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-color) 75%, white);
    outline-offset: 2px;
}

.project-summary {
    max-width: none;
}

.project-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.6rem;
    padding-left: 0;
    list-style: none;
}

.project-badges li {
    border: 1px solid var(--card-border);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    color: var(--muted-text-color);
    font-size: 0.82rem;
    line-height: 1.15;
}

.project-actions {
    margin-top: 0.2rem;
}

.project-actions a {
    color: var(--accent-color);
    text-decoration: none;
}

.project-actions a:hover,
.project-actions a:focus-visible {
    color: var(--secondary-color);
}

.project-repos {
    display: grid;
    gap: 0.35rem;
    padding-left: 0;
    list-style: none;
}

.project-repos a {
    color: var(--accent-color);
    text-decoration: none;
}

.project-repos a:hover,
.project-repos a:focus-visible {
    color: var(--secondary-color);
}

.ordered-list {
    list-style: decimal;
    padding-left: 1.25rem;
}

.project-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.project-gallery-wear {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.project-shot {
    margin: 0;
    padding: 0.4rem;
    border-radius: 12px;
    border: 1px solid var(--card-border);
    background: color-mix(in srgb, var(--background-color) 60%, transparent);
}

.project-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    image-rendering: auto;
}

.project-shell .hero-meta {
    gap: 0.45rem;
}

.project-shell .hero-meta span {
    padding: 0.22rem 0.58rem;
    line-height: 1.15;
}

@media (max-width: 760px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    .project-gallery {
        grid-template-columns: 1fr;
    }
}