/* Hero */

.work-hero{

    min-height:70vh;

    display:flex;
    align-items:flex-end;

    padding:12rem 0 6rem;

}

.work-hero .container{

    max-width:900px;

}

.work-hero .section-tag{

    display:inline-block;

    margin-bottom:2rem;

}

.work-hero h1{

    margin-bottom:2rem;

    max-width:900px;

}

.work-hero .lead{

    max-width:650px;

    font-size:1.125rem;

}


/* Collections */

.collections{

    padding-top:0;

}

.collection{

    position:relative;

    display:grid;

    grid-template-columns:90px 1fr auto;

    gap:3rem;

    align-items:center;

    padding: 2rem 1rem;

    text-decoration:none;

    border-top:1px solid var(--color-border);

    transition:var(--transition);

    overflow:hidden;

}

.collection:last-child{

    border-bottom:1px solid var(--color-border);

}

.collection::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    90deg,
    rgba(75,123,255,.06),
    transparent 65%
    );

    opacity:0;

    transition:var(--transition);

}

.collection:hover::before{

    opacity:1;

}

.collection-number{

    font-size:.8rem;

    letter-spacing:.15em;

    color:var(--color-muted);

}

.collection-content span{

    display:block;

    margin-bottom:.75rem;

    font-size:.8rem;

    letter-spacing:.14em;

    text-transform:uppercase;

    color:var(--color-muted);

}

.collection-content h2{

    margin-bottom:1rem;

    transition:var(--transition);

}

.collection-content p{

    max-width:640px;

    color:var(--color-muted);

    transition:var(--transition);

}

.collection-arrow{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--color-border);

    border-radius:50%;

    font-size:1.5rem;

    transition:var(--transition);

}

.collection:hover{

    padding-left:1rem;

}

.collection:hover .collection-content h2{

    color:var(--color-accent);

}

.collection:hover .collection-arrow{

    transform:
    translateX(10px)
    rotate(-45deg);

    background:var(--color-accent);

    color:#fff;

    border-color:transparent;

}

.collection:hover .collection-content p{

    color:var(--color-text);

}


/* Preview */

.collection::after{

    content:"";

    position:absolute;

    right:130px;

    top:50%;

    width:220px;

    height:140px;

    border-radius:18px;

    background:var(--color-surface);

    border:1px solid var(--color-border);

    opacity:0;

    transform:
    translateY(-50%)
    scale(.9);

    transition:var(--transition);

}

.collection:hover::after{

    opacity:1;

    transform:
    translateY(-50%)
    scale(1);

}


/* Archive */

.archive-note{

    text-align:center;

}

.archive-note .container{

    max-width:900px;

}

.archive-note .section-number{

    display:block;

    margin-bottom:1.5rem;

    color:var(--color-muted);

}

.archive-note h2{

    max-width:760px;

    margin:auto;

}


/* 1200 */

@media(max-width:1200px){

    .collection{

        gap:2rem;

    }

    .collection::after{

        display:none;

    }

}


/* 900 */

@media(max-width:900px){

    .collection{

        grid-template-columns:70px 1fr;

    }

    .collection-arrow{

        display:none;

    }

}


/* 768 */

@media(max-width:768px){

    .work-hero{

        min-height:auto;

        padding:8rem 0 4rem;

    }

    .work-hero h1{

        font-size:clamp(3rem,11vw,4.8rem);

    }

    .work-hero .lead{

        font-size:1rem;

    }

    .collection{

        grid-template-columns:1fr;

        gap:1.5rem;

        padding:2.5rem 0;

    }

    .collection:hover{

        padding-left:0;

    }

    .collection-number{

        order:-1;

    }

    .collection-content h2{

        margin-bottom:.75rem;

    }

    .archive-note{

        text-align:left;

    }

}


/* 480 */

@media(max-width:480px){

    .collection-content h2{

        font-size:2rem;

    }

    .collection-content p{

        font-size:.95rem;

    }

}