body:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home),
:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .overflow-fix,
:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame,
:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .page-main {
    background-color: var(--page-background);
}

:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    isolation: isolate;
}

:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .page-main {
    position: relative;
    isolation: isolate;
}

/* Artwork fills the original page width and ends before the footer. */
.project-view-artwork {
    mix-blend-mode: multiply;
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 75px;
}

.project-view-artwork-tile {
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 1440 / 2921;
    background: url("../images/vector.png") center top / 100% 100% no-repeat;
}

:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame::before,
:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame::after {
    content: "";
    position: absolute;
    z-index: 2;
    opacity: 0.1;
    pointer-events: none;
}

/* Borders stay aligned to screen pixels more reliably than thin gradients at zoom. */
:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame::before {
    top: 136px;
    left: 0;
    right: 0;
    border-top: 1px solid #475567;
}

:is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame::after {
    inset: 0 75px;
    border-left: 1px solid #475567;
    border-right: 1px solid #475567;
}

/* Let the alternating blue project rows cover the side guides. */
.page-projects .site-frame::after {
    z-index: -1;
}

.page-projects .page-main {
    background-color: transparent;
}

@media (max-width: 768px) {
    :is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame::before {
        top: 24px;
    }

    :is(.page-view_project, .page-projects, .page-connect, .page-view_property, .page-home) .site-frame::after {
        left: 16px;
        right: 16px;
    }
}