/* V2.1: glass is limited to interface surfaces; case-study reading surfaces stay plain. */
.archives {
    overflow: hidden
}

.archive-rail {
    width: 100%;
    margin-left: 0;
    margin-right: 0
}

.archive-item img {
    filter: none !important
}

.artist-capsule {
    padding: 11vw 3.2vw;
    border-top: 1px solid var(--line);
    background: linear-gradient(130deg, #080808, #000 55%, #170000)
}

.capsule-grid {
    display: grid;
    grid-template-columns: 1.25fr .75fr .75fr;
    gap: 14px;
    margin-top: 55px
}

.capsule-grid figure {
    margin: 0;
    background: #111
}

.capsule-grid img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 300px;
    object-fit: cover
}

.capsule-grid figcaption {
    padding: 12px;
    color: #bbb;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em
}

.capsule-main {
    grid-row: span 2
}

.capsule-main img {
    min-height: 620px
}

.nav,
.nav-cta,
.text-button,
.contact-links a,
.contact-links button,
.form-submit,
.service-choices label,
.selected-service {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .035) 42%, rgba(255, 255, 255, .09));
    border-color: rgba(255, 255, 255, .32) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), inset 0 -1px 0 rgba(255, 255, 255, .09), 0 12px 30px rgba(0, 0, 0, .3);
    backdrop-filter: blur(18px) saturate(145%)
}

.nav:after,
.nav-cta:after,
.text-button:after,
.selected-service:after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255, 255, 255, .27), transparent 24% 72%, rgba(255, 255, 255, .08));
    opacity: .8
}

.nav {
    border-bottom: 1px solid rgba(255, 255, 255, .3)
}

.nav-cta {
    border-radius: 999px
}

.text-button {
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: 10px 15px
}

.text-button:hover,
.nav-cta:hover,
.form-submit:hover {
    background: linear-gradient(135deg, #f00, #8f0000) !important;
    color: #fff
}

.service {
    transition: background .25s ease
}

.service:hover {
    background: linear-gradient(90deg, rgba(255, 0, 0, .12), transparent 50%)
}

.service a {
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 9px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .03));
    box-shadow: inset 0 1px rgba(255, 255, 255, .48), 0 8px 20px rgba(0, 0, 0, .3);
    color: #fff
}

.selected-service {
    margin: 0 0 32px;
    padding: 18px 20px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 16px;
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap
}

.selected-service strong {
    font-size: 18px
}

.selected-service p {
    margin: 0;
    color: #ddd
}

.selected-service a {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #f00
}

.request-form fieldset[hidden] {
    display: none
}

.service-choices input:checked+span {
    color: #f00
}

.form-submit {
    border-radius: 999px
}

@media(hover:hover) and (pointer:fine) {
    body {
        cursor: auto !important
    }

    a,
    button {
        cursor: pointer !important
    }

    input,
    textarea,
    select {
        cursor: text !important
    }

    .cursor {
        display: block !important;
        left: -100px;
        top: -100px;
        width: 38px;
        height: 38px;
        padding: 7px;
        border-radius: 50%;
        background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .75), rgba(255, 255, 255, .12) 37%, rgba(0, 0, 0, .18) 71%);
        border: 1px solid rgba(255, 255, 255, .72);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, .8), 0 4px 20px rgba(0, 0, 0, .48);
        mix-blend-mode: normal;
        opacity: 0;
        transition: opacity .18s ease, transform .16s ease;
        z-index: 9999
    }

    .cursor img {
        filter: drop-shadow(0 1px 1px #000)
    }

    body.cursor-ready {
        cursor: none !important
    }

    body.cursor-ready a,
    body.cursor-ready button {
        cursor: none !important
    }

    body.cursor-ready input,
    body.cursor-ready textarea,
    body.cursor-ready select {
        cursor: text !important
    }

    body.cursor-ready .cursor {
        opacity: 1
    }

    .project-link:hover~.cursor {
        transform: translate(-50%, -50%) scale(1.15)
    }
}

.about-image {
    position: relative
}

.about-image .about-vision {
    position: absolute;
    width: min(42%, 240px);
    height: auto;
    right: 8%;
    bottom: 8%;
    object-fit: contain;
    opacity: .82;
    filter: drop-shadow(0 14px 30px #000)
}

.capsule-compact .capsule-main img {
    min-height: 460px
}

.about-chapter {
    color: #f00;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6
}

.about-ending {
    margin-top: 35px;
    color: #bbb;
    font-style: italic
}

@media(max-width:760px) {
    .artist-capsule {
        padding: 20vw 5vw
    }

    .capsule-grid {
        grid-template-columns: 1fr
    }

    .capsule-main {
        grid-row: auto
    }

    .capsule-main img,
    .capsule-grid img {
        min-height: 330px
    }

    .selected-service {
        align-items: flex-start
    }

    .selected-service a {
        margin-left: 0
    }

    .about-image .about-vision {
        width: 46%;
        bottom: 5%;
        right: 5%
    }
}

.photo-chapter {
    margin-top: 9vw;
    padding-top: 6vw;
    border-top: 1px solid var(--line)
}

.photo-chapter-copy {
    max-width: 520px;
    margin-bottom: 30px
}

.photo-chapter-copy h3 {
    font-size: clamp(35px, 5vw, 72px);
    line-height: .88;
    letter-spacing: -.06em;
    margin: 10px 0 16px
}

.photo-chapter-copy p:last-child {
    color: #bbb
}

.photo-rail {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 18px;
    scroll-snap-type: x mandatory
}

.photo-rail figure {
    margin: 0;
    flex: 0 0 min(54vw, 780px);
    scroll-snap-align: start
}

.photo-rail .photo-hero {
    flex-basis: min(78vw, 1100px)
}

.photo-rail img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain
}

.photo-rail figcaption {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #aaa;
    padding-top: 8px
}

.work .projects {
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto
}

.work .project-link {
    grid-template-columns: minmax(0, 1.5fr) minmax(340px, .5fr)
}

.work .project-image {
    min-height: clamp(500px, 59vw, 840px)
}

.work .project-image img {
    object-fit: contain
}

.all-projects {
    margin: 6vw 0 0;
    text-align: right;
    font-size: clamp(23px, 4vw, 56px);
    font-weight: 700;
    letter-spacing: -.06em
}

.all-projects a {
    color: #f00
}

.case {
    max-width: 1700px;
    margin: auto
}

.case-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3vw
}

.case-gallery img:first-child {
    grid-column: 1/-1;
    max-height: none
}

.nav {
    position: fixed !important;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    width: fit-content;
    max-width: calc(100vw - 28px);
    border: 1px solid rgba(255, 255, 255, .35) !important;
    border-radius: 999px;
    padding: 10px 14px !important;
    gap: 19px;
    white-space: nowrap
}

.nav nav {
    gap: 14px !important
}

.nav-brand {
    font-size: 12px
}

.case-media>img {
    object-fit: contain !important
}

.case-gallery img {
    display: block;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important
}

@media(max-width:760px) {
    .nav {
        top: 10px;
        padding: 8px 10px !important;
        gap: 8px;
        white-space: normal
    }

    .nav nav {
        gap: 6px !important
    }

    .nav nav a {
        font-size: 8px !important
    }

    .nav-brand {
        font-size: 10px
    }

    .photo-chapter {
        margin-top: 20vw;
        padding-top: 15vw
    }

    .photo-rail {
        margin-right: -5vw
    }

    .photo-rail figure,
    .photo-rail .photo-hero {
        flex-basis: 88vw
    }

    .work .project-link {
        grid-template-columns: 1fr
    }

    .work .project-image {
        min-height: 75vw
    }

    .case-gallery {
        grid-template-columns: 1fr
    }

    .cursor {
        display: none !important;
    }
}

@media(prefers-reduced-motion:reduce) {

    .nav,
    .nav-cta,
    .text-button,
    .selected-service {
        backdrop-filter: none
    }

    .cursor {
        display: none !important
    }
}