/* =========================================================
   DOAH
   ARTIFACTS & MORE
   COMPLETE CSS
   ========================================================= */

:root {

    --deep: #070605;

    --cream: #e8d8be;

    --light: #f7f2e9;

    --gold: #c9a45c;

    --gold-light: #e4c77e;

    --muted: #9b8d7d;

    --display:
        "Cormorant Garamond",
        Georgia,
        serif;

    --editorial:
        "Bodoni Moda",
        Georgia,
        serif;

    --body:
        "DM Sans",
        Arial,
        sans-serif;

    --ease:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

}


/* =========================================================
   RESET
   ========================================================= */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    width: 100%;

    min-height: 100%;

    background:
        var(--deep);

}


body {

    width: 100%;

    min-width: 320px;

    min-height: 100vh;

    margin: 0;

    overflow-x: hidden;

    background:
        var(--deep);

    color:
        var(--cream);

    font-family:
        var(--body);

    -webkit-font-smoothing:
        antialiased;

}


a {

    color:
        inherit;

    text-decoration:
        none;

}


button {

    font:
        inherit;

}


/* =========================================================
   PAGE
   ========================================================= */

.artifacts-page {

    position:
        relative;

    width:
        100vw;

    min-height:
        100vh;

    overflow:
        hidden;

    isolation:
        isolate;

    background:
        var(--deep);

}


/* =========================================================
   BACKGROUND VIDEO
   ========================================================= */

.artifacts-background-video {

    position:
        fixed;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    z-index:
        0;

    pointer-events:
        none;

    opacity:
        0;

    transform:
        scale(1.04);

    animation:
        videoIn
        2.5s
        var(--ease)
        0.1s
        forwards;

}


@keyframes videoIn {

    from {

        opacity:
            0;

        transform:
            scale(1.07);

    }

    to {

        opacity:
            1;

        transform:
            scale(1.04);

    }

}


/* =========================================================
   VIDEO OVERLAY
   ========================================================= */

.video-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        1;

    pointer-events:
        none;

    background:

        linear-gradient(
            90deg,
            rgba(7,6,5,0.70),
            rgba(7,6,5,0.18),
            rgba(7,6,5,0.40)
        ),

        linear-gradient(
            180deg,
            rgba(7,6,5,0.44),
            transparent 45%,
            rgba(7,6,5,0.70)
        );

}


/* =========================================================
   ATMOSPHERE
   ========================================================= */

.space-atmosphere {

    position:
        fixed;

    inset:
        0;

    z-index:
        2;

    pointer-events:
        none;

    background:

        radial-gradient(
            circle at 70% 44%,
            rgba(
                201,
                164,
                92,
                0.10
            ),
            transparent 32%
        ),

        radial-gradient(
            circle at 20% 70%,
            rgba(
                116,
                42,
                52,
                0.06
            ),
            transparent 30%
        );

}


/* =========================================================
   GRAIN
   ========================================================= */

.page-grain {

    position:
        fixed;

    inset:
        0;

    z-index:
        100;

    pointer-events:
        none;

    opacity:
        0.025;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.5'/%3E%3C/svg%3E");

    mix-blend-mode:
        soft-light;

}


/* =========================================================
   HEADER
   ========================================================= */

.artifacts-header {

    position:
        absolute;

    top:
        45px;

    left:
        58px;

    right:
        58px;

    z-index:
        40;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    opacity:
        0;

    animation:
        headerIn
        1.2s
        var(--ease)
        0.15s
        forwards;

}


@keyframes headerIn {

    from {

        opacity: 0;

        transform:
            translateY(-12px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* =========================================================
   LOGO
   ========================================================= */

.artifacts-logo img {

    display:
        block;

    width:
        112px;

    height:
        auto;

    animation:
        logoFloat
        8s
        ease-in-out
        1.5s
        infinite;

}


@keyframes logoFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-5px);

    }

}


/* =========================================================
   RETURN HOME
   ========================================================= */

.return-home {

    font-size:
        8px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            232,
            216,
            190,
            0.58
        );

    transition:
        color
        0.4s
        ease;

}


.return-home:hover {

    color:
        var(--gold-light);

}


/* =========================================================
   HERO
   ========================================================= */

.artifacts-intro {

    position:
        absolute;

    left:
        58px;

    top:
        50%;

    z-index:
        25;

    width:
        470px;

    transform:
        translateY(-45%);

    opacity:
        0;

    animation:
        heroIn
        1.4s
        var(--ease)
        0.4s
        forwards;

}


@keyframes heroIn {

    from {

        opacity:
            0;

        transform:
            translateY(
                calc(-45% + 20px)
            );

    }

    to {

        opacity:
            1;

        transform:
            translateY(-45%);

    }

}


/* =========================================================
   EYEBROW
   ========================================================= */

.intro-eyebrow {

    margin-bottom:
        17px;

    font-size:
        9px;

    letter-spacing:
        0.21em;

    color:
        var(--gold);

    opacity:
        0;

    animation:
        staggerIn
        0.9s
        var(--ease)
        0.7s
        forwards;

}


/* =========================================================
   HERO TITLE
   ========================================================= */

.artifacts-intro h1 {

    font-family:
        var(--editorial);

    font-size:
        clamp(
            56px,
            5vw,
            82px
        );

    font-weight:
        400;

    line-height:
        0.88;

    letter-spacing:
        -0.045em;

    color:
        var(--cream);

    animation:
        heroFloat
        9s
        ease-in-out
        2s
        infinite;

}


@keyframes heroFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-3px);

    }

}


/* =========================================================
   HERO SUBTITLE
   ========================================================= */

.intro-italic {

    margin-top:
        17px;

    font-family:
        var(--display);

    font-size:
        23px;

    font-style:
        italic;

    color:
        rgba(
            232,
            216,
            190,
            0.78
        );

    animation:
        subtitleFloat
        10s
        ease-in-out
        2.5s
        infinite;

}


@keyframes subtitleFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-2px);

    }

}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.intro-description {

    margin-top:
        14px;

    font-size:
        9px;

    line-height:
        1.7;

    letter-spacing:
        0.10em;

    color:
        rgba(
            232,
            216,
            190,
            0.50
        );

}


/* =========================================================
   ARTIFACT WORLD
   ========================================================= */

.artifact-world {

    position:
        absolute;

    top:
        -5vh;

    right:
        0;

    width:
        69vw;

    height:
        105vh;

    z-index:
        10;

}


/* =========================================================
   ECLIPSE
   ========================================================= */

.eclipse {

    position:
        absolute;

    top:
        47%;

    left:
        53%;

    width:
        min(
            55vw,
            820px
        );

    height:
        min(
            55vw,
            820px
        );

    transform:
        translate(
            -50%,
            -50%
        );

    border-radius:
        50%;

    animation:
        eclipseFloat
        14s
        ease-in-out
        infinite;

}


@keyframes eclipseFloat {

    0%,
    100% {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);

    }

    50% {

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.025);

    }

}


/* =========================================================
   ECLIPSE CORE
   ========================================================= */

.eclipse-core {

    position:
        absolute;

    inset:
        8%;

    overflow:
        hidden;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle at 48% 48%,
            #000 0%,
            #020202 50%,
            #0b0806 100%
        );

    box-shadow:

        inset
        0 0 120px
        rgba(
            0,
            0,
            0,
            1
        ),

        inset
        0 0 50px
        rgba(
            201,
            164,
            92,
            0.06
        );

}


.eclipse-ring {

    position:
        absolute;

    border-radius:
        50%;

}


.eclipse-ring-outer {

    inset:
        0;

    border:
        1px solid
        rgba(
            201,
            164,
            92,
            0.32
        );

}


.eclipse-ring-inner {

    inset:
        8%;

    border:
        1px solid
        rgba(
            201,
            164,
            92,
            0.08
        );

}


/* =========================================================
   VOID DEPTH
   ========================================================= */

.void-depth {

    position:
        absolute;

    inset:
        0;

    border-radius:
        50%;

    background:

        radial-gradient(
            ellipse at center,
            transparent 0%,
            rgba(
                201,
                164,
                92,
                0.035
            ) 45%,
            transparent 70%
        );

    animation:
        voidPulse
        12s
        ease-in-out
        infinite;

}


@keyframes voidPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity:
            0.6;

    }

    50% {

        transform:
            scale(1.08);

        opacity:
            1;

    }

}


/* =========================================================
   CAROUSEL
   ========================================================= */

.artifact-carousel {

    position:
        absolute;

    inset:
        0;

    perspective:
        1800px;

}


.carousel-orbit {

    position:
        absolute;

    inset:
        0;

    transform-style:
        preserve-3d;

}


/* =========================================================
   CARDS
   ========================================================= */

.artifact-card {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        190px;

    height:
        300px;

    margin-left:
        -95px;

    margin-top:
        -150px;

    overflow:
        hidden;

    background:
        #090807;

    border:
        1px solid
        rgba(
            247,
            242,
            233,
            0.12
        );

    box-shadow:
        0 40px 100px
        rgba(
            0,
            0,
            0,
            0.75
        );

    transform-style:
        preserve-3d;

    will-change:
        transform;

    cursor:
        pointer;

    transition:

        transform
        0.75s
        var(--ease),

        opacity
        0.75s
        var(--ease),

        border-color
        0.5s
        ease,

        box-shadow
        0.5s
        ease;

}


.artifact-card:hover {

    border-color:
        rgba(
            201,
            164,
            92,
            0.45
        );

    box-shadow:
        0 50px 120px
        rgba(
            0,
            0,
            0,
            0.85
        );

}


.artifact-card-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

    transition:
        transform
        1.2s
        var(--ease);

}


.artifact-card:hover
.artifact-card-image {

    transform:
        scale(1.045);

}


/* =========================================================
   FALLBACK
   ========================================================= */

.artifact-card-fallback {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

    text-align:
        center;

    background:
        #100d0b;

}


.artifact-card-fallback span {

    font-family:
        var(--editorial);

    font-size:
        25px;

    line-height:
        0.95;

}


/* =========================================================
   CARD OVERLAY
   ========================================================= */

.artifact-card-overlay {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        linear-gradient(
            180deg,
            rgba(0,0,0,0.20),
            transparent 40%,
            rgba(0,0,0,0.48)
        );

}


.card-number {

    position:
        absolute;

    top:
        14px;

    left:
        14px;

    font-size:
        7px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            247,
            242,
            233,
            0.52
        );

}


.card-type {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    font-size:
        7px;

    letter-spacing:
        0.16em;

    color:
        rgba(
            201,
            164,
            92,
            0.72
        );

}


.card-lock {

    position:
        absolute;

    right:
        13px;

    bottom:
        13px;

    width:
        24px;

    height:
        24px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            232,
            216,
            190,
            0.20
        );

    border-radius:
        50%;

    color:
        var(--gold-light);

    font-size:
        7px;

}


/* =========================================================
   DETAIL
   ========================================================= */

.artifact-detail {

    position:
        absolute;

    right:
        7vw;

    bottom:
        66px;

    width:
        300px;

    z-index:
        30;

    opacity:
        0;

    animation:
        detailIn
        1.2s
        var(--ease)
        0.9s
        forwards;

}


@keyframes detailIn {

    from {

        opacity:
            0;

        transform:
            translateY(18px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.detail-number {

    font-size:
        7px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            201,
            164,
            92,
            0.72
        );

}


.detail-type {

    margin-top:
        7px;

    font-size:
        7px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            232,
            216,
            190,
            0.40
        );

}


.artifact-detail h2 {

    margin-top:
        6px;

    font-family:
        var(--editorial);

    font-size:
        38px;

    font-weight:
        400;

    line-height:
        0.93;

    letter-spacing:
        -0.035em;

    animation:
        detailFloat
        10s
        ease-in-out
        2.5s
        infinite;

}


@keyframes detailFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-2px);

    }

}


.artifact-detail p {

    margin-top:
        10px;

    font-family:
        var(--display);

    font-size:
        17px;

    line-height:
        1.15;

    color:
        rgba(
            232,
            216,
            190,
            0.62
        );

}


.detail-meta {

    display:
        flex;

    gap:
        10px;

    margin-top:
        10px;

    font-size:
        7px;

    letter-spacing:
        0.16em;

    color:
        rgba(
            232,
            216,
            190,
            0.42
        );

}


.detail-actions {

    display:
        flex;

    gap:
        8px;

    margin-top:
        15px;

}


.detail-button {

    height:
        31px;

    padding:
        0 16px;

    border:
        1px solid
        rgba(
            201,
            164,
            92,
            0.35
        );

    background:
        transparent;

    color:
        var(--cream);

    font-size:
        7px;

    letter-spacing:
        0.16em;

    cursor:
        pointer;

    transition:
        all
        0.4s
        ease;

}


.detail-button-primary {

    background:
        var(--gold);

    border-color:
        var(--gold);

    color:
        var(--deep);

}


.detail-button:hover {

    border-color:
        var(--gold-light);

    color:
        var(--gold-light);

}


.detail-button-primary:hover {

    background:
        var(--gold-light);

    color:
        var(--deep);

}


/* =========================================================
   FILTERS
   ========================================================= */

.artifact-filters-section {

    position:
        absolute;

    left:
        58px;

    bottom:
        45px;

    z-index:
        40;

    opacity:
        0;

    animation:
        filtersIn
        1.2s
        var(--ease)
        1.05s
        forwards;

}


@keyframes filtersIn {

    from {

        opacity:
            0;

        transform:
            translateY(14px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


.filter-label {

    margin-bottom:
        15px;

    font-size:
        9px;

    letter-spacing:
        0.21em;

    color:
        rgba(
            232,
            216,
            190,
            0.65
        );

}


.artifact-filters {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        22px;

}


.filter-button {

    position:
        relative;

    padding:
        0 0 8px;

    border:
        0;

    background:
        transparent;

    color:
        rgba(
            232,
            216,
            190,
            0.58
        );

    font-size:
        10px;

    letter-spacing:
        0.16em;

    cursor:
        pointer;

    transition:
        color
        0.4s
        ease;

}


.filter-button::after {

    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    width:
        0;

    height:
        1px;

    background:
        var(--gold);

    transition:
        width
        0.45s
        var(--ease);

}


.filter-button:hover,
.filter-button.is-active {

    color:
        var(--gold-light);

}


.filter-button.is-active::after {

    width:
        100%;

}


/* =========================================================
   CONTROLS
   ========================================================= */

.carousel-controls {

    position:
        absolute;

    right:
        7vw;

    bottom:
        28px;

    z-index:
        40;

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

}


.carousel-button {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            232,
            216,
            190,
            0.20
        );

    border-radius:
        50%;

    background:
        rgba(
            0,
            0,
            0,
            0.20
        );

    color:
        var(--cream);

    cursor:
        pointer;

    transition:
        all
        0.4s
        ease;

}


.carousel-button:hover {

    border-color:
        rgba(
            201,
            164,
            92,
            0.55
        );

    color:
        var(--gold-light);

}


.carousel-counter {

    min-width:
        60px;

    text-align:
        center;

    font-size:
        8px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            232,
            216,
            190,
            0.50
        );

}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.artifact-empty {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    transform:
        translate(
            -50%,
            -50%
        );

    font-size:
        9px;

    letter-spacing:
        0.2em;

    color:
        rgba(
            232,
            216,
            190,
            0.45
        );

}


/* =========================================================
   FOOTER
   ========================================================= */

.artifacts-footer {

    position:
        absolute;

    left:
        58px;

    right:
        58px;

    bottom:
        14px;

    z-index:
        40;

    display:
        flex;

    justify-content:
        space-between;

    font-size:
        7px;

    letter-spacing:
        0.18em;

    color:
        rgba(
            232,
            216,
            190,
            0.22
        );

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .artifacts-page {

        min-height:
            100vh;

        overflow-x:
            hidden;

        overflow-y:
            auto;

    }


    .artifacts-header {

        position:
            relative;

        top:
            auto;

        left:
            auto;

        right:
            auto;

        width:
            100%;

        padding-top:
            52px;

        justify-content:
            center;

    }


    .artifacts-logo img {

        width:
            105px;

    }


    .return-home {

        position:
            absolute;

        right:
            34px;

    }


    .artifacts-intro {

        position:
            relative;

        left:
            auto;

        top:
            auto;

        width:
            min(
                720px,
                calc(100% - 80px)
            );

        margin:
            95px auto 0;

        transform:
            none;

        text-align:
            center;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        padding-top: clamp(50px, 7vh, 95px);

    }


    .artifacts-intro h1 {

        font-size:
            clamp(
                56px,
                7vw,
                76px
            );

    }


    .artifact-world {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        width:
            100%;

        height:
            620px;

        margin-top:
            -160px;

    }


    .eclipse {

        left:
            50%;

        top:
            48%;

        width:
            min(
                620px,
                72vw
            );

        height:
            min(
                620px,
                72vw
            );

    }


    .artifact-detail {

        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        width:
            min(
                500px,
                calc(100% - 80px)
            );

        margin:
            -40px auto 0;

        text-align:
            center;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

    }


    .detail-meta {

        justify-content:
            center;

    }


    .detail-actions {

        justify-content:
            center;

    }


    .artifact-filters-section {

        position:
            relative;

        left:
            auto;

        bottom:
            auto;

        width:
            min(
                700px,
                calc(100% - 80px)
            );

        margin:
            60px auto 50px;

        text-align:
            center;

    }


    .artifact-filters {

        justify-content:
            center;

    }


    .carousel-controls {

        position:
            relative;

        right:
            auto;

        bottom:
            auto;

        justify-content:
            center;

        margin:
            28px auto 35px;

    }


    .artifacts-footer {

        position:
            relative;

        left:
            auto;

        right:
            auto;

        bottom:
            auto;

        width:
            calc(100% - 80px);

        margin:
            0 auto 25px;

    }

}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

    .artifacts-header {

        padding-top:
            42px;

    }


    .artifacts-logo img {

        width:
            94px;

    }


    .return-home {

        right:
            25px;

        font-size:
            7px;

    }


    .artifacts-intro {

        width:
            calc(100% - 70px);

        margin-top:
            80px;

    }


    .artifacts-intro h1 {

        font-size:
            clamp(
                50px,
                8vw,
                68px
            );

    }


    .artifact-world {

        height:
            580px;

        margin-top:
            -160px;

    }


    .eclipse {

        width:
            min(
                580px,
                78vw
            );

        height:
            min(
                580px,
                78vw
            );

    }


    .artifact-card {

        width:
            165px;

        height:
            260px;

        margin-left:
            -82.5px;

        margin-top:
            -130px;

    }


    .artifact-detail {

        margin-top:
            -45px;

    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 767px) {

    .artifacts-page {

        min-height:
            100svh;

    }


    .artifacts-header {

        padding-top:
            30px;

    }


    .artifacts-logo img {

        width:
            82px;

    }


    .return-home {

        right:
            18px;

        font-size:
            6px;

    }


    .artifacts-intro {

        width:
            calc(100% - 36px);

        margin-top:
            65px;

    }


    .intro-eyebrow {

        margin-bottom:
            13px;

        font-size:
            7px;

    }


    .artifacts-intro h1 {

        font-size:
            clamp(
                40px,
                12vw,
                56px
            );

    }


    .intro-italic {

        margin-top:
            14px;

        font-size:
            18px;

    }


    .intro-description {

        font-size:
            7px;

        line-height:
            1.65;

    }


    .artifact-world {

        height:
            470px;

        margin-top:
            -100px;

    }


    .eclipse {

        width:
            108vw;

        height:
            108vw;

    }


    .artifact-card {

        width:
            135px;

        height:
            215px;

        margin-left:
            -67.5px;

        margin-top:
            -107.5px;

    }


    .artifact-detail {

        width:
            calc(100% - 40px);

        margin:
            -30px auto 0;

    }


    .artifact-detail h2 {

        font-size:
            clamp(
                28px,
                8vw,
                36px
            );

    }


    .artifact-detail p {

        max-width:
            310px;

        font-size:
            15px;

    }


    .detail-actions {

        margin-top:
            13px;

    }


    .detail-button {

        height:
            30px;

        padding:
            0 14px;

        font-size:
            7px;

    }


    .artifact-filters-section {

        width:
            calc(100% - 36px);

        margin:
            50px auto 40px;

    }


    .filter-label {

        font-size:
            7px;

    }


    .artifact-filters {

        gap:
            12px 18px;

    }


    .filter-button {

        font-size:
            8px;

    }


    .carousel-controls {

        margin-top:
            22px;

    }


    .carousel-button {

        width:
            34px;

        height:
            34px;

    }


    .artifacts-footer {

        display:
            none;

    }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 420px) {

    .artifacts-header {

        padding-top:
            25px;

    }


    .artifacts-logo img {

        width:
            76px;

    }


    .artifacts-intro {

        margin-top:
            55px;

    }


    .artifacts-intro h1 {

        font-size:
            38px;

    }


    .intro-italic {

        font-size:
            17px;

    }


    .artifact-world {

        height:
            420px;

        margin-top:
            -90px;
        

    }


    .eclipse {

        width:
            112vw;

        height:
            112vw;

    }


    .artifact-card {

        width:
            125px;

        height:
            200px;

        margin-left:
            -62.5px;

        margin-top:
            -100px;

    }


    .artifact-detail h2 {

        font-size:
            28px;

    }


    .artifact-detail p {

        font-size:
            14px;

    }


    .artifact-filters-section {

        margin-top:
            45px;

    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    *,
    *::before,
    *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}

/* =========================================================
   DOAH ARTIFACTS
   FINAL INTERACTION + SCROLL FIX
   Paste this at the VERY BOTTOM of artifacts.css
   ========================================================= */


/* ---------------------------------------------------------
   PAGE SCROLL
   --------------------------------------------------------- */

html {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    width: 100%;
    min-width: 320px;
    min-height: 100vh;
    margin: 0;

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--deep);
    color: var(--cream);
}


/*
   IMPORTANT:
   The original CSS uses overflow:hidden here.
   That traps the page inside the viewport.
*/

.artifacts-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: visible;

    isolation: isolate;

    background: var(--deep);
}


/* ---------------------------------------------------------
   DECORATIVE LAYERS
   Never allow these to block clicks.
   --------------------------------------------------------- */

.artifacts-background-video,
.video-overlay,
.space-atmosphere,
.page-grain {
    pointer-events: none;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.artifacts-header {
    z-index: 100;
}

.artifacts-logo,
.return-home {
    pointer-events: auto;
}


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.artifacts-intro {
    z-index: 50;
    pointer-events: auto;
}


/* ---------------------------------------------------------
   ARTIFACT WORLD
   --------------------------------------------------------- */

.artifact-world {
    z-index: 20;
    pointer-events: none;
}


/*
   The carousel itself must receive clicks.
*/

.artifact-carousel {
    pointer-events: auto;
}

.carousel-orbit {
    pointer-events: none;
}


/*
   Individual artifact cards are clickable.
*/

.artifact-card {
    pointer-events: auto;
}


/* ---------------------------------------------------------
   SELECTED ARTIFACT DETAILS
   --------------------------------------------------------- */

.artifact-detail {
    z-index: 60;
    pointer-events: auto;
}


/* ---------------------------------------------------------
   FILTERS
   --------------------------------------------------------- */

.artifact-filters-section {
    z-index: 100;
    pointer-events: auto;
}

.filter-button {
    pointer-events: auto;
}


/* ---------------------------------------------------------
   CAROUSEL CONTROLS
   --------------------------------------------------------- */

.carousel-controls {
    z-index: 110;
    pointer-events: auto;
}

.carousel-button {
    position: relative;
    z-index: 111;

    pointer-events: auto;

    cursor: pointer;
}


/* ---------------------------------------------------------
   DETAIL BUTTONS
   --------------------------------------------------------- */

.detail-actions {
    position: relative;
    z-index: 100;
}

.detail-button {
    position: relative;
    z-index: 101;

    pointer-events: auto;
    cursor: pointer;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .artifacts-page {
        width: 100%;
        min-height: 100vh;

        overflow-x: hidden;
        overflow-y: visible;
    }

    .artifact-world {
        pointer-events: none;
    }

    .artifact-carousel {
        pointer-events: auto;
    }

    .artifact-card {
        pointer-events: auto;
    }

    .artifact-detail {
        pointer-events: auto;
    }

    .artifact-filters-section {
        pointer-events: auto;
    }

    .carousel-controls {
        pointer-events: auto;
    }

}


/* =========================================================
   TABLET / IPAD
   ========================================================= */

@media (max-width: 780px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .artifacts-page {
        width: 100%;
        min-height: 100vh;

        overflow-x: hidden;
        overflow-y: visible;
    }

    /*
       Give the hero breathing room beneath the logo.
    */

    .artifacts-intro {
        margin-top: 0;
    }

    /*
       Keep the carousel interactive.
    */

    .artifact-world {
        pointer-events: none;
    }

    .artifact-carousel {
        pointer-events: auto;
    }

    .artifact-card {
        pointer-events: auto;
    }

    /*
       Keep arrows above the carousel.
    */

    .carousel-controls {
        z-index: 150;
        pointer-events: auto;
    }

    .carousel-button {
        pointer-events: auto;
    }

    /*
       Keep filters clickable.
    */

    .artifact-filters-section {
        z-index: 150;
        pointer-events: auto;
    }

    .filter-button {
        pointer-events: auto;
    }

    /*
       Keep the selected artifact button clickable.
    */

    .artifact-detail {
        z-index: 150;
        pointer-events: auto;
    }

    .detail-button {
        pointer-events: auto;
    }

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 767px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .artifacts-page {
        width: 100%;
        min-height: 100vh;

        overflow-x: hidden;
        overflow-y: visible;
    }

    .artifacts-header {
        z-index: 200;
    }

    .artifacts-intro {
        z-index: 100;
    }

    .artifact-world {
        pointer-events: none;
    }

    .artifact-carousel {
        pointer-events: auto;
    }

    .artifact-card {
        pointer-events: auto;
    }

    .artifact-detail {
        z-index: 200;
        pointer-events: auto;
    }

    .artifact-filters-section {
        z-index: 200;
        pointer-events: auto;
    }

    .carousel-controls {
        z-index: 220;
        pointer-events: auto;
    }

    .carousel-button {
        pointer-events: auto;
        cursor: pointer;
    }

    .detail-button {
        pointer-events: auto;
        cursor: pointer;
    }

    .filter-button {
        pointer-events: auto;
        cursor: pointer;
    }

}


/* =========================================================
   SMALL PHONE
   ========================================================= */

@media (max-width: 480px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .artifacts-page {
        width: 100%;
        min-height: 100vh;

        overflow-x: hidden;
        overflow-y: visible;
    }

    .carousel-controls {
        z-index: 250;
    }

    .artifact-filters-section {
        z-index: 250;
    }

    .artifact-detail {
        z-index: 250;
    }

}


/* =========================================================
   EXTRA SMALL PHONE
   ========================================================= */

@media (max-width: 390px) {

    html,
    body {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .artifacts-page {
        width: 100%;
        overflow-x: hidden;
        overflow-y: visible;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

}

.carousel-controls {
    display: none !important;
}

/* =========================================
   ARTIFACT DETAILS TOGGLE
   ========================================= */

#detail-description {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-8px);
    margin-top: 0;
    transition:
        opacity 0.45s ease,
        max-height 0.5s ease,
        transform 0.45s ease,
        margin-top 0.45s ease;
}

#detail-description.is-visible {
    opacity: 1;
    max-height: 200px;
    transform: translateY(0);
    margin-top: 12px;
}