/*==================================================
THOM TRUAX
STYLE.CSS
==================================================*/

:root{
    --paper:#fbfaf7;
    --ink:#050505;
    --soft:#5f5d58;
    --rule:#ddd5ca;
    --accent:#8f7657;
    --column:540px;
    --serif:"Cormorant Garamond",serif;
    --sans:"Helvetica Neue",Arial,sans-serif;
    --condensed:"Arial Narrow","Helvetica Neue Condensed","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
    --moose-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='46' viewBox='0 0 54 46'%3E%3Cpath d='M13 9 C8 2 5 2 3 4 C7 7 8 11 8 16 C5 14 3 15 2 17 C5 20 9 20 12 18 C15 21 19 23 22 24 L22 31 C20 34 19 38 21 42 L33 42 C35 38 34 34 32 31 L32 24 C35 23 39 21 42 18 C45 20 49 20 52 17 C51 15 49 14 46 16 C46 11 47 7 51 4 C49 2 46 2 41 9 C40 5 38 3 35 3 C36 7 36 11 34 15 C32 13 30 12 27 12 C24 12 22 13 20 15 C18 11 18 7 19 3 C16 3 14 5 13 9 Z' fill='%23050505'/%3E%3Cpath d='M20 23 C20 16 34 16 34 23 L32 34 C31 38 23 38 22 34 Z' fill='%23806a4c'/%3E%3Cpath d='M19 23 L12 21 L16 27 Z M35 23 L42 21 L38 27 Z' fill='%23806a4c'/%3E%3Cpath d='M24 27 L30 27 L28 34 L26 34 Z' fill='%23050505'/%3E%3Ccircle cx='24' cy='24' r='1.3' fill='%23f2e6c9'/%3E%3Ccircle cx='30' cy='24' r='1.3' fill='%23f2e6c9'/%3E%3Cpath d='M21 18 C24 16 30 16 33 18' stroke='%23f2e6c9' stroke-width='1.3' fill='none' opacity='.8'/%3E%3C/svg%3E") 27 23;
    --mask-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='24' viewBox='0 0 32 24'%3E%3Cpath d='M3 8 C7 3 12 5 16 8 C20 5 25 3 29 8 C27 15 22 19 16 17 C10 19 5 15 3 8 Z' fill='%23050505'/%3E%3Cellipse cx='11' cy='10' rx='3.2' ry='2.1' fill='%23fbfaf7'/%3E%3Cellipse cx='21' cy='10' rx='3.2' ry='2.1' fill='%23fbfaf7'/%3E%3Cpath d='M14 15 C15 16 17 16 18 15' stroke='%23b08a55' stroke-width='1' fill='none'/%3E%3C/svg%3E") 16 12;
    --lipstick-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 28 32'%3E%3Cpath d='M13 2 L20 7 L16 14 L8 9 Z' fill='%23c43b71'/%3E%3Cpath d='M8 9 L16 14 L12 22 L4 17 Z' fill='%23050505'/%3E%3Cpath d='M4 17 L12 22 L10 29 L1 24 Z' fill='%23fbfaf7' stroke='%23050505' stroke-width='1.4'/%3E%3Cpath d='M12 22 L20 27 L18 31 L10 29 Z' fill='%23050505'/%3E%3Cpath d='M10 5 L17 10' stroke='%23fbfaf7' stroke-width='1' opacity='.75'/%3E%3C/svg%3E") 7 25;
    --eggplant-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M21 8 C18 9 15 11 12 14 C6 20 5 29 10 34 C15 39 24 37 30 31 C34 27 36 23 35 18 C34 13 27 6 21 8 Z' fill='%235b2a86'/%3E%3Cpath d='M16 13 C10 18 8 27 12 31 C16 35 25 33 30 27 C32 25 33 22 33 20 C30 24 27 28 22 31 C17 34 13 33 11 30 C8 25 10 18 16 13 Z' fill='%238a4fc4' opacity='.95'/%3E%3Cpath d='M21 9 C22 5 25 3 29 4 C28 7 26 9 23 10 C26 9 30 9 34 12 C30 14 26 14 23 11 C24 14 23 17 20 20 C18 16 18 12 21 9 Z' fill='%23418a39'/%3E%3Cpath d='M25 4 C26 6 25 9 22 11' stroke='%23b5d74a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") 10 30;
    --moon-cursor:url("assets/moon-cursor.png") 32 32;
    --trireme-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='26' viewBox='0 0 38 26'%3E%3Cg fill='%23050505'%3E%3Cpath d='M18 1h1.5v15H18z'/%3E%3Cpath d='M17 3 7 14h10zM20.5 4v10h9z'/%3E%3Cpath d='M3 16h31l-4 6H8z'/%3E%3Cpath d='m3 17-3 2 7 .5z'/%3E%3Cpath d='m10 20-6 5h2l6-5zm5 0-5 6h2l5-6zm5 0-3 6h2l3-6zm5 0-1 6h2l1-6zm5 0 2 5h2l-2-5z'/%3E%3C/g%3E%3C/svg%3E") 4 19;
}

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

html{
    margin:0;
    padding:0;
}

body,
h1,
p,
ul,
li,
hr{
    margin:0;
    padding:0;
}

body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--serif);
    font-size:18.5px;
    line-height:1.62;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:20;
    background:#000;
    opacity:0;
    pointer-events:none;
    transition:opacity .32s ease;
}

body.fade-to-black::after{
    opacity:1;
}

.page{
    width:min(76vw,var(--column));
    margin:clamp(4.6rem,9vw,6.75rem) auto clamp(3.25rem,7vw,5rem);
}

/* Masthead */

.hero{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    margin-bottom:3.15rem;
}

.hero h1{
    font-size:clamp(2.28rem,5.1vw,2.56rem);
    font-weight:500;
    line-height:1;
    letter-spacing:.105em;
    text-transform:uppercase;
    transform:translateX(clamp(1.9rem,5vw,2.85rem));
}

.location{
    margin-top:.4rem;
    color:var(--soft);
    font-size:.7rem;
    letter-spacing:.36em;
    text-transform:uppercase;
    transform:translateX(clamp(1.9rem,5vw,2.85rem));
}

/* Project Pages */

.index-link{
    margin-bottom:clamp(3.5rem,8vw,5.5rem);
    font-size:.78rem;
    letter-spacing:.08em;
    line-height:1.4;
    text-transform:uppercase;
}

.index-link a{
    color:var(--ink);
    opacity:.62;
    text-decoration:none;
    transition:opacity .24s ease;
}

.project-header{
    max-width:32rem;
}

.project-header h1{
    font-size:clamp(2.15rem,6vw,3.25rem);
    font-weight:500;
    letter-spacing:.035em;
    line-height:1.02;
    text-transform:uppercase;
}

.project-medium{
    margin-bottom:.65rem;
    color:var(--soft);
    font-size:.78rem;
    font-style:italic;
    letter-spacing:.025em;
}

.project-status{
    margin-top:.9rem;
    color:var(--soft);
    font-family:var(--sans);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.14em;
    line-height:1;
    text-transform:uppercase;
}

.other-odyssey-page{
    min-height:100svh;
    overflow:hidden;
    background:
        url("assets/other-odyssey-goddess-decay.png?v=4") center center / clamp(40rem,55vw,55rem) auto repeat,
        #d8c5a6;
    color:#17130f;
}

.other-odyssey-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    background:
        radial-gradient(ellipse 48% 20% at 50% 17%,rgba(250,246,236,.9) 0%,rgba(250,246,236,.68) 46%,rgba(250,246,236,.18) 78%,transparent 100%),
        linear-gradient(180deg,rgba(247,239,222,.2),rgba(247,239,222,.04) 58%);
    pointer-events:none;
}

.other-odyssey-page .page{
    position:relative;
    z-index:1;
    width:100%;
    height:100svh;
    margin:0;
    padding:clamp(1.35rem,3.2vw,2.8rem) clamp(1.35rem,4vw,4rem);
    display:grid;
    grid-template-rows:1fr;
}

.other-odyssey-page .project-header{
    width:min(92vw,60rem);
    max-width:none;
    align-self:start;
    justify-self:center;
    margin-top:clamp(2.4rem,7vh,5.25rem);
    text-align:center;
    text-shadow:0 1px 0 rgba(245,233,210,.72);
}

.other-odyssey-page .project-header h1{
    font-size:clamp(2.55rem,6.6vw,6.4rem);
    font-weight:500;
    letter-spacing:.065em;
    line-height:.88;
}

.other-odyssey-page .project-medium{
    margin-bottom:.75rem;
    color:#2d261e;
    font-family:var(--sans);
    font-size:.68rem;
    font-style:normal;
    font-weight:700;
    letter-spacing:.14em;
    line-height:1;
    text-transform:uppercase;
}

.other-odyssey-page .project-status{
    margin-top:1.15rem;
    color:#2d261e;
    font-size:.62rem;
    letter-spacing:.18em;
}

@media (max-width:700px){
    .other-odyssey-page{
        background-size:40rem auto;
        background-position:center center;
    }

    .other-odyssey-page .page{
        padding:1.3rem;
    }

    .other-odyssey-page .project-header{
        width:100%;
        margin-top:4.4rem;
    }

    .other-odyssey-page .project-header h1{
        font-size:clamp(2.55rem,14vw,4.1rem);
        line-height:.86;
    }
}

.project-intro{
    max-width:26rem;
}

.project-intro p{
    color:#46413c;
    font-size:.92rem;
    line-height:1.84;
}

.project-sorry-i-cant-talk{
    min-height:100svh;
    overflow:hidden;
    background:#080404;
    color:#fff4df;
    cursor:var(--eggplant-cursor),auto;
    font-family:var(--serif);
}

.project-sorry-i-cant-talk a{
    cursor:var(--eggplant-cursor),pointer;
}

.sorry-canvas{
    position:relative;
    width:100%;
    min-height:100svh;
    padding:clamp(1.2rem,3vw,2.75rem);
    overflow:hidden;
}

.sorry-image{
    position:fixed;
    inset:0;
    z-index:0;
    width:100vw;
    height:100svh;
    margin:0;
    overflow:hidden;
    background:#080404;
}

.sorry-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(7,3,3,.5),rgba(7,3,3,.03) 32%,rgba(7,3,3,.36)),
        linear-gradient(0deg,rgba(5,2,2,.82),rgba(5,2,2,.18) 36%,rgba(5,2,2,.22) 72%,rgba(5,2,2,.58));
    pointer-events:none;
}

.sorry-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
    transform:translateX(1.2%) scale(1.018);
    transform-origin:center center;
    filter:saturate(.92) contrast(1.05) brightness(.9);
}

.sorry-nav,
.sorry-poster{
    position:relative;
    z-index:2;
}

.sorry-nav{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    font-family:var(--sans);
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.14em;
    line-height:1;
    text-transform:uppercase;
}

.sorry-nav a{
    color:#fff4df;
    opacity:.72;
    text-decoration:none;
    text-shadow:0 1px 14px rgba(0,0,0,.9);
    transition:opacity .24s ease;
}

.sorry-poster{
    position:relative;
    min-height:calc(100svh - clamp(2.4rem,6vw,5.5rem));
    display:grid;
    grid-template-columns:minmax(9rem,1fr) minmax(24rem,58rem) minmax(9rem,1fr);
    grid-template-rows:1fr;
    align-items:end;
    padding-top:clamp(2.8rem,6vw,5.25rem);
}

.sorry-laurels{
    align-self:center;
    width:min(16vw,12rem);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:clamp(1rem,2vw,1.6rem);
}

.sorry-laurels-left{
    grid-column:1;
    justify-self:start;
    margin-left:clamp(.25rem,2vw,2rem);
}

.sorry-laurels-right{
    grid-column:3;
    justify-self:end;
    margin-right:clamp(.25rem,2vw,2rem);
}

.sorry-laurels img{
    width:clamp(5.75rem,11vw,10rem);
    max-height:clamp(4rem,7.2vw,7rem);
    object-fit:contain;
    filter:drop-shadow(0 .14rem .35rem rgba(0,0,0,.75));
}

.sorry-laurels .sorry-laurel-feature{
    width:clamp(7.5rem,15vw,14rem);
    max-height:clamp(5rem,9.5vw,9rem);
}

.sorry-laurels-left .sorry-laurel-feature{
    filter:brightness(0) invert(1) drop-shadow(0 .14rem .35rem rgba(0,0,0,.75));
}

.sorry-title-lockup{
    grid-column:2;
    justify-self:center;
    align-self:end;
    width:min(78vw,60rem);
    padding-bottom:clamp(1.15rem,3.1vw,2.6rem);
    text-align:center;
    text-shadow:0 .08rem .75rem rgba(0,0,0,.82),0 .02rem .08rem rgba(0,0,0,.9);
}

.sorry-title-lockup p{
    margin-bottom:clamp(.55rem,1vw,.85rem);
    color:#dfc89f;
    font-family:var(--sans);
    font-size:clamp(.62rem,.95vw,.82rem);
    font-weight:800;
    letter-spacing:.2em;
    line-height:1;
    text-transform:uppercase;
}

.sorry-title-lockup h1{
    margin:0;
    color:rgba(255,241,212,.9);
    font-size:clamp(2.65rem,6.9vw,6.35rem);
    font-weight:600;
    letter-spacing:.025em;
    line-height:.87;
    opacity:.94;
    text-transform:uppercase;
}

@media (hover:hover){
    .sorry-nav a:hover{
        opacity:1;
    }
}

/* Phantasmagoria */

.project-phantasmagoria{
    min-height:100svh;
    background:
        radial-gradient(circle at 44% 39%,rgba(255,226,205,.16),transparent 18rem),
        linear-gradient(90deg,rgba(29,13,21,.82),rgba(29,13,21,.34) 38%,rgba(8,6,10,.58)),
        linear-gradient(0deg,rgba(6,4,7,.88),rgba(6,4,7,.22) 44%,rgba(255,226,236,.16)),
        url("assets/P1.jpg") center center / cover no-repeat fixed,
        #120b10;
    color:#fff0e4;
    background-blend-mode:soft-light,multiply,normal,normal;
    cursor:var(--moose-cursor),auto;
}

.project-phantasmagoria a{
    cursor:var(--moose-cursor),pointer;
}

.project-phantasmagoria::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
        linear-gradient(180deg,rgba(255,244,224,.1),transparent 22%,rgba(28,9,16,.32)),
        repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 8px),
        repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),
        radial-gradient(circle at 14% 82%,rgba(214,67,90,.2),transparent 18rem);
    opacity:.46;
    pointer-events:none;
}

.project-phantasmagoria::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(circle at 50% 50%,transparent 0 28%,rgba(8,4,7,.18) 56%,rgba(8,4,7,.58) 100%),
        linear-gradient(115deg,rgba(255,228,190,.11),transparent 26%,rgba(82,32,56,.18) 70%,transparent);
    filter:blur(10px);
    opacity:.72;
    transform:scale(1.035);
    pointer-events:none;
}

.project-phantasmagoria .page{
    width:100%;
    min-height:100svh;
    margin:0;
    padding:clamp(1.35rem,3vw,2.4rem);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:clamp(2.5rem,8vw,6rem);
}

.project-phantasmagoria .index-link{
    margin-bottom:0;
    font-family:var(--sans);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.15em;
}

.project-phantasmagoria .index-link a,
.project-phantasmagoria footer a{
    color:#f4ead9;
    text-shadow:0 1px 16px rgba(0,0,0,.86);
}

.phantasmagoria-copy{
    width:min(84vw,29rem);
    margin:auto auto clamp(2rem,5vw,4.2rem) clamp(.15rem,4vw,4.8rem);
}

.phantasmagoria-copy h1{
    margin:0 0 1rem;
    color:#fff2e3;
    cursor:var(--moose-cursor),auto;
    font-size:clamp(1.8rem,4.7vw,4rem);
    font-style:italic;
    font-weight:600;
    letter-spacing:-.035em;
    line-height:.9;
    text-transform:uppercase;
    text-shadow:0 1px 22px rgba(0,0,0,.9);
}

.phantasmagoria-copy p{
    max-width:24rem;
    margin:0;
    color:#ead8c8;
    font-size:.98rem;
    line-height:1.74;
    text-shadow:0 1px 18px rgba(0,0,0,.9);
}

.phantasmagoria-bible-link{
    display:inline-block;
    color:#d8c7b8;
    font-family:var(--sans);
    font-size:.59rem;
    font-weight:600;
    letter-spacing:.12em;
    line-height:1.4;
    opacity:.48;
    text-decoration:none;
    text-shadow:0 1px 14px rgba(0,0,0,.78);
    text-transform:uppercase;
    transition:color .24s ease, opacity .24s ease;
}

.project-phantasmagoria .project-medium{
    color:#a9b3ad;
    font-family:var(--sans);
    font-size:.67rem;
    font-style:normal;
    font-weight:700;
    letter-spacing:.17em;
    text-transform:uppercase;
}

.project-phantasmagoria hr{
    border-color:rgba(234,222,200,.22);
    margin:clamp(1.55rem,3.4vw,2.5rem) 0;
}

.project-phantasmagoria footer{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:1.25rem;
    margin-top:0;
}

.project-phantasmagoria footer nav{
    color:#9ea59c;
    justify-content:flex-end;
    font-family:var(--sans);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.14em;
}

@media (hover:hover){
    .phantasmagoria-bible-link:hover{
        color:#f4ead9;
        opacity:.72;
    }
}

/* Dividers */

hr{
    border:none;
    border-top:1px solid var(--rule);
    margin:2rem 0 2.25rem;
}

/* Projects */

.projects{
    transform:translateX(clamp(-1.75rem,-3vw,-.9rem));
}

.projects ul{
    list-style:none;
}

.projects li{
    margin-bottom:1.48rem;
}

.projects li:last-child{
    margin-bottom:0;
}

.projects a{
    display:inline-block;
    color:inherit;
    text-decoration:none;
    transition:opacity .24s ease, transform .24s ease;
}

.projects a:focus-visible,
.index-link a:focus-visible,
footer a:focus-visible{
    outline:1px solid var(--accent);
    outline-offset:.24rem;
}

@media (hover:hover){
    .index-link a:hover{
        opacity:.92;
    }

    .projects a:hover{
        opacity:.72;
        transform:translateX(.1rem);
    }
}

.title{
    display:block;
    font-size:1.34rem;
    font-weight:500;
    letter-spacing:.045em;
    line-height:1.14;
    text-transform:uppercase;
}

.medium{
    display:block;
    margin-top:.18rem;
    color:var(--soft);
    font-size:.77rem;
    font-style:italic;
    letter-spacing:.018em;
}

/* About */

.about{
    max-width:26rem;
}

.about p{
    color:#46413c;
    font-size:.92rem;
    line-height:1.84;
}

/* Footer */

footer{
    margin-top:.7rem;
}

footer nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.78rem;
    color:var(--soft);
    font-size:.79rem;
    letter-spacing:.075em;
    line-height:1.4;
    text-transform:uppercase;
}

footer a{
    color:var(--ink);
    text-decoration:none;
    opacity:.64;
    transition:opacity .24s ease;
}

/* Homepage Composition */

.home-page{
    cursor:var(--moon-cursor),auto;
    overflow:hidden;
}

.home-page a{
    cursor:var(--moon-cursor),pointer;
}

.home-page .page{
    width:100%;
    height:100svh;
    margin:0;
    padding:clamp(1.7rem,4vh,3rem) clamp(1.35rem,4.5vw,4.4rem);
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:repeat(12,minmax(0,1fr));
    column-gap:clamp(1rem,2.4vw,2.3rem);
}

.home-page .hero{
    grid-column:7 / 13;
    grid-row:1 / 3;
    justify-self:end;
    align-self:start;
    margin-bottom:0;
}

.home-page .hero h1,
.home-page .location{
    transform:none;
}

.home-page .hero h1{
    font-family:var(--condensed);
    font-size:clamp(3.15rem,7.2vw,6.65rem);
    font-stretch:condensed;
    font-weight:900;
    letter-spacing:-.045em;
    line-height:.78;
    text-align:right;
}

.home-page .location{
    margin-top:.55rem;
    color:var(--ink);
    font-family:var(--sans);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.16em;
    line-height:1;
}

.home-page .page > hr{
    display:none;
}

.home-page .projects{
    grid-column:1 / 7;
    grid-row:5 / 11;
    align-self:end;
    transform:none;
    padding-left:0;
}

.home-page .projects a,
.home-page footer a{
    transition:none;
}

.home-page .mouth-wide-hush-link{
    cursor:var(--mask-cursor),pointer;
}

.home-page .slay-link{
    cursor:var(--lipstick-cursor),pointer;
}

.home-page .phantasmagoria-link{
    cursor:var(--moose-cursor),pointer;
}

.home-page .sorry-link{
    cursor:var(--eggplant-cursor),pointer;
}

.home-page .other-odyssey-link{
    cursor:var(--trireme-cursor),pointer;
}

.home-page .projects ul{
    max-width:39rem;
}

.home-page .projects li{
    margin-bottom:1.7rem;
}

.home-page .current-development{
    margin-top:2.45rem;
}

.home-page .development-label{
    margin-bottom:.58rem;
    color:var(--soft);
    font-family:var(--sans);
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.14em;
    line-height:1;
    text-transform:uppercase;
}

.home-page .title{
    font-family:var(--serif);
    font-size:clamp(1.5rem,3vw,2.65rem);
    font-style:italic;
    font-weight:600;
    letter-spacing:-.035em;
    line-height:.9;
    text-transform:uppercase;
}

.home-page .volume{
    display:inline-block;
    font-size:.62em;
    letter-spacing:-.015em;
    transform:translateY(-.05em);
}

.home-page .medium{
    margin-top:.22rem;
    color:var(--soft);
    font-family:var(--sans);
    font-size:.64rem;
    font-style:normal;
    font-weight:700;
    letter-spacing:.12em;
    line-height:1;
    text-transform:uppercase;
}

.home-page .about{
    grid-column:9 / 13;
    grid-row:7 / 10;
    justify-self:end;
    align-self:end;
    max-width:18rem;
    margin-left:0;
    text-align:right;
    transform:none;
}

.home-page .about p{
    color:var(--ink);
    font-family:var(--sans);
    font-size:.76rem;
    font-weight:700;
    line-height:1.45;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.home-page footer{
    grid-column:9 / 13;
    grid-row:11 / 12;
    justify-self:end;
    align-self:end;
    margin-top:0;
}

.home-page footer nav{
    justify-content:flex-end;
    font-family:var(--sans);
    font-size:.62rem;
    font-weight:700;
    letter-spacing:.13em;
}

@media (hover:hover){
    footer a:hover{
        opacity:.92;
    }
}

/* Mobile */

@media (max-width:700px){
    .project-sorry-i-cant-talk{
        overflow:hidden;
    }

    .sorry-canvas{
        min-height:100svh;
        padding:1.25rem;
    }

    .sorry-image img{
        object-position:41% center;
        transform:translateX(4.2%) scale(1.022);
        filter:saturate(.92) contrast(1.06) brightness(.82);
    }

    .sorry-image::after{
        background:
            linear-gradient(90deg,rgba(7,3,3,.58),rgba(7,3,3,.16) 45%,rgba(7,3,3,.48)),
            linear-gradient(0deg,rgba(5,2,2,.88),rgba(5,2,2,.2) 43%,rgba(5,2,2,.5));
    }

    .sorry-nav{
        font-size:.6rem;
        letter-spacing:.12em;
    }

    .sorry-poster{
        min-height:calc(100svh - 2.5rem);
        grid-template-columns:minmax(4.7rem,1fr) minmax(11.5rem,2fr) minmax(4.7rem,1fr);
        padding-top:3.4rem;
    }

    .sorry-laurels{
        width:auto;
        align-self:end;
        gap:.8rem;
        margin-bottom:clamp(7.2rem,28vh,13rem);
    }

    .sorry-laurels img{
        width:clamp(3.65rem,17vw,5rem);
        max-height:clamp(2.6rem,10vw,3.4rem);
    }

    .sorry-laurels .sorry-laurel-feature{
        width:clamp(4.55rem,22vw,6.1rem);
        max-height:clamp(3.3rem,13vw,4.4rem);
    }

    .sorry-laurels-left{
        margin-left:0;
    }

    .sorry-laurels-right{
        margin-right:0;
    }

    .sorry-title-lockup{
        grid-column:1 / 4;
        width:100%;
        padding-bottom:.85rem;
    }

    .sorry-title-lockup p{
        margin-bottom:.62rem;
        font-size:.6rem;
        letter-spacing:.16em;
    }

    .sorry-title-lockup h1{
        font-size:clamp(2.25rem,12.5vw,4.15rem);
        letter-spacing:.01em;
        line-height:.9;
        opacity:.92;
    }

    .home-page{
        overflow:auto;
    }

    .page{
        width:min(86vw,500px);
        margin:46px auto 38px;
    }

    .hero{
        margin-bottom:2.35rem;
    }

    hr{
        margin:1.7rem 0 1.9rem;
    }

    .hero h1,
    .location{
        transform:none;
    }

    .hero h1{
        font-size:2.05rem;
        letter-spacing:.085em;
    }

    .home-page .page{
        width:min(86vw,500px);
        height:auto;
        min-height:auto;
        display:block;
        padding:0;
        margin:34px auto 28px;
    }

    .home-page .hero{
        margin-bottom:2.65rem;
    }

    .home-page .hero h1,
    .home-page .location{
        transform:none;
    }

    .home-page .hero h1{
        font-size:clamp(3.45rem,15vw,5.65rem);
        letter-spacing:-.055em;
        line-height:.78;
    }

    .home-page .location{
        margin-top:.7rem;
        font-size:.64rem;
        letter-spacing:.14em;
    }

    .index-link{
        margin-bottom:3rem;
    }

    .project-header h1{
        font-size:2rem;
    }

    .projects{
        transform:none;
    }

    .home-page .projects{
        transform:none;
        padding-left:0;
    }

    .title{
        font-size:1.18rem;
        letter-spacing:.035em;
    }

    .home-page .title{
        font-size:clamp(1.72rem,8.5vw,2.65rem);
        letter-spacing:-.04em;
        line-height:.88;
    }

    .home-page .medium{
        margin-top:.38rem;
        font-size:.62rem;
        letter-spacing:.11em;
    }

    .home-page .current-development{
        margin-top:2.1rem;
    }

    .home-page .development-label{
        margin-bottom:.68rem;
        font-size:.6rem;
        letter-spacing:.12em;
    }

    .home-page .about{
        width:100%;
        max-width:none;
        margin-left:0;
        justify-self:auto;
        align-self:auto;
        margin-top:2.45rem;
        transform:none;
    }

    .home-page .about p{
        font-size:.72rem;
        line-height:1.5;
        letter-spacing:.1em;
    }

    .home-page footer{
        width:100%;
        justify-self:auto;
        align-self:auto;
        margin-top:2.35rem;
    }

    .home-page footer nav{
        justify-content:flex-start;
    }

    .projects li{
        margin-bottom:1.32rem;
    }

    footer nav{
        gap:.64rem;
        font-size:.76rem;
        letter-spacing:.055em;
    }
}

@media (max-width:430px){
    .page{
        width:min(84vw,500px);
        margin-top:40px;
    }

    .hero h1{
        font-size:1.92rem;
    }

    .location{
        font-size:.67rem;
        letter-spacing:.3em;
    }

    .title{
        font-size:1.1rem;
        line-height:1.18;
    }

    .medium{
        margin-top:.2rem;
    }
}

/* Mouth Wide Hush */

.mouth-page{
    min-height:100svh;
    overflow:hidden;
    cursor:var(--mask-cursor),auto;
    background:
        radial-gradient(circle at 72% 28%,rgba(176,138,85,.18),transparent 14rem),
        radial-gradient(circle at 18% 88%,rgba(255,244,221,.07),transparent 20rem),
        linear-gradient(135deg,#080605 0%,#17100d 44%,#030303 100%);
    color:#efe4cf;
    font-family:var(--serif);
}

.mouth-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 6% 31%,rgba(255,219,146,.19),transparent 4.75rem),
        radial-gradient(circle at 94% 31%,rgba(255,219,146,.16),transparent 5.25rem),
        radial-gradient(circle at 52% 13%,rgba(255,230,166,.11),transparent 7.25rem),
        linear-gradient(90deg,rgba(0,0,0,.3),transparent 30%,rgba(0,0,0,.34));
    mix-blend-mode:screen;
    opacity:.62;
    animation:mouth-candle-breathe 5.75s steps(1,end) infinite;
    pointer-events:none;
}

.mouth-page::after{
    content:"";
    position:fixed;
    inset:-6%;
    z-index:3;
    background:
        repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 1px,transparent 1px 4px),
        radial-gradient(circle at 18% 28%,rgba(255,255,255,.08),transparent .08rem),
        radial-gradient(circle at 74% 42%,rgba(255,255,255,.06),transparent .07rem),
        radial-gradient(circle at 46% 72%,rgba(255,255,255,.045),transparent .06rem),
        linear-gradient(90deg,rgba(255,0,0,.035),transparent 9%,rgba(0,255,255,.025) 92%,transparent);
    background-size:auto,3px 3px,4px 4px,5px 5px,100% 100%;
    mix-blend-mode:screen;
    opacity:.34;
    animation:mouth-tape-drift 6.5s steps(5,end) infinite;
    pointer-events:none;
}

.mouth-canvas{
    position:relative;
    z-index:1;
    height:100svh;
    padding:clamp(1.4rem,4vw,3.5rem);
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-template-rows:repeat(12,minmax(0,1fr));
    gap:clamp(1rem,2vw,2rem);
}

.mouth-image{
    position:fixed;
    inset:0;
    z-index:0;
    width:100vw;
    height:100svh;
    margin:0;
    opacity:.94;
    overflow:hidden;
    filter:saturate(.84) contrast(1.1) brightness(.85) blur(.45px);
    animation:mouth-room-luminance 13s ease-in-out infinite alternate;
}

.mouth-image::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 50.3% 15.2%,rgba(255,219,142,.32),transparent .18rem),
        radial-gradient(circle at 51.6% 18.8%,rgba(255,219,142,.24),transparent .16rem),
        radial-gradient(circle at 48.4% 21.4%,rgba(255,219,142,.18),transparent .14rem),
        radial-gradient(circle at 54.2% 24.6%,rgba(255,219,142,.16),transparent .12rem),
        radial-gradient(circle at 40.6% 26.2%,rgba(255,232,172,.16),transparent .11rem),
        radial-gradient(circle at 67.3% 24.2%,rgba(255,232,172,.14),transparent .1rem),
        radial-gradient(circle at 84% 25%,rgba(255,202,125,.2),transparent 1.65rem),
        radial-gradient(circle at 17% 32%,rgba(255,202,125,.16),transparent 1.7rem);
    mix-blend-mode:screen;
    opacity:.24;
    animation:
        mouth-skyline-flicker 7.25s steps(1,end) infinite,
        mouth-candle-glint 2.6s steps(1,end) infinite;
    pointer-events:none;
}

.mouth-image::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:
        radial-gradient(circle at 50% 18%,rgba(255,222,150,.12),transparent 8.5rem),
        linear-gradient(90deg,rgba(5,3,2,.6),rgba(5,3,2,.08) 40%,rgba(5,3,2,.3)),
        linear-gradient(0deg,rgba(5,3,2,.54),transparent 38%,rgba(5,3,2,.24)),
        linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.06) 36%,rgba(0,0,0,.42));
}

.mouth-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
}

.mouth-nav,
.mouth-header,
.mouth-dialogue,
.mouth-timecode{
    position:relative;
    z-index:4;
}

.mouth-nav{
    grid-column:1 / 13;
    grid-row:1;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    font-family:var(--sans);
    font-size:.64rem;
    font-weight:700;
    letter-spacing:.14em;
    line-height:1;
    text-transform:uppercase;
}

.mouth-nav a{
    color:#efe4cf;
    cursor:var(--mask-cursor),pointer;
    opacity:.72;
    text-decoration:none;
}

.mouth-header{
    grid-column:2 / 10;
    grid-row:2 / 5;
    align-self:end;
}

.mouth-header p{
    margin-bottom:.75rem;
    color:#b08a55;
    font-family:var(--sans);
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.18em;
    line-height:1;
}

.mouth-header h1{
    font-size:clamp(2.65rem,7.45vw,6.25rem);
    font-weight:600;
    letter-spacing:-.045em;
    line-height:.78;
    text-transform:uppercase;
}

.mouth-dialogue{
    grid-column:2 / 6;
    grid-row:9 / 12;
    align-self:start;
    margin:0;
}

.mouth-dialogue blockquote{
    margin:0;
    color:rgba(239,228,207,.76);
    font-size:clamp(.9rem,1.15vw,1.08rem);
    font-style:italic;
    font-weight:500;
    letter-spacing:.035em;
    line-height:1.45;
}

.mouth-dialogue span{
    display:block;
    opacity:0;
    animation:mouth-dialogue-reveal .44s ease-out forwards;
}

.mouth-dialogue span:nth-child(1){
    animation-delay:.8s;
}

.mouth-dialogue span:nth-child(2){
    animation-delay:2.45s;
}

.mouth-dialogue span:nth-child(3){
    animation-delay:4.1s;
}

.mouth-timecode{
    grid-column:10 / 13;
    grid-row:12;
    align-self:end;
    justify-self:end;
    margin:0;
    color:#efe4cf;
    font-family:var(--sans);
    font-size:.58rem;
    font-weight:700;
    letter-spacing:.16em;
    line-height:1;
    opacity:.42;
    text-shadow:0 0 .4rem rgba(239,228,207,.18);
    animation:mouth-timecode-waver 5s steps(1,end) infinite;
}

@media (hover:hover){
    .mouth-nav a:hover{
        opacity:1;
    }
}

@media (max-width:760px){
    .mouth-page{
        min-height:100svh;
        overflow:hidden;
    }

    .mouth-canvas{
        height:100svh;
        min-height:100svh;
        display:grid;
        grid-template-columns:repeat(6,minmax(0,1fr));
        grid-template-rows:repeat(12,minmax(0,1fr));
        padding:1.35rem;
    }

    .mouth-image{
        position:fixed;
        inset:0;
        width:100vw;
        height:100svh;
        margin:0;
        opacity:.84;
        filter:saturate(.82) contrast(1.08) brightness(.83) blur(.4px);
    }

    .mouth-image::after{
        background:
            radial-gradient(circle at 52% 22%,rgba(255,222,150,.1),transparent 8.25rem),
            linear-gradient(90deg,rgba(5,3,2,.64),rgba(5,3,2,.16) 54%,rgba(5,3,2,.52)),
            linear-gradient(0deg,rgba(5,3,2,.6),transparent 46%,rgba(5,3,2,.28));
    }

    .mouth-image img{
        object-position:52% center;
    }

    .mouth-nav{
        grid-column:1 / 7;
        grid-row:1;
        margin-bottom:0;
    }

    .mouth-header{
        grid-column:1 / 7;
        grid-row:3 / 6;
        align-self:end;
        margin-bottom:0;
    }

    .mouth-header h1{
        font-size:clamp(3rem,14.25vw,5.15rem);
    }

    .mouth-dialogue{
        grid-column:1 / 6;
        grid-row:9 / 11;
        align-self:start;
    }

    .mouth-dialogue blockquote{
        font-size:clamp(.86rem,3.6vw,1.02rem);
        line-height:1.48;
    }

    .mouth-timecode{
        grid-column:4 / 7;
        grid-row:12;
        font-size:.54rem;
        opacity:.34;
    }

}

@keyframes mouth-candle-breathe{
    0%,
    100%{
        opacity:.58;
    }

    12%{
        opacity:.7;
    }

    14%{
        opacity:.54;
    }

    28%,
    44%{
        opacity:.66;
    }

    47%{
        opacity:.5;
    }

    51%,
    74%{
        opacity:.72;
    }

    77%{
        opacity:.6;
    }
}

@keyframes mouth-room-luminance{
    0%{
        opacity:.93;
    }

    45%{
        opacity:.96;
    }

    63%{
        opacity:.94;
    }

    100%{
        opacity:.97;
    }
}

@keyframes mouth-skyline-flicker{
    0%,
    19%,
    31%,
    58%,
    100%{
        opacity:.22;
    }

    20%{
        opacity:.36;
    }

    22%{
        opacity:.16;
    }

    33%,
    35%{
        opacity:.3;
    }

    60%{
        opacity:.4;
    }

    61%{
        opacity:.18;
    }
}

@keyframes mouth-candle-glint{
    0%,
    100%{
        filter:brightness(1);
    }

    18%{
        filter:brightness(1.12);
    }

    21%{
        filter:brightness(.96);
    }

    49%{
        filter:brightness(1.08);
    }

    51%{
        filter:brightness(1.16);
    }

    54%{
        filter:brightness(1);
    }
}

@keyframes mouth-dialogue-reveal{
    from{
        opacity:0;
        transform:translateY(.18rem);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes mouth-tape-drift{
    0%{
        transform:translate3d(0,0,0);
        opacity:.28;
    }

    28%{
        transform:translate3d(.14rem,-.08rem,0);
        opacity:.36;
    }

    53%{
        transform:translate3d(-.1rem,.12rem,0);
        opacity:.31;
    }

    74%{
        transform:translate3d(.08rem,.04rem,0);
        opacity:.4;
    }

    100%{
        transform:translate3d(0,0,0);
        opacity:.32;
    }
}

@keyframes mouth-timecode-waver{
    0%,
    38%,
    42%,
    100%{
        opacity:.42;
        transform:translateX(0);
    }

    39%{
        opacity:.18;
        transform:translateX(-1px);
    }

    41%{
        opacity:.5;
        transform:translateX(1px);
    }
}

/* Slay of the Dead */

.slay-page{
    min-height:100svh;
    overflow:hidden;
    cursor:var(--lipstick-cursor),auto;
    background:#020104;
    color:#fff5e8;
    font-family:var(--serif);
}

.slay-page::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 50% 50%,rgba(255,222,231,.2),transparent 13rem),
        radial-gradient(circle at 50% 50%,rgba(255,34,135,.16),transparent 24rem),
        radial-gradient(circle at 18% 18%,rgba(255,255,255,.04),transparent 14rem),
        radial-gradient(circle at 82% 84%,rgba(255,46,147,.11),transparent 18rem),
        linear-gradient(135deg,rgba(13,5,16,.94),rgba(2,1,4,.86) 48%,rgba(8,2,8,.96));
    pointer-events:none;
}

.slay-page::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:1;
    background:
        radial-gradient(circle at 50% 50%,transparent 0 17rem,rgba(255,255,255,.08) 17.05rem 17.12rem,transparent 17.2rem),
        radial-gradient(circle at 50% 50%,transparent 0 28rem,rgba(255,75,154,.08) 28.05rem 28.12rem,transparent 28.2rem);
    opacity:.34;
    pointer-events:none;
}

.slay-canvas{
    position:relative;
    z-index:2;
    height:100svh;
    padding:clamp(1.35rem,4vw,3.6rem);
    overflow:hidden;
}

.slay-image{
    position:fixed;
    inset:0;
    z-index:0;
    width:100vw;
    height:100svh;
    margin:0;
    overflow:hidden;
    opacity:.18;
    filter:saturate(.7) contrast(1.15) brightness(.42) blur(.4px);
    mix-blend-mode:screen;
}

.slay-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
}

.slay-nav,
.slay-header{
    position:relative;
    z-index:8;
}

.slay-nav{
    position:absolute;
    top:clamp(1.25rem,3.2vw,2.9rem);
    left:clamp(1.25rem,3.2vw,2.9rem);
    right:clamp(1.25rem,3.2vw,2.9rem);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:1rem;
    font-family:var(--sans);
    font-size:.64rem;
    font-weight:800;
    letter-spacing:.14em;
    line-height:1;
    text-transform:uppercase;
}

.slay-nav a{
    color:#fff5e8;
    cursor:var(--lipstick-cursor),pointer;
    opacity:.72;
    text-decoration:none;
}

.slay-system{
    position:absolute;
    left:50%;
    top:50%;
    z-index:4;
    width:min(82vw,52rem);
    aspect-ratio:1;
    transform:translate(-50%,-50%);
}

.ton618{
    position:absolute;
    inset:10%;
    z-index:4;
    border-radius:50%;
    background:
        radial-gradient(circle at 50% 50%,#000 0 54%,rgba(0,0,0,.98) 58%,rgba(18,4,18,.78) 63%,rgba(255,220,225,.18) 65%,transparent 67%),
        conic-gradient(from 224deg,rgba(255,238,230,.02),rgba(255,207,218,.38),rgba(255,67,157,.1),rgba(255,245,232,.44),rgba(32,6,26,.06),rgba(255,207,218,.2),rgba(255,238,230,.02));
    box-shadow:
        0 0 1rem rgba(255,238,230,.18),
        0 0 7rem rgba(255,38,139,.18),
        0 0 20rem rgba(0,0,0,.88);
    transform:rotate(-15deg) scaleX(1.12);
}

.ton618::before,
.ton618::after,
.slay-horizon{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.ton618::before{
    inset:7%;
    background:#000;
    box-shadow:
        inset 0 0 3rem rgba(255,255,255,.03),
        0 0 4rem rgba(0,0,0,.95);
}

.ton618::after{
    inset:-11%;
    background:
        conic-gradient(from 128deg,transparent 0 9%,rgba(255,245,232,.45) 13%,rgba(255,75,154,.18) 19%,transparent 31%,rgba(255,230,230,.38) 45%,transparent 55%,rgba(255,75,154,.24) 70%,transparent 86%);
    -webkit-mask:radial-gradient(circle,transparent 0 59%,#000 61% 69%,transparent 71%);
    mask:radial-gradient(circle,transparent 0 59%,#000 61% 69%,transparent 71%);
    filter:blur(.7px);
    opacity:.78;
}

.slay-horizon{
    inset:-18%;
    background:
        conic-gradient(from 132deg,transparent 0 11%,rgba(255,248,235,.24) 16%,rgba(255,45,145,.14) 24%,transparent 35%,rgba(255,222,231,.18) 48%,transparent 62%,rgba(255,72,158,.16) 75%,transparent 88%);
    -webkit-mask:radial-gradient(circle,transparent 0 62%,#000 64% 72%,transparent 74%);
    mask:radial-gradient(circle,transparent 0 62%,#000 64% 72%,transparent 74%);
    opacity:.66;
    filter:blur(1px);
    animation:slay-horizon-turn 28s linear infinite;
}

.slay-header{
    position:absolute;
    left:50%;
    top:50%;
    z-index:6;
    width:min(58vw,30rem);
    text-align:center;
    transform:translate(-50%,-50%) rotate(-8deg);
    mix-blend-mode:screen;
}

.slay-header h1{
    max-width:none;
    font-family:var(--condensed);
    font-size:clamp(4.25rem,9.3vw,9rem);
    font-stretch:condensed;
    font-weight:900;
    letter-spacing:0;
    line-height:.7;
    opacity:.94;
    text-shadow:
        0 0 .5rem rgba(255,244,232,.3),
        0 0 2rem rgba(255,50,145,.28),
        .45rem .1rem 1.8rem rgba(0,0,0,.88);
    text-transform:uppercase;
}

.slay-header h1 span{
    display:block;
    margin-top:.08em;
    color:#ff4b9a;
    font-size:.22em;
    letter-spacing:0;
    line-height:1;
}

.slay-orbit{
    position:absolute;
    inset:0;
    z-index:5;
    border-radius:50%;
}

.fragment{
    --x:50%;
    --y:50%;
    --pull:0deg;
    --scale:1;
    --blur:0;
    position:absolute;
    left:var(--x);
    top:var(--y);
    display:block;
    color:#fff5e8;
    opacity:var(--o,.78);
    filter:blur(var(--blur));
    transform:translate(-50%,-50%) rotate(var(--pull)) scale(var(--scale));
    transform-origin:center;
}

.fragment::before{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    z-index:-1;
    width:clamp(2rem,8vw,7rem);
    height:1px;
    background:linear-gradient(90deg,rgba(255,74,156,.24),transparent);
    transform:translateY(-50%) rotate(180deg);
    transform-origin:left center;
}

.fragment-sign{
    color:#ff4b9a;
    font-family:var(--sans);
    font-size:.82rem;
    font-weight:900;
    letter-spacing:.18em;
    line-height:.9;
    text-align:center;
    text-transform:uppercase;
    text-shadow:0 0 .7rem rgba(255,56,143,.8);
}

.fragment-sign-pink{
    --x:14%;
    --y:42%;
    --pull:18deg;
    --scale:1.04;
}

.fragment-sign-pony{
    --x:20%;
    --y:50%;
    --pull:24deg;
    --scale:.74;
}

.fragment-sign-club{
    --x:11%;
    --y:57%;
    --pull:8deg;
    --scale:.5;
    --blur:.3px;
}

.fragment-wig{
    --x:24%;
    --y:74%;
    --pull:-34deg;
    --scale:1.1;
    width:5rem;
    height:3.6rem;
    border-radius:54% 48% 46% 50%;
    background:
        radial-gradient(ellipse at 34% 32%,rgba(255,246,240,.86),transparent 38%),
        radial-gradient(ellipse at 62% 24%,rgba(210,200,196,.76),transparent 34%),
        radial-gradient(ellipse at 46% 78%,rgba(118,108,108,.72),transparent 48%),
        repeating-linear-gradient(102deg,rgba(255,245,238,.78) 0 .08rem,rgba(105,96,96,.48) .08rem .16rem,transparent .16rem .34rem);
    opacity:.7;
    box-shadow:0 0 1rem rgba(255,245,238,.08);
}

.fragment-wig::after{
    content:"";
    position:absolute;
    left:9%;
    right:8%;
    bottom:-.55rem;
    height:1.7rem;
    border-radius:0 0 50% 50%;
    background:repeating-linear-gradient(112deg,rgba(255,245,238,.55) 0 .07rem,transparent .07rem .28rem);
    transform:skewX(-12deg);
}

.fragment-kit{
    --x:73%;
    --y:78%;
    --pull:-135deg;
    --scale:.82;
    width:5rem;
    height:3.1rem;
    border:1px solid rgba(255,245,232,.66);
    border-radius:.22rem;
    transform:translate(-50%,-50%) rotate(var(--pull)) perspective(8rem) rotateX(48deg) scale(var(--scale));
}

.fragment-kit::after{
    content:"";
    position:absolute;
    inset:.55rem;
    border-top:1px solid rgba(255,75,154,.82);
    border-bottom:1px solid rgba(255,75,154,.32);
}

.fragment-lipstick{
    --x:41%;
    --y:82%;
    --pull:-72deg;
    --scale:.88;
    width:.72rem;
    height:4rem;
    border-radius:.2rem;
    background:linear-gradient(#ff2d83 0 35%,#f4dfd2 35% 48%,#151015 48%);
}

.fragment-lash{
    --x:87%;
    --y:56%;
    --pull:-166deg;
    --scale:.8;
    width:5.2rem;
    height:1.8rem;
    border-top:.18rem solid rgba(255,245,232,.76);
    border-radius:50%;
}

.fragment-lash::after{
    content:"";
    position:absolute;
    inset:-.2rem .4rem auto;
    height:1.2rem;
    background:repeating-linear-gradient(100deg,transparent 0 .42rem,rgba(255,245,232,.68) .42rem .48rem,transparent .48rem .74rem);
}

.fragment-ornament{
    --x:59%;
    --y:8%;
    --pull:103deg;
    --scale:.58;
    width:2.2rem;
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle at 34% 26%,#fff5e8,#ff4b9a 38%,#260315 72%);
    box-shadow:0 0 1rem rgba(255,75,154,.44);
}

.fragment-tinsel{
    --x:34%;
    --y:15%;
    --pull:62deg;
    --scale:1.18;
    width:7.4rem;
    height:.45rem;
    background:repeating-linear-gradient(90deg,#fff5e8 0 .18rem,#ff4b9a .18rem .34rem,transparent .34rem .56rem);
    opacity:.46;
}

.fragment-glass{
    --x:19%;
    --y:78%;
    --pull:-31deg;
    --scale:.76;
    width:2.1rem;
    height:4.1rem;
    border:.12rem solid rgba(255,245,232,.65);
    border-top:none;
    clip-path:polygon(24% 0,76% 0,62% 60%,54% 60%,54% 92%,78% 92%,78% 100%,22% 100%,22% 92%,46% 92%,46% 60%,38% 60%);
}

.fragment-hat{
    --x:17%;
    --y:69%;
    --pull:-18deg;
    --scale:.84;
    width:5rem;
    height:2.2rem;
    border:.16rem solid rgba(255,245,232,.68);
    border-top:none;
    border-radius:0 0 50% 50%;
}

.fragment-hat::after{
    content:"";
    position:absolute;
    left:-.55rem;
    right:-.55rem;
    bottom:-.25rem;
    height:.32rem;
    background:rgba(255,75,154,.72);
    border-radius:50%;
}

.fragment-zombie{
    --scale:.76;
    width:4.8rem;
    height:1.35rem;
    border-top:.28rem solid rgba(173,191,160,.74);
    border-radius:50%;
    box-shadow:1.35rem .38rem 0 -.48rem rgba(173,191,160,.54);
}

.fragment-zombie::after{
    content:"";
    position:absolute;
    right:-1.05rem;
    top:-.62rem;
    width:1.55rem;
    height:1.35rem;
    border-radius:50% 44% 42% 50%;
    background:rgba(173,191,160,.66);
    box-shadow:
        -.62rem .65rem 0 -.4rem rgba(173,191,160,.76),
        .22rem .18rem 0 -.16rem rgba(16,38,18,.88);
}

.fragment-zombie-one{
    --x:86%;
    --y:57%;
    --pull:-164deg;
    --scale:.92;
}

.fragment-zombie-two{
    --x:39%;
    --y:13%;
    --pull:76deg;
    --scale:.52;
    --blur:.45px;
    opacity:.5;
}

.fragment-pussy-wagon{
    --x:12%;
    --y:25%;
    --pull:31deg;
    --scale:.7;
    width:8.3rem;
    height:2.2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2a050f;
    font-family:var(--sans);
    font-size:.52rem;
    font-weight:900;
    letter-spacing:.16em;
    text-transform:uppercase;
    background:#ffd91f;
    border-radius:1.2rem .45rem .45rem 1.2rem;
    box-shadow:
        inset 0 -.28rem 0 rgba(0,0,0,.22),
        0 0 1.4rem rgba(255,217,31,.3);
}

@media (hover:hover){
    .slay-nav a:hover{
        opacity:1;
    }
}

@media (max-width:760px){
    .slay-page{
        overflow:hidden;
    }

    .slay-page::before{
        background:
            radial-gradient(circle at 50% 49%,rgba(255,222,231,.2),transparent 10rem),
            radial-gradient(circle at 50% 49%,rgba(255,34,135,.14),transparent 17rem),
            linear-gradient(135deg,rgba(13,5,16,.94),rgba(2,1,4,.92) 52%,rgba(8,2,8,.98));
    }

    .slay-page::after{
        opacity:.12;
    }

    .slay-canvas{
        height:100svh;
        padding:1.35rem;
    }

    .slay-image{
        position:fixed;
        opacity:.82;
    }

    .slay-image img{
        object-position:center center;
    }

    .slay-nav{
        top:1.35rem;
        left:1.35rem;
        right:1.35rem;
    }

    .slay-system{
        width:min(112vw,32rem);
        top:50%;
    }

    .slay-header h1{
        font-size:clamp(3.05rem,16vw,5.4rem);
    }

    .fragment{
        --scale:calc(var(--scale) * .78);
    }

    .fragment-sign,
    .fragment-zombie,
    .fragment-kit{
        opacity:.42;
    }
}

@keyframes slay-horizon-turn{
    to{
        transform:rotate(360deg);
    }
}

/* Slay of the Dead - finished artwork presentation */

.slay-page{
    background:#02030a;
}

.slay-page::before{
    background-image:url("assets/slay-hero-reference-v2.png");
    background-position:center bottom;
    background-repeat:no-repeat;
    background-size:cover;
    opacity:1;
}

.slay-page::after{
    display:none;
}

.slay-canvas{
    height:100svh;
    padding:clamp(1.35rem,4vw,3.8rem);
    background:none;
}

.slay-nebula-energy{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:
        radial-gradient(ellipse at 35% 23%,rgba(255,112,35,.09),rgba(255,112,35,.045) 16%,transparent 34%),
        radial-gradient(ellipse at 24% 62%,rgba(255,139,45,.075),rgba(255,139,45,.035) 14%,transparent 31%),
        radial-gradient(ellipse at 75% 27%,rgba(74,166,255,.07),rgba(74,166,255,.035) 17%,transparent 36%),
        radial-gradient(ellipse at 66% 44%,rgba(96,182,255,.052),rgba(96,182,255,.026) 12%,transparent 28%);
    filter:blur(1rem);
    mix-blend-mode:screen;
    opacity:.18;
    transform:translate3d(0,0,0) scale(1);
    animation:slay-nebula-current 10.5s ease-in-out infinite;
}

.slay-nebula-map{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    overflow:visible;
}

.slay-current{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-width:.38;
    stroke-dasharray:7 15;
    stroke-dashoffset:34;
    opacity:.7;
    filter:blur(.045rem);
    animation:slay-current-travel 10.5s ease-in-out infinite;
}

.slay-current-orange{
    stroke:rgba(255,142,50,.95);
}

.slay-current-blue{
    stroke:rgba(103,193,255,.92);
}

.slay-current-two{
    animation-duration:38s;
    animation-delay:-13s;
    opacity:.3;
}

.slay-current-three{
    animation-duration:36s;
    animation-delay:-8s;
    opacity:.34;
}

.slay-current-four{
    animation-duration:41s;
    animation-delay:-19s;
    opacity:.25;
}

.slay-current-title{
    stroke-width:.48;
    stroke-dasharray:8 15;
    opacity:.82;
    filter:blur(.025rem);
    animation:slay-current-to-title 10.5s ease-in-out infinite;
}

.slay-current-title-left{
    animation-delay:-1.2s;
}

.slay-current-title-right{
    animation-delay:-3.4s;
}

.slay-title-charge{
    position:absolute;
    left:50%;
    top:45.2%;
    z-index:4;
    width:min(38rem,45vw);
    height:min(13rem,16vw);
    border-radius:50%;
    background:
        radial-gradient(ellipse at 40% 45%,rgba(255,143,49,.22),transparent 42%),
        radial-gradient(ellipse at 61% 42%,rgba(88,172,255,.22),transparent 45%),
        radial-gradient(ellipse at 50% 51%,rgba(255,255,236,.2),transparent 54%);
    filter:blur(.52rem);
    mix-blend-mode:screen;
    opacity:.16;
    pointer-events:none;
    transform:translate(-50%,-50%) scale(.96);
    animation:slay-title-anoint 10.5s ease-in-out infinite;
}

.slay-energy-descent{
    position:absolute;
    left:50%;
    top:53%;
    z-index:4;
    width:.26rem;
    height:38%;
    border-radius:999px;
    background:linear-gradient(
        to bottom,
        rgba(255,236,190,0),
        rgba(255,236,190,.72) 16%,
        rgba(255,80,176,.42) 68%,
        rgba(255,73,173,0)
    );
    box-shadow:
        0 0 .72rem rgba(255,230,181,.62),
        0 0 1.8rem rgba(255,78,175,.36);
    filter:blur(.04rem);
    mix-blend-mode:screen;
    opacity:0;
    pointer-events:none;
    transform:translateX(-50%) scaleY(.18);
    transform-origin:top center;
    animation:slay-energy-descent 10.5s ease-in-out infinite;
}

.slay-horizon-whisper{
    position:absolute;
    left:50%;
    top:92.4%;
    z-index:5;
    width:clamp(8rem,11vw,11.25rem);
    height:clamp(2.1rem,3.2vw,3.3rem);
    opacity:.74;
    pointer-events:none;
    transform:translate(-50%,-50%);
}

.slay-neon-breath{
    position:absolute;
    left:50%;
    top:34%;
    width:50%;
    height:.52rem;
    border-radius:999px;
    background:rgba(255,73,173,.25);
    box-shadow:
        0 0 .38rem rgba(255,73,173,.76),
        0 0 1.15rem rgba(255,73,173,.48),
        0 0 2.15rem rgba(255,73,173,.26);
    mix-blend-mode:screen;
    opacity:.68;
    transform:translate(-50%,-50%);
    animation:slay-neon-breath 10.5s steps(1,end) infinite;
}

.slay-star-pulse{
    position:absolute;
    inset:0;
    z-index:5;
    pointer-events:none;
}

.slay-star{
    --x:50%;
    --y:30%;
    --s:1;
    --delay:0s;
    --star-color:255,246,221;
    --star-glow:255,166,87;
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:.62rem;
    height:.62rem;
    border-radius:50%;
    background:rgba(var(--star-color),.82);
    box-shadow:
        0 0 .5rem rgba(var(--star-color),.52),
        0 0 1.4rem rgba(var(--star-glow),.26),
        0 0 2.4rem rgba(var(--star-glow),.12);
    mix-blend-mode:screen;
    opacity:.54;
    transform:translate(-50%,-50%) scale(var(--s));
    animation:slay-star-faint var(--cycle,16s) ease-in-out var(--delay) infinite;
}

.slay-star::before,
.slay-star::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:360%;
    height:.045rem;
    border-radius:999px;
    background:rgba(var(--star-color),.32);
    transform:translate(-50%,-50%);
}

.slay-star::after{
    width:.045rem;
    height:360%;
}

.slay-star-one{
    --x:22.4%;
    --y:66.8%;
    --s:1.05;
    --delay:-4s;
    --cycle:15s;
    --star-color:255,246,221;
    --star-glow:255,146,55;
}

.slay-star-two{
    --x:75.1%;
    --y:6.7%;
    --s:.72;
    --delay:-9s;
    --cycle:19s;
    --star-color:166,215,255;
    --star-glow:45,136,255;
}

.slay-zombie{
    --x:50%;
    --y:80%;
    --s:1;
    --arm:.04turn;
    position:absolute;
    left:var(--x);
    top:var(--y);
    width:.24rem;
    height:.58rem;
    border-radius:45% 45% 18% 18%;
    background:rgba(2,4,4,.78);
    box-shadow:0 0 .18rem rgba(255,44,148,.035);
    opacity:.18;
    transform:translate(-50%,-50%) scale(var(--s));
}

.slay-zombie::before{
    content:"";
    position:absolute;
    left:50%;
    top:-.17rem;
    width:.2rem;
    height:.2rem;
    border-radius:50%;
    background:rgba(2,4,4,.74);
    transform:translateX(-50%);
}

.slay-zombie::after{
    content:"";
    position:absolute;
    left:-.23rem;
    top:.15rem;
    width:.62rem;
    height:.045rem;
    background:rgba(2,4,4,.58);
    transform:rotate(var(--arm));
    transform-origin:80% center;
}

.slay-zombie-one{
    --x:7%;
    --y:76%;
    --s:.85;
    --arm:.03turn;
}

.slay-zombie-two{
    --x:22%;
    --y:86%;
    --s:.68;
    --arm:-.08turn;
    opacity:.13;
}

.slay-zombie-three{
    --x:78%;
    --y:84%;
    --s:.74;
    --arm:.47turn;
    opacity:.15;
}

.slay-zombie-four{
    --x:94%;
    --y:74%;
    --s:.9;
    --arm:.54turn;
}

@keyframes slay-neon-breath{
    0%,
    100%{
        opacity:.48;
        box-shadow:
            0 0 .32rem rgba(255,73,173,.68),
            0 0 1rem rgba(255,73,173,.38),
            0 0 1.9rem rgba(255,73,173,.2);
    }

    18%{
        opacity:.44;
    }

    41%{
        opacity:.55;
    }

    52%{
        opacity:1;
        box-shadow:
            0 0 .58rem rgba(255,73,173,1),
            0 0 1.75rem rgba(255,73,173,.78),
            0 0 3.4rem rgba(255,73,173,.46);
    }

    54%{
        opacity:.26;
        box-shadow:
            0 0 .12rem rgba(255,73,173,.28),
            0 0 .35rem rgba(255,73,173,.14),
            0 0 .72rem rgba(255,73,173,.07);
    }

    55%{
        opacity:.96;
        box-shadow:
            0 0 .5rem rgba(255,73,173,.94),
            0 0 1.45rem rgba(255,73,173,.66),
            0 0 2.8rem rgba(255,73,173,.36);
    }

    57%{
        opacity:.36;
    }

    59%{
        opacity:.74;
    }

    70%{
        opacity:.48;
    }

    73%{
        opacity:.25;
    }

    74%{
        opacity:.5;
    }
}

@keyframes slay-star-faint{
    0%,
    100%{
        opacity:.42;
        box-shadow:
            0 0 .42rem rgba(var(--star-color),.42),
            0 0 1.2rem rgba(var(--star-glow),.22),
            0 0 2.2rem rgba(var(--star-glow),.1);
        transform:translate(-50%,-50%) scale(var(--s));
    }

    38%{
        opacity:.58;
        box-shadow:
            0 0 .62rem rgba(var(--star-color),.56),
            0 0 1.55rem rgba(var(--star-glow),.3),
            0 0 2.8rem rgba(var(--star-glow),.14);
    }

    49%{
        opacity:.78;
        box-shadow:
            0 0 .8rem rgba(var(--star-color),.7),
            0 0 2rem rgba(var(--star-glow),.4),
            0 0 3.4rem rgba(var(--star-glow),.22);
        transform:translate(-50%,-50%) scale(calc(var(--s) * 1.18));
    }

    61%{
        opacity:.5;
        box-shadow:
            0 0 .54rem rgba(var(--star-color),.48),
            0 0 1.35rem rgba(var(--star-glow),.24),
            0 0 2.5rem rgba(var(--star-glow),.12);
        transform:translate(-50%,-50%) scale(calc(var(--s) * 1.05));
    }

    82%{
        opacity:.44;
    }
}

@keyframes slay-nebula-current{
    0%,
    100%{
        opacity:.1;
        transform:translate3d(0,0,0) scale(1);
        filter:blur(1.25rem);
    }

    35%{
        opacity:.24;
        transform:translate3d(.55rem,-.38rem,0) scale(1.018);
        filter:blur(.82rem);
    }

    48%{
        opacity:.2;
    }

    64%{
        opacity:.12;
        transform:translate3d(-.32rem,.22rem,0) scale(1.006);
        filter:blur(1.35rem);
    }
}

@keyframes slay-current-travel{
    0%,
    100%{
        stroke-dashoffset:34;
        opacity:.2;
    }

    28%{
        stroke-dashoffset:15;
        opacity:.78;
    }

    42%{
        stroke-dashoffset:-4;
        opacity:1;
    }

    68%{
        stroke-dashoffset:-22;
        opacity:.34;
    }
}

@keyframes slay-current-to-title{
    0%,
    100%{
        stroke-dashoffset:42;
        opacity:.12;
    }

    18%{
        opacity:.42;
    }

    35%{
        stroke-dashoffset:8;
        opacity:.95;
    }

    45%{
        stroke-dashoffset:-12;
        opacity:1;
    }

    58%{
        stroke-dashoffset:-32;
        opacity:.28;
    }
}

@keyframes slay-title-anoint{
    0%,
    100%{
        opacity:.08;
        transform:translate(-50%,-50%) scale(.96);
    }

    30%{
        opacity:.24;
    }

    43%{
        opacity:.72;
        transform:translate(-50%,-50%) scale(1.08);
    }

    51%{
        opacity:.5;
    }

    62%{
        opacity:.14;
        transform:translate(-50%,-50%) scale(1);
    }
}

@keyframes slay-energy-descent{
    0%,
    100%{
        opacity:0;
        transform:translateX(-50%) scaleY(.08);
    }

    41%{
        opacity:0;
        transform:translateX(-50%) scaleY(.08);
    }

    48%{
        opacity:.64;
        transform:translateX(-50%) scaleY(.62);
    }

    53%{
        opacity:1;
        transform:translateX(-50%) scaleY(1);
    }

    60%{
        opacity:.28;
        transform:translateX(-50%) scaleY(.86);
    }

    67%{
        opacity:0;
        transform:translateX(-50%) scaleY(.12);
    }
}

@keyframes slay-cosmic-breath{
    0%,
    100%{
        opacity:.045;
        transform:translate3d(0,0,0) scale(1);
    }

    44%{
        opacity:.11;
    }

    63%{
        opacity:.065;
        transform:translate3d(.28rem,-.16rem,0) scale(1.012);
    }
}

@media (max-width:760px){
    .slay-canvas{
        padding:1.35rem;
    }

    .slay-horizon-whisper{
        top:92.4%;
        width:clamp(5.75rem,22vw,7.25rem);
    }
}

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        transition:none !important;
        animation:none !important;
    }

    .mouth-dialogue span{
        opacity:1;
        transform:none;
    }

    .slay-nebula-energy,
    .slay-current,
    .slay-neon-breath,
    .slay-star{
        transition:none !important;
    }

    .slay-nebula-energy{
        animation:slay-nebula-current 18s ease-in-out infinite !important;
    }

    .slay-current{
        animation:slay-current-travel 18s ease-in-out infinite !important;
    }

    .slay-current-title{
        animation:slay-current-to-title 18s ease-in-out infinite !important;
    }

    .slay-title-charge{
        animation:slay-title-anoint 18s ease-in-out infinite !important;
    }

    .slay-energy-descent{
        animation:slay-energy-descent 18s ease-in-out infinite !important;
    }

    .slay-neon-breath{
        animation:slay-neon-breath 18s steps(1,end) infinite !important;
    }

    .slay-star{
        animation:slay-star-faint var(--cycle,16s) ease-in-out var(--delay) infinite !important;
    }
}

@media (max-width:700px){
    .project-phantasmagoria .page{
        width:100%;
        margin:0;
        padding:1.35rem;
    }

    .project-phantasmagoria footer{
        align-items:flex-start;
        flex-direction:column;
        gap:.75rem;
    }

    .project-phantasmagoria footer nav{
        justify-content:flex-start;
    }
}