/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



/* Basic styling */
body {
    background-color: black;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}


/* Base footer styles */
.footer {
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    font-weight: bold;
    color:#3C0177;
    z-index: 11;
}

.copyright {
    font-size: 12px;
    margin-bottom: 6px;
}

.terms {
    font-size: 12px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.terms:hover {
    opacity: 0.8;
}

/* Terms view styles */
.terms-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
}

.terms-view.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Base styles for additional content */
.additional-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 8;
    margin-top: 50px;  /* Add a small gap between shirts and buttons */
}

.selected-works-image,
.preorder-image,
.about-image {
    cursor: pointer;
    transition: transform 0.3s ease-out;
}

.preorder-view {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 30;
}

.preorder-view.active {
    display: block;
}

/* About page styles moved to about.css */

/* Terms page styles */
.terms-page {
    background: black;
    color: #3C0177;
    font-family: 'Share Tech Mono', monospace;
    line-height: 1.4;
    height: 100vh;
    overflow: hidden;
}

.terms-content {
    max-width: 800px;
    margin: -20px auto 0;
    padding: 20px;
    line-height: 1.4;
}

.terms-content h1 {
    font-size: 18px;
    margin-bottom: 8px;
}

.terms-content .date {
    font-size: 11px;
    margin-bottom: 20px;
}

.terms-content h2 {
    font-size: 12px;
    margin-bottom: 6px;
}

.terms-content p {
    font-size: 11px;
    margin-bottom: 16px;
}

/* Text button base styles - applies to all breakpoints */
.text-button {
    font-family: 'Share Tech Mono', monospace;
    color: #3C0177;
    cursor: pointer;
    transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
}

.text-button:hover {
    transform: scale(1.1);
    text-shadow: 0 0 0.03125rem rgba(147, 51, 234, 0.9),
                 0 0 0.0625rem rgba(147, 51, 234, 0.8),
                 0 0 0.09375rem rgba(147, 51, 234, 0.7),
                 0 0 0.125rem rgba(147, 51, 234, 0.6),
                 0 0 0.1875rem rgba(147, 51, 234, 0.5),
                 0 0 0.25rem rgba(147, 51, 234, 0.3),
                 0 0 0.3125rem rgba(147, 51, 234, 0.2),
                 0 0 0.375rem rgba(147, 51, 234, 0.1);
}

/* Base styles for additional content buttons - using a more fluid scaling approach */
.text-button.about-image, 
.text-button.selected-works-image,
.text-button.contact-image, 
.text-button.preorder-image {
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}


.title-container {
    position: fixed;
}


.title-image {
    max-width: 28.125rem; /* Changed from 450px to 28.125rem */
}


@media not all and (min-resolution:.001dpcm) { 
    @supports (-webkit-appearance:none) {
        .title-image {
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 1000;
            perspective: 1000;
            -webkit-filter: url(#titleWaveEffect);
            filter: url(#titleWaveEffect);
            will-change: transform;
        }
    }
}

.energy-core {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 7.5rem; /* Changed from 120px to 7.5rem */
    height: 7.5rem; /* Changed from 120px to 7.5rem */
    background: radial-gradient(circle at center,
        rgba(192, 132, 252, 0.4) 0%,
        rgba(147, 51, 234, 0.3) 20%,
        rgba(76, 0, 159, 0.2) 40%,
        transparent 70%);
    border-radius: 50%;
    z-index: 1;
    filter: url(#turbulence);
    animation: morphCore 8s infinite linear;
}

.tendril-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.tendril {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.375rem; /* Changed from 6px to 0.375rem */
    height: 75rem; /* Changed from 1200px to 75rem */
    pointer-events: none;
    transform-origin: center top;
}

.tendril-segment {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2.5rem; /* Changed from 40px to 2.5rem */
    background: linear-gradient(to bottom,
        rgba(147, 51, 234, 0.7) 0%,
        rgba(192, 132, 252, 0.9) 50%,
        rgba(147, 51, 234, 0.7) 100%);
    transform-origin: center top;
    filter: url(#turbulence);
    mix-blend-mode: screen;
}

.tendril-segment:first-child {
    background: linear-gradient(to bottom,
        rgba(192, 132, 252, 0.9) 0%,
        rgba(147, 51, 234, 0.7) 100%);
}

.tendril-segment:last-child {
    background: linear-gradient(to bottom,
        rgba(147, 51, 234, 0.7) 0%,
        transparent 100%);
}

.energy-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(192, 132, 252, 0.9);
    border-radius: 50%;
    filter: url(#turbulence);
    mix-blend-mode: screen;
}

/* Base blur styles */
.blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;  /* Change from 100% to 100vw */
    height: 9000px;  /* Change from 100% to 100vh */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(11px);
    z-index: 2;
}

.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center,
        rgba(0, 0, 0, 0.3) 0%,    /* Start darkening from center */
        rgba(0, 0, 0, 0.4) 30%,   /* Gradual increase */
        rgba(0, 0, 0, 0.5) 60%,   /* Less intense middle */
        rgba(0, 0, 0, 0.7) 100%); /* Less intense edges */
    z-index: 3;
    pointer-events: none;
}

.shirts-container {
    width: 90vw;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    z-index: 4;  /* Reduced from -5vh to -2vh */
    gap: 2vw;
}

.shirt-image {
    height: auto;
    object-fit: contain;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    flex-shrink: 1;
    flex-grow: 1;
    filter: drop-shadow(0 0 4px rgba(147, 51, 234, 0.3));  /* Initial transparent shadow */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);  /* Add filter to transition */
}

/* Move all hover effects inside this media query */
@media (hover: hover) {
    /* Only apply hover effects for desktop (non-mobile) */
    @media (min-width: 601px) {
        .shirt-image:hover {
            transform: scale(1.1);
            z-index: 5;
            filter: drop-shadow(0 0 20px rgba(147, 51, 234, 0.5));  /* Purple glow shadow that matches shirt shape */
        }
    }

    .terms:hover {
        opacity: 0.8;
    }

    /* Removing the specific hover styles for these buttons so they use the same style as the contact button
    .selected-works-image:hover,
    .preorder-image:hover,
    .about-image:hover {
        transform: scale(1.1);
        text-shadow: 0 0 8px rgba(147, 51, 234, 0.8), 0 0 12px rgba(192, 132, 252, 0.6);
    } */
}

.shirts-container.focused {
    display: none;
}

.shirts-container.focused .shirt-image {
    display: none;
}

.shirts-container.focused .shirt-image.active {
    display: none;
}

@keyframes morphCore {
    0%, 100% { filter: url(#turbulence); }
    50% { filter: url(#turbulence2); }
}

/* Pulse animation for the energy effect */
@keyframes energyPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes corePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        filter: url(#turbulence);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.5);
        filter: url(#turbulence2);
    }
}

.energy-core.pulsing {
    animation: corePulse 1s ease-in-out;
}

.tendril-segment.pulsing {
    animation: energyPulse 1s ease-in-out;
}










/* =============================================== */
/* MEDIA QUERY GROUP: Mobile (max-width: 600px)   */
/* =============================================== */
@media screen and (max-width: 600px) {
    html {
        height: 100%;
        width: 100%;
    }
   
    body {
        height: 100%;
        width: 100%;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch !important;
        background-color: black;
    }
 


    /* Background container to hold all fixed elements */
    .background-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        pointer-events: none;
    }

    /* Separate animation elements */
    .energy-core, 
    .tendril-container, 
    .energy-particles, 
    .vignette {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
        will-change: transform;
        z-index: 1;
    }


    /* Ensure title container stays above other content */
    .title-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 30px 0;
        text-align: center;
        z-index: 31;  /* Above focused-view but below modals */
        transform: translateY(0);
        transition: transform 0.2s ease-out;
        will-change: transform;
        pointer-events: none;  /* Allow clicking through the title */
    }

    .title-image {
        max-width: 28.125rem; /* Changed from 450px to 28.125rem */
        width: calc(55vw + 160px); /* Increased from 48vw + 150px (approximately +15%) */
        height: auto;
        -webkit-filter: url(#titleWaveEffect);
        filter: url(#titleWaveEffect);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        background: none;
        perspective: 1000;
        will-change: transform;
        pointer-events: auto;
    }

    /* Special overlay to handle URL bar transitions */
    .fade-container {
        position: fixed;
        top: -500px; /* Extend far above viewport */
        left: 0;
        width: 100%;
        height: 800px; /* Reduce height from 1000px to 800px */
        background: linear-gradient(
            to bottom,
            black 0%,
            black 500px,
            rgba(0, 0, 0, 0.9) 400px,
            rgba(0, 0, 0, 0.8) 500px,
            rgba(0, 0, 0, 0.4) 600px,
            transparent 700px /* Fully transparent at 700px instead of 1000px */
        );
        z-index: 30; /* Above everything except title */
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
        will-change: transform;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        pointer-events: none;
    }

    /* Add bottom fade container */
    .fade-container-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 400px; /* Changed from 300px to 18.75rem */
        pointer-events: none;
        z-index: 10;
        background: 
            linear-gradient(to top,
                black 0%,
                rgba(0, 0, 0, 0.8) 20%,
                rgba(0, 0, 0, 0.4) 40%,  /* More transparent in middle */
                rgba(0, 0, 0, 0.2) 60%,  /* Even more transparent */
                transparent 100%);
    }


    /* When any modal/focused view is active */
    body.modal-active {
        overflow: hidden;
    }

    .top-fade-overlay {
        display: none;
    }

    /* Reset the shirts container background */
    .shirts-container {
        width: auto;
        max-width: none;
        min-height: 3000px;
        position: relative;
        gap: 300px;
        margin: 0;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        padding: 120px 0 0 0;
        z-index: 8;
        background: linear-gradient(to bottom,
            black 0%,
            black 6.25rem,
            transparent 18.75rem,
            transparent 100%);
        background-attachment: fixed;
        display: flex;
        -webkit-background-clip: text;
        background-clip: text;
        contain: none;
        content-visibility: visible;
    }

    .shirt-image {
        width: 80%;
        position: relative;
        z-index: 1;
        max-width: 25rem; /* Changed from 400px to 25rem */
        margin: 0 auto;
        mix-blend-mode: screen;
        contain: none;
        flex-shrink: 1;
        flex-grow: 1;
        height: auto;
        object-fit: contain;
        cursor: pointer;
        content-visibility: visible;
        filter: drop-shadow(0 0 0.3125rem rgba(147, 51, 234, 0.5));
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Hide focused overlay */
    .shirts-container.focused::before {
        display: none;
    }

    .fade-mask {
        display: none;
    }

    .shirts-container::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 12.5rem; /* Changed from 200px to 12.5rem */
        background: linear-gradient(to bottom,
            black 0%,
            rgba(0, 0, 0, 0.8) 40%,
            transparent 100%);
        pointer-events: none;
        z-index: 10;
    }

    .tendril-segment {
        filter: none;
    }
    .particle {
        filter: none;
    }
    .energy-core {
        filter: none;
        animation: none;
    }

        
    .additional-content {
        position: absolute;
        top: 3100px;
        gap: 40px;
        padding-bottom: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        z-index: 8;
        margin-top: 50px;  /* Add padding at the bottom */
    }

    
    .text-button.selected-works-image,
    .text-button.preorder-image,
    .text-button.contact-image,
    .text-button.about-image {
        font-size: calc(0.9rem + 0.7vw);
        margin-bottom: 0.75rem; /* Changed from 12px to 0.75rem */
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        font-family: 'Share Tech Mono', monospace;
        color: #3C0177;
        cursor: pointer;
        transition: transform 0.3s ease-out, text-shadow 0.3s ease-out;
    }
    

    .footer {
        position: absolute;
        top: 3600px;  /* Changed from -350vh to move footer up */
        width: 100%;
        color: #3C0177;
        text-align: center;
        font-family: 'Share Tech Mono', monospace;
        font-weight: bold;
        color: #3C0177;
        z-index: 11;
        margin-top: 2.5rem;
        padding-bottom: 2.5rem;
    }

    .copyright {
        font-size: 12px;
        margin-bottom: 6px;
    }
    
    .terms {
        font-size: 12px;
        cursor: pointer;
        transition: opacity 0.2s ease;
    }

    /* Adjust energy core for Safari mobile */
    .energy-core {
        background: radial-gradient(circle at center,
            rgba(192, 132, 252, 0.25) 0%,    /* Balanced between 0.4 and 0.15 */
            rgba(147, 51, 234, 0.2) 20%,     /* Balanced between 0.3 and 0.1 */
            rgba(76, 0, 159, 0.15) 40%,      /* Balanced between 0.2 and 0.05 */
            transparent 70%);
        filter: none;
        mix-blend-mode: screen;
        animation: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: none;
        z-index: 1;
        border-radius: 50%;
    }

    /* Adjust tendril segments for Safari mobile */
    .tendril-segment {
        background: linear-gradient(to bottom,
            rgba(147, 51, 234, 0.6) 0%,      /* Increased from 0.4 */
            rgba(192, 132, 252, 0.7) 50%,    /* Increased from 0.5 */
            rgba(147, 51, 234, 0.6) 100%);   /* Increased from 0.4 */
        mix-blend-mode: screen;
    }

    .tendril-segment:first-child {
        background: linear-gradient(to bottom,
            rgba(192, 132, 252, 0.7) 0%,     /* Increased from 0.5 */
            rgba(147, 51, 234, 0.6) 100%);   /* Increased from 0.4 */
    }

    .tendril-segment:last-child {
        background: linear-gradient(to bottom,
            rgba(147, 51, 234, 0.6) 0%,      /* Increased from 0.4 */
            transparent 100%);
    }
}










/* =============================================== */
/* MEDIA QUERY GROUP: Desktop (min-width: 601px)   */
/* =============================================== */

/* Desktop - prevent overscroll bounce */
@media screen and (min-width: 601px) {
    body {
        overscroll-behavior: auto;
    }
    
    /* Desktop tendril height */
    .tendril {
        height: 150rem; /* Changed from 2400px to 150rem */
    }
    
    /* Desktop footer and scrolling adjustments */
    body {
        overflow-y: hidden;  /* Always enable scrolling */
        min-height: 1000px;
    }

    .footer {
        position: absolute;
        bottom: 100px;
        width: 100%;
        z-index: 999; /* Ensure footer is always on top */
    }
    
    /* Safari-specific footer adjustment for desktop view */
    @supports (-webkit-hyphens:none) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
        .footer {
            bottom: 68px; /* Lower the footer position in Safari */
        }
    }

    /* Adjust additional content when viewport gets shorter */
    @media (max-height: 850px) {
        .additional-content {
            position: absolute;
            top: 600px;
        }
    }
    
    /* Desktop responsive adjustments */
    .shirts-container {
        width: 98vw;
        max-width: none;  /* Remove max-width constraint */
        display: flex;
        justify-content: center;
        gap: 2vw;
    }

    .shirt-image {
        transform-origin: center center;
    }

    /* Adjust spacing between elements */
    .additional-content {
        position: absolute;
        top: 39.375rem; /* Changed from 630px to 39.375rem */
        left: 50%;
        transform: translateX(-50%);
        gap: calc(0.4vw + 15px); /* Base desktop spacing formula */
        z-index: 8;
    }

    /* Responsive scaling for desktop */
    .shirt-image {
        width: calc(25vw - 50px);
        min-width: 11.25rem; /* Changed from 180px to 11.25rem */
        max-width: 50rem; /* Changed from 800px to 50rem */
        flex-basis: calc(25vw - 50px);
    }

    .shirts-container {
        width: 98vw;
        padding-top: calc(1vw + 20px);
        gap: 2vw;
    }
    
    /* Desktop styles */
    .title-container {
        position: relative;
        top: 0;
        margin-top: 15px;
        text-align: center;
        left: 0;
        width: 100%;
        padding: 30px 0;
        z-index: 25;
        transform: translateY(0);
        transition: transform 0.2s ease-out;
        will-change: transform;
        pointer-events: none;
    }
}










/* =============================================== */
/* MEDIA QUERY GROUP: Medium screens (601px-1050px) */
/* =============================================== */
@media screen and (min-width: 601px) and (max-width: 1050px) {
    /* Base styles for additional content */
    .additional-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        z-index: 8;
        margin-top: 73px;  /* Reduced from 90px to move content higher up */
        gap: calc(.3vw + 20px); /* Increased gap for medium screens */
    }


    /* Grid layout for regular shirt view */
    .shirts-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(auto, 250px));
        gap: 2vh 15px;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 90%; /* Set a percentage width to maintain proportional spacing */
        max-width: 100%; /* Set a reasonable max-width */
        position: absolute;
        top: 170px;
        left: 50%;
        transform: translateX(-50%);
    }

    .shirt-image {
        transform-origin: center center;
        width: 100%; /* Fill the now fixed-width column */
        max-width: 220px;
        margin: 0 auto;
    }
    
    /* Safari-specific fix with more reliable detection */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        /* This targets both Chrome and Safari */
        @supports (-webkit-hyphens:none) and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
            /* This narrows it down to just Safari */
            .shirts-container {
                grid-column-gap: 20px !important; /* Remove horizontal gap */
                width: 440px !important;
                max-width: 95vw !important;
                top: 200px !important; /* Lower the shirt grid position in Safari */
            }
        }
    }

    /* Title image styling */
    .title-image {
        max-width: 450px;  /* Base max size */
        width: calc(48vw + 150px);  /* Scale down from max size based on viewport */
        height: auto;
        -webkit-filter: url(#titleWaveEffect);
        filter: url(#titleWaveEffect);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        will-change: transform;
        pointer-events: auto;
    }
    
    /* Medium screen focused-order-options hover styles moved to individual shirt CSS files */
    
    /* Desktop responsive text adjustments with fluid scaling */
    .text-button.selected-works-image,
    .text-button.contact-image,
    .text-button.about-image,
    .text-button.preorder-image {
        font-size: calc(0.85rem + 0.35vw); /* Smooth scaling with viewport width */
    }
    
    /* Header text sizes */
    .text-button.selected-works-header,
    .text-button.contact-header,
    .text-button.preorder-header {
        font-size: 1.8rem; /* Larger size for headers */
        margin-bottom: 40px;
    }
}









/* =============================================== */
/* MEDIA QUERY GROUP: Large screens (min-width: 1051px) */
/* =============================================== */
@media screen and (min-width: 1051px) {
    .shirts-container {
        width: 98vw;
        max-width: none;  /* Remove max-width constraint */
        gap: 2vw;
        display: flex;
        justify-content: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: -120px;  /* Slight upward adjustment to balance between title and additional content */
    }

    .shirt-image {
        width: calc(25vw - 50px);  /* More aggressive scaling */
        min-width: 180px;
        max-width: 800px;  /* Increased max-width */
        flex-basis: calc(25vw - 50px);
    }

    .additional-content {
        position: absolute;
        top: calc(500px + 0.13 * (100vw - 1051px));
        left: 50%;
        transform: translateX(-50%);
        gap: calc(60px - 0.05 * (100vw - 1051px));
        z-index: 8;
    }

    .title-image {
        max-width: 28.125rem; /* Changed from 450px to 28.125rem */
        width: calc(48vw + 150px);
        height: auto;
        -webkit-filter: url(#titleWaveEffect);
        filter: url(#titleWaveEffect);
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
        will-change: transform;
        pointer-events: auto;
    }
    
    /* Desktop responsive text adjustments with fluid scaling */
    .text-button.selected-works-image,
    .text-button.contact-image,
    .text-button.about-image,
    .text-button.preorder-image {
        font-size: calc(0.85rem + 0.8vw); /* Smooth scaling with viewport width */
    }
}