.project-enlarge {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    font: 300 28px/1 var(--sans);
    cursor: zoom-in;
    opacity: .58;
    transition: opacity .2s ease, transform .22s ease, box-shadow .25s ease, background .2s ease;
}
.project-enlarge:hover,
.project-enlarge:focus-visible {
    opacity: 1;
    transform: scale(1.08);
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 18px rgba(164, 102, 255, .48);
}
.free-bay .project-enlarge:hover,
.free-bay .project-enlarge:focus-visible,
.home-surface-page .selected .project-enlarge:hover,
.home-surface-page .selected .project-enlarge:focus-visible {
    box-shadow: 0 0 18px rgba(214, 104, 69, .48);
}
.project-lightbox {
    width: min(94vw, 1500px);
    max-width: none;
    height: min(92vh, 1050px);
    max-height: none;
    padding: 0;
    border: 1px solid rgba(222, 205, 255, .55);
    background: rgba(5, 11, 18, .96);
    color: #f5efe4;
    box-shadow: 0 0 55px rgba(126, 73, 202, .45), 0 30px 100px rgba(0, 0, 0, .7);
    overflow: hidden;
}
.project-lightbox::backdrop {
    background: rgba(3, 6, 10, .84);
    backdrop-filter: blur(8px);
}
.project-lightbox figure {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: clamp(18px, 3vw, 42px);
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
}
.project-lightbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.project-lightbox figcaption {
    text-align: center;
    font-weight: 600;
}
.project-lightbox-close {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(5, 11, 18, .74);
    color: #fff;
    font: 300 28px/1 var(--sans);
    cursor: pointer;
}
.project-lightbox-arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    place-items: center;
    width: clamp(44px, 5vw, 62px);
    height: clamp(44px, 5vw, 62px);
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    background: rgba(5, 11, 18, .72);
    color: #fff;
    font: 300 clamp(22px, 3vw, 34px)/1 var(--sans);
    cursor: pointer;
    transform: translateY(-50%);
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}
.project-lightbox-arrow.previous { left: clamp(10px, 2vw, 28px); }
.project-lightbox-arrow.next { right: clamp(10px, 2vw, 28px); }
.project-lightbox-arrow:hover,
.project-lightbox-arrow:focus-visible {
    border-color: rgba(222, 205, 255, .9);
    box-shadow: 0 0 24px rgba(164, 102, 255, .62);
    transform: translateY(-50%) scale(1.08);
}
.project-lightbox-arrow[hidden] { display: none; }
.project-lightbox-open { overflow: hidden; }
@media (max-width: 760px) {
    .project-lightbox { width: 96vw; height: 88vh; }
    .project-lightbox figure { padding: 54px 8px 14px; }
    .project-lightbox-arrow { top: auto; bottom: 24px; transform: none; }
    .project-lightbox-arrow:hover,
    .project-lightbox-arrow:focus-visible { transform: scale(1.08); }
}