@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,400&display=swap');

:root {
    --font-scale: 1.0;
}

html {
    font-size: calc(1rem * var(--font-scale));
}

body {
    font-family: 'Lora', serif;
    background-color: #f5f5f5;
    color: #1a1a1a;
    font-size: 1.1rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-title {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
}

.btn-primary {
    background-color: #4B5320;
    color: #FFFFFF;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-primary:hover {
    background-color: #383F18;
    transform: translateY(-2px);
}

.btn-secondary {
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-secondary:hover {
    background-color: #FFFFFF;
    color: #1a1a1a;
}

.section-title {
    color: #4B5320;
}

.text-yellow-brand {
    color: #FFBF00;
}

.bg-yellow-brand {
    background-color: #FFBF00;
}

.bg-brown-brand {
    background-color: #5C4033;
}

.text-brown-brand {
    color: #5C4033;
}

:focus-visible {
    outline: 3px solid #FFBF00 !important;
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    top: -50px;
    left: 0;
    background: #FFBF00;
    color: black;
    padding: 10px 15px;
    z-index: 100;
    transition: top 0.3s;
    font-family: 'Satoshi', sans-serif;
}

.skip-link:focus {
    top: 10px;
}

.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

.high-contrast h1,
.high-contrast h2,
.high-contrast h3,
.high-contrast p,
.high-contrast a,
.high-contrast span,
.high-contrast li {
    color: #fff !important;
}

.high-contrast .bg-white,
.high-contrast .bg-white\/90,
.high-contrast .bg-gray-100 {
    background-color: #000 !important;
    border: 1px solid #fff;
}

.high-contrast .bg-yellow-brand {
    background-color: #000 !important;
    border: 2px solid #FFBF00;
}

.high-contrast .text-yellow-brand {
    color: #FFBF00 !important;
}

.high-contrast .text-brown-brand {
    color: #FFBF00 !important;
}

.high-contrast .bg-brown-brand {
    background-color: #000 !important;
    border: 2px solid #fff;
}

.high-contrast .text-gray-700,
.high-contrast .text-gray-800,
.high-contrast .text-gray-400 {
    color: #fff !important;
}

.high-contrast .section-title {
    color: #FFBF00 !important;
}

.high-contrast .btn-primary {
    background-color: transparent;
    border: 2px solid #FFBF00;
    color: #FFBF00 !important;
}

.high-contrast .btn-secondary {
    border-color: #fff !important;
    color: #fff !important;
}

.high-contrast .btn-secondary:hover {
    background-color: #fff !important;
    color: #000 !important;
}

.high-contrast img {
    filter: grayscale(100%) contrast(150%);
}


.swiper-button-next,
.swiper-button-prev {
    color: #FFFFFF;
}

.swiper-pagination-bullet-active {
    background: #FFFFFF;
}


        .hero-bg {
            animation: zoom-in 20s ease-out infinite alternate;
        }
        @keyframes zoom-in {
            from { transform: scale(1); }
            to { transform: scale(1.1); }
        }

        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }
        .fade-in-up.is-visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .artist-carousel-image {
            transition: opacity 1s ease-in-out;
        }

#jess-aya{
    border-radius: 70px;
}