/* bleh */


@import url('https://fonts.googleapis.com/css2?family=Darumadrop+One&display=swap');
:root {--font-brand: Darumadrop One, var(--font)}

.hi.kate:not(h2 i, p i) {
    font-family: var(--font-brand);
}
.hi.kate sup {
    font-family: var(--font);
}


html {
    scroll-behavior: smooth;
}

.mention {
    padding: 0 4px;
    background-color: hsla(var(--h4), 20%);
    border-radius: var(--item-small-radius);
    text-decoration: none !important;

    .header-wrap & {
        background-color: hsla(var(--h4), 20%);
    }
}

h1 {
    i {
        color: transparent;
        -webkit-text-stroke: 0.8px hsl(var(--c1));
    }
}


.bg-cover {
    position: absolute;
    right: calc((100vw - var(--cards-width)) / 2 + var(--card-padding) - 40px);
    height: 524px;

    display: flex;
    justify-content: center;
    mix-blend-mode: overlay;

    --mask: linear-gradient(90deg,rgba(0, 0, 0, 0) 0%, white 5%, white 90%, rgba(0, 0, 0, 0) 100%);
    mask-image: var(--mask);
    -webkit-mask-image: var(--mask);

    .figure {
        height: 100%;
        width: 800px;

        --mask: linear-gradient(180deg, white, transparent 95%);
        mask-image: var(--mask);
        -webkit-mask-image: var(--mask);

        img {
            border-radius: 0;
            box-shadow: unset;
            filter: brightness(140%);
            object-fit: cover;
                object-position: top;
        }
    }

    @media (max-width: 1000px) {
        left: 0;
        right: 0;
        top: -70px;
        height: 300px;

        .figure {
            width: 100%;
        }
    }
}


h2.bleh {
    font-family: var(--font-brand);
    font-size: 30px;
    line-height: 34px;
    font-weight: 300;
}



/* home gallery */
.gallery figure {
    /*display: none;*/
    position: absolute;
    width: 600px;
    transition-property: left, opacity;
    transition-duration: 1.2s, 0.6s;
    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);

    img {
        box-shadow: var(--menu-shadow);
    }
}
figure {
    text-align: center;
}
figcaption {
    margin-top: 10px;
    color: hsl(var(--c2));
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;

    .w-16 {
        --w: 14px;
        margin-top: -2px;
    }

    & > svg {
        margin-right: -10px;
    }

    label {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        color: hsl(var(--c3));
    }
}

.gallery {
    display: flex;
    position: relative;
    width: 600px;
    aspect-ratio: 375 / 225;
}
.has-gallery .icon-btn {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    box-shadow: var(--menu-shadow);
}
.has-gallery .arrow-l {
    left: -20px;
}
.has-gallery .arrow-r {
    right: -20px;
}

.has-gallery {
    position: relative;
}




/* home */
.header-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;

    h1 {
        font-size: 96px;
        line-height: 96px;
    }

    &.small .avatar {
        --size: 32px;
    }

    & > div {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
}

.logo:not(header .logo) {
    font-size: 80px;
    line-height: 80px;
    position: relative;
    left: -8px;
}

.brand-btns {
    padding-top: 20px;
    border-top: 1px solid hsl(var(--b4));
}


h2.flex-header {
    display: flex;
    align-items: center;
}
.beta-badge {
    padding: 0 6px;
    background-color: hsl(var(--h4), 50%);
    color: hsl(var(--l3-c));
    box-shadow: 0 0 20px hsl(var(--h4), 50%);
    border-radius: 9px;
    margin-left: 6px;

    font-size: var(--font-size);
}




.btns.separator {
    margin-top: var(--card-gap);
    padding-top: var(--card-gap);
    border-top: 1px solid hsl(var(--b4));
}
.btns .btn {
    --shadow: none;
    --shadow-hov: none;
    width: 100%;
    justify-content: unset;
    position: relative;

    &:not(.active) {
        --bg: transparent;
        --bg-hov: hsla(var(--b4), 20%);
        --bg-atv: hsla(var(--b4), 40%);
    }

    &.active {
        &:before {
            content: '';
            position: absolute;
            width: 3px;
            height: 14px;
            border-radius: 50px;
            background-color: hsl(var(--l3-c));
            left: 0;
            top: 50%;
            margin-top: -7px;
        }
    }
}




.screen-row {
    margin: 10px 0;
    display: flex;
    padding-bottom: 20px;
    border-bottom: 1px solid hsl(var(--b4));

    .screen-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: 1;

        .screen {
            width: 120px;
            aspect-ratio: 15 / 9;
            border: 3px solid hsl(var(--b4));
            border-radius: var(--item-med-radius);
        }

        .text {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
    }

    .actions {
        display: flex;
        align-items: center;
        gap: 6px;

        .action {
            --bg: hsla(var(--b4), 20%);
            --bg-hov: hsla(var(--b4), 60%);
            --bg-atv: hsla(var(--b4), 80%);
            --shadow: none;
            --shadow-hov: var(--shadow);
            --padding: 7px 16px;
            gap: 12px;
            text-decoration: none;

            .icon {
                padding: 6px;
                background-color: hsl(var(--h3));
                color: hsl(var(--b7));
                border-radius: 50%;
            }

            &.update {
                --bg: hsla(var(--h4), 10%);
                --bg-hov: hsla(var(--h4), 20%);
                --bg-atv: hsla(var(--h4), 40%);
                --shadow: 0 0 30px 15px hsla(var(--h4), 8%);
                --hue: 160;
                --sat: 1;
                --lit: 1;
            }
            &.downgrade {
                --bg: hsla(var(--h4), 10%);
                --bg-hov: hsla(var(--h4), 20%);
                --bg-atv: hsla(var(--h4), 40%);
                --hue: -2;
                --sat: 1;
                --lit: 1;
            }

            .text {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }
        }
    }
}

#window_create_colour {
    max-width: 800px;
}


.inner-preview {
    border: 1px solid hsl(var(--b4));
    background-color: hsl(var(--b6));
    padding: var(--card-gap);
    border-radius: var(--item-med-radius);

    &.gap-top {
        margin-top: var(--card-gap);
    }

    pointer-events: none;
    user-select: none;

    /* instant colour change */
    button, .chartlist-bar .text {
        transition: none !important;
    }

    &.pad {
        padding: calc(var(--card-gap) * 2) calc(var(--card-gap) * 6);
    }
    &.flex {
        display: flex;
        justify-content: center;
        align-items: center;

        > * {
            flex: 1;
        }
    }
}

.preview-img {
    width: 100%;
    border-radius: var(--item-med-radius);
    box-shadow: var(--menu-shadow);
    max-height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
        width: 100%;
    }
}



.setting-items {
    display: flex;
    gap: var(--card-gap);

    .side-left:not(.full) {
        width: 488px;
    }

    .side-left.full {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 6px;
    }

    .side-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        gap: 6px;

        .btn {
            width: unset;
            justify-content: unset;
        }
    }

    .setting-item {
        --bg: hsla(var(--b4), 40%);
        --bg-hov: hsla(var(--b4), 60%);
        --bg-atv: hsla(var(--b4), 80%);
        --shadow: none;
        --shadow-hov: none;
        gap: 9px 12px;
        --padding: 7px 16px;
        --radius: var(--card-radius);

        .icon {
            padding: 6px;
            background-color: hsl(var(--h3));
            color: hsl(var(--b7));
            border-radius: 50%;
        }

        &.has-image {
            display: grid !important;
            grid-template-columns: 32px auto;
            grid-template-rows: auto auto;
            grid-template-areas:
            "icon text"
            "image image";
            --padding: 9px 16px;

            .text {
                text-align: left;
            }

            .image-row {
                grid-area: image;
                width: 100%;

                img {
                    width: 100%;
                    border-radius: var(--item-med-radius);
                    box-shadow: var(--card-shadow);
                }
            }
        }
    }
}


.side-by-side {
    gap: 90px;
    margin-bottom: 50px;
    padding: 0 var(--card-padding);
}
.side-by-side > .cover {
    max-width: 600px !important;
}


.frontpage-quotes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: var(--card-padding);
    margin-top: var(--card-padding);

    .quote {
        display: flex;
        gap: var(--card-gap);
        border-radius: 30px;
        width: 100%;
        max-width: 620px;
        text-decoration: none;
        color: hsl(var(--c2));

        .avatar {
            --size: 48px;
        }
        .text {
            display: flex;
            flex-direction: column;

            h5 {
                font-size: 16px;
                line-height: 20px;
            }
            p {
                font-size: 16px;
                line-height: 20px;
            }
        }
    }
}