/* Project page only */

.project-main {
    padding-top: 26px;
}

.project-nav {
    padding: 12px 0 20px;
}

.back-link {
    font-size: 13px;
    text-decoration: none;
    color: color-mix(in oklab, var(--fg) 78%, var(--accent) 22%);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    transition: color 180ms ease, border-color 180ms ease;
}

.back-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.back-link:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}

.project-header {
    padding: 24px 0 14px;
    border-bottom: 1px solid var(--hairline);
}

.project-title {
    margin: 0 0 10px 0;
    font-family: var(--font-heading);
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.project-meta {
    margin: 0 0 10px 0;
    color: var(--muted);
    font-size: 14px;
    letter-spacing: 0.01em;
}

.section-title {
    margin: 0 0 12px 0;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--fg) 74%, var(--accent) 26%);
}

.project-description {
    padding: 22px 0 12px;
}

.project-credits {
    padding: 22px 0 8px;
}

.credits {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.credits dt {
    font-weight: 650;
    margin: 0;
}

.credits dd {
    margin: 2px 0 0 0;
    color: var(--muted);
}

@media (min-width: 740px) {
    .credits {
        grid-template-columns: 1fr 1fr;
        column-gap: 28px;
        row-gap: 16px;
    }
}

.credits-empty {
    color: var(--muted);
}

.project-gallery {
    padding: 22px 0 12px;
}

.gallery {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 20px;
}

@media (min-width: 640px) {
    .gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }
}

@media (min-width: 980px) {
    .gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }
}

.gallery-item,
.gallery-figure {
    margin: 0;
}

.gallery-image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(22%) contrast(1.04) saturate(0.96);
    transition: transform 240ms ease, filter 240ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .gallery-image {
        filter: grayscale(var(--desktop-image-grayscale-start)) contrast(1.04) saturate(var(--desktop-image-saturation-start));
    }

    .gallery-item:hover .gallery-image {
        transform: scale(1.04);
        filter: grayscale(var(--desktop-image-grayscale-hover)) contrast(1.02) saturate(var(--desktop-image-saturation-hover));
    }

    .gallery-item:hover .image-frame {
        border-color: color-mix(in oklab, var(--hairline) 45%, var(--accent) 55%);
        box-shadow: 0 12px 26px rgba(12, 18, 28, 0.14);
    }
}

.gallery-empty {
    color: var(--muted);
    grid-column: 1 / -1;
}

.gallery-open {
    all: unset;
    display: block;
    cursor: pointer;
}

.gallery-open:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 6px;
}

.project-hero-image {
    filter: grayscale(20%) contrast(1.05) saturate(0.95);
}

.project-status {
    padding: 18px 0 0;
}

@media (max-width: 760px) {
    .project-main {
        padding-top: 20px;
    }

    .project-title {
        font-size: clamp(30px, 8.5vw, 40px);
    }

    .prose p {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-image,
    .image-frame {
        transition: none;
    }
}