.project-template {
    background: var(--page-bg);
    color: var(--ink);
}

.project-page {
    min-height: 100%;
    background: var(--page-bg);
    color: var(--ink);
    overflow-x: hidden;
}

.project-template .topbar {
    color: var(--ink);
    mix-blend-mode: normal;
}

.project-template .topbar .label {
    color: var(--muted);
}

.project-template .topbar .value,
.project-template .topbar .nav-links,
.project-template .topbar .theme-option {
    color: var(--ink);
}

.project-template .topbar .theme-option:not(.is-active) {
    color: var(--muted);
}

.project-template .topbar .nav-links a.is-active,
.project-template .mobile-menu-link.is-active {
    color: var(--ink);
}

.project-stage {
    position: relative;
    min-height: 520svh;
    padding: clamp(120px, 14vh, 170px) var(--edge) 110px;
    overflow: hidden;
}

.project-stage--count-4 {
    min-height: 360svh;
}

.project-stage--count-5 {
    min-height: 440svh;
}

.project-stage--count-6 {
    min-height: 520svh;
}

.project-stage--count-7 {
    min-height: 610svh;
}

.project-stage--count-8 {
    min-height: 700svh;
}

.project-stage--count-9 {
    min-height: 790svh;
}

.project-stage--count-10 {
    min-height: 880svh;
}

.project-stage--count-11 {
    min-height: 970svh;
}

.project-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.project-image {
    position: absolute;
    margin: 0;
    overflow: hidden;
    background: #080706;
    cursor: pointer;
}

.project-image picture,
.project-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.project-image img {
    object-fit: cover;
    filter: var(--site-image-filter);
    transform: translate3d(0, var(--project-parallax, 0px), 0) scale(1.06);
    transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1);
    user-select: none;
    -webkit-user-drag: none;
}

.project-image:hover img,
.project-image:focus-within img {
    transform: translate3d(0, var(--project-parallax, 0px), 0) scale(1.105);
}

.project-image--1 {
    left: calc(var(--edge) * 0.55);
    top: clamp(122px, 14vh, 166px);
    width: min(475px, 31vw);
    aspect-ratio: 0.69;
}

.project-image--2 {
    right: calc(var(--edge) * 0.35);
    top: 106svh;
    width: min(285px, 17vw);
    aspect-ratio: 0.66;
}

.project-image--3 {
    left: 18vw;
    top: 186svh;
    width: min(680px, 38vw);
    aspect-ratio: 0.74;
}

.project-image--4 {
    right: 13vw;
    top: 278svh;
    width: min(350px, 20vw);
    aspect-ratio: 0.62;
}

.project-image--5 {
    left: calc(var(--edge) * 0.28);
    top: 358svh;
    width: min(600px, 34vw);
    aspect-ratio: 0.7;
}

.project-image--6 {
    right: 24vw;
    top: 448svh;
    width: min(250px, 15vw);
    aspect-ratio: 0.76;
}

.project-image--7 {
    left: 52vw;
    top: 536svh;
    width: min(540px, 30vw);
    aspect-ratio: 0.72;
}

.project-image--8 {
    left: calc(var(--edge) * 0.45);
    top: 628svh;
    width: min(320px, 20vw);
    aspect-ratio: 0.64;
}

.project-image--9 {
    right: 8vw;
    top: 710svh;
    width: min(640px, 34vw);
    aspect-ratio: 0.78;
}

.project-image--10 {
    left: 24vw;
    top: 805svh;
    width: min(380px, 22vw);
    aspect-ratio: 0.68;
}

.project-image--11 {
    right: 28vw;
    top: 900svh;
    width: min(280px, 17vw);
    aspect-ratio: 0.74;
}

@media (min-width: 901px) {
    .project-stage--rhythm-b .project-image--1 {
        left: auto;
        right: 10vw;
        top: clamp(132px, 18vh, 205px);
        width: min(390px, 25vw);
        aspect-ratio: 0.68;
    }

    .project-stage--rhythm-b .project-image--2 {
        left: calc(var(--edge) * 0.4);
        right: auto;
        top: 94svh;
        width: min(560px, 32vw);
        aspect-ratio: 0.74;
    }

    .project-stage--rhythm-b .project-image--3 {
        left: 58vw;
        right: auto;
        top: 176svh;
        width: min(315px, 18vw);
        aspect-ratio: 0.62;
    }

    .project-stage--rhythm-b .project-image--4 {
        left: 17vw;
        right: auto;
        top: 264svh;
        width: min(420px, 23vw);
        aspect-ratio: 0.78;
    }

    .project-stage--rhythm-b .project-image--5 {
        left: auto;
        right: 7vw;
        top: 348svh;
        width: min(610px, 34vw);
        aspect-ratio: 0.7;
    }

    .project-stage--rhythm-b .project-image--6 {
        left: 38vw;
        right: auto;
        top: 438svh;
        width: min(265px, 16vw);
        aspect-ratio: 0.76;
    }

    .project-stage--rhythm-b .project-image--7 {
        left: calc(var(--edge) * 0.55);
        right: auto;
        top: 522svh;
        width: min(500px, 29vw);
        aspect-ratio: 0.72;
    }

    .project-stage--rhythm-b .project-image--8 {
        left: 61vw;
        right: auto;
        top: 606svh;
        width: min(340px, 19vw);
        aspect-ratio: 0.64;
    }

    .project-stage--rhythm-b .project-image--9 {
        left: 22vw;
        right: auto;
        top: 700svh;
        width: min(660px, 36vw);
        aspect-ratio: 0.8;
    }

    .project-stage--rhythm-b .project-image--10 {
        left: auto;
        right: 18vw;
        top: 796svh;
        width: min(360px, 21vw);
        aspect-ratio: 0.68;
    }

    .project-stage--rhythm-b .project-image--11 {
        left: calc(var(--edge) * 0.35);
        right: auto;
        top: 884svh;
        width: min(310px, 18vw);
        aspect-ratio: 0.74;
    }

    .project-stage--rhythm-c .project-image--1 {
        left: 42vw;
        right: auto;
        top: clamp(128px, 22vh, 230px);
        width: min(560px, 33vw);
        aspect-ratio: 0.76;
    }

    .project-stage--rhythm-c .project-image--2 {
        left: calc(var(--edge) * 0.25);
        right: auto;
        top: 118svh;
        width: min(300px, 18vw);
        aspect-ratio: 0.62;
    }

    .project-stage--rhythm-c .project-image--3 {
        left: auto;
        right: 13vw;
        top: 198svh;
        width: min(590px, 33vw);
        aspect-ratio: 0.72;
    }

    .project-stage--rhythm-c .project-image--4 {
        left: 30vw;
        right: auto;
        top: 294svh;
        width: min(250px, 15vw);
        aspect-ratio: 0.7;
    }

    .project-stage--rhythm-c .project-image--5 {
        left: calc(var(--edge) * 0.5);
        right: auto;
        top: 376svh;
        width: min(640px, 36vw);
        aspect-ratio: 0.78;
    }

    .project-stage--rhythm-c .project-image--6 {
        left: auto;
        right: 22vw;
        top: 466svh;
        width: min(340px, 20vw);
        aspect-ratio: 0.66;
    }

    .project-stage--rhythm-c .project-image--7 {
        left: 54vw;
        right: auto;
        top: 552svh;
        width: min(470px, 27vw);
        aspect-ratio: 0.7;
    }

    .project-stage--rhythm-c .project-image--8 {
        left: 15vw;
        right: auto;
        top: 636svh;
        width: min(300px, 18vw);
        aspect-ratio: 0.64;
    }

    .project-stage--rhythm-c .project-image--9 {
        left: auto;
        right: 8vw;
        top: 724svh;
        width: min(600px, 34vw);
        aspect-ratio: 0.74;
    }

    .project-stage--rhythm-c .project-image--10 {
        left: 36vw;
        right: auto;
        top: 820svh;
        width: min(380px, 22vw);
        aspect-ratio: 0.7;
    }

    .project-stage--rhythm-c .project-image--11 {
        left: calc(var(--edge) * 0.42);
        right: auto;
        top: 910svh;
        width: min(270px, 16vw);
        aspect-ratio: 0.74;
    }

    .project-stage--rhythm-d .project-image--1 {
        left: calc(var(--edge) * 0.35);
        right: auto;
        top: clamp(150px, 20vh, 220px);
        width: min(330px, 21vw);
        aspect-ratio: 0.66;
    }

    .project-stage--rhythm-d .project-image--2 {
        left: 52vw;
        right: auto;
        top: 102svh;
        width: min(620px, 35vw);
        aspect-ratio: 0.8;
    }

    .project-stage--rhythm-d .project-image--3 {
        left: 21vw;
        right: auto;
        top: 206svh;
        width: min(500px, 28vw);
        aspect-ratio: 0.7;
    }

    .project-stage--rhythm-d .project-image--4 {
        left: auto;
        right: 10vw;
        top: 292svh;
        width: min(285px, 17vw);
        aspect-ratio: 0.62;
    }

    .project-stage--rhythm-d .project-image--5 {
        left: 46vw;
        right: auto;
        top: 374svh;
        width: min(430px, 25vw);
        aspect-ratio: 0.76;
    }

    .project-stage--rhythm-d .project-image--6 {
        left: calc(var(--edge) * 0.25);
        right: auto;
        top: 462svh;
        width: min(610px, 34vw);
        aspect-ratio: 0.74;
    }

    .project-stage--rhythm-d .project-image--7 {
        left: auto;
        right: 20vw;
        top: 548svh;
        width: min(300px, 18vw);
        aspect-ratio: 0.68;
    }

    .project-stage--rhythm-d .project-image--8 {
        left: 24vw;
        right: auto;
        top: 632svh;
        width: min(520px, 30vw);
        aspect-ratio: 0.72;
    }

    .project-stage--rhythm-d .project-image--9 {
        left: auto;
        right: 6vw;
        top: 724svh;
        width: min(360px, 21vw);
        aspect-ratio: 0.66;
    }

    .project-stage--rhythm-d .project-image--10 {
        left: 50vw;
        right: auto;
        top: 812svh;
        width: min(560px, 32vw);
        aspect-ratio: 0.78;
    }

    .project-stage--rhythm-d .project-image--11 {
        left: calc(var(--edge) * 0.45);
        right: auto;
        top: 902svh;
        width: min(285px, 17vw);
        aspect-ratio: 0.74;
    }

    .project-stage--rhythm-e .project-image--1 {
        left: 18vw;
        right: auto;
        top: clamp(126px, 16vh, 190px);
        width: min(620px, 35vw);
        aspect-ratio: 0.78;
    }

    .project-stage--rhythm-e .project-image--2 {
        left: auto;
        right: 7vw;
        top: 116svh;
        width: min(315px, 18vw);
        aspect-ratio: 0.64;
    }

    .project-stage--rhythm-e .project-image--3 {
        left: calc(var(--edge) * 0.4);
        right: auto;
        top: 202svh;
        width: min(370px, 22vw);
        aspect-ratio: 0.7;
    }

    .project-stage--rhythm-e .project-image--4 {
        left: 48vw;
        right: auto;
        top: 282svh;
        width: min(610px, 34vw);
        aspect-ratio: 0.76;
    }

    .project-stage--rhythm-e .project-image--5 {
        left: 25vw;
        right: auto;
        top: 382svh;
        width: min(260px, 16vw);
        aspect-ratio: 0.62;
    }

    .project-stage--rhythm-e .project-image--6 {
        left: auto;
        right: 18vw;
        top: 456svh;
        width: min(500px, 29vw);
        aspect-ratio: 0.72;
    }

    .project-stage--rhythm-e .project-image--7 {
        left: calc(var(--edge) * 0.3);
        right: auto;
        top: 548svh;
        width: min(570px, 32vw);
        aspect-ratio: 0.8;
    }

    .project-stage--rhythm-e .project-image--8 {
        left: 56vw;
        right: auto;
        top: 642svh;
        width: min(310px, 18vw);
        aspect-ratio: 0.66;
    }

    .project-stage--rhythm-e .project-image--9 {
        left: 16vw;
        right: auto;
        top: 726svh;
        width: min(520px, 30vw);
        aspect-ratio: 0.7;
    }

    .project-stage--rhythm-e .project-image--10 {
        left: auto;
        right: 9vw;
        top: 822svh;
        width: min(380px, 22vw);
        aspect-ratio: 0.68;
    }

    .project-stage--rhythm-e .project-image--11 {
        left: 40vw;
        right: auto;
        top: 900svh;
        width: min(285px, 17vw);
        aspect-ratio: 0.74;
    }
}

.project-go-back,
.project-scroll-hint {
    position: fixed;
    bottom: clamp(22px, 3vw, 34px);
    z-index: 46;
    color: var(--muted);
    font-family: "Work Sans", Arial, Helvetica, sans-serif;
    font-size: clamp(16px, 1.05vw, 21px);
    font-weight: 700;
    line-height: 1;
}

.project-go-back {
    left: var(--edge);
    border: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.project-go-back:hover,
.project-go-back:focus-visible {
    color: var(--ink);
    outline: none;
}

.project-scroll-hint {
    right: var(--edge);
    pointer-events: none;
}

.project-footer {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(28px, 6vw, 120px);
    min-height: 18svh;
    padding: 0 var(--edge) clamp(24px, 3vw, 34px);
    align-items: end;
    background: var(--page-bg);
    color: var(--ink);
    font-family: "Work Sans", Arial, Helvetica, sans-serif;
    font-size: clamp(16px, 1.02vw, 21px);
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-footer.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.project-footer-label,
.project-footer-value {
    display: block;
}

.project-footer-label {
    color: var(--muted);
}

.project-footer-value {
    color: var(--ink);
}

.project-footer a {
    text-decoration: none;
}

.project-footer a:hover,
.project-footer a:focus-visible {
    color: var(--ink);
    outline: none;
}

.project-page.is-footer-visible .project-scroll-hint {
    opacity: 0;
}

.project-page.is-footer-visible:not(.is-lightbox-open) .project-go-back {
    opacity: 0;
    pointer-events: none;
}

.project-lightbox {
    position: fixed;
    inset: 0;
    z-index: 38;
    pointer-events: none;
    opacity: 0;
    background-color: var(--bg-b);
    background-image: var(--page-bg);
    transition: opacity 260ms ease;
}

.project-lightbox.is-open {
    pointer-events: auto;
    opacity: 1;
}

.project-lightbox__stack {
    position: fixed;
    inset: 0;
}

.project-lightbox__clone {
    position: fixed;
    display: block;
    object-fit: cover;
    filter: var(--site-image-filter);
    transform-origin: center;
    transition:
        left 760ms cubic-bezier(0.22, 1, 0.36, 1),
        top 760ms cubic-bezier(0.22, 1, 0.36, 1),
        width 760ms cubic-bezier(0.22, 1, 0.36, 1),
        height 760ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 420ms ease;
}

.project-lightbox.is-collapsed .project-lightbox__clone {
    left: 50% !important;
    top: 50% !important;
    width: min(88vw, 1120px) !important;
    height: min(94svh, 1180px) !important;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--target-rotate, 0deg)) scale(0.78);
}

.project-lightbox.is-collapsed .project-lightbox__clone.is-selected {
    z-index: 8;
    opacity: 1;
    object-fit: contain;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
}

@media (max-width: 900px) {
    .project-stage {
        display: grid;
        gap: clamp(120px, 38vw, 190px);
        min-height: auto;
        padding: 118px var(--edge) 120px;
        overflow: visible;
    }

    .project-image,
    .project-image--1,
    .project-image--2,
    .project-image--3,
    .project-image--4,
    .project-image--5,
    .project-image--6,
    .project-image--7,
    .project-image--8,
    .project-image--9,
    .project-image--10,
    .project-image--11 {
        position: relative;
        inset: auto;
        aspect-ratio: 0.7;
    }

    .project-image--1 {
        width: min(104vw, 520px);
        justify-self: start;
        transform: translateX(calc(var(--edge) * -0.3));
    }

    .project-image--2 {
        width: min(66vw, 315px);
        justify-self: end;
        transform: translateX(calc(var(--edge) * 0.5));
    }

    .project-image--3 {
        width: min(118vw, 590px);
        justify-self: center;
    }

    .project-image--4 {
        width: min(76vw, 360px);
        justify-self: start;
        transform: translateX(calc(var(--edge) * -0.45));
    }

    .project-image--5 {
        width: min(108vw, 520px);
        justify-self: end;
        transform: translateX(calc(var(--edge) * 0.35));
    }

    .project-image--6 {
        width: min(62vw, 285px);
        justify-self: center;
    }

    .project-image--7 {
        width: min(112vw, 540px);
        justify-self: start;
        transform: translateX(calc(var(--edge) * -0.25));
    }

    .project-image--8 {
        width: min(70vw, 330px);
        justify-self: end;
        transform: translateX(calc(var(--edge) * 0.35));
    }

    .project-image--9 {
        width: min(116vw, 560px);
        justify-self: center;
    }

    .project-image--10 {
        width: min(78vw, 370px);
        justify-self: start;
        transform: translateX(calc(var(--edge) * -0.35));
    }

    .project-image--11 {
        width: min(66vw, 310px);
        justify-self: end;
        transform: translateX(calc(var(--edge) * 0.45));
    }

    .project-scroll-hint {
        display: none;
    }

    .project-go-back {
        font-size: 16px;
    }

    .project-footer {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        min-height: 24svh;
        padding-bottom: 70px;
        font-size: clamp(15px, 4.1vw, 18px);
    }

    .project-lightbox.is-collapsed .project-lightbox__clone {
        width: min(96vw, 620px) !important;
        height: min(90svh, 840px) !important;
    }
}

@media (max-width: 520px) {
    .project-footer {
        grid-template-columns: 1fr;
    }
}