/* =========================================================
   PORTFOLIO LUXE - EDITORIAL IMMERSIF
========================================================= */

:root {
    --color-ivory: #f7f3ec;
    --color-cream: #faf8f4;
    --color-ink: #161311;
    --color-gold: #b79a63;
    --color-gold-soft: rgba(183, 154, 99, 0.22);
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Montserrat', sans-serif;
    --timing-luxe: cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-container--portfolio {
    justify-content: flex-start;
    align-items: flex-end;
    text-align: left;
}

.hero-container--portfolio .hero-overlay {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.36) 34%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0.22) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.38) 100%);
}

.hero-content--portfolio {
    top: auto;
    left: clamp(22px, 7vw, 92px);
    bottom: clamp(54px, 11vh, 112px);
    transform: none;
    width: min(760px, 86vw);
    padding: 0;
    text-align: left;
    animation: heroPortfolioReveal 1.25s var(--timing-luxe) forwards;
}

@keyframes heroPortfolioReveal {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content--portfolio h1 {
    font-size: clamp(2.1rem, 5.2vw, 4.6rem);
    letter-spacing: 0.24em;
    line-height: 1.03;
    margin-bottom: clamp(18px, 3.4vh, 34px);
}

.hero-content--portfolio .hero-subtitle{

    max-width:28ch;

    font-size:.82rem;

    line-height:1.45;

}

.portfolio-link{

    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-top:32px;

    color:#fff;

    text-decoration:none;

    font-family:var(--font-sans);

    font-size:.72rem;

    font-weight:400;

    letter-spacing:.22em;

    text-transform:uppercase;

    position:relative;

    transition:.35s ease;
}

.portfolio-link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:82%;

    height:1px;

    background:rgba(255,255,255,.55);

    transition:.35s ease;
}

.portfolio-link__arrow{

    width:16px;

    height:16px;

    transition:.35s ease;
}

.portfolio-link:hover{

    color:#fff;
}

.portfolio-link:hover::after{

    width:100%;
}

.portfolio-link:hover .portfolio-link__arrow{

    transform:translateX(5px);
}

.btn-luxe--portfolio span {
    padding-left: 6px;
}

.portfolio-container {
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(70px, 9vw, 130px) clamp(22px, 5vw, 80px);
    background:
        radial-gradient(circle at 20% 15%, rgba(183, 154, 99, 0.07), transparent 42%),
        radial-gradient(circle at 85% 88%, rgba(22, 19, 17, 0.025), transparent 50%),
        linear-gradient(180deg, var(--color-cream) 0%, var(--color-ivory) 100%);
}

.portfolio-intro {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(90px, 14vh, 170px);
    scroll-margin-top: 30px;
}

.portfolio-intro h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.2vw, 3.3rem);
    font-weight: 400;
    letter-spacing: 0.09em;
    color: var(--color-ink);
}

.portfolio-intro p {
    margin: 26px auto 0;
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.3vw, 1.06rem);
    line-height: 2;
    letter-spacing: 0.04em;
    color: rgba(22, 19, 17, 0.8);
}

.portfolio-intro p + p {
    margin-top: 20px;
}

.portfolio-intro::after {
    content: '';
    display: block;
    width: 72px;
    height: 1px;
    margin: 30px auto 0;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.portfolio-gallery {
    margin-bottom: clamp(120px, 16vh, 230px);
}

.story-block {
    margin-bottom: clamp(110px, 17vh, 280px);
}

.story-block:last-child {
    margin-bottom: 0;
}

.story-block--full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.story-block--edge {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.story-block--inset {
    width: min(92vw, 1560px);
    margin-left: auto;
    margin-right: auto;
}

.story-block--pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 72px);
    max-width: 1420px;
    margin-left: auto;
    margin-right: auto;
    align-items: start;
}

.story-block--pair > .gallery-item:nth-child(2) {
    margin-top: clamp(150px, 30vh, 330px);
}

.story-block--pair-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 780px;
}

.story-block--pair-fixed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.story-block--pair-air {
    width: min(97vw, 1820px);
    max-width: none;
    gap: clamp(16px, 2.2vw, 42px);
}

.story-block--pair-air .gallery-item {
    min-height: min(90vh, 980px);
}

.story-block--triptych {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "lead lead"
        "detail-left detail-right";
    align-items: start;
    gap: clamp(28px, 3.6vw, 66px);
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

.story-block--triptych > .gallery-item {
    margin-top: 0;
}

.story-block--triptych > .gallery-item:nth-child(1) {
    grid-area: lead;
}

.story-block--triptych > .gallery-item:nth-child(2) {
    grid-area: detail-left;
}

.story-block--triptych > .gallery-item:nth-child(3) {
    grid-area: detail-right;
}

.story-block--triptych > .gallery-item:nth-child(2),
.story-block--triptych > .gallery-item:nth-child(3) {
    min-height: clamp(620px, 76vh, 920px);
}

.story-block--pause {
    margin-top: clamp(20px, 4vh, 56px);
    margin-bottom: clamp(120px, 18vh, 260px);
}

.story-block--final {
    margin-top: clamp(46px, 8vh, 130px);
    margin-bottom: clamp(24px, 5vh, 80px);
}

.gallery-item {
    position: relative;
    overflow: hidden;
    background: transparent;

    box-shadow: none;

    transition: all .35s ease;
}

.gallery-item--void {
    background: transparent;
}

.gallery-item::after {
    display: none;
}

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

.gallery-item picture,
.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    transform: none;
    transition: none;
}

.gallery-item:hover img {
    transform: none;
    filter: none;
}

.gallery-item--landscape {
    min-height: min(92vh, 980px);
}

.gallery-item--portrait {
    min-height: clamp(520px, 84vh, 940px);
}

.gallery-item--portrait-feature {
    min-height: clamp(650px, 99vh, 1120px);
}

.gallery-item--triptych {
    min-height: clamp(480px, 76vh, 860px);
    background: transparent;
}

.gallery-item--reduced {
    width: 90%;
    min-height: clamp(500px, 68vh, 780px);
    justify-self: center;
}

.reveal-item,
.gallery-item {
    opacity: 0;
    transform: translateY(54px) scale(0.992);
    transition:
        opacity 2.05s var(--timing-luxe) var(--reveal-delay, 0s),
        transform 2.35s var(--timing-luxe) var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

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

.portfolio-cta {
    max-width: 760px;
    margin: clamp(50px, 9vh, 120px) auto 0;
    padding: clamp(46px, 6vw, 78px) clamp(24px, 4.4vw, 62px);
    text-align: center;
    border: 1px solid var(--color-gold-soft);
    background: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,.05);
}

.portfolio-cta h2 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(1.62rem, 2.8vw, 2.26rem);
    font-weight: 400;
    letter-spacing: 0.07em;
    color: var(--color-ink);
}

.portfolio-cta p {
    margin: 18px auto 34px;
    max-width: 56ch;
    font-family: var(--font-sans);
    font-size: 0.96rem;
    line-height: 1.95;
    letter-spacing: 0.03em;
    color: rgba(22, 19, 17, 0.82);
}

.btn-experience {
    display: inline-block;
    padding: 14px 40px;
    border: 1px solid var(--color-ink);
    background: var(--color-ink);
    color: var(--color-cream);
    font-family: var(--font-sans);
    font-size: 0.82rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.45s ease, background-color 0.45s ease, transform 0.45s ease;
}

.btn-experience:hover {
    background: transparent;
    color: var(--color-ink);
    transform: translateY(-2px);
}

@media (max-width: 1024px) {
    .portfolio-intro {
        margin-bottom: clamp(70px, 10vh, 120px);
    }

    .story-block--pair {
        gap: 24px;
    }

    .story-block--pair > .gallery-item:nth-child(2) {
        margin-top: clamp(110px, 22vh, 220px);
    }

    .story-block--pair-air {
        width: min(96vw, 1240px);
        gap: 18px;
    }

    .hero-content--portfolio h1 {
        font-size: clamp(2rem, 6.8vw, 4.2rem);
    }

    .story-block--triptych {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "lead lead"
            "detail-left detail-right";
        gap: 22px;
    }

    .story-block--inset {
        width: min(94vw, 1200px);
    }

    .gallery-item--landscape {
        min-height: min(84vh, 760px);
    }

    .gallery-item--portrait {
        min-height: min(72vh, 720px);
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
        gap: 5px;
    }

    .mobile-menu-toggle__line {
        width: 14px;
    }

    .hero-container--portfolio {
        height: 100svh;
    }

    .hero-container--portfolio .hero-image picture,
    .hero-container--portfolio .hero-image img {
        width: 100%;
        height: 100%;
    }

    .hero-container--portfolio::after {
        display: none;
    }

    .hero-container--portfolio::before {
        height: 22%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 100%);
    }

    .hero-container--portfolio .hero-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 4%, rgba(0, 0, 0, 0.27) 100%);
    }

    .hero-container--portfolio .hero-image img {
        object-position: 60% 34%;
    }

    .hero-content--portfolio {
        left: 20px;
        right: auto;
        width: min(92vw, 370px);

        bottom: 140px;

        transform: none;
        z-index: 12;
        opacity: 1;
        animation: none;
    }

    .hero-content--portfolio h1 {
        font-size: clamp(1.72rem, 8.5vw, 2.02rem);
        letter-spacing: 0.028em;
        line-height: 1.02;
        margin-bottom: 7px;
        max-width: none;
        color: #fff;
        text-shadow: 0 10px 20px rgba(0, 0, 0, 0.38);
    }
.hero-title{
    display:flex;
    flex-direction:column;
}

.hero-title span{
    display:block;
}

.hero-title span + span{
    margin-top:10px;
}
    .hero-content--portfolio .hero-subtitle {
        font-size: clamp(0.68rem, 2.9vw, 0.78rem);
        line-height: 1.36;
        max-width: 24ch;
        opacity: 1;
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 0 7px 16px rgba(0, 0, 0, 0.34);
    }

    .btn-luxe--portfolio {
        width: auto;
        max-width: none;
        min-height: 36px;
        padding: 9px 12px;
        font-size: 0.48rem;
        letter-spacing: 0.15em;
        margin-top: 11px;
        border-width: 1px;
        line-height: 1;
        color: #fff;
        border-color: rgba(255, 255, 255, 0.68);
        background: rgba(255, 255, 255, 0.03);
    }

    .portfolio-container {
        padding: 42px 0 54px;
        background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-ivory) 100%);
    }

    .portfolio-intro {
        margin: 0 auto 56px;
        padding: 0 2.5vw;
        max-width: 95vw;
    }

    .portfolio-intro h1 {
        font-size: clamp(1.9rem, 9vw, 2.24rem);
        letter-spacing: 0.06em;
    }

    .portfolio-intro p {
        max-width: 35ch;
        margin-top: 16px;
        font-size: clamp(1rem, 4.4vw, 1.08rem);
        line-height: 1.84;
    }

    .story-block {
        margin-bottom: 18px;
    }

    .story-block--full,
    .story-block--edge,
    .story-block--inset {
        width: 95vw;
        margin-left: auto;
        margin-right: auto;
    }

    .story-block--pair,
    .story-block--pair-fixed,
    .story-block--pair:not(.story-block--pair-fixed) {
        grid-template-columns: 1fr;
        width: 95vw;
        gap: 18px;
        margin-left: auto;
        margin-right: auto;
    }

    .story-block--pair > .gallery-item:nth-child(2),
    .story-block--pair-fixed > .gallery-item:nth-child(2),
    .story-block--pair:not(.story-block--pair-fixed) > .gallery-item:nth-child(2) {
        margin-top: 0;
    }

    .story-block--pair-air {
        width: 95vw;
        gap: 18px;
    }

    .story-block--triptych {
        grid-template-columns: 1fr;
        grid-template-areas:
            "lead"
            "detail-left"
            "detail-right";
        width: 95vw;
        gap: 18px;
        margin-left: auto;
        margin-right: auto;
    }

    .portfolio-gallery > .story-block--pause {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .portfolio-gallery > .story-block:nth-of-type(7n) {
        margin-top: 64px;
        margin-bottom: 78px;
    }

    .story-block--pause {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .story-block--final {
        margin-top: 64px;
        margin-bottom: 18px;
    }

    .gallery-item picture,
    .gallery-item img {
        object-fit:contain;
    height:auto;
    }

    .gallery-item,
    .reveal-item {
        transform: translateY(14px);
        transition:
            opacity 0.5s var(--timing-luxe) var(--reveal-delay, 0s),
            transform 0.5s var(--timing-luxe) var(--reveal-delay, 0s);
    }

    .gallery-item.is-visible,
    .reveal-item.is-visible {
        transform: translateY(0);
    }

    .gallery-item--landscape {
        min-height: clamp(300px, 56vh, 620px);
    }

    .gallery-item--portrait {
        min-height: clamp(390px, 72vh, 760px);
    }

    .gallery-item--portrait-feature {
        min-height: clamp(440px, 80vh, 820px);
    }

    .gallery-item--triptych {
        min-height: clamp(360px, 68vh, 700px);
    }

    .gallery-item--reduced {
        width: 100%;
        min-height: clamp(360px, 68vh, 700px);
    }

    .portfolio-cta {
        margin-top: 78px;
        padding: 38px 18px;
        max-width: 95vw;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    .portfolio-cta h2 {
        font-size: clamp(1.7rem, 8vw, 2rem);
        letter-spacing: 0.06em;
    }

    .portfolio-cta p {
        margin: 14px auto 26px;
        max-width: 35ch;
        font-size: clamp(1rem, 4.3vw, 1.06rem);
        line-height: 1.85;
    }

    .btn-experience {
        width: 100%;
        max-width: 340px;
        min-height: 48px;
        padding: 14px 22px;
        font-size: 0.82rem;
        letter-spacing: 0.16em;
        line-height: 1.45;
    }
}

@media (max-width:768px){

.story-block,
.story-block--pair,
.story-block--triptych,
.story-block--full,
.story-block--edge,
.story-block--inset,
.story-block--pair-air,
.story-block--pair-fixed{
    display:block;
    width:95vw;
    margin:0 auto 18px;
}

.story-block:nth-child(6n){
    margin-bottom:70px;
}

.gallery-item{
    min-height:auto !important;
    height:auto !important;
}

.gallery-item picture{
    display:block;
}

.gallery-item img{
    width:100%;
    height:auto !important;
    object-fit:contain;
    display:block;
}

.gallery-item--portrait,
.gallery-item--portrait-feature,
.gallery-item--landscape,
.gallery-item--triptych,
.gallery-item--reduced{
    min-height:auto !important;
    width:100%;
}

}

@media (max-width:768px){

.portfolio-link{

    margin-top:24px;

    font-size:.60rem;

    letter-spacing:.18em;
}

.portfolio-link__arrow{

    width:13px;

    height:13px;
}
.hero-title span + span{
    margin-top:8px;
}

}