body {
    background-color: var(--background);
    color: var(--neutral-light);
    font-family: var(--ff-sans);

    --border-width: var(--bw-m);
}

/* **** */

@view-transition {
    navigation: auto;
  }

/* **** */

.site-header {
    background-color: var(--background);
}

.site-header .wrapper {
    width: clamp(320px, 100%, 1200px);
    margin: 0 auto;
    padding: var(--margin-m);

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--margin-xl);

    border-left: var(--border-width) solid var(--neutral-dark);
    border-bottom: var(--border-width) solid var(--neutral-dark);
}

.site-branding {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--margin-xs);

    flex: 1 1 40%;

    .site-name {
        font-size: var(--fc-h2);
        font-weight: var(--fw-bold);
        color: var(--neutral-light);
        line-height: 1;
    }
    
    .site-slogan {
        font-size: var(--fc-h4);
        text-transform: uppercase;
        color: var(--accent);
        line-height: 1;
    }
}



main.page {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0;
}


@layer homepage, gallery, taxonomy, footer;

@layer homepage {

.highlight {
    width: clamp(320px, 100%, 1200px);
    margin: 0 auto;
}

.hero.hero-2 {

        flex-direction: row;
}

.hero {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 0;

    overflow: hidden;
    

    max-height: 80dvh;
    background-color: var(--background2);
    border-right: var(--border-width) solid var(--neutral-dark);
    border-bottom: var(--border-width) solid var(--neutral-dark);


    .hero-image-wrapper {
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center;
        overflow: hidden;
        height: 100%;
        width: 100%;
        flex: 1 1 60%;

        img {
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center;
        height: 100%;
        width: 100%;


        animation-name: fade-slide-in;
        animation-duration: 8s;
        animation-direction: normal;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        transform-origin: center center;
        }
    }

    .hero-infos {
        flex: 1 1 40%;
        padding: var(--margin-l) var(--margin-l) var(--margin-l) var(--margin-xl);

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--margin-m);

        .title {
            font-size: var(--fc-h1plus);
            font-weight: var(--fw-bold);
            line-height: 1;
            padding-bottom: var(--margin-l);
            padding-right: var(--margin-l);
            text-align: right;
            color: var(--neutral-light);
            border-right: var(--border-width) solid var(--accent);
            border-bottom: var(--border-width) solid var(--accent);

           
        }

        .body {
            font-size: var(--fc-h2);
            font-weight: var(--fw-normal);
            line-height: 1.25;
            color: var(--neutral-light);
            text-align: right;

        }

        .cta {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: center;
            gap: var(--margin-l);
            

            a {
                font-weight: var(--fw-bold);
                text-decoration: none;
                padding: var(--margin-s) var(--margin-m);
                border-radius: var(--br-s);
            }

            .button {
                background-color: var(--background2);
                color: var(--neutral-light);
            }

            .primary {
                background-color: var(--accent);
                color: var(--background2);
            }

            .secondary {
                background-color: var(--neutral-dark);
                color: var(--neutral-light);
            }

            .outline {
                background-color: transparent;
                color: var(--neutral-light);
                border: var(--border-width) solid var(--neutral-light);
            }


        }
    }
}


.featured {
    width: clamp(320px, 100%, 1200px);
    margin: var(--margin-xl) auto;

    .featured-title {
        width: 80%;
        margin: 0 auto;
        padding: var(--margin-l);
        font-size: var(--fc-h1plus);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        color: var(--neutral-light);
    }

    ul.home-categories {
        list-style: none;
        padding: var(--margin-l);
        margin: 0;

        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: var(--margin-m);

        li {

            width: 80%;
            margin: 0 auto;

            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            gap: var(--margin-l);

            border-bottom: var(--border-width) solid var(--neutral-dark);
            background-color: var(--background);

            transition: all 0.5s ease-in-out;

            &:hover {
                border-bottom: 2px solid var(--accent);
                scale: 105%;
                background-color: var(--background2);

            }

            .body {
                flex: 1 1 50%;

                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: center;
                align-items: flex-start;
                gap: var(--margin-m);

                .title {
                    font-size: var(--fc-h3);
                    font-weight: var(--fw-bold);
                    color: var(--accent);

                }

                .subtitle {
                    font-size: var(--fc-p);
                    text-wrap: balance;
                    line-height: 1.25;
                    color: var(--neutral-light);

                }

            }

            .image-container {

                flex: 1 1 20%;

                img {
                    aspect-ratio: 4 / 3;
                    object-fit: cover;
                    object-position: center;
                    height: 100%;
                    width: 100%;

                }
            }

            .link {
                flex: 1 1 10%;
                color: var(--neutral-light);


                a {
                    font-size: 1px;
                    color: transparent;

                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-items: center;
                    gap: var(--margin-m);
                    
                }

                a:before {
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="white" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" /></svg>');
                    background-repeat: no-repeat;
                    background-position: center center;
                    background-size: contain;
                    content: '';
                    height: var(--fc-h1);
                    width: var(--fc-h1);
                    opacity: 0.6;
                }
            }
        }
    }

}







} /* @layer homepage */