/**
 * projects.css — Magazine index + articles
 */

.projects-archive {
    padding-top: var(--space-16);
}

.projects-toc {
    list-style: none;
    border-top: 1px solid var(--clr-rule);
    margin-bottom: var(--space-24);
}

.projects-toc li {
    border-bottom: 1px solid var(--clr-rule);
}

.projects-toc a {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-1);
    padding-block: var(--space-5);
}

@media (min-width: 720px) {
    .projects-toc a {
        grid-template-columns: 7.5rem 11rem 1fr;
        gap: var(--space-6);
        align-items: baseline;
    }
}

.projects-toc__year {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
}

.projects-toc__title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
}

.projects-toc__line {
    color: var(--clr-text-muted);
    font-size: var(--text-sm);
}

.projects-toc a:hover .projects-toc__title {
    color: var(--clr-accent);
}

.projects-archive__list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.project-article {
    padding-block: var(--space-16);
    border-top: 1px solid var(--clr-rule);
    max-width: 42rem;
}

.project-article__meta {
    display: flex;
    gap: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--clr-accent);
    margin-bottom: var(--space-3);
}

.project-article__title {
    font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
    margin-bottom: var(--space-3);
}

.project-article__tagline {
    font-size: var(--text-xl);
    font-style: italic;
    margin-bottom: var(--space-10);
}

.project-article__details {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.project-article__details h3 {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.project-article__details p {
    color: var(--clr-text-muted);
}

.project-article__stack {
    font-family: var(--font-ui);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    margin-bottom: var(--space-8);
}

.project-article__actions {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.projects-github-cta {
    margin-top: var(--space-8);
    padding-top: var(--space-12);
    border-top: 1px solid var(--clr-rule);
    max-width: 36rem;
}

.projects-github-cta p {
    color: var(--clr-text-muted);
    font-size: var(--text-lg);
    margin-bottom: var(--space-6);
    font-style: italic;
}