/* ======================================
   WORK V2
====================================== */

.work-journey{ background:transparent; }

.work-v2{
    max-width: 1320px;
    margin:0 auto;
    padding:140px 0;
    padding-top: clamp(48px, 11vh, 100px);
    padding-bottom: clamp(48px, 8vh, 96px);
    /* padding-left: clamp(20px, 5vw, 64px); */
}

.work-header{
    display:grid;
    grid-template-columns:1fr 380px;
    gap:120px;
    margin-bottom:80px;
}

.work-label{
    display:block;
    font-size:14px;
    margin-bottom:20px;
    opacity:.7;
}

.work-title{
    font-size:clamp(2.4rem,4vw,4rem);
    line-height:.95;
    letter-spacing:-0.05em;
    max-width:900px;
}

.work-header-right p{
    font-size:22px;
    max-width:28ch;
    line-height:1.4;
    opacity:.7;
}

/* ======================================
   LIST
====================================== */

.work-list{
    border-top:1px solid rgba(0,0,0,.08);
}

.work-item{
    display:grid;
    grid-template-columns:140px 1.8fr 1fr 220px;

    gap:32px;

    padding:42px 0;

    border-bottom:1px solid rgba(0,0,0,.08);

    text-decoration:none;
    color:inherit;

    transition:.25s ease;
}

.work-item:hover{
    padding-left:8px;
}

.work-year{
    font-size:14px;
    opacity:.5;
    display: flex;
    align-items:center;
}

.work-project{
    font-size:42px;
    font-weight:600;
    line-height:1;
    letter-spacing:-0.04em;
}

.work-meta{
    font-size:18px;
    opacity:.65;
    align-self:center;
}

.work-impact{
    font-size:18px;
    text-align:right;
    align-self:center;
    font-weight:500;
}

/* ======================================
   HOVER
====================================== */

.work-item:hover .work-project{
    transform:translateX(4px);
}

.work-project{
    transition:.25s ease;
}

/* ======================================
   LIGHT
====================================== */

[data-theme="light"] .work-item{
    border-color:rgba(0,0,0,.08);
}

/* ======================================
   DARK
====================================== */

[data-theme="dark"] .work-item{
    border-color:rgba(255,255,255,.08);
}

[data-theme="dark"] .work-header-right p,
[data-theme="dark"] .work-year{
    opacity:.6;
}

/* ======================================
   TABLET
====================================== */

@media (max-width:1024px){

    .work-header{
        grid-template-columns:1fr;
        gap:40px;
    }

    .work-header-right p{
        font-size:22px;
        max-width:700px;
    }

    .work-item{
        grid-template-columns:120px 1fr;
    }

    .work-meta,
    .work-impact{
        display:none;
    }

    .work-project{
        font-size:32px;
    }
}

/* ======================================
   MOBILE
====================================== */

@media (max-width:768px){

    .work-v2{
        padding:80px 20px;
    }

    .work-title{
        font-size:56px;
    }

    .work-item{
        grid-template-columns:1fr;
        gap:12px;
        padding:28px 0;
    }

    .work-project{
        font-size:28px;
    }

    .work-year{
        margin-bottom:6px;
    }

    .work-item:hover{
        padding-left:0;
    }
}