/* ============================================================
   LIGHT UP LETTERS LONDON
   GALLERY PHASE 2 — CURATED PORTFOLIO
   ============================================================ */

.gallery-phase2{
    --gallery-ink:#171614;
    --gallery-paper:#f4f0e8;
    --gallery-gold:#c9aa73;
    --gallery-line:rgba(23,22,20,.16);
    background:var(--gallery-paper);
}

.portfolio-intro{
    display:grid;
    grid-template-columns:150px minmax(0,1.15fr) minmax(290px,.55fr);
    gap:44px;
    padding:105px 4.8vw 90px;
    border-bottom:1px solid var(--gallery-line);
}

.portfolio-intro__index{
    display:flex;
    flex-direction:column;
    gap:9px;
    padding-top:7px;
}

.portfolio-intro__index span{
    font-size:9px;
    font-weight:700;
    letter-spacing:.17em;
    color:#8a8075;
}

.portfolio-intro__index strong{
    font:22px 'DM Serif Display',Georgia,serif;
    font-weight:400;
}

.portfolio-intro__copy h1{
    margin:0;
    font:clamp(62px,6.5vw,104px) 'DM Serif Display',Georgia,serif;
    font-weight:400;
    line-height:.9;
    letter-spacing:-.04em;
}

.portfolio-intro__copy h1 em{
    color:#9d7d49;
    font-weight:400;
}

.portfolio-intro__side{
    align-self:end;
    padding-bottom:8px;
}

.portfolio-intro__side p{
    margin:0 0 28px;
    color:#675f57;
    line-height:1.82;
    font-size:14px;
}

.portfolio-text-link{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding-bottom:7px;
    border-bottom:1px solid var(--gallery-line);
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.portfolio-empty{
    padding:110px 4.8vw;
    min-height:440px;
}

.portfolio-empty h2{
    max-width:850px;
    margin:12px 0 20px;
    font:clamp(48px,6vw,88px) 'DM Serif Display',Georgia,serif;
    font-weight:400;
    line-height:.95;
}

.portfolio-empty > p:last-child{
    max-width:620px;
    color:#675f57;
    line-height:1.8;
}

.portfolio-browser{
    padding:0 4.8vw 120px;
}

.portfolio-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    padding:34px 0 24px;
}

.portfolio-toolbar__count{
    display:flex;
    flex-direction:column;
    gap:5px;
    flex:none;
}

.portfolio-toolbar__count span{
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
    color:#8a8075;
}

.portfolio-toolbar__count strong{
    font:23px 'DM Serif Display',Georgia,serif;
    font-weight:400;
}

.portfolio-filters{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}

.portfolio-filters button{
    border:1px solid var(--gallery-line);
    border-radius:999px;
    background:transparent;
    color:var(--gallery-ink);
    padding:9px 14px;
    cursor:pointer;
    font-size:9px;
    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.portfolio-filters button:hover{
    transform:translateY(-1px);
}

.portfolio-filters button.is-active{
    background:var(--gallery-ink);
    color:#fff;
    border-color:var(--gallery-ink);
}

.portfolio-feature{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.45fr);
    min-height:680px;
    background:#151311;
    color:#fff;
    overflow:hidden;
}

.portfolio-feature__image{
    position:relative;
    min-width:0;
    border:0;
    padding:0;
    background:#111;
    cursor:zoom-in;
    overflow:hidden;
}

.portfolio-feature__image img{
    display:block;
    width:100%;
    height:100%;
    min-height:680px;
    object-fit:cover;
    object-position:center 45%;
    transition:
        transform .8s cubic-bezier(.2,.7,.2,1),
        opacity .25s ease;
}

.portfolio-feature__image:hover img{
    transform:scale(1.018);
}

.portfolio-feature__image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(0deg,rgba(10,9,8,.28),transparent 38%);
    pointer-events:none;
}

.portfolio-feature__image-hint{
    position:absolute;
    left:24px;
    bottom:22px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    padding:10px 14px;
    color:#fff;
    background:rgba(12,11,10,.34);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    font-size:9px;
    font-weight:700;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.portfolio-feature__panel{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:46px 38px 34px;
    border-left:1px solid rgba(255,255,255,.09);
    background:
        radial-gradient(circle at 100% 0%,rgba(201,170,115,.13),transparent 38%),
        #171614;
}

.portfolio-feature__category{
    display:block;
    margin-bottom:18px;
    color:#cfb37c;
    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;
}

.portfolio-feature__panel h2{
    margin:0;
    font:clamp(42px,4.2vw,68px) 'DM Serif Display',Georgia,serif;
    font-weight:400;
    line-height:.96;
    letter-spacing:-.025em;
}

.portfolio-feature__actions{
    display:grid;
    gap:28px;
}

.portfolio-enquire{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:17px 0;
    border-top:1px solid rgba(255,255,255,.16);
    border-bottom:1px solid rgba(255,255,255,.16);
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.portfolio-enquire span{
    color:#cfb37c;
    font-size:17px;
}

.portfolio-feature__nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.portfolio-feature__nav button{
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:50%;
    background:transparent;
    color:#fff;
    cursor:pointer;
    transition:
        background .2s ease,
        color .2s ease;
}

.portfolio-feature__nav button:hover{
    background:#fff1cd;
    color:#171614;
}

.portfolio-feature__nav span{
    color:rgba(255,255,255,.5);
    font-size:9px;
    letter-spacing:.13em;
}

.portfolio-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-flow:dense;
    gap:12px;
    padding-top:12px;
}

.portfolio-card{
    grid-column:span 4;
    min-height:340px;
    overflow:hidden;
    background:#171614;
}

.portfolio-card:nth-child(7n+1),
.portfolio-card:nth-child(7n+5){
    grid-column:span 8;
    min-height:480px;
}

.portfolio-card:nth-child(7n+3){
    grid-column:span 5;
    min-height:420px;
}

.portfolio-card:nth-child(7n+4){
    grid-column:span 7;
    min-height:420px;
}

.portfolio-card[hidden]{
    display:none !important;
}

.portfolio-card__button{
    position:relative;
    width:100%;
    height:100%;
    min-height:inherit;
    padding:0;
    border:0;
    background:#171614;
    color:#fff;
    text-align:left;
    cursor:pointer;
    overflow:hidden;
}

.portfolio-card__button img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .35s ease;
}

.portfolio-card__button:hover img{
    transform:scale(1.035);
}

.portfolio-card__shade{
    position:absolute;
    inset:0;
    background:
        linear-gradient(0deg,rgba(10,9,8,.82) 0%,rgba(10,9,8,.12) 58%,rgba(10,9,8,.02));
    transition:background .3s ease;
}

.portfolio-card__button:hover .portfolio-card__shade{
    background:
        linear-gradient(0deg,rgba(10,9,8,.88) 0%,rgba(10,9,8,.15) 62%,rgba(10,9,8,.02));
}

.portfolio-card__number{
    position:absolute;
    top:18px;
    left:18px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    background:rgba(12,11,10,.16);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    font-size:8px;
    letter-spacing:.1em;
}

.portfolio-card__copy{
    position:absolute;
    left:22px;
    right:22px;
    bottom:22px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:6px 18px;
    align-items:end;
}

.portfolio-card__copy small{
    grid-column:1/-1;
    color:rgba(255,255,255,.58);
    font-size:8px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.portfolio-card__copy strong{
    max-width:620px;
    font:clamp(25px,2.8vw,42px) 'DM Serif Display',Georgia,serif;
    font-weight:400;
    line-height:1;
}

.portfolio-card__copy i{
    display:flex;
    align-items:center;
    gap:8px;
    align-self:end;
    color:rgba(255,255,255,.7);
    font-size:8px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.portfolio-card.is-selected{
    outline:2px solid #c9aa73;
    outline-offset:-2px;
}

.portfolio-footer-cta{
    display:grid;
    grid-template-columns:1fr .65fr;
    gap:70px;
    align-items:end;
    margin-top:90px;
    padding:78px 0 10px;
    border-top:1px solid var(--gallery-line);
}

.portfolio-footer-cta h2{
    margin:10px 0 0;
    font:clamp(50px,5.6vw,86px) 'DM Serif Display',Georgia,serif;
    font-weight:400;
    line-height:.93;
}

.portfolio-footer-cta h2 em{
    color:#9d7d49;
}

.portfolio-footer-cta > div:last-child{
    justify-self:end;
    max-width:520px;
}

.portfolio-footer-cta > div:last-child p{
    margin:0 0 26px;
    color:#675f57;
    line-height:1.82;
}

.portfolio-lightbox[hidden]{
    display:none !important;
}

.portfolio-lightbox{
    position:fixed;
    inset:0;
    z-index:2000;
    display:grid;
    place-items:center;
    padding:22px;
}

.portfolio-lightbox__backdrop{
    position:absolute;
    inset:0;
    background:rgba(8,7,6,.86);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.portfolio-lightbox__dialog{
    position:relative;
    z-index:1;
    width:min(1400px,96vw);
    height:min(900px,92vh);
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    background:#11100f;
    color:#fff;
    box-shadow:0 40px 120px rgba(0,0,0,.5);
    overflow:hidden;
}

.portfolio-lightbox__media{
    position:relative;
    min-width:0;
    display:grid;
    place-items:center;
    background:#0b0a09;
}

.portfolio-lightbox__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    background:#0b0a09;
}

.portfolio-lightbox__close{
    position:absolute;
    z-index:5;
    top:14px;
    right:14px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    background:rgba(12,11,10,.55);
    color:#fff;
    cursor:pointer;
    font-size:25px;
    line-height:1;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.portfolio-lightbox__arrow{
    position:absolute;
    top:50%;
    width:46px;
    height:46px;
    margin-top:-23px;
    border:1px solid rgba(255,255,255,.24);
    border-radius:50%;
    background:rgba(12,11,10,.45);
    color:#fff;
    cursor:pointer;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.portfolio-lightbox__arrow--prev{
    left:18px;
}

.portfolio-lightbox__arrow--next{
    right:18px;
}

.portfolio-lightbox__copy{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:70px 30px 30px;
    background:
        radial-gradient(circle at 100% 0%,rgba(201,170,115,.12),transparent 42%),
        #171614;
}

.portfolio-lightbox__copy > div:first-child > span{
    color:#cfb37c;
    font-size:8px;
    font-weight:700;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.portfolio-lightbox__copy h2{
    margin:14px 0 0;
    font:42px 'DM Serif Display',Georgia,serif;
    font-weight:400;
    line-height:.98;
}

.portfolio-lightbox__bottom{
    display:grid;
    gap:20px;
}

.portfolio-lightbox__bottom > span{
    color:rgba(255,255,255,.45);
    font-size:9px;
    letter-spacing:.13em;
}

.portfolio-lightbox__bottom a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 0;
    border-top:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid rgba(255,255,255,.15);
    font-size:9px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
}

body.portfolio-lightbox-open{
    overflow:hidden;
}

@media (max-width:1050px){

    .portfolio-intro{
        grid-template-columns:110px 1fr;
    }

    .portfolio-intro__side{
        grid-column:2;
        max-width:640px;
    }

    .portfolio-feature{
        grid-template-columns:1fr;
    }

    .portfolio-feature__image img{
        min-height:620px;
    }

    .portfolio-feature__panel{
        min-height:330px;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.09);
    }

    .portfolio-card{
        grid-column:span 6 !important;
        min-height:360px !important;
    }

    .portfolio-footer-cta{
        grid-template-columns:1fr;
        gap:35px;
    }

    .portfolio-footer-cta > div:last-child{
        justify-self:start;
    }

    .portfolio-lightbox__dialog{
        grid-template-columns:1fr;
        height:min(94vh,980px);
        overflow:auto;
    }

    .portfolio-lightbox__media{
        min-height:65vh;
    }

    .portfolio-lightbox__copy{
        min-height:250px;
        padding-top:30px;
    }
}

@media (max-width:700px){

    .portfolio-intro{
        grid-template-columns:1fr;
        gap:25px;
        padding:78px 5vw 62px;
    }

    .portfolio-intro__index{
        display:none;
    }

    .portfolio-intro__side{
        grid-column:auto;
    }

    .portfolio-intro__copy h1{
        font-size:clamp(52px,14vw,68px);
    }

    .portfolio-browser{
        padding-left:5vw;
        padding-right:5vw;
        padding-bottom:82px;
    }

    .portfolio-toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .portfolio-filters{
        justify-content:flex-start;
        width:100%;
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:5px;
        scrollbar-width:none;
    }

    .portfolio-filters::-webkit-scrollbar{
        display:none;
    }

    .portfolio-filters button{
        flex:none;
    }

    .portfolio-feature__image img{
        min-height:480px;
        object-position:center;
    }

    .portfolio-feature__panel{
        min-height:360px;
        padding:32px 24px 24px;
    }

    .portfolio-feature__panel h2{
        font-size:46px;
    }

    .portfolio-grid{
        grid-template-columns:1fr;
    }

    .portfolio-card,
    .portfolio-card:nth-child(n){
        grid-column:auto !important;
        min-height:390px !important;
    }

    .portfolio-card__copy strong{
        font-size:31px;
    }

    .portfolio-footer-cta{
        margin-top:60px;
        padding-top:58px;
    }

    .portfolio-lightbox{
        padding:0;
    }

    .portfolio-lightbox__dialog{
        width:100vw;
        height:100vh;
        max-height:none;
    }

    .portfolio-lightbox__media{
        min-height:66vh;
    }

    .portfolio-lightbox__copy{
        min-height:34vh;
        padding:27px 20px 22px;
    }

    .portfolio-lightbox__copy h2{
        font-size:34px;
    }

    .portfolio-lightbox__arrow{
        top:auto;
        bottom:16px;
        margin-top:0;
    }

    .portfolio-lightbox__close{
        position:fixed;
        top:14px;
        right:14px;
    }
}

@media (prefers-reduced-motion:reduce){

    .portfolio-feature__image img,
    .portfolio-card__button img,
    .portfolio-filters button{
        transition:none !important;
    }
}

/* Gallery image loading stability */
.portfolio-feature__image img.is-loading,
.portfolio-lightbox__media img.is-loading{
    opacity:.72;
}
.portfolio-feature__image img.is-error,
.portfolio-lightbox__media img.is-error{
    opacity:1;
}