.stdWrap{
    --bg: #F2EFDE;

    --black:#0a0a0c;
    --black2:#050507;

    --matteHi: rgba(255,255,255,.06);
    --matteHi2: rgba(255,255,255,.03);
    --matteLo: rgba(0,0,0,.55);
    --matteLo2: rgba(0,0,0,.85);

    --white:#ffffff;
    --white2:#f3f3f3;

    --ink: rgba(0,0,0,.92);

    --W: 540px;
    --H: 740px;

    --envH: 400px;

    --stackBottom: 10px;

    --pocketTop: 200px;

    --cardStartY: 0px;
    --cardEndY: -240px;

    --cardStartTilt: 85deg;
    --cardEndTilt: 0deg;

    --cardStartScale: .95;
    --cardEndScale: 1.20;

    --openDeg: 155deg;

    --delay: 0ms;
    --flapDur: 5000ms;
    --cardDur: 5000ms;

    --envOutDelay: calc(var(--delay) + var(--cardDur) - 2000ms);
    --envOutDur: 0ms;

    --flapWhiteDelay: 600ms;

    --cardW: 470px;
    --cardH: 600px;

    --photo1: url("../assets/InsideLook.jpeg");
    --photo2: url("../assets/LookingSnow.jpeg");
    --photo3: url("../assets/WalkPath.jpeg");

    --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    --serif: "Playfair Display", ui-serif, Georgia, serif;
}

.stdWrap{
    margin:0;
    display:grid;
    place-items:center;
    background:
        radial-gradient(900px 420px at 50% 0%, rgba(247,168,204,.10), rgba(0,0,0,0) 60%),
        var(--bg);
    font-family: var(--serif);
    color:#fff;
    padding: 20px 0;
}

.stdStage{
    width:min(var(--W), 92vw);
    height: var(--H);
    display:grid;
    place-items:center;
    user-select:none;
    padding-top: 250px;
}

.stdScene{
    position:relative;
    width:100%;
    height:100%;
    display:grid;
    place-items:end center;
    padding-bottom: 14px;
    perspective: 1100px;
    perspective-origin: 50% 55%;
}

.stdGround{
    position:absolute;
    left:50%;
    bottom: calc(var(--stackBottom) - 12px);
    transform:translateX(-50%);
    width: 92%;
    height: 44px;
    background: radial-gradient(closest-side, rgba(0,0,0,.52), rgba(0,0,0,0));
    filter: blur(6px);
    opacity:.75;
    transition: opacity .3s ease;
}

.stdLayerBack{
    position:absolute;
    left:50%;
    bottom: var(--stackBottom);
    transform:translateX(-50%);
    width: 100%;
    max-width: var(--W);
    height: var(--envH);
    z-index: 10;
}

.stdMattePaper{
    background:
        radial-gradient(1000px 500px at 18% 10%, var(--matteHi), rgba(255,255,255,0) 60%),
        radial-gradient(900px 520px at 55% 25%, var(--matteHi2), rgba(255,255,255,0) 65%),
        radial-gradient(1200px 700px at 50% 115%, var(--matteLo2), rgba(0,0,0,0) 60%),
        radial-gradient(1200px 700px at -10% 70%, rgba(0,0,0,.55), rgba(0,0,0,0) 55%),
        radial-gradient(1200px 700px at 110% 70%, rgba(0,0,0,.55), rgba(0,0,0,0) 55%),
        linear-gradient(180deg, #0c0c0f, #070709 55%, #040405);
    position:relative;
}

.stdMattePaper::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.18;
    background:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
        radial-gradient(1px 1px at 38% 52%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%),
        radial-gradient(1px 1px at 62% 44%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%),
        radial-gradient(1px 1px at 84% 26%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%),
        radial-gradient(1px 1px at 76% 78%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%),
        radial-gradient(1px 1px at 22% 82%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%);
    mix-blend-mode: overlay;
}

.stdMatteWhite{
    background:
        radial-gradient(900px 520px at 18% 12%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
        radial-gradient(900px 520px at 70% 28%, rgba(0,0,0,.06), rgba(0,0,0,0) 62%),
        radial-gradient(1200px 700px at 50% 120%, rgba(0,0,0,.10), rgba(0,0,0,0) 58%),
        linear-gradient(180deg, #ffffff, #f2f2f2 60%, #ededed);
    position:relative;
}

.stdMatteWhite::after{
    content:"";
    position:absolute;
    inset:0;
    opacity:.14;
    background:
        radial-gradient(1px 1px at 16% 20%, rgba(0,0,0,.08), rgba(0,0,0,0) 70%),
        radial-gradient(1px 1px at 42% 56%, rgba(0,0,0,.07), rgba(0,0,0,0) 70%),
        radial-gradient(1px 1px at 66% 46%, rgba(0,0,0,.06), rgba(0,0,0,0) 70%),
        radial-gradient(1px 1px at 82% 30%, rgba(0,0,0,.06), rgba(0,0,0,0) 70%),
        radial-gradient(1px 1px at 26% 82%, rgba(0,0,0,.05), rgba(0,0,0,0) 70%);
    mix-blend-mode: multiply;
}

.stdEnvBase{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-left: 15px solid var(--ink);
    border-right: 15px solid var(--ink);
    border-top: 0px solid var(--ink);
    box-shadow:
        0 38px 90px rgba(0,0,0,.22),
        0 14px 30px rgba(0,0,0,.16),
        inset 0 -28px 60px rgba(0,0,0,.10);
}

.stdFlap{
    position:absolute;
    left:0; right:0;
    top:0px;
    height: 400px;
    transform-origin: 50% 0%;
    transform-style: preserve-3d;
    z-index: 11;
    clip-path: polygon(0 0, 100% 0, 50% 70%);
    will-change: transform;
}

.stdFlapFace{
    position:absolute;
    inset:0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.stdPlay .stdFlap{
    animation: stdFlapOpen var(--flapDur) cubic-bezier(.18,.9,.2,1) forwards;
    animation-delay: var(--delay);
}

@keyframes stdFlapOpen{
    0%   { transform: rotateX(0deg); }
    100% { transform: rotateX(var(--openDeg)); }
}

.stdFlap.stdIsWhite .stdFlapFront.stdMattePaper{
    border-left: 15px solid var(--ink);
    border-right: 15px solid var(--ink);
    background:
        radial-gradient(900px 520px at 18% 12%, rgba(255,255,255,.95), rgba(255,255,255,0) 60%),
        radial-gradient(900px 520px at 70% 28%, rgba(0,0,0,.06), rgba(0,0,0,0) 62%),
        radial-gradient(1200px 700px at 50% 120%, rgba(0,0,0,.10), rgba(0,0,0,0) 58%),
        linear-gradient(180deg, #ffffff, #f2f2f2 60%, #ededed);
}

.stdLayerCard{
    position:absolute;
    left:50%;
    bottom: var(--stackBottom);
    transform:translateX(-50%);
    width: 100%;
    max-width: var(--W);
    height: var(--envH);
    z-index: 20;
}

.stdCard{
    position:absolute;
    left:50%;
    bottom: 0;
    width: min(var(--cardW), 88vw);
    height: var(--cardH);
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: 0 30px 72px rgba(0,0,0,.55);
    overflow:hidden;

    transform-origin: 50% 92%;
    transform-style: preserve-3d;
    backface-visibility: hidden;

    transform: translateX(-50%) translateY(var(--cardStartY)) rotateX(var(--cardStartTilt)) scale(var(--cardStartScale));
}

.stdPlay .stdCard{
    animation: stdCardOut var(--cardDur) cubic-bezier(.18,.9,.2,1) forwards;
    animation-delay: var(--delay);
}

@keyframes stdCardOut{
    0%{
        transform: translateX(-50%)
            translateY(var(--cardStartY))
            rotateX(var(--cardStartTilt))
            scale(var(--cardStartScale));
    }
    35%{
        transform: translateX(-50%)
            translateY(calc(var(--cardStartY) - 25px))
            rotateX(65deg)
            scale(1.00);
    }
    70%{
        transform: translateX(-50%)
            translateY(var(--cardEndY))
            rotateX(18deg)
            scale(1.10);
    }
    100%{
        transform: translateX(-50%)
            translateY(calc(var(--cardEndY) + 250px))
            rotateX(var(--cardEndTilt))
            scale(var(--cardEndScale));
    }
}

.stdCardContent{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns: 55% 45%;
    background:#fff;
}

.stdCardLeft{
    display:grid;
    grid-template-rows: 1fr 1fr 1fr;
    min-height:100%;
}

.stdPhoto{
    background-size: cover;
    background-position: center;
}

.stdPhoto.stdOne{
    background-image: var(--photo1);
    margin-top: 25px;
    margin-left: 15px;
}

.stdPhoto.stdTwo{
    background-image: var(--photo2);
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 15px;
}

.stdPhoto.stdThree{
    background-image: var(--photo3);
    margin-bottom: 25px;
    margin-left: 15px;
    background-size: cover;
    background-position: 50% 0%;
}

.stdCardRight{
    padding: 26px 24px;
    display:flex;
    color: rgba(10,10,12,.92);
    background: #ffffff;
}

.stdStdBlock{
    display:block;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    align-items:start;
    margin-top: 8px;
}

.stdVertical{
    display:block;
    gap: 14px;
    padding-left: 120px;
}

.stdVertical .stdWord{
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: .05em;
    font-size: 58px;
    color: rgba(10,10,12,.90);
}

.stdHorizontal{
    display:block;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 140px;
}

.stdHorizontal .stdWord{
    font-weight: 950;
    letter-spacing: .22em;
    font-size: 14px;
    color: rgba(10,10,12,.90);
}

.stdDetails{
    display:flex;
    margin-left: -200px;
    flex-direction:column;
    justify-content:end;
}

.stdNames{
    margin: 0;
    font-size: 28px;
    font-weight: 950;
    letter-spacing: .02em;
    line-height: 1.05;
}

.stdDateLine{
    margin-top: 10px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .10em;
}

.stdLoc{
    margin-top: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 14px;
    opacity: .72;
}

.stdLayerFront{
    position:absolute;
    left:50%;
    bottom: var(--stackBottom);
    transform:translateX(-50%);
    width: 100%;
    max-width: var(--W);
    height: 600px;
    z-index: 999;
}

.stdPocket{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.stdPocket::before{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    top: var(--pocketTop);
    background:
        radial-gradient(800px 340px at 15% 10%, var(--matteHi), rgba(255,255,255,0) 60%),
        radial-gradient(900px 520px at 60% 25%, var(--matteHi2), rgba(255,255,255,0) 65%),
        radial-gradient(1100px 700px at 50% 130%, rgba(0,0,0,.92), rgba(0,0,0,0) 60%),
        linear-gradient(180deg, #0c0c0f, #070709 55%, #040405);
    clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 -24px 44px rgba(0,0,0,.55);
}

.stdPocket::after{
    content:"";
    position:absolute;
    left:12px; right:12px;
    bottom:12px;
    top: calc(var(--pocketTop) + 12px);
    clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    opacity: .40;
}

.stdPlay .stdLayerBack,
.stdPlay .stdLayerFront{
    animation: stdEnvOut var(--envOutDur) ease forwards;
    animation-delay: var(--envOutDelay);
}

.stdPlay .stdGround{
    animation: stdGroundOut var(--envOutDur) ease forwards;
    animation-delay: var(--envOutDelay);
}

@keyframes stdEnvOut{
    0%   { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(26px); filter: blur(1.5px); }
}

@keyframes stdGroundOut{
    from { opacity: .75; }
    to   { opacity: 0; }
}

.stdControls{
    display:flex;
    justify-content:center;
    margin-top: 14px;
}

.stdBtn{
    border: 1px solid rgba(0,0,0,.18);
    background: rgba(255,255,255,.55);
    color: rgba(10,10,12,.86);
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 10px 14px;
    border-radius: 999px;
    cursor:pointer;
}

.stdInvFollow{
    font-size: 10px;
}

@media (max-width: 760px){
    .stdWrap{
        --cardW: 90%;
        --cardH: 460px;
    }

    .stdCardRight{ padding: 22px 18px; }
    .stdNames{ font-size: 24px; }
    .stdDateLine{ font-size: 16px; }

    .stdStage{
        padding-top: 50px;
    }

    .stdStdBlock{
        display:block;
        grid-template-columns: auto 1fr;
        column-gap: 18px;
        align-items:start;
        margin-top: 8px;
    }

    .stdVertical{
        display:block;
        gap: 14px;
        padding-left: 70px;
    }

    .stdVertical .stdWord{
        writing-mode: vertical-rl;
        text-orientation: mixed;
        letter-spacing: .05em;
        font-size: 42px;
        color: rgba(10,10,12,.90);
    }

    .stdHorizontal{
        display:block;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 80px;
    }

    .stdHorizontal .stdWord{
        font-weight: 950;
        letter-spacing: .22em;
        font-size: 14px;
        color: rgba(10,10,12,.90);
    }

    .stdDetails{
        display:flex;
        margin-left: -120px;
        flex-direction:column;
        justify-content:end;
    }

    .stdNames{
        margin: 0;
        font-size: 18px;
        font-weight: 950;
        letter-spacing: .02em;
        line-height: 1.05;
    }

    .stdDateLine{
        margin-top: 10px;
        font-weight: 900;
        font-size: 10px;
        letter-spacing: .10em;
    }

    .stdLoc{
        margin-top: 10px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: 10px;
        opacity: .72;
    }

    .stdInvFollow{
        font-size: 8px;
    }

    @keyframes stdCardOut{
        0%{
        transform: translateX(-50%)
                translateY(var(--cardStartY))
                rotateX(var(--cardStartTilt))
                scale(.75);
        }
        35%{
        transform: translateX(-50%)
                translateY(calc(var(--cardStartY) - 25px))
                rotateX(65deg)
                scale(.85);
        }
        70%{
        transform: translateX(-50%)
                translateY(var(--cardEndY))
                rotateX(18deg)
                scale(1);
        }
        100%{
        transform: translateX(-50%)
                translateY(calc(var(--cardEndY)))
                rotateX(var(--cardEndTilt))
                scale(1);
        }
    }
}

.stdPhoto{
    cursor: zoom-in;
    position: relative;
}

.stdModal{
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}
.stdModal.stdOpen{ display:block; }

.stdModalBackdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
}

.stdModalDialog{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 18px;
    pointer-events: none;
}

.stdModalImg{
    pointer-events: auto;
    max-width: min(1100px, 92vw);
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 120px rgba(0,0,0,.6);
    background: #fff;
}

.stdModalClose{
    pointer-events: auto;
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.stdLayerCard,
.stdCard,
.stdCardContent,
.stdCardLeft,
.stdPhoto{
    pointer-events: auto !important;
}

.stdLayerFront,
.stdLayerBack{
    pointer-events: none !important;
}