/* ==========================================================================
   WORKS® — Archive grid + project detail
   Design language inherited from styles.css (black / Montserrat / grain)
   Load AFTER styles.css
   ========================================================================== */

:root {
    --works-line: rgba(255, 255, 255, 0.12);
    --works-line-soft: rgba(255, 255, 255, 0.06);
}

/* --------------------------------------------------------------------------
   1. INDEX — intro
   -------------------------------------------------------------------------- */

.works-intro {
    max-width: var(--works-max);
    margin: 0 auto;
    padding: 60px 50px 0;
}

.works-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   2. INDEX — minimal filter bar (no pills, no boxes — text only)
   -------------------------------------------------------------------------- */

/* Filter row — equal breathing room above and below, no dividing rule. */
.works-bar {
    max-width: var(--works-max);
    margin: 0 auto;
    padding: 30px 50px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.works-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.works-filter {
    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
    color: var(--color-gray);
    padding: 4px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: color var(--transition-fast);
}

.works-filter:hover {
    color: var(--color-white);
}

/* Active reads as a filled dot after the label */
.works-filter.active {
    color: var(--color-white);
    background: transparent;
}

.works-filter.active::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-white);
    margin-left: 6px;
    vertical-align: middle;
}

.works-count {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: none;
    color: var(--color-gray);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. INDEX — masonry grid (JS-positioned)
   Cards keep native aspect ratio AND read left→right, top→bottom, newest
   first. works.js measures heights and places each card absolutely.
   --var --works-gap is read by the JS so the two stay in sync.
   -------------------------------------------------------------------------- */

/* Masonry — each card drops into the shortest column, and the gap added
   after every card is identical, so the vertical rhythm stays even no
   matter how tall or short an image is. JS sets width + transform. */
.works-grid {
    --works-gap: 26px;
    max-width: var(--works-max);
    margin: 0 auto;
    padding: 30px 50px 140px;
}

.works-grid.is-masonry {
    position: relative;
}

.works-grid.is-masonry .work-card {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.works-grid.is-masonry .work-card.is-placed {
    opacity: 1;
}

.works-grid.no-anim .work-card {
    transition: opacity 0.4s ease;
}

/* Fallback before JS runs */
.works-grid:not(.is-masonry) {
    column-count: 3;
    column-gap: 26px;
}

.works-grid:not(.is-masonry) .work-card {
    break-inside: avoid;
    margin-bottom: 26px;
}

.work-card {
    display: block;
}

.work-card.is-hidden {
    display: none;
}

.work-card-link {
    position: relative;
    display: block;
}

.work-card-link:hover {
    opacity: 1;
}

.work-card-media {
    position: relative;
    overflow: hidden;
    background-color: #0d0d0d;
    margin-bottom: 10px;
}

.work-card-media img,
.work-card-media video {
    width: 100%;
    height: auto;               /* native ratio — no crop */
    display: block;
    transition: transform 0.9s cubic-bezier(0.25, 1, 0.5, 1);
}

.work-card-link:hover .work-card-media img,
.work-card-link:hover .work-card-media video {
    transform: scale(1.04);
}

/* Caption sits right-aligned under the image */
.work-card-head {
    display: block;
    text-align: right;
}

.work-card-title {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-white);
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   4. DETAIL — header + credits
   Same voice as the Archive: small type, no boxes, no rules.
   -------------------------------------------------------------------------- */

/* No site header on a project page — reclaim that offset */
body.is-project .main-content {
    padding-top: 0;
}

.work-detail {
    max-width: var(--works-max);
    margin: 0 auto;
    padding: 78px 50px 60px;
}

/* [X] CLOSE — replaces the site nav while a project is open.
   No box, no padding: it has to start on the same line as the title,
   the credits and the images below it. */
/* [X] CLOSE — fixed, but pinned to the same column as the content below
   so its left edge lands on the exact line the title and credits start on. */
.work-topbar {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    z-index: 1200;
    max-width: var(--works-max);
    margin: 0 auto;
    padding: 0 50px;
    pointer-events: none;   /* only the link itself is clickable */
}

.work-close {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-white);
    transition: opacity var(--transition-fast);
}

.work-close:hover {
    opacity: 0.55;
}

.work-close .x {
    font-weight: 400;
    letter-spacing: 0;
}

.work-head {
    padding-bottom: 26px;
}

.work-title {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-white);
    margin-bottom: 7px;
}

.work-stamp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-gray);
}

.work-stamp .stamp-mark {
    color: var(--color-gray);
}

/* --------------------------------------------------------------------------
   5. DETAIL — credits + statement
   -------------------------------------------------------------------------- */

.work-brief {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 480px);
    gap: 60px;
    padding: 0 0 46px;
    align-items: start;
}

.work-brief.is-solo {
    grid-template-columns: minmax(0, 300px);
}

.work-credits {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

/* key left, value right — no rules, no bullets */
.credit {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    align-items: baseline;
}

.credit-mark {
    display: none;
}

.credit-key {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-gray);
    line-height: 1.6;
}

.credit-val {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-white);
    line-height: 1.6;
}

.work-statement p {
    font-family: var(--font-primary);
    font-size: 10px;
    line-height: 1.75;
    letter-spacing: 0;
    color: var(--color-gray);
    margin-bottom: 12px;
}

.work-statement p:first-child {
    color: var(--color-white);
}

.work-statement p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. DETAIL — photo grid
   Same masonry as the Archive: JS positions each item, native ratios kept,
   reading order left→right / top→bottom.
   -------------------------------------------------------------------------- */

.work-flow {
    --works-gap: 30px;
    max-width: var(--works-max);
    margin: 0 auto;
    padding: 0;
}

.work-flow.is-masonry {
    position: relative;
}

.work-flow.is-masonry .flow-item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.work-flow.is-masonry .flow-item.is-placed {
    opacity: 1;
}

.work-flow.no-anim .flow-item {
    transition: opacity 0.4s ease;
}

/* Fallback before JS runs */
.work-flow:not(.is-masonry) {
    column-count: 3;
    column-gap: 30px;
}

.work-flow:not(.is-masonry) .flow-item {
    break-inside: avoid;
    margin-bottom: 30px;
}

.flow-item {
    margin: 0;
    display: block;
    cursor: url('custom-cursor-pointer.svg'), pointer;
}

.flow-media {
    position: relative;
    overflow: hidden;
    background-color: #0d0d0d;
}

.flow-item img,
.flow-item video {
    width: 100%;
    height: auto;               /* natural ratio — no box, no letterbox, no cap */
    display: block;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    user-select: none;
}

.flow-item:hover .flow-media img,
.flow-item:hover .flow-media video {
    transform: scale(1.015);
}

.flow-caption {
    margin-top: 14px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gray);
}

/* --------------------------------------------------------------------------
   7. DETAIL — next project
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. DETAIL — next project
   A single centred marker, then the signature block sitting bottom-left.
   -------------------------------------------------------------------------- */

.work-next {
    margin-top: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 44px;
}

.work-next-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-white);
    transition: opacity var(--transition-fast);
}

.work-next-link:hover {
    opacity: 0.55;
}

.work-next-link .arrow {
    font-weight: 400;
    letter-spacing: 0;
}

/* Signature — flush left under the centred link */
.work-sign {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-white);
    line-height: 1.45;
}

.work-sign .sign-year {
    color: var(--color-gray);
    letter-spacing: 1px;
}

/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .works-grid {
        --works-gap: 20px;
    }

    .works-grid:not(.is-masonry) {
        column-count: 2;
        column-gap: 20px;
    }

    .work-brief,
    .work-brief.is-solo {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 0 0 36px;
    }

    .work-flow {
        --works-gap: 24px;
    }

    .work-flow:not(.is-masonry) {
        column-count: 2;
        column-gap: 24px;
    }
}

@media (max-width: 768px) {
    .works-intro {
        padding: 80px 20px 0;
    }

    .works-bar {
        padding: 20px 20px 0;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .works-bar::-webkit-scrollbar {
        display: none;
    }

    .works-filters {
        gap: 16px;
        flex-wrap: nowrap;
    }

    .works-filter {
        font-size: 9px;
        white-space: nowrap;
    }

    .works-count {
        display: none;
    }

    .works-grid {
        --works-gap: 14px;
        padding: 20px 20px 90px;
    }

    .works-grid:not(.is-masonry) {
        column-count: 2;
        column-gap: 14px;
    }

    .work-card-media {
        margin-bottom: 8px;
    }

    .work-card-title {
        font-size: 9.5px;
        letter-spacing: 0;
    }

    .work-detail {
        padding: 62px 20px 44px;
    }

    .work-topbar {
        top: 16px;
        padding: 0 20px;
    }

    .work-title {
        font-size: 14px;
        letter-spacing: 0;
        line-height: 1.35;
    }

    .work-stamp {
        gap: 12px;
        font-size: 9px;
        letter-spacing: 0;
    }

    /* Credits sit flush left, on the same line as the images above them */
    .credit {
        grid-template-columns: 78px 1fr;
        grid-template-areas: none;
        gap: 10px;
    }

    .work-statement p {
        font-size: 10px;
    }

    /* One image per row on a phone — scroll through them */
    .work-flow {
        --works-gap: 26px;
    }

    .work-flow:not(.is-masonry) {
        column-count: 1;
    }

    .work-next {
        margin-top: 62px;
        align-items: center;
        gap: 34px;
    }
}