.studio-gallery {
    padding-top: clamp(100px, 12vw, 180px);
    padding-bottom: clamp(100px, 12vw, 180px);
    border-top: 1px solid var(--color-border);
}

.gallery-lead {
    max-width: 56ch;
    margin: -4px 0 0;
    color: var(--color-muted);
    font-size: 15px;
    line-height: 1.6;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 80px;
    gap: 14px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    margin: 0;
    background: var(--color-surface);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gallery-item img,
.gallery-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-item img {
    filter: grayscale(1) contrast(1.08) brightness(0.94);
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 700ms ease;
}

.gallery-placeholder {
    position: relative;
    background-image:
        repeating-linear-gradient(135deg, rgba(12, 12, 12, 0.04) 0, rgba(12, 12, 12, 0.04) 1px, transparent 1px, transparent 8px),
        linear-gradient(180deg, #e9e4d9 0%, #d9d2c1 100%);
}

.gallery-placeholder span {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.gallery-item::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.35));
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

.gallery-item:hover img {
    filter: grayscale(0) contrast(1) brightness(1);
    transform: scale(1.05);
}

.gallery-item:hover::after {
    opacity: 1;
}

.gallery-item figcaption {
    position: absolute;
    z-index: 2;
    bottom: 12px;
    left: 14px;
    display: flex;
    gap: 12px;
    align-items: baseline;
    color: rgba(255, 255, 255, 0.95);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    opacity: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
    transform: translateY(6px);
    transition: opacity 400ms ease, transform 400ms ease;
}

.gallery-item figcaption span:first-child {
    color: var(--color-accent);
    font-weight: 600;
}

.gallery-item:hover figcaption {
    opacity: 1;
    transform: translateY(0);
}

.gallery-item.g-0 { grid-column: span 7; grid-row: span 5; }
.gallery-item.g-1 { grid-column: span 5; grid-row: span 3; }
.gallery-item.g-2 { grid-column: span 5; grid-row: span 2; }
.gallery-item.g-3 { grid-column: span 4; grid-row: span 3; }
.gallery-item.g-4 { grid-column: span 8; grid-row: span 4; }
.gallery-item.g-5 { grid-column: span 7; grid-row: span 3; }
.gallery-item.g-6 { grid-column: span 5; grid-row: span 3; }
.gallery-item.g-7 { grid-column: span 6; grid-row: span 3; }
.gallery-item.g-8 { grid-column: span 6; grid-row: span 3; }

.studio-gallery.is-visible .gallery-item {
    opacity: 1;
    transform: translateY(0);
}

.studio-gallery.is-visible .gallery-item:nth-child(2) { transition-delay: 60ms; }
.studio-gallery.is-visible .gallery-item:nth-child(3) { transition-delay: 120ms; }
.studio-gallery.is-visible .gallery-item:nth-child(4) { transition-delay: 180ms; }
.studio-gallery.is-visible .gallery-item:nth-child(5) { transition-delay: 240ms; }
.studio-gallery.is-visible .gallery-item:nth-child(6) { transition-delay: 300ms; }
.studio-gallery.is-visible .gallery-item:nth-child(7) { transition-delay: 360ms; }
.studio-gallery.is-visible .gallery-item:nth-child(8) { transition-delay: 420ms; }
.studio-gallery.is-visible .gallery-item:nth-child(9) { transition-delay: 480ms; }

@media (max-width: 960px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 90px;
        gap: 10px;
    }

    .gallery-item,
    .gallery-item.g-1,
    .gallery-item.g-2,
    .gallery-item.g-3,
    .gallery-item.g-5,
    .gallery-item.g-6,
    .gallery-item.g-7,
    .gallery-item.g-8 {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-item.g-0,
    .gallery-item.g-4 {
        grid-column: span 4;
        grid-row: span 3;
    }

    .gallery-item img {
        filter: grayscale(0.2);
    }

    .gallery-item figcaption {
        padding: 4px 8px;
        background: rgba(0, 0, 0, 0.4);
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-item {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .gallery-item img {
        transition: none;
    }
}