.uoph-geometry {
    --uoph-geometry-bg: #fff;
    --uoph-geometry-ink: #191816;
    --uoph-geometry-scene-height: 100vh;
    --uoph-geometry-runway-height: 180vh;

    width: 100%;
    margin: 0;
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem);
    color: var(--uoph-geometry-ink);
    background: var(--uoph-geometry-bg);
    box-sizing: border-box;
}

.uoph-geometry--animated {
    padding-block-end: 0;
}

.uoph-geometry *,
.uoph-geometry *::before,
.uoph-geometry *::after {
    box-sizing: border-box;
}

.uoph-geometry__inner {
    display: grid;
    justify-items: center;
    width: min(100%, 90rem);
    margin-inline: auto;
}

.uoph-geometry__copy {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0 0 clamp(0.9375rem, 1.875vw, 1.875rem);
    text-align: center;
}

.uoph-geometry__title {
    margin: 0;
    color: var(--uoph-geometry-ink);
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif;
    font-size: clamp(3.453125rem, 8.84vw, 7.96875rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.045em;
}

.uoph-geometry__title-mobile {
    display: none;
}

.uoph-geometry__subtitle {
    margin: clamp(1.25rem, 2.5vw, 2rem) 0 0;
    font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif;
    font-size: clamp(1.5625rem, 2.425vw, 2.34375rem);
    font-weight: 400;
    line-height: 1.25;
}

.uoph-geometry__logo {
    /* The 1:1 source has a centered visible mark about 5.4:1; crop only its transparent canvas. */
    position: relative;
    display: grid;
    place-items: center;
    width: var(--uoph-collection-mark-inline-size);
    height: min(8.51852vw, 3.33333rem);
    margin: 0 0 clamp(2.5rem, 5vw, 5rem);
    overflow: hidden;
}

.uoph-geometry__logo-image {
    position: absolute;
    top: 50%;
    left: 0;
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: translateY(-50%);
}

.uoph-geometry__logo-image--white {
    display: none;
}

.uoph-geometry__media {
    position: relative;
    width: min(96%, 48rem);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: clamp(2rem, 4vw, 4rem);
    background: transparent;
}

.uoph-geometry__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.uoph-geometry__runway {
    position: relative;
    width: 100vw;
    height: var(--uoph-geometry-runway-height);
    margin-block-end: -1px;
    margin-inline: calc(50% - 50vw);
}

.uoph-geometry__scene {
    /* Alpha > 8: the 2560px panot's central aperture is centred at 1280.5 × 1281px. */
    --uoph-geometry-panot-ring-inline: 50.01953%;
    --uoph-geometry-panot-ring-block: 50.03906%;
    --uoph-geometry-panot-center-inline: 50%;
    --uoph-geometry-panot-center-block: calc(
        33.33333%
        - clamp(0.83333rem, 1.66667vw, 1.66667rem)
        + min(15.13125vw, 7.56563rem, calc(15.13125vh - 0.30263rem))
        + min(0.05625vw, 0.028125rem, calc(var(--uoph-geometry-scene-height) * 0.0005625 - 0.001125rem))
    );

    position: sticky;
    inset-block-start: 0;
    top: 0;
    width: 100%;
    height: var(--uoph-geometry-scene-height);
    overflow: hidden;
    background: #000;
    isolation: isolate;
}

@media (prefers-reduced-motion: no-preference) {
    .uoph-geometry.is-geometry-runway-released .uoph-geometry__runway {
        height: var(--uoph-geometry-scene-height);
    }

    .uoph-geometry.is-geometry-runway-released .uoph-geometry__scene {
        position: relative;
        inset-block-start: 0;
        top: 0;
    }
}

.uoph-geometry__reveal {
    position: absolute;
    z-index: auto;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.uoph-geometry__reveal-carousel {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.uoph-geometry.is-geometry-complete .uoph-geometry__reveal-carousel {
    pointer-events: auto;
}

.uoph-geometry__reveal-track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
    cursor: grab;
}

.uoph-geometry__reveal-track::-webkit-scrollbar {
    display: none;
}

.uoph-geometry__reveal-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.uoph-geometry__reveal-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.uoph-geometry__reveal-picture {
    display: block;
    width: 100%;
    height: 100%;
}

.uoph-geometry__reveal-dots {
    position: absolute;
    z-index: 2;
    inset-inline-start: 50%;
    inset-block-end: max(1rem, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    transform: translateX(-50%);
}

.uoph-geometry__reveal-image {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    object-position: center;
}

.uoph-geometry .uoph-geometry__reveal-cta {
    position: absolute;
    z-index: 2;
    inset-inline-start: 50%;
    inset-block-end: max(clamp(2rem, 6vh, 5rem), env(safe-area-inset-bottom));
    font-size: 1.125rem;
    font-weight: 700;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: -50% 0;
    transform: translateY(0.5rem);
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        visibility 0s linear 180ms;
}

.uoph-geometry.is-geometry-revealing .uoph-geometry__reveal-cta {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.uoph-geometry button.uoph-geometry__reveal-cta:focus-visible {
    outline: 2px solid #fff !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px #111 !important;
}

.uoph-geometry__foreground {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: var(--uoph-geometry-bg);
    opacity: calc(1 - var(--uoph-geometry-progress, 0));
    pointer-events: none;
    will-change: opacity;
}

.uoph-geometry.is-geometry-revealing .uoph-geometry__foreground {
    -webkit-mask-image: radial-gradient(
        circle at var(--uoph-geometry-panot-center-inline) var(--uoph-geometry-panot-center-block),
        transparent 0 var(--uoph-geometry-hole, 0vmax),
        #000 var(--uoph-geometry-hole, 0vmax)
    );
    mask-image: radial-gradient(
        circle at var(--uoph-geometry-panot-center-inline) var(--uoph-geometry-panot-center-block),
        transparent 0 var(--uoph-geometry-hole, 0vmax),
        #000 var(--uoph-geometry-hole, 0vmax)
    );
}

.uoph-geometry__media--animated {
    position: absolute;
    top: var(--uoph-geometry-panot-center-block);
    left: var(--uoph-geometry-panot-center-inline);
    flex: 0 0 auto;
    width: min(144%, 72rem);
    max-inline-size: calc(var(--uoph-geometry-scene-height) * 1.44 - 2.88rem);
    transform: translate(
        calc(0% - var(--uoph-geometry-panot-ring-inline)),
        calc(0% - var(--uoph-geometry-panot-ring-block))
    ) scale(var(--uoph-geometry-scale, 1));
    transform-origin: var(--uoph-geometry-panot-ring-inline) var(--uoph-geometry-panot-ring-block);
    will-change: transform;
}

@media (max-width: 47.99rem) {
    .uoph-geometry {
        padding-block: 4rem;
    }

    .uoph-geometry.uoph-geometry--animated {
        padding-block-end: 0.1875rem;
    }

    .uoph-geometry__inner {
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
    }

    .uoph-geometry__logo {
        z-index: 2;
    }

    .uoph-geometry__runway {
        margin-block-start: calc(0px - var(--uoph-geometry-mobile-scene-overlap, 0px));
    }

    .uoph-geometry__media {
        width: min(74.88vw, 23.04rem);
        border-radius: 2.25rem;
    }

    .uoph-geometry__media--animated {
        width: 126.75vw;
        max-inline-size: calc(var(--uoph-geometry-scene-height) - 2rem);
    }

    .uoph-geometry__scene {
        --uoph-geometry-panot-center-block: calc(
            12.5%
            - 1.875rem
            + min(29.96697vw, calc(23.64258vh - 0.47285rem))
            + min(0.04951vw, calc(0.03906vh - 0.0125rem))
        );
    }

    .uoph-geometry__title {
        font-size: clamp(3.1875rem, 15.9375vw, 5.3125rem);
    }

    .uoph-geometry__title-original {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .uoph-geometry__title-mobile,
    .uoph-geometry__title-mobile-line {
        display: block;
    }

    .uoph-geometry__title-mobile-line {
        white-space: nowrap;
    }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: no-preference) {
    .uoph-geometry .uoph-geometry__reveal-cta {
        inset-inline-start: 50%;
        inset-inline-end: auto;
        margin-inline: 0;
        translate: -50% 0;
        transform: translateY(0.5rem);
    }

    .uoph-geometry.is-geometry-revealing .uoph-geometry__reveal-cta {
        transform: translateY(0);
    }

    .uoph-geometry__scene {
        overflow: visible;
        clip-path: inset(calc(0px - var(--uoph-geometry-mobile-extension, 0px)) 0 0 0);
    }

    .uoph-geometry__reveal,
    .uoph-geometry__foreground {
        top: calc(0px - var(--uoph-geometry-mobile-extension, 0px));
    }

    .uoph-geometry__media--animated {
        top: var(--uoph-geometry-mobile-layer-center, var(--uoph-geometry-panot-center-block));
    }

    .uoph-geometry.is-geometry-revealing .uoph-geometry__foreground {
        -webkit-mask-image: radial-gradient(
            circle at var(--uoph-geometry-panot-center-inline) var(--uoph-geometry-mobile-layer-center, var(--uoph-geometry-panot-center-block)),
            transparent 0 var(--uoph-geometry-hole, 0vmax),
            #000 var(--uoph-geometry-hole, 0vmax)
        );
        mask-image: radial-gradient(
            circle at var(--uoph-geometry-panot-center-inline) var(--uoph-geometry-mobile-layer-center, var(--uoph-geometry-panot-center-block)),
            transparent 0 var(--uoph-geometry-hole, 0vmax),
            #000 var(--uoph-geometry-hole, 0vmax)
        );
    }

    .uoph-geometry__copy,
    .uoph-geometry__logo {
        transition: opacity 300ms ease;
    }

    .uoph-geometry.is-geometry-copy-dismissed .uoph-geometry__copy,
    .uoph-geometry.is-geometry-copy-dismissed .uoph-geometry__logo {
        opacity: 0;
        pointer-events: none;
    }

    .uoph-geometry.is-geometry-copy-dismissal-settled .uoph-geometry__copy,
    .uoph-geometry.is-geometry-copy-dismissal-settled .uoph-geometry__logo {
        opacity: 0;
        transition: none;
    }

    .uoph-geometry.is-geometry-complete .uoph-geometry__copy,
    .uoph-geometry.is-geometry-complete .uoph-geometry__logo {
        opacity: 1;
        pointer-events: none;
        transition: none;
    }

    .uoph-geometry.is-geometry-complete .uoph-geometry__title,
    .uoph-geometry.is-geometry-complete .uoph-geometry__subtitle {
        color: #fff;
    }

    .uoph-geometry.is-geometry-complete .uoph-geometry__logo-image:not(.uoph-geometry__logo-image--white) {
        display: none;
    }

    .uoph-geometry.is-geometry-complete .uoph-geometry__logo-image--white {
        display: block;
    }
}

@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
    .uoph-geometry__title {
        font-size: clamp(3.453125rem, 8.2875vw, 7.96875rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .uoph-geometry__reveal-cta {
        transition: none !important;
    }

    .uoph-geometry__runway {
        width: min(100%, 70rem);
        height: auto;
        margin-block-start: 0;
        margin-inline: 0;
    }

    .uoph-geometry__scene {
        position: relative;
        inset-block-start: 0;
        top: 0;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: clamp(1.5rem, 3vw, 3rem);
    }

    .uoph-geometry__reveal-image {
        object-fit: contain;
    }

    .uoph-geometry__foreground {
        display: none;
    }

    .uoph-geometry__cta-icon {
        transition: none;
    }
}

.uoph-geometry__expanded {
    --uoph-overlay-duration: 240ms;
    --uoph-overlay-easing: cubic-bezier(0.2, 0, 0, 1);
    --uoph-geometry-bg: #fff;
    --uoph-geometry-ink: #191816;
    position: fixed;
    inset: 0;
    z-index: 100001;
    inline-size: 100dvw;
    block-size: 100dvh;
    max-inline-size: none;
    max-block-size: none;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    color: var(--uoph-geometry-ink);
    background: var(--uoph-geometry-bg);
    pointer-events: none;
    transition: opacity var(--uoph-overlay-duration) var(--uoph-overlay-easing);
    box-sizing: border-box;
}

html body .uoph-geometry button.uoph-geometry__cta,
html body .uoph-geometry button.uoph-geometry__cta:hover,
html body .uoph-geometry button.uoph-geometry__cta:focus,
html body .uoph-geometry button.uoph-geometry__cta:focus-visible,
html body .uoph-geometry button.uoph-geometry__cta:active {
    letter-spacing: 0.02em;
}

.uoph-geometry__expanded *,
.uoph-geometry__expanded *::before,
.uoph-geometry__expanded *::after {
    box-sizing: border-box;
}

body.uoph-editorial-overlay-open {
    overflow: hidden !important;
}

.uoph-geometry__expanded[hidden] {
    display: none;
}

.uoph-geometry__expanded.is-open {
    opacity: 1;
    pointer-events: auto;
}

.uoph-geometry__expanded-toolbar {
    position: sticky !important;
    inset-block-start: 0 !important;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    min-block-size: calc(56.4px + max(2rem, env(safe-area-inset-top)));
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left));
    background: transparent;
    background-image: none;
    pointer-events: none;
}

.uoph-geometry__expanded button.uoph-geometry__expanded-close {
    grid-column: 3;
    justify-self: end;
    color: var(--uoph-geometry-ink) !important;
    border-color: var(--uoph-geometry-ink) !important;
    background: var(--uoph-geometry-bg) !important;
    background-image: none !important;
    pointer-events: auto;
}

.uoph-geometry__expanded button.uoph-geometry__expanded-close:hover,
.uoph-geometry__expanded button.uoph-geometry__expanded-close:focus,
.uoph-geometry__expanded button.uoph-geometry__expanded-close:focus-visible,
.uoph-geometry__expanded button.uoph-geometry__expanded-close:active {
    color: var(--uoph-geometry-ink) !important;
    border-color: var(--uoph-geometry-ink) !important;
    background: var(--uoph-geometry-bg) !important;
    background-image: none !important;
}

.uoph-geometry__expanded button.uoph-geometry__expanded-close:focus-visible {
    outline: 2px solid var(--uoph-geometry-ink) !important;
    outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
    .uoph-geometry__expanded button.uoph-geometry__expanded-close:hover { transform: rotate(90deg); }
}

.uoph-geometry__expanded-scene {
    inline-size: min(90rem, 100%);
    min-block-size: 100vh;
    margin-inline: auto;
    padding: clamp(2.5rem, 5vw, 5rem) max(1.5rem, 7vw) clamp(8rem, 14vw, 13rem);
    opacity: 0;
    transform: scale(0.98);
    transition: opacity var(--uoph-overlay-duration) var(--uoph-overlay-easing), transform var(--uoph-overlay-duration) var(--uoph-overlay-easing);
}

.uoph-geometry__expanded.is-open .uoph-geometry__expanded-scene { opacity: 1; transform: scale(1); }

.uoph-geometry__expanded-intro,
.uoph-geometry__expanded-articles { text-align: center; }
.uoph-geometry__expanded-intro h2 { max-inline-size: 52rem; margin: 0 auto; font: 800 clamp(3.625rem, 8vw, 9.25rem) / 0.9 "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif; letter-spacing: -0.055em; }
.uoph-geometry__expanded-intro h2:focus:not(:focus-visible) { outline: none; }
.uoph-geometry__expanded-intro h2:focus-visible { outline: 3px solid currentColor; outline-offset: 0.5rem; }
.uoph-geometry__expanded-intro p,
.uoph-geometry__expanded-article p { font-family: "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif; font-weight: 400; }
.uoph-geometry__expanded-intro p { max-inline-size: 45rem; margin: clamp(1.5rem, 3vw, 2.75rem) auto 0; font-size: clamp(1.5rem, 2.4vw, 2.625rem); }
.uoph-geometry__expanded-intro-media { inline-size: min(45rem, 100%); margin: clamp(3rem, 6vw, 6rem) auto 0; }
.uoph-geometry__expanded-intro-image { display: block; inline-size: 100%; max-inline-size: 100%; block-size: auto; margin-inline: auto; object-fit: contain; }
.uoph-geometry__expanded-articles { inline-size: min(70rem, 100%); margin: clamp(3rem, 6vw, 6rem) auto 0; }
.uoph-geometry__expanded-article { display: flex; padding-block: clamp(4rem, 7vw, 7rem); flex-direction: column; align-items: center; justify-content: center; }
.uoph-geometry__expanded-article + .uoph-geometry__expanded-article { border-block-start: 1px solid rgb(25 24 22 / 18%); }
.uoph-geometry__expanded-article h3 { margin: 0; font: 400 clamp(2rem, 4.4vw, 4.75rem) / 1 "UOPH Gilroy", "UOPH Gilroy Fallback", Arial, Helvetica, sans-serif; }
.uoph-geometry__expanded-article p { max-inline-size: 44rem; margin: 1.5rem auto 0; font-size: clamp(1.125rem, 1.8vw, 1.75rem); line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
    .uoph-geometry__expanded,
    .uoph-geometry__expanded-scene { transition: none !important; transform: none !important; }
}