@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Righteous&display=swap');
@layer tokens, base;

@layer tokens {
    @font-face {
        font-family: 'Super Wonder';
        src: url('/static/fonts/SuperWonder-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --font-heading: "Super Wonder", san-serif;
        --font-serif: "Fira Sans", sans-serif;
        --font-sans: "Fira Sans", sans-serif;
        --font-body: var(--font-sans);
        --font-subtitle: "Covered By Your Grace", system-ui;

        --color-nu: oklab(35.693999999999996% 0.03177 0.02462);
        --color-nunu: oklab(69.26400000000001% 0.15302 0.13138);
        --color-background: oklab(0.9302 0.0029 0.00928);
        --color-primary: oklab(0.77979 -0.15919 0.08352);
        --color-primary-dark: oklab(0.85856 -0.15279 0.0908);
        --color-text: oklab(0.32109 0 0);
        --color-text-light: oklab(0.44953 0 0);
        --color-text-muted: oklab(0.51028 0 0);
        --color-bg: oklab(0.97015 0 0);
        --color-bg-white: oklab(1 0 0);
        --color-border: oklab(0.9067 0 0);
        --color-gray-light: oklab(0.86994 0 0);
        --color-gray-medium: oklab(0.82032 0 0);
        --color-gray-bg: oklab(0.931 0 0);

        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 2.5rem;
        --space-8: 3rem;
        --space-10: 4rem;

        --font-size-sm: 0.875rem;
        --font-size-base: 0.9375rem;
        --font-size-md: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.5rem;
        --font-size-2xl: 2rem;
        --font-size-3xl: 3rem;

        --line-height-tight: 1.2;
        --line-height-normal: 1.6;
        --line-height-relaxed: 1.7;

        --radius-sm: 6px;
        --radius-md: 8px;

        --transition-fast: 0.2s;
        --transition-normal: 0.3s;

        --sidebar-width: 220px;
        --content-max-width: 900px;

        --breakpoint-md: 48rem;
    }

    @counter-style colored-decimal {
        system: fixed;
        symbols: "\2776" "\2777" "\2778" "\2779" "\277a" "\277b" "\277c" "\277d" "\277e" "\277f" "\24EB" "\24EC" "\24ED" "\24EE" "\24EF" "\24F0" "\24F1" "\24F2"
            "\24F3" "\24F4";
        suffix: " ";
        speak-as: numbers;
    }
}

@layer base {

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

    * {
        margin: 0;
    }

    html {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-optical-sizing: auto;
    }

    h1 {
        font-family: var(--font-heading);
        font-size: clamp(2.5rem, 15vw, 8em);
        font-weight: 800;
        line-height: 1;
        color: var(--color-nunu);
        text-transform: uppercase;
    }

    h2 {
        font-family: var(--font-subtitle);
        font-size: var(--font-size-xl);
        font-synthesis: weight;
        font-weight: 900;
        color: var(--color-nunu);
    }

    .popover-trigger {
        background: none;
        height: 100%;
        width: 100%;
        border: none;
    }

    [popover] {
        &:popover-open {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            margin: 0;
            border: none;
            background: none;
            padding: 0;
            width: fit-content;
            height: fit-content;

            .status-bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: black;
                color: white;
                padding: 8px 12px;
                font-size: 14px;
                width: 100%;
                box-sizing: border-box;

                .close-popover {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 16px;
                    cursor: pointer;
                    padding: 0;
                    line-height: 1;
                }
            }

            video {
                height: 75vh;
                width: auto;
                display: block;

                @media (max-width: 768px) {
                    height: auto;
                    width: 85vw;
                }
            }
        }
    }

    ::backdrop {
        backdrop-filter: blur(9px);
        /*background: oklab(0.32109 0 0);*/
        opacity: 0.6;
    }

    .subtitle {
        display: block;
        font-size: clamp(11px, 1.1vw, 1.1em);
        padding: 5px 8px;
        border-radius: 10px;
        color: #000;
        background-color: var(--color-primary-dark);
        width: fit-content;
    }

    .content-tags {
        display: flex;

        span {
            border: 2px solid var(--color-bg);
            padding: clamp(4px, 1vw, 6px) clamp(4px, 1vw, 8px);
            font-weight: 500;
            font-size: clamp(11px, 1.2vw, 14px);

            &:last-of-type {
                border-left: none;
            }
        }
    }

    figure {
        min-width: 80px;
        gap: 12px;
        display: flex;
        flex-direction: column;
        aspect-ratio: 9 / 16;
        overflow: hidden;

        img {
            cursor: pointer;
            width: 70%;
            height: 100%;
            object-fit: contain;
            display: block;
            filter: blur(0);
            visibility: visible;
            transition:
                filter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            /*visibility 0s 1.2s;*/

            &:hover {
                filter: blur(8px);
                /*visibility: hidden;*/
                transition:
                    filter 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                /*visibility 0s 1.2s;*/
            }
        }

        figcaption {
            color: var(--color-bg);
            padding: 10px 0;
            font-weight: 700;
            max-width: 50px;
            align-self: flex-start;
        }
    }

    ol {
        li {
            list-style-type: decimal-leading-zero;
        }
    }

    a[href^="mailto"]::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: var(--color-bg);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M8.4 2.4c-.664 0-1.2.536-1.2 1.2v1.2H6a2.4 2.4 0 0 0-2.4 2.4V9h16.8V7.2c0-1.324-1.076-2.4-2.4-2.4h-1.2V3.6c0-.664-.536-1.2-1.2-1.2s-1.2.536-1.2 1.2v1.2H9.6V3.6c0-.664-.536-1.2-1.2-1.2m-4.8 8.4V18c0 1.324 1.076 2.4 2.4 2.4h12c1.324 0 2.4-1.076 2.4-2.4v-7.2z'/%3E%3C/svg%3E%0A");
        mask-repeat: no-repeat;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M8.4 2.4c-.664 0-1.2.536-1.2 1.2v1.2H6a2.4 2.4 0 0 0-2.4 2.4V9h16.8V7.2c0-1.324-1.076-2.4-2.4-2.4h-1.2V3.6c0-.664-.536-1.2-1.2-1.2s-1.2.536-1.2 1.2v1.2H9.6V3.6c0-.664-.536-1.2-1.2-1.2m-4.8 8.4V18c0 1.324 1.076 2.4 2.4 2.4h12c1.324 0 2.4-1.076 2.4-2.4v-7.2z'/%3E%3C/svg%3E%0A");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        vertical-align: middle;
        margin-right: 2px;
    }

    a[href^="tel"]::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: var(--color-bg);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M12 4.8c-3.975 0-7.2 3.225-7.2 7.2s3.225 7.2 7.2 7.2c.664 0 1.2.536 1.2 1.2s-.536 1.2-1.2 1.2c-5.303 0-9.6-4.298-9.6-9.6S6.697 2.4 12 2.4s9.6 4.297 9.6 9.6v1.2a3.602 3.602 0 0 1-6.345 2.329 4.8 4.8 0 1 1-.454-7.425A1.198 1.198 0 0 1 16.8 9v4.2c0 .664.536 1.2 1.2 1.2s1.2-.536 1.2-1.2V12c0-3.975-3.225-7.2-7.2-7.2m2.4 7.2c0-1.324-1.076-2.4-2.4-2.4S9.6 10.676 9.6 12s1.076 2.4 2.4 2.4 2.4-1.076 2.4-2.4'/%3E%3C/svg%3E%0A");
        mask-repeat: no-repeat;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M12 4.8c-3.975 0-7.2 3.225-7.2 7.2s3.225 7.2 7.2 7.2c.664 0 1.2.536 1.2 1.2s-.536 1.2-1.2 1.2c-5.303 0-9.6-4.298-9.6-9.6S6.697 2.4 12 2.4s9.6 4.297 9.6 9.6v1.2a3.602 3.602 0 0 1-6.345 2.329 4.8 4.8 0 1 1-.454-7.425A1.198 1.198 0 0 1 16.8 9v4.2c0 .664.536 1.2 1.2 1.2s1.2-.536 1.2-1.2V12c0-3.975-3.225-7.2-7.2-7.2m2.4 7.2c0-1.324-1.076-2.4-2.4-2.4S9.6 10.676 9.6 12s1.076 2.4 2.4 2.4 2.4-1.076 2.4-2.4'/%3E%3C/svg%3E%0A");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        vertical-align: middle;
        margin-right: 2px;
    }

    a[href^="https://instagram.com"]::before {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background-color: var(--color-bg);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M12.011 7.687a4.313 4.313 0 1 0-.02 8.627 4.313 4.313 0 0 0 .02-8.627m-.023 1.515a2.798 2.798 0 1 1 .023 5.596 2.798 2.798 0 0 1-.023-5.596m3.503-1.691a1.006 1.006 0 1 1 2.011 0 1.006 1.006 0 0 1-2.011 0m4.864 1.02c-.064-1.346-.371-2.539-1.357-3.521-.983-.983-2.176-1.29-3.521-1.357-1.387-.079-5.546-.079-6.934 0-1.343.064-2.534.371-3.521 1.354s-1.29 2.175-1.357 3.52c-.079 1.387-.079 5.546 0 6.934.064 1.346.371 2.539 1.357 3.521s2.176 1.29 3.521 1.357c1.387.079 5.546.079 6.934 0 1.346-.064 2.539-.371 3.521-1.357.983-.983 1.29-2.176 1.357-3.521.079-1.387.079-5.543 0-6.93m-1.792 8.419a2.83 2.83 0 0 1-1.597 1.597c-1.106.439-3.731.337-4.954.337s-3.851.097-4.954-.337a2.83 2.83 0 0 1-1.597-1.597c-.439-1.106-.337-3.731-.337-4.954s-.097-3.851.337-4.954a2.83 2.83 0 0 1 1.597-1.597c1.106-.439 3.731-.337 4.954-.337s3.851-.097 4.954.337a2.83 2.83 0 0 1 1.597 1.597c.439 1.106.337 3.731.337 4.954s.101 3.851-.337 4.954'/%3E%3C/svg%3E%0A");
        mask-repeat: no-repeat;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M12.011 7.687a4.313 4.313 0 1 0-.02 8.627 4.313 4.313 0 0 0 .02-8.627m-.023 1.515a2.798 2.798 0 1 1 .023 5.596 2.798 2.798 0 0 1-.023-5.596m3.503-1.691a1.006 1.006 0 1 1 2.011 0 1.006 1.006 0 0 1-2.011 0m4.864 1.02c-.064-1.346-.371-2.539-1.357-3.521-.983-.983-2.176-1.29-3.521-1.357-1.387-.079-5.546-.079-6.934 0-1.343.064-2.534.371-3.521 1.354s-1.29 2.175-1.357 3.52c-.079 1.387-.079 5.546 0 6.934.064 1.346.371 2.539 1.357 3.521s2.176 1.29 3.521 1.357c1.387.079 5.546.079 6.934 0 1.346-.064 2.539-.371 3.521-1.357.983-.983 1.29-2.176 1.357-3.521.079-1.387.079-5.543 0-6.93m-1.792 8.419a2.83 2.83 0 0 1-1.597 1.597c-1.106.439-3.731.337-4.954.337s-3.851.097-4.954-.337a2.83 2.83 0 0 1-1.597-1.597c-.439-1.106-.337-3.731-.337-4.954s-.097-3.851.337-4.954a2.83 2.83 0 0 1 1.597-1.597c1.106-.439 3.731-.337 4.954-.337s3.851-.097 4.954.337a2.83 2.83 0 0 1 1.597 1.597c.439 1.106.337 3.731.337 4.954s.101 3.851-.337 4.954'/%3E%3C/svg%3E%0A");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
        vertical-align: middle;
        margin-right: 2px;
    }

    a[href^="https://titkok.com"]::before {
        content: "";
    }

    body {
        color: var(--color-bg);
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
        font-family: var(--font-sans);
        font-variant-ligatures: discretionary-ligatures;
        font-feature-settings:
            "liga" 1,
            "clig" 1;
        background-color: var(--color-nu);
    }

    :focus-visible {
        outline: 4px solid hotpink;
    }

    .hero-top {
        display: grid;
        grid-template-columns: 1fr 1fr;

        /*        @media (max-width: 48rem) {
            grid-template-columns: 1fr;
        }*/
    }

    .content-items {
        display: grid;
        grid-template-columns: 0.25fr 0.25fr 0.25fr 0.25fr;
        align-items: start;
        justify-items: center;

        @media (max-width: 48rem) {
            grid-template-columns: 1fr 1fr;
        }
    }

    article {
        margin: 18px 0;
    }

    .hero-heading {
        position: relative;
        display: inline-block;
    }

    .badge {
        position: absolute;
        top: 45%;
        left: 60%;
        transform: rotate(-6deg) translate(-50%, -50%);
        font-size: clamp(0.6rem, 1.5vw, 0.875rem);
        padding: clamp(4px, 1vw, 6px) clamp(8px, 2vw, 16px);
        background: oklab(1 0 0);
        color: var(--color-primary);
        font-family: var(--font-sans);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-radius: 999px;
        border: 2px solid var(--color-primary);
        white-space: nowrap;
        pointer-events: none;
    }

    .socials {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        gap: 8px;
        margin: 0;
        padding: 0;
        justify-content: flex-start;

        li {
            padding: 0 10px 0;

            a {
                text-decoration: none;
                color: var(--color-bg);
                font-size: 1.1em;
                position: relative;

                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    transform: scaleX(0);
                    height: 2px;
                    bottom: 0;
                    left: 0;
                    background-color: var(--color-primary);
                    transition: transform 0.25s ease-out;
                    transform-origin: bottom right;
                    bottom: -6px;
                }

                &:hover {
                    color: var(--color-primary);

                    &::before {
                        background-color: var(--color-primary);
                    }

                    &::after {
                        transform: scaleX(1);
                        transform-origin: bottom left;
                    }
                }
            }

            &::marker {
                content: "";
            }
        }

        @media (max-width: 48rem) {
            ul {
                flex-direction: column;
            }
        }
    }

    .about-rates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4em;

        @media (max-width: 48rem) {
            grid-template-columns: 1fr;

            .rates {
                margin-top: 12px;
            }
        }

        @media (max-width: 48rem) {

            dl.rate-items,
            ol.rate-items {
                width: 100%;
            }
        }

        dl.rate-items {
            counter-reset: rates;
        }

        dt::before {
            counter-increment: rates;
            content: counter(rates, decimal-leading-zero) ". ";
            color: var(--color-primary);
            font-weight: 600;
        }

        dd {
            font-size: var(--font-size-lg);
            font-weight: 600;
            padding-left: 25px;
        }

        ol.rate-items {
            columns: 2;

            li::marker {
                font-weight: 500;
                color: var(--color-primary);
            }
        }
    }
}