@font-face {

    font-family: "Helvetica Neue Condensed Bold";



    src:

        url("/HelveticaNeueCondensedBold.ttf")

        format("truetype");



    font-weight:

        bold;



    font-style:

        normal;

}





:root {

    --pink:

        #F3AEBE;



    --blue:

        #9CBAD0;



    --brown:

        #23110A;



    --white:

        #FFFFFF;



    --page-edge:

        clamp(24px, 4vw, 64px);



    --masthead-height:

        122px;



    --footer-height:

        58px;



    --cursor:

        url("/cursors/angel%20wings%20by%20Pi-House/01.cur");

}





* {

    box-sizing:

        border-box;

}





html {

    background:

        var(--white);

}





html,

body {

    margin:

        0;



    padding:

        0;



    width:

        100%;



    min-height:

        100%;

}





body {

    padding-bottom:

        var(--footer-height);



    overflow-x:

        hidden;



    background:

        var(--white);



    color:

        var(--pink);



    font-family:

        "Helvetica Neue Condensed Bold",

        "Arial Narrow",

        Arial,

        sans-serif;



    cursor:

        var(--cursor),

        auto;

}





a,

button {

    cursor:

        var(--cursor),

        pointer;

}





button {

    font-family:

        inherit;

}





nav,

.characters-kicker,

.intro-aside p,

.character-file,

.character-hover-copy,

.father-status,

.audio-widget,

footer {

    font-family:

        "OCR A Std",

        "OCR A",

        monospace;

}





.page-fade {

    position:

        fixed;



    inset:

        0;



    z-index:

        10000;



    background:

        var(--white);



    pointer-events:

        none;



    animation:

        pageReveal

        1.15s

        cubic-bezier(.22, 1, .36, 1)

        120ms

        forwards;

}





.page-transition {

    position:

        fixed;



    inset:

        0;



    z-index:

        20000;



    background:

        var(--white);



    opacity:

        0;



    pointer-events:

        none;



    transition:

        opacity

        520ms

        cubic-bezier(.22, 1, .36, 1);

}





body.is-leaving

.page-transition {

    opacity:

        1;



    pointer-events:

        all;

}





@keyframes pageReveal {



    from {

        opacity:

            1;

    }



    to {

        opacity:

            0;

    }



}





.site-header {

    position:

        fixed;



    z-index:

        5000;



    top:

        0;



    left:

        0;



    width:

        100%;



    height:

        var(--masthead-height);



    display:

        flex;



    align-items:

        center;



    justify-content:

        space-between;



    gap:

        clamp(28px, 4vw, 70px);



    padding:

        15px

        var(--page-edge);



    background:

        rgba(255,255,255,0.98);



    border-bottom:

        1px

        solid

        rgba(243,174,190,0.16);

}





.logo {

    display:

        flex;



    align-items:

        center;



    justify-content:

        center;



    width:

        84px;



    height:

        88px;



    flex:

        0

        0

        auto;



    line-height:

        0;



    overflow:

        visible;

}





.logo img {

    display:

        block;



    width:

        auto;



    height:

        82px;



    aspect-ratio:

        1310 / 1379;



    object-fit:

        contain;



    object-position:

        center;

}





nav {

    display:

        flex;



    align-items:

        center;



    justify-content:

        flex-end;



    gap:

        clamp(20px, 2.7vw, 42px);

}





nav a {

    position:

        relative;



    z-index:

        1;



    color:

        var(--pink);



    text-decoration:

        none;



    font-size:

        0.7rem;



    line-height:

        1;



    letter-spacing:

        0.04em;



    text-transform:

        lowercase;

}





nav a[aria-current="page"]::after {

    content:

        "";



    position:

        absolute;



    left:

        0;



    right:

        0;



    bottom:

        -6px;



    height:

        1px;



    background:

        currentColor;

}





nav a::before,

footer a::before {

    content:

        "♡";



    position:

        absolute;



    z-index:

        -1;



    top:

        50%;



    left:

        50%;



    font-family:

        Arial,

        sans-serif;



    font-size:

        5.5em;



    font-weight:

        normal;



    line-height:

        1;



    opacity:

        0;



    pointer-events:

        none;



    transform:

        translate(-50%, -50%)

        rotate(-10deg)

        scale(0.3);



    transition:

        opacity

        180ms

        ease,

        transform

        320ms

        cubic-bezier(.16, 1, .3, 1);

}





nav a::before {

    color:

        currentColor;

}





nav a:hover::before,

nav a:focus-visible::before,

footer a:hover::before,

footer a:focus-visible::before {

    opacity:

        0.85;



    transform:

        translate(-50%, -50%)

        rotate(-10deg)

        scale(1);

}





.characters-main {

    width:

        100%;



    min-height:

        calc(

            100vh

            - var(--footer-height)

        );



    padding:

        calc(var(--masthead-height) + 80px)

        var(--page-edge)

        clamp(110px, 12vw, 170px);

}





.characters-intro {

    display:

        grid;



    grid-template-columns:

        minmax(0, 1fr)

        minmax(220px, 300px);



    gap:

        clamp(34px, 7vw, 110px);



    align-items:

        end;



    margin-bottom:

        clamp(55px, 8vw, 105px);

}





.characters-kicker {

    display:

        inline-block;



    margin-bottom:

        15px;



    padding:

        5px

        8px;



    background:

        var(--white);



    color:

        var(--brown);



    font-size:

        clamp(0.5rem, 0.65vw, 0.68rem);



    line-height:

        1.5;



    letter-spacing:

        0.12em;

}





.characters-intro h1 {

    margin:

        0;



    color:

        var(--pink);



    font-size:

        clamp(5rem, 12vw, 12rem);



    line-height:

        0.72;



    letter-spacing:

        -0.055em;



    -webkit-text-stroke:

        7px

        var(--white);



    paint-order:

        stroke

        fill;

}





.intro-aside {

    align-self:

        end;



    padding-bottom:

        3px;

}





.intro-aside p {

    display:

        inline-block;



    margin:

        0

        0

        14px;



    padding:

        8px

        10px;



    background:

        var(--white);



    color:

        var(--brown);



    font-size:

        clamp(0.57rem, 0.7vw, 0.72rem);



    line-height:

        1.7;



    letter-spacing:

        0.02em;

}





.audio-widget {

    width:

        100%;



    padding:

        10px

        12px;



    background:

        var(--white);



    color:

        var(--pink);

}





.audio-controls {

    display:

        grid;



    grid-template-columns:

        42px

        minmax(70px, 1fr)

        auto;



    align-items:

        center;



    gap:

        10px;

}





.audio-toggle {

    position:

        relative;



    display:

        block;



    width:

        42px;



    height:

        38px;



    margin:

        0;



    padding:

        0;



    border:

        0;



    background:

        transparent;



    line-height:

        1;



    overflow:

        visible;

}





.audio-heart {

    position:

        absolute;



    top:

        50%;



    left:

        50%;



    color:

        var(--pink);



    font-family:

        Arial,

        sans-serif;



    font-size:

        2.45rem;



    font-weight:

        normal;



    line-height:

        1;



    transform:

        translate(-50%, -54%);

}





.audio-symbol {

    position:

        absolute;



    z-index:

        2;



    top:

        50%;



    left:

        50%;



    color:

        var(--brown);



    font-family:

        Arial,

        sans-serif;



    font-size:

        0.68rem;



    font-weight:

        bold;



    line-height:

        1;



    transform:

        translate(-48%, -48%);

}





.audio-track {

    position:

        relative;



    display:

        block;



    width:

        100%;



    height:

        20px;



    padding:

        0;



    border:

        0;



    background:

        transparent;

}





.audio-track::before {

    content:

        "";



    position:

        absolute;



    top:

        50%;



    left:

        0;



    width:

        100%;



    height:

        1px;



    background:

        rgba(243,174,190,0.45);



    transform:

        translateY(-50%);

}





.audio-track-fill {

    position:

        absolute;



    z-index:

        2;



    top:

        50%;



    left:

        0;



    width:

        0%;



    height:

        2px;



    background:

        var(--pink);



    transform:

        translateY(-50%);

}





.audio-time {

    min-width:

        28px;



    color:

        var(--brown);



    font-size:

        0.5rem;



    text-align:

        right;

}





.audio-title {

    margin-top:

        5px;



    padding-left:

        2px;



    color:

        var(--brown);



    font-size:

        0.48rem;



    line-height:

        1.4;



    letter-spacing:

        0.08em;



    text-transform:

        uppercase;

}





.character-grid {

    display:

        grid;



    grid-template-columns:

        repeat(

            4,

            minmax(0, 1fr)

        );



    gap:

        clamp(38px, 5vw, 78px)

        clamp(18px, 2.8vw, 42px);



    align-items:

        start;

}





.character-card {

    --card-accent:

        var(--pink);



    display:

        block;



    min-width:

        0;



    color:

        var(--card-accent);



    text-decoration:

        none;

}





.leon-card {

    --card-accent:

        var(--blue);

}





.portrait-frame {

    position:

        relative;



    width:

        100%;



    aspect-ratio:

        3 / 4;



    overflow:

        hidden;



    border:

        2px

        solid

        var(--card-accent);



    background:

        var(--white);

}





.portrait-placeholder {

    position:

        absolute;



    inset:

        0;



    display:

        grid;



    place-items:

        center;



    padding:

        20px;



    color:

        var(--card-accent);



    background:

        var(--white);



    font-family:

        "OCR A Std",

        "OCR A",

        monospace;



    font-size:

        clamp(0.55rem, 0.72vw, 0.72rem);



    letter-spacing:

        0.14em;



    text-align:

        center;

}





.portrait-frame img {

    position:

        absolute;



    inset:

        0;



    z-index:

        1;



    display:

        block;



    width:

        100%;



    height:

        100%;



    object-fit:

        cover;



    object-position:

        center;



    pointer-events:

        none;



    transition:

        transform

        650ms

        cubic-bezier(.16, 1, .3, 1);

}





.portrait-frame img.is-missing {

    display:

        none;

}





.future-portrait {

    display:

        none !important;

}





.character-hover-copy {

    position:

        absolute;



    z-index:

        3;



    left:

        18px;



    right:

        18px;



    bottom:

        17px;



    padding:

        8px

        9px;



    background:

        var(--white);



    color:

        var(--brown);



    font-size:

        clamp(0.48rem, 0.58vw, 0.6rem);



    line-height:

        1.55;



    letter-spacing:

        0.01em;



    opacity:

        0;



    transform:

        translateY(7px);



    transition:

        opacity

        260ms

        ease,

        transform

        400ms

        cubic-bezier(.16, 1, .3, 1);

}





.character-card:hover

.portrait-frame img:not(.future-portrait),

.character-card:focus-visible

.portrait-frame img:not(.future-portrait) {

    transform:

        scale(1.018);

}





.character-card:hover

.character-hover-copy,

.character-card:focus-visible

.character-hover-copy {

    opacity:

        1;



    transform:

        translateY(0);

}





.character-meta {

    display:

        grid;



    grid-template-columns:

        auto

        minmax(0, 1fr);



    align-items:

        baseline;



    gap:

        12px;



    margin-top:

        11px;

}





.character-file {

    color:

        var(--brown);



    font-size:

        clamp(0.43rem, 0.5vw, 0.52rem);



    letter-spacing:

        0.1em;



    white-space:

        nowrap;

}





.character-meta h2 {

    min-width:

        0;



    margin:

        0;



    color:

        var(--card-accent);



    font-size:

        clamp(1.65rem, 2.7vw, 3.2rem);



    line-height:

        0.83;



    letter-spacing:

        -0.03em;



    text-align:

        right;

}





.father-frame {

    --card-accent:

        var(--pink);

}





.father-status {

    position:

        absolute;



    z-index:

        4;



    inset:

        0;



    display:

        flex;



    flex-direction:

        column;



    align-items:

        center;



    justify-content:

        center;



    pointer-events:

        none;



    text-align:

        center;

}





.father-file {

    display:

        inline-block;



    margin-bottom:

        10px;



    padding:

        6px

        9px;



    background:

        var(--white);



    color:

        var(--brown);



    font-size:

        clamp(0.48rem, 0.58vw, 0.6rem);



    line-height:

        1;



    letter-spacing:

        0.12em;

}





.father-pending {

    color:

        var(--pink);



    font-family:

        "Helvetica Neue Condensed Bold",

        "Arial Narrow",

        Arial,

        sans-serif;



    font-size:

        clamp(2.25rem, 3.8vw, 4.8rem);



    line-height:

        0.82;



    letter-spacing:

        -0.035em;



    -webkit-text-stroke:

        6px

        var(--white);



    paint-order:

        stroke

        fill;

}





footer {

    position:

        fixed;



    z-index:

        5000;



    left:

        0;



    bottom:

        0;



    width:

        100%;



    height:

        var(--footer-height);



    display:

        flex;



    align-items:

        center;



    justify-content:

        space-between;



    padding:

        0

        clamp(22px, 4vw, 70px);



    background:

        var(--pink);



    color:

        var(--white);

}





.footer-left {

    font-size:

        0.58rem;



    letter-spacing:

        0.06em;



    opacity:

        0.8;

}





.footer-links {

    display:

        flex;



    align-items:

        center;



    gap:

        clamp(22px, 2.8vw, 42px);

}





footer a,

footer span {

    position:

        relative;



    z-index:

        1;



    color:

        var(--white);



    text-decoration:

        none;



    font-size:

        0.62rem;



    letter-spacing:

        0.04em;

}





footer a::before {

    color:

        var(--white);

}





.coming-soon {

    cursor:

        var(--cursor),

        default;



    opacity:

        0.45;

}





@media (max-width: 1050px) {



    .character-grid {

        grid-template-columns:

            repeat(

                3,

                minmax(0, 1fr)

            );

    }



}





@media (max-width: 900px) {



    :root {

        --page-edge:

            24px;



        --masthead-height:

            112px;

    }





    .logo {

        width:

            73px;



        height:

            76px;

    }





    .logo img {

        height:

            72px;

    }





    nav {

        gap:

            18px;

    }





    .characters-main {

        padding-top:

            calc(

                var(--masthead-height)

                + 72px

            );

    }





    .characters-intro {

        grid-template-columns:

            minmax(0, 1fr)

            minmax(190px, 250px);

    }





    .characters-intro h1 {

        font-size:

            clamp(4.8rem, 13vw, 8rem);

    }



}





@media (max-width: 700px) {



    :root {

        --footer-height:

            52px;



        --page-edge:

            16px;



        --masthead-height:

            132px;

    }





    .site-header {

        align-items:

            center;



        padding:

            12px

            var(--page-edge);



        gap:

            16px;

    }





    .logo {

        width:

            62px;



        height:

            70px;

    }





    .logo img {

        height:

            66px;

    }





    nav {

        gap:

            12px;

    }





    nav a {

        font-size:

            0.58rem;

    }





    nav a:nth-child(4),

    nav a:nth-child(5) {

        display:

            none;

    }





    nav a::before {

        font-size:

            5em;

    }





    .characters-main {

        padding:

            calc(

                var(--masthead-height)

                + 54px

            )

            var(--page-edge)

            100px;

    }





    .characters-intro {

        grid-template-columns:

            1fr;



        gap:

            28px;



        margin-bottom:

            52px;

    }





    .characters-intro h1 {

        font-size:

            clamp(4.1rem, 20vw, 7rem);



        -webkit-text-stroke:

            5px

            var(--white);

    }





    .intro-aside {

        width:

            min(280px, 84vw);

    }





    .intro-aside p {

        margin-bottom:

            12px;

    }





    .audio-controls {

        grid-template-columns:

            35px

            minmax(60px, 1fr)

            auto;



        gap:

            6px;

    }





    .audio-toggle {

        width:

            35px;



        height:

            32px;

    }





    .audio-heart {

        font-size:

            2rem;

    }





    .audio-symbol {

        font-size:

            0.58rem;

    }





    .character-grid {

        grid-template-columns:

            repeat(

                2,

                minmax(0, 1fr)

            );



        gap:

            38px

            13px;

    }





    .portrait-frame {

        border-width:

            1.5px;

    }





    .character-hover-copy {

        left:

            10px;



        right:

            10px;



        bottom:

            10px;



        padding:

            6px;



        font-size:

            0.43rem;

    }





    .character-meta {

        grid-template-columns:

            1fr;



        gap:

            5px;



        margin-top:

            8px;

    }





    .character-meta h2 {

        font-size:

            clamp(1.45rem, 7vw, 2.1rem);



        text-align:

            left;

    }





    .father-pending {

        font-size:

            clamp(1.9rem, 9vw, 3.5rem);



        -webkit-text-stroke:

            4px

            var(--white);

    }





    .father-file {

        font-size:

            0.43rem;

    }





    .footer-left {

        display:

            none;

    }





    footer {

        justify-content:

            center;

    }





    footer a::before {

        font-size:

            5em;

    }



}





@media (max-width: 430px) {



    :root {

        --page-edge:

            12px;



        --masthead-height:

            124px;

    }





    .site-header {

        padding:

            10px

            12px;

    }





    .logo {

        width:

            54px;



        height:

            64px;

    }





    .logo img {

        height:

            60px;

    }





    nav {

        gap:

            9px;

    }





    nav a {

        font-size:

            0.54rem;

    }





    .characters-main {

        padding-top:

            calc(

                var(--masthead-height)

                + 50px

            );

    }





    .characters-intro h1 {

        font-size:

            clamp(3.65rem, 19vw, 5rem);

    }



}





@media (hover: none) {



    .character-hover-copy {

        opacity:

            1;



        transform:

            none;

    }



}





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



    *,

    *::before,

    *::after {

        animation-duration:

            0.01ms !important;



        animation-delay:

            0ms !important;



        transition-duration:

            0.01ms !important;

    }



}