﻿
.nav__logo-text {
    color: var(--cream);
}

.nav__links a {
    color: var(--cream);
}

.nav.is-scrolled .nav__logo-text {
    color: var(--dark);
}

.nav.is-scrolled .nav__links a {
    color: var(--dark);
}

.nav.is-scrolled .nav__links li.is-active a {
    color: var(--gold);
    font-weight: 500;
}

.nav__links li.is-active a {
    color: var(--gold);
    font-weight: 500;
}

.nav__links a:hover {
    opacity: 0.6;
}

.nav__cta {
    color: #fff;
    background: var(--dark);
}

    .nav__cta:hover {
        background: #2e1f06;
        transform: scale(0.98);
    }

    .nav__cta svg {
        width: 13px;
        height: 13px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.nav__burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 110;
    opacity: 0;
    animation: fadeDown 0.8s 0.3s var(--ease) forwards;
}

    .nav__burger span {
        display: block;
        width: 22px;
        height: 1.5px;
        background: var(--cream);
        transition: transform 0.3s var(--ease), opacity 0.3s;
        transform-origin: center;
    }

.nav.is-scrolled .nav__burger span {
    background: var(--dark);
}

/* ── Desktop breakpoints (nav) ── */
@media (min-width: 768px) {
    .nav {
        height: 80px;
    }

    .nav__links {
        display: flex;
    }

    .nav__cta {
        display: flex;
    }

    .nav__burger {
        display: none;
    }

    .nav__drawer-close {
        top: 1.75rem;
        right: 3rem;
    }
}

/* ── Page hero ── */
.gallhero {
    background: var(--dark);
    position: relative;
    overflow: hidden;
    padding: 7.5rem 0 3rem;
}

.gallhero__eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(245,237,216,0.5);
    margin-bottom: 0.75rem;
}

.gallhero__title {
    font-family: 'Satoshi', serif;
    font-weight: 500;
    font-size: clamp(2.1rem, 5vw, 3.25rem);
    line-height: 1.1;
    color: var(--cream);
    margin-bottom: 0.9rem;
}

.gallhero__desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(245,237,216,0.5);
    max-width: 480px;
}

/* ── Portraits: scattered polaroid grid ── */
.portraits {
    background: var(--greybg);
    padding: 4rem 0 6rem;
}

.portraits__grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.portraits__col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.portraits__card {
    position: relative;
    display: block;
    background: var(--bodybg);
    padding: 10px 10px 14px;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(26,18,8,0.16);
}

    .portraits__card:hover {
        transform: rotate(0deg) scale(1.03);
        box-shadow: 0 18px 36px rgba(26,18,8,0.22);
        z-index: 2;
    }

    .portraits__card img {
        transform: rotate(var(--rotate, 0deg));
        transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
        display: block;
        width: 100%;
        height: auto;
        border-radius: 2px;
    }

@media (min-width: 768px) {
    .portraits__grid {
        flex-direction: row;
        align-items: flex-start;
        gap: 1.75rem;
    }

    .portraits__col {
        flex: 1;
        gap: 1.75rem;
    }
}

.portraits__card img {
    filter: blur(14px);
    transition: filter 0.5s ease;
}

    .portraits__card img.is-loaded {
        filter: blur(0);
    }