/* =============================================================================
                            FORMAT POSTS
   ============================================================================= */
.story-card {
    aspect-ratio: 5 / 4;
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition-fast);

    & .post__overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4rem;
        box-shadow: rgba(0, 0, 0, 0.15) 0 -2px 0 inset;
        z-index: 99;
        pointer-events: none;
    }

    &.format-audio-card {
        & .stories-container {
            display: grid;
            grid-template-rows: auto 1fr auto;
            position: relative;
            height: 100%;
            isolation: isolate;
            z-index: 0;

            & .audio-cover-bg {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 0;
                pointer-events: none;
                background: radial-gradient(circle at 50% 32%, var(--header-background) 0%, var(--color-secondary) 50%, color-mix(in srgb, var(--color-tertiary), var(--color-quaternary) 55%) 100%);

                & .audio-bg-glow {
                    position: absolute;
                    top: 45%;
                    left: 50%;
                    width: 280px;
                    height: 280px;
                    transform: translate(-50%, -50%);
                    border-radius: 50%;
                    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary), transparent 46%) 0%, color-mix(in srgb, var(--accent-background-1), transparent 86%) 45%, transparent 70%);
                    filter: blur(32px);
                    opacity: 0.75;
                    animation: audioGlowPulse 4.5s ease-in-out infinite alternate;
                    pointer-events: none;
                }

                & .audio-bg-frequency-rings {
                    position: absolute;
                    top: 45%;
                    left: 50%;
                    width: 180px;
                    height: 180px;
                    margin-top: -90px;
                    margin-left: -90px;
                    border-radius: 50%;
                    background: radial-gradient(circle,
                            color-mix(in srgb, var(--color-primary-accent, #47b23c) 22%, transparent) 0%,
                            color-mix(in srgb, var(--color-primary, #8bc34a) 12%, transparent) 40%,
                            color-mix(in srgb, var(--accent-background-2, #89c39d) 6%, transparent) 70%,
                            transparent 100%);
                    box-shadow:
                        0 0 0 25px color-mix(in srgb, var(--color-primary-accent, #47b23c) 12%, transparent),
                        0 0 0 55px color-mix(in srgb, var(--color-primary, #8bc34a) 8%, transparent),
                        0 0 0 95px color-mix(in srgb, var(--accent-background-2, #89c39d) 5%, transparent),
                        0 0 0 145px color-mix(in srgb, var(--color-primary-light, #eff1e1) 25%, transparent);
                    pointer-events: none;
                    animation: audioWaveExpand 6s cubic-bezier(0.25, 1, 0.5, 1) infinite;

                    &::after {
                        content: '';
                        position: absolute;
                        inset: 0;
                        border-radius: 50%;
                        background: inherit;
                        box-shadow: inherit;
                        animation: audioWaveExpand 6s cubic-bezier(0.25, 1, 0.5, 1) infinite 3s;
                    }
                }

                & .audio-bg-bars {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    height: 52%;
                    display: flex;
                    align-items: flex-end;
                    overflow: hidden;
                    pointer-events: none;
                    box-sizing: border-box;
                    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
                    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);

                    & .audio-bars-spectrum {
                        width: 100%;
                        height: 100%;
                        display: flex;
                        align-items: flex-end;
                        justify-content: space-between;
                        gap: 3px;

                        & .spectrum-bar {
                            flex: 1 1 0;
                            max-width: 7px;
                            height: 100%;
                            border-radius: 4px 4px 1px 1px;
                            background: linear-gradient(180deg,
                                    color-mix(in srgb, var(--accent-background-1, #89c39d) 90%, transparent) 0%,
                                    color-mix(in srgb, var(--color-primary-accent, #47b23c) 75%, transparent) 45%,
                                    color-mix(in srgb, var(--color-primary, #8bc34a) 40%, transparent) 100%);
                            box-shadow: 0 -2px 6px color-mix(in srgb, var(--color-primary-accent, #47b23c) 25%, transparent);
                            opacity: 0.28;
                            transform-origin: bottom center;
                            transform: scaleY(0.12);
                            transition: opacity var(--transition-normal), filter var(--transition-normal), max-height var(--transition-normal);
                            animation: spectrumDanceAmbient 2.2s ease-in-out infinite alternate;

                            /* Staggered Rhythm & Frequencies for Spectrum Bars */
                            &:nth-child(odd) {
                                animation-duration: 2.1s;
                            }

                            &:nth-child(even) {
                                animation-duration: 1.7s;
                            }

                            &:nth-child(3n) {
                                animation-duration: 2.5s;
                            }

                            &:nth-child(4n) {
                                animation-duration: 1.4s;
                            }

                            &:nth-child(5n) {
                                animation-duration: 2.8s;
                            }

                            &:nth-child(1) {
                                animation-delay: -0.2s;
                            }

                            &:nth-child(2) {
                                animation-delay: -0.7s;
                            }

                            &:nth-child(3) {
                                animation-delay: -1.3s;
                            }

                            &:nth-child(4) {
                                animation-delay: -0.5s;
                            }

                            &:nth-child(5) {
                                animation-delay: -1.8s;
                            }

                            &:nth-child(6) {
                                animation-delay: -0.9s;
                            }

                            &:nth-child(7) {
                                animation-delay: -1.5s;
                            }

                            &:nth-child(8) {
                                animation-delay: -0.3s;
                            }

                            &:nth-child(9) {
                                animation-delay: -1.1s;
                            }

                            &:nth-child(10) {
                                animation-delay: -1.7s;
                            }

                            &:nth-child(11) {
                                animation-delay: -0.4s;
                            }

                            &:nth-child(12) {
                                animation-delay: -1.2s;
                            }

                            &:nth-child(13) {
                                animation-delay: -0.8s;
                            }

                            &:nth-child(14) {
                                animation-delay: -1.6s;
                            }

                            &:nth-child(15) {
                                animation-delay: -0.6s;
                            }

                            &:nth-child(16) {
                                animation-delay: -1.4s;
                            }

                            &:nth-child(17) {
                                animation-delay: -0.1s;
                            }

                            &:nth-child(18) {
                                animation-delay: -1.9s;
                            }

                            &:nth-child(19) {
                                animation-delay: -0.7s;
                            }

                            &:nth-child(20) {
                                animation-delay: -1.3s;
                            }

                            &:nth-child(21) {
                                animation-delay: -0.4s;
                            }

                            &:nth-child(22) {
                                animation-delay: -1.5s;
                            }

                            &:nth-child(23) {
                                animation-delay: -0.8s;
                            }

                            &:nth-child(24) {
                                animation-delay: -1.2s;
                            }

                            &:nth-child(25) {
                                animation-delay: -0.5s;
                            }

                            &:nth-child(26) {
                                animation-delay: -1.7s;
                            }

                            &:nth-child(27) {
                                animation-delay: -0.9s;
                            }

                            &:nth-child(28) {
                                animation-delay: -0.3s;
                            }
                        }
                    }
                }

                & .audio-cover-backdrop-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(180deg, color-mix(in srgb, var(--color-white), transparent 65%) 0%, transparent 40%, color-mix(in srgb, var(--footer-background), transparent 85%) 100%);
                }
            }

            &:hover {
                & .audio-cover-bg {
                    & .audio-bg-bars {
                        & .audio-bars-spectrum {
                            & .spectrum-bar {
                                opacity: 0.85;
                                filter: drop-shadow(0 0 5px color-mix(in srgb, var(--color-primary-accent, #47b23c) 65%, transparent));
                                animation-name: spectrumDanceActive;
                                animation-direction: alternate;
                                animation-iteration-count: infinite;
                            }
                        }
                    }
                }
            }
        }
    }

    & .stories-slideshow {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background-color: var(--bg-dark);
        touch-action: pan-y pinch-zoom;
        isolation: isolate;

        & .post-top-actions {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            box-sizing: border-box;
        }

        & .slides-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            touch-action: pan-y pinch-zoom;
            user-select: none;
            -webkit-user-drag: none;

            & .slide-item {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0;
                visibility: hidden;
                transform: scale(1.02);
                transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility 0.6s ease;
                z-index: 1;

                &.is-active {
                    opacity: 1;
                    visibility: visible;
                    transform: scale(1);
                    z-index: 2;
                }

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }
            }
        }

        & .slideshow-bottom-bar {
            position: absolute;
            bottom: .5rem;
            left: 50%;
            transform: translateX(-50%);
            width: min(100% - 1rem);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            z-index: 8;
            opacity: .5;
            transition: opacity var(--transition-fast);

            & .slideshow-control-container {
                opacity: 1;
            }

            & .slideshow-control {
                min-width: var(--size-button);
                height: var(--size-button);
                font-family: var(--font-family-base);
                background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                color: var(--color-text-heading);
                border: none;
                cursor: pointer;
                font-size: 1.05rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                line-height: 1;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);

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

                &:active {
                    transform: scale(.96);
                }

                & svg {
                    display: block;
                    width: 1rem;
                    height: 1rem;
                    flex-shrink: 0;
                    transition: transform var(--transition-fast), fill var(--transition-fast), color var(--transition-fast);
                }
            }

            & .slideshow-dots {
                display: flex;
                align-items: center;
                gap: 1rem;

                & .dot-nav {
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background: rgba(255, 255, 255, 0.5);
                    cursor: pointer;
                    transition: background var(--transition-normal), transform var(--transition-normal);

                    &:hover,
                    &.is-active {
                        background: var(--color-white);
                        transform: scale(1.3);
                    }
                }
            }

            & .slideshow-counter-container {
                opacity: 1;

                & .slideshow-counter {
                    height: var(--size-button);
                    padding: 0 0.75rem;
                    background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                    backdrop-filter: blur(10px) contrast(180%);
                    color: var(--color-text-heading);
                    border: none;
                    font-size: 0.85rem;
                    font-weight: 600;
                    letter-spacing: 0.05em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    line-height: 1;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                }
            }
        }

        &:hover {
            & .slideshow-bottom-bar {
                opacity: 1;
            }
        }
    }

    & .stories-quote-container {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        background-color: var(--format-quote-bg, #faf5ff);
        background-image:
            radial-gradient(circle 240px at 90% 10%, color-mix(in srgb, var(--color-primary) 40%, transparent) 0%, transparent 100%),
            radial-gradient(circle 280px at 10% 90%, color-mix(in srgb, var(--color-primary-light, #eff1e1) 75%, transparent) 0%, transparent 100%),
            repeating-linear-gradient(135deg, transparent, transparent 18px, color-mix(in srgb, var(--footer-background) 8%, transparent) 18px, color-mix(in srgb, var(--format-quote-border, #e9d8fd) 45%, transparent) 19px),
            linear-gradient(160deg, var(--bg-card, #ffffff) 0%, var(--format-quote-bg, #faf5ff) 100%);

        & .post-top-actions {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            box-sizing: border-box;
            z-index: 30;
        }

        & .quote-decor {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;

            /* Opening quote watermark */
            &::before {
                content: '“';
                position: absolute;
                top: -0.6rem;
                left: 1.25rem;
                font-family: Georgia, "Times New Roman", serif;
                font-size: 6.5rem;
                font-weight: 700;
                line-height: 1;
                color: color-mix(in srgb, var(--color-primary, #805ad5) 18%, transparent);
                user-select: none;
                transition: transform 0.4s ease, color 0.4s ease;
                z-index: 1;
            }
        }

        &:hover {
            & .quote-decor::before {
                color: color-mix(in srgb, var(--color-primary, #805ad5) 32%, transparent);
                transform: translateY(-2px);
            }

            & .quote-decor::after {
                color: color-mix(in srgb, var(--format-quote-accent, #805ad5) 24%, transparent);
                transform: translateY(2px);
            }
        }

        & .quote-front-content {
            position: relative;
            z-index: 3;
            padding: 2.25rem 1.75rem 1.5rem 1.75rem;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: var(--color-text-heading, #404554);

            & .entry-content {
                overflow-y: auto;
                max-height: 100%;

                & .wp-block-quote,
                & blockquote.wp-block-quote {
                    border-left: 3px solid var(--format-quote-accent, #805ad5);
                    padding-left: 1.15rem;
                    margin: 0.85rem 0;
                    font-style: italic;
                    color: var(--color-text-body, #2d3748);
                    line-height: 1.6;
                }

                & .wp-block-quote.is-style-large,
                & .wp-block-pullquote {
                    border: none;
                    padding: 1rem 0;
                    text-align: center;
                    font-size: 1.25rem;
                    line-height: 1.45;
                    color: var(--format-quote-color, #6b46c1);
                }

                & .wp-block-quote cite,
                & .wp-block-pullquote cite {
                    display: block;
                    font-size: 0.85rem;
                    font-style: normal;
                    font-weight: 600;
                    margin-top: 0.5rem;
                    color: var(--color-text-muted, #718096);
                    letter-spacing: 0.04em;
                }

                & p.wp-block-paragraph {
                    font-style: italic;
                    color: var(--color-text-body, #2d3748);
                    margin: 0;
                    line-height: 1.6;

                    &.has-x-large-font-size {
                        font-size: 1.6rem;
                    }
                }
            }
        }
    }

    & .stories-video-container {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        background-color: var(--color-black, #000000);
        isolation: isolate;

        & .post-top-actions {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            box-sizing: border-box;
            z-index: 30;
        }

        & .entry-video {
            width: 100%;
            height: 100%;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;

            & iframe,
            & embed,
            & video,
            & img {
                width: 100%;
                height: 100%;
                min-height: 100%;
                object-fit: cover;
                border: none;
                display: block;
            }
        }

        & .custom-video-controls {
            position: absolute;
            bottom: 0rem;
            left: .5rem;
            right: .5rem;
            margin: 0;
            z-index: 8;
            transition: bottom var(--transition-fast);
        }

        &:hover {
            & .custom-video-controls {
                opacity: 1;
                bottom: .5rem;
                visibility: visible;
                transform: translateY(0);
            }
        }

        &.is-fullscreen,
        &:fullscreen,
        &:-webkit-full-screen {
            width: 100vw;
            height: 100vh;
            background-color: #000000;
            display: flex;
            align-items: center;
            justify-content: center;

            & .entry-video {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;

                & video,
                & iframe {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }
        }
    }

    & .stories-image-container {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        background-color: var(--bg-dark, #1a202c);
        isolation: isolate;

        & .post-top-actions {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            box-sizing: border-box;
            z-index: 30;

            & .top-buttons-wrapper {
                display: flex;
                align-items: center;
                gap: 0.4rem;
            }
        }

        & .post-thumbnail,
        & .featured-image-focus {
            width: 100%;
            height: 100%;
            margin: 0;
            display: block;
            overflow: hidden;

            & img {
                width: 100%;
                height: 100%;
                min-height: 100%;
                object-fit: cover;
                display: block;
                transition: transform var(--transition-normal);
            }
        }

        /* EXIF / Image Metadata Badges and Caption inside Info Overlay */
        & .image-overlay-caption {
            margin: 0.35rem 0 0;
            font-size: 0.85rem;
            font-style: italic;
            color: color-mix(in srgb, var(--color-white, #ffffff), transparent 25%);
            line-height: 1.4;
        }

        & .image-overlay-meta-grid {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45rem;
            margin: 0.75rem 0;
            padding: 0.75rem 0;
            border-top: 1px solid color-mix(in srgb, var(--color-white, #ffffff), transparent 88%);
            border-bottom: 1px solid color-mix(in srgb, var(--color-white, #ffffff), transparent 88%);

            & .image-meta-badge {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                background: color-mix(in srgb, var(--color-white, #ffffff), transparent 92%);
                backdrop-filter: blur(8px);
                -webkit-backdrop-filter: blur(8px);
                border: 1px solid color-mix(in srgb, var(--color-white, #ffffff), transparent 85%);
                padding: 0.28rem 0.65rem;
                border-radius: var(--border-radius-sm, 4px);
                font-size: 0.72rem;
                font-weight: 600;
                color: color-mix(in srgb, var(--color-white, #ffffff), transparent 5%);
                line-height: 1;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
                transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

                &:hover {
                    background: color-mix(in srgb, var(--color-white, #ffffff), transparent 84%);
                    border-color: color-mix(in srgb, var(--color-white, #ffffff), transparent 70%);
                    color: var(--color-white, #ffffff);
                }

                & svg {
                    color: var(--color-primary-accent, #47b23c);
                    flex-shrink: 0;
                }
            }
        }
    }

    & .stories-aside-container {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        isolation: isolate;
        --notebook-line-height: 1.75rem;
        background-color: #fefefa;
        background-image:
            repeating-linear-gradient(to bottom,
                transparent,
                transparent calc(var(--notebook-line-height) - 1px),
                #d1dbe6 calc(var(--notebook-line-height) - 1px),
                #d1dbe6 var(--notebook-line-height));
        background-size: 100% var(--notebook-line-height);
        background-position: 0 calc(var(--notebook-line-height) - 0.35rem);

        &:has(.has-small-font-size) {
            --notebook-line-height: 1.4rem;
        }

        &:has(.has-large-font-size) {
            --notebook-line-height: 2.025rem;
        }

        &:has(.has-x-large-font-size) {
            --notebook-line-height: 2.645rem;
        }

        &:has(.has-xx-large-font-size),
        &:has(.has-huge-font-size) {
            --notebook-line-height: 3rem;
        }

        /* Red vertical margin line */
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 38px;
            width: 0;
            height: 100%;
            border-left: 2px solid #e8747480;
            pointer-events: none;
            z-index: 2;
        }

        & .post-top-actions {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            box-sizing: border-box;
            z-index: 30;
        }

        /* Decorative helper element: torn paper left edge + hole punches */
        & .aside-decor {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;

            & .aside-holes {
                position: absolute;
                top: 0;
                left: 12px;
                width: 14px;
                height: 100%;
                pointer-events: none;
                z-index: 3;

                & .aside-hole {
                    position: absolute;
                    left: 0;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: var(--bg-body, #f5f7f5);
                    box-shadow:
                        inset 0 2px 6px color-mix(in srgb, var(--shadow-color), transparent 80%),
                        inset 0 1px 4px color-mix(in srgb, var(--shadow-color), transparent 74%),
                        0 1px 0 color-mix(in srgb, var(--bg-body), transparent 80%);

                    /* Renglones pares (2, 4, 6, 8, 10, 12, 14, 16...) */
                    &:nth-child(1) {
                        top: calc(var(--notebook-line-height) * 2 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(2) {
                        top: calc(var(--notebook-line-height) * 4 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(3) {
                        top: calc(var(--notebook-line-height) * 6 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(4) {
                        top: calc(var(--notebook-line-height) * 8 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(5) {
                        top: calc(var(--notebook-line-height) * 10 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(6) {
                        top: calc(var(--notebook-line-height) * 12 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(7) {
                        top: calc(var(--notebook-line-height) * 14 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(8) {
                        top: calc(var(--notebook-line-height) * 16 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(9) {
                        top: calc(var(--notebook-line-height) * 18 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(10) {
                        top: calc(var(--notebook-line-height) * 20 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(11) {
                        top: calc(var(--notebook-line-height) * 22 - (var(--notebook-line-height) / 2) - 14px);
                    }

                    &:nth-child(12) {
                        top: calc(var(--notebook-line-height) * 24 - (var(--notebook-line-height) / 2) - 14px);
                    }
                }
            }

            /* Subtle paper texture grain overlay */
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23faf8f4'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23f0ece4' fill-opacity='0.4'/%3E%3C/svg%3E");
                opacity: 0.5;
                pointer-events: none;
                z-index: 0;
            }
        }

        & .aside-front-content {
            position: relative;
            z-index: 3;
            padding: 0.85rem 1rem 0.85rem 3.25rem;
            color: var(--color-text-body, #2d3748);
            font-style: normal;
            line-height: var(--notebook-line-height, 1.75rem);

            & .entry-content {
                margin: 0;

                & p {
                    line-height: var(--notebook-line-height, 1.75rem);
                    color: var(--color-black);

                    &.has-small-font-size {
                        font-size: 0.875rem;
                        line-height: var(--notebook-line-height, 1.4rem);
                    }

                    &.has-normal-font-size,
                    &.has-medium-font-size {
                        font-size: 1.125rem;
                        line-height: var(--notebook-line-height, 1.75rem);
                    }

                    &.has-large-font-size {
                        font-size: 1.5rem;
                        line-height: var(--notebook-line-height, 2.025rem);
                        margin-top: 1.2rem;
                        margin-bottom: 1lh;
                    }

                    &.has-x-large-font-size {
                        font-size: 2rem;
                        line-height: var(--notebook-line-height, 2.645rem);
                    }

                    &.has-xx-large-font-size,
                    &.has-huge-font-size {
                        font-size: 2.5rem;
                        line-height: var(--notebook-line-height, 3rem);
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }

    & .stories-standard-container {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        background-color: var(--bg-dark);
        isolation: isolate;

        & .post-thumbnail-bg {
            position: absolute;
            inset: 0;
            z-index: 1;

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
                transition: transform var(--transition-normal);
            }
        }

        &:hover {
            & .post-thumbnail-bg img {
                transform: scale(1.03);
            }
        }

        & .post-top-actions {
            position: absolute;
            top: 0;
            right: 0;
            width: 100%;
            box-sizing: border-box;
            z-index: 30;
        }

        & .standard-bottom-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 1rem;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, transparent 100%);
            padding: 1rem;
            padding-top: 100px;
            z-index: 15;
            color: #ffffff;
            text-align: left;
            transition: opacity var(--transition-fast);

            & .entry-title {
                margin: 0;
                font-size: 1.1rem;
                font-weight: 600;
                line-height: 1.3;
                white-space: normal;
                overflow-wrap: break-word;
                word-break: break-word;
                text-align: left;

                & a {
                    color: var(--color-text-dark, #ffffff);
                    text-decoration: none;
                    transition: color var(--transition-fast);

                    &:hover {
                        color: var(--color-primary-accent, #47b23c);
                    }
                }
            }
        }
    }

    & .post-top-actions {
        position: relative;
        z-index: 99;
        display: flex;
        justify-content: end;
        padding: .5rem;
        gap: .3rem;

        & .inset-shadow-effect {
            opacity: 0;
            transition: opacity var(--transition-fast);

            &:has(.image-lightbox-trigger.gallery-lightbox-trigger) {
                gap: 4px;
            }

            &:has(.button__like.liked),
            &.is-liked {
                opacity: 1;
            }

            &:has(.toggle-info-btn.is-active) {
                opacity: 1;
            }

            & .image-lightbox-trigger,
            & .gallery-lightbox-trigger,
            & .toggle-info-btn,
            & .button__like {
                min-width: var(--size-button);
                height: var(--size-button);
                font-family: var(--font-family-base);
                background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                color: var(--color-text-heading);
                border: none;
                cursor: pointer;
                font-size: 1.05rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                line-height: 1;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), gap var(--transition-fast);

                &:active {
                    transform: scale(.96);
                }

                & svg {
                    display: block;
                    width: 1rem;
                    height: 1rem;
                    flex-shrink: 0;
                    transition: transform var(--transition-fast), fill var(--transition-fast), color var(--transition-fast);
                }
            }

            & .button__like {
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);

                & .like-count {
                    font-size: 1.05rem;
                    font-weight: 600;
                    line-height: 1;
                    display: inline-block;
                    max-width: 80px;
                    opacity: 1;
                    transform: scale(1);
                    overflow: hidden;
                    white-space: nowrap;
                    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

                    &.is-entering {
                        max-width: 0;
                        opacity: 0;
                        transform: scale(0.5);
                    }

                    &.is-leaving {
                        max-width: 0 !important;
                        opacity: 0 !important;
                        transform: scale(0.5) !important;
                    }

                    &:empty {
                        display: none;
                    }
                }

                &:has(.like-count:not(.is-leaving):not(:empty)) {
                    width: auto;
                    padding: 0 0.8rem;
                    gap: 0.5rem;
                }

                &:hover,
                &.liked {
                    color: #f43f5e;

                    & svg {
                        fill: #f43f5e;
                    }
                }

                &.liked {
                    box-shadow: 0 0 12px rgba(244, 63, 94, 0.6), 0 3px 8px rgba(244, 63, 94, 0.4);
                }

                &.animating-like svg {
                    animation: likePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }

                .animating-unlike svg {
                    animation: unlikePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }
            }

            & .toggle-info-btn {

                &:hover,
                &.is-active {
                    color: var(--color-primary);

                    & svg {
                        color: var(--color-primary);
                    }
                }

                &.is-active {
                    background-color: var(--footer-background);
                    box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary, #8bc34a), transparent 35%),
                        0 3px 8px color-mix(in srgb, var(--color-primary-accent, #47b23c), transparent 45%);
                }
            }
        }
    }

    /* Central 3D Album Artwork & Vinyl Disc Presentation */
    & .audio-artwork-wrapper {
        position: relative;
        z-index: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
        min-width: 0;
        padding: 0.25rem 0.5rem;
        cursor: pointer;
        perspective: 480px;
        perspective-origin: 50% 20%;

        /* Resting State: Vista frontal plana (0deg) con estructura 3D preservada */
        & .audio-artwork-3d {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
            transform-origin: 50% 50%;
            transform: rotateX(50deg) rotateY(0deg) rotateZ(0deg) translateY(0) scale(1.5);
            transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
            will-change: transform;
        }

        /* Album Sleeve */
        & .audio-cover-art {
            position: relative;
            z-index: 2;
            width: 108px;
            height: 108px;
            border-radius: 4px;
            overflow: hidden;
            transform: translateZ(10px);
            box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.4), -2px 4px 0 rgba(0, 0, 0, 0.35);
            transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1), box-shadow 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
            background: var(--bg-card);

            /* 3D Glossy Light Reflection Effect on Album Sleeve */
            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(130deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 60%);
                pointer-events: none;
                z-index: 3;
                transition: opacity var(--transition-fast);
            }

            & img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            & .audio-cover-placeholder {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, var(--accent-background-1), var(--accent-background-2));
                color: var(--color-white);
            }

            /* Album Sleeve Title Banner */
            & .audio-cover-title-badge {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 4;
                padding: 2.5rem 0.35rem 0.25rem;
                background: linear-gradient(0deg, #00000080, transparent);
                pointer-events: none;
                box-sizing: border-box;

                & .audio-cover-title-text {
                    display: block;
                    color: var(--color-white);
                    font-size: 0.85rem;
                    font-weight: 700;
                    line-height: 1.2;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    letter-spacing: 0.015em;
                    text-shadow: 0 1px 3px color-mix(in srgb, var(--color-black), transparent 20%);
                }
            }
        }

        /* Vinyl Disc */
        & .audio-vinyl-disc {
            position: absolute;
            width: 104px;
            height: 104px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--color-text-body) 0%, var(--bg-dark) 40%, color-mix(in srgb, var(--bg-dark), var(--color-black) 70%) 75%, var(--color-black) 100%);
            transform: translateX(12px) translateZ(0);
            opacity: 0.95;
            transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1), opacity 0.4s ease;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;

            &::before {
                content: '';
                position: absolute;
                inset: 5px;
                border-radius: 50%;
                border: 1px dashed color-mix(in srgb, var(--color-white), transparent 92%);
                box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--color-black), transparent 45%),
                    inset 0 0 0 12px color-mix(in srgb, var(--color-white), transparent 96%),
                    inset 0 0 0 18px color-mix(in srgb, var(--color-black), transparent 35%);
                pointer-events: none;
            }

            & .vinyl-center-label {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                overflow: hidden;
                border: 2px solid var(--color-black);
                box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-white), transparent 75%);
                background: var(--color-primary);
                display: flex;
                align-items: center;
                justify-content: center;

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                & .vinyl-center-icon {
                    color: var(--color-white);
                    display: flex;
                }
            }
        }
    }

    /* Hover and Playing States for Artwork and Vinyl */
    & .stories-audio-container:hover,
    & .stories-audio-container.is-playing {
        & .audio-artwork-3d {
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-15%) translateY(0) scale(1.5);
        }

        & .audio-cover-art {
            transform: translateZ(16px);
            box-shadow: -2px 3px 0 rgba(0, 0, 0, 0.45), -4px 6px 0 rgba(0, 0, 0, 0.35);
        }

        & .audio-vinyl-disc {
            transform: translateX(40px) translateZ(0);
            opacity: 1;
        }
    }

    & .stories-audio-container.is-playing {
        & .audio-vinyl-disc {
            animation: vinylSpin 3.2s linear infinite;
        }
    }

    /* Custom Unified Media Player Controls (Audio & Video) */
    & .custom-controls {
        position: relative;
        z-index: 8;
        margin: .5rem;
        padding: .5rem;
        background: color-mix(in srgb, var(--bg-card), transparent 10%);
        border: 1px solid color-mix(in srgb, var(--color-white), transparent 80%);
        box-shadow: var(--shadow-glass-controls);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        border-radius: var(--badge-border-radius);
        opacity: 0;
        visibility: hidden;
        transform: translateY(.5rem);
        transition: opacity var(--transition-normal), visibility var(--transition-normal), transform var(--transition-normal), background-color var(--transition-fast), box-shadow var(--transition-fast);
        isolation: isolate;

        /* Play / Pause / Mute / Fullscreen Buttons */
        & .audio-btn,
        & .video-btn {
            background: transparent;
            border: none;
            color: var(--color-text-heading);
            cursor: pointer;
            padding: 0;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);

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

            &:active {
                transform: scale(0.92);
            }

            & svg {
                display: block;
                width: 1rem;
                height: 1rem;
                flex-shrink: 0;
                fill: currentColor;
                transition: transform var(--transition-fast);
            }

            &.play-pause-btn {
                width: 28px;
                height: 28px;
                min-width: 28px;
                border-radius: 50%;
                background: var(--color-primary);
                color: var(--color-white);
                box-shadow: 0 2px 6px color-mix(in srgb, var(--color-black), transparent 75%);

                &:hover {
                    background: var(--color-primary-accent);
                    color: var(--color-white);
                    transform: scale(1.08);
                }

                &:active {
                    transform: scale(0.94);
                }

                & svg {
                    width: 0.85rem;
                    height: 0.85rem;
                    fill: currentColor;
                }
            }

            &.mute-btn,
            &.fullscreen-btn {
                width: 24px;
                height: 24px;
                min-width: 24px;

                &:hover {
                    transform: scale(1.1);
                }
            }
        }

        /* Progress Bar Container */
        & .audio-progress-container,
        & .video-progress-container {
            flex: 1;
            height: 6px;
            background: color-mix(in srgb, var(--color-text-heading), transparent 85%);
            border-radius: 999px;
            cursor: pointer;
            position: relative;
            overflow: visible;
            display: flex;
            align-items: center;
            transition: height var(--transition-fast);

            &:hover {
                height: 8px;

                & .audio-progress-handle,
                & .video-progress-handle {
                    opacity: 1;
                    transform: scale(1);
                }
            }

            & .audio-buffer-bar,
            & .video-buffer-bar {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 0%;
                background: color-mix(in srgb, var(--color-text-heading), transparent 75%);
                border-radius: 999px;
                pointer-events: none;
                transition: width 0.2s ease;
            }

            & .audio-progress-bar,
            & .video-progress-bar {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 0%;
                background: linear-gradient(90deg, var(--color-primary), var(--color-primary-accent));
                border-radius: 999px;
                pointer-events: none;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                transition: width 0.05s linear;
            }

            & .audio-progress-handle,
            & .video-progress-handle {
                position: absolute;
                right: -4px;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: var(--color-white);
                box-shadow: 0 1px 4px color-mix(in srgb, var(--color-black), transparent 60%);
                opacity: 0;
                transform: scale(0.7);
                transition: opacity var(--transition-fast), transform var(--transition-fast);
            }
        }

        /* Time Display */
        & .audio-time-display,
        & .video-time-display {
            color: var(--color-text-heading);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            opacity: 0.85;
        }

        /* Audio Wave Equalizer */
        & .audio-wave-equalizer {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 14px;
            padding: 0 2px;

            & .eq-bar {
                width: 2.5px;
                height: 3px;
                background: var(--color-primary-accent);
                border-radius: 1px;
                transition: height 0.2s ease;
            }
        }
    }

    /* Playing State: Keeps controls visible and animates wave equalizer */
    & .stories-audio-container.is-playing,
    & .stories-video-container.is-playing {
        & .custom-controls {
            visibility: visible;
            transform: translateY(0);
        }

        & .audio-wave-equalizer {
            & .eq-bar-1 {
                animation: eqDance 0.8s ease-in-out infinite alternate;
            }

            & .eq-bar-2 {
                animation: eqDance 0.5s ease-in-out infinite 0.15s alternate;
            }

            & .eq-bar-3 {
                animation: eqDance 0.7s ease-in-out infinite 0.3s alternate;
            }

            & .eq-bar-4 {
                animation: eqDance 0.6s ease-in-out infinite 0.05s alternate;
            }
        }
    }

    /* Fallback / External Embed Players */
    & .entry-audio-iframe,
    & .entry-video-iframe {
        position: relative;
        z-index: 5;
        margin: 0 0.5rem 0.5rem;
        border-radius: var(--badge-border-radius);
        overflow: hidden;

        & iframe {
            width: 100%;
            border: none;
            display: block;
        }
    }

    &:hover {
        box-shadow: var(--shadow-card-hover);

        & .custom-controls {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        & .post-top-actions {
            & .inset-shadow-effect {
                opacity: 1;
            }
        }

        & .slideshow-control-container,
        & .slideshow-counter-container {
            opacity: 1;
        }
    }

    & .info-overlay {
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg-overlay);
        color: var(--color-white);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(8px);
        transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
        z-index: 20;
        display: grid;
        grid-template-rows: auto 1fr auto;
        overflow: hidden;

        &:not(:has(.post-tag)),
        &:not(:has(.entry-footer)) {
            grid-template-rows: auto 1fr;

            & .entry-footer {
                display: none;
            }
        }

        &.is-visible {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0);
        }

        /* 1. Header: Etiqueta del tipo de post */
        & .entry-header {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            min-height: 0;
            padding: 1rem;
            position: relative;

            &::before,
            &::after {
                content: '';
                position: absolute;
                bottom: 1px;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: color-mix(in srgb, #000000, transparent 3%);
            }

            &::after {
                bottom: 0;
                background-color: color-mix(in srgb, var(--color-white), transparent 90%);
            }

            & .entry-badge {
                margin: 0;

                & .post-type-badge {
                    display: flex;
                    align-items: center;
                    gap: .5rem;
                    color: var(--color-primary);
                    text-transform: uppercase;
                    letter-spacing: 1.5px;
                    font-weight: 600;

                    & svg {
                        width: 18px;
                        height: 18px;
                    }
                }
            }
        }

        /* 2. Body: Toda la información del post (Título, Meta, Extracto) */
        & .entry-body {
            min-height: 0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
            padding: 1rem 0.85rem 1rem 1rem;
            -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent 100%), linear-gradient(black, black);
            mask-image: linear-gradient(to bottom, black calc(100% - 3rem), transparent 100%), linear-gradient(black, black);
            -webkit-mask-size: calc(100% - 12px) 100%, 12px 100%;
            mask-size: calc(100% - 12px) 100%, 12px 100%;
            -webkit-mask-position: left top, right top;
            mask-position: left top, right top;
            -webkit-mask-repeat: no-repeat, no-repeat;
            mask-repeat: no-repeat, no-repeat;

            &[data-scroll-state="start"] {
                -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black) !important;
                mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black) !important;
            }

            &[data-scroll-state="middle"] {
                -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3rem, black calc(100% - 3rem), transparent 100%), linear-gradient(black, black) !important;
                mask-image: linear-gradient(to bottom, transparent 0%, black 3rem, black calc(100% - 3rem), transparent 100%), linear-gradient(black, black) !important;
            }

            &[data-scroll-state="end"] {
                -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 3rem, black 100%), linear-gradient(black, black) !important;
                mask-image: linear-gradient(to bottom, transparent 0%, black 3rem, black 100%), linear-gradient(black, black) !important;
            }

            &[data-scroll-state="none"] {
                -webkit-mask-image: none !important;
                mask-image: none !important;
                animation: none !important;
            }

            cursor: grab;

            &.is-dragging {
                cursor: grabbing;
                user-select: none;
            }

            & a,
            & button {
                cursor: pointer;
            }

            &::-webkit-scrollbar {
                width: 4px;
            }

            &:hover::-webkit-scrollbar {
                width: 10px;
            }

            &::-webkit-scrollbar-button,
            &::-webkit-scrollbar-button:single-button,
            &::-webkit-scrollbar-button:vertical:decrement,
            &::-webkit-scrollbar-button:vertical:increment,
            &::-webkit-scrollbar-button:start,
            &::-webkit-scrollbar-button:end {
                display: none !important;
                width: 0 !important;
                height: 0 !important;
                background: transparent !important;
            }

            &::-webkit-scrollbar-track {
                background: transparent;
            }

            &::-webkit-scrollbar-thumb {
                background: color-mix(in srgb, var(--color-primary, #8bc34a), transparent 45%);
                cursor: pointer;
                transition: background var(--transition-fast);

                &:hover {
                    background: var(--color-primary, #8bc34a);
                    cursor: pointer;
                }

                &:active {
                    background: var(--color-primary-accent, #47b23c);
                    cursor: grabbing;
                }
            }

            @supports not selector(::-webkit-scrollbar) {
                scrollbar-width: thin;
                scrollbar-color: color-mix(in srgb, var(--color-primary, #8bc34a), transparent 40%) transparent;
            }

            & .entry-title {
                font-size: 1.08rem;
                font-weight: 700;
                line-height: 1.3;
                margin: 0;

                & a {
                    color: var(--color-white);
                    text-decoration: none;
                    transition: color var(--transition-fast);

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

            & .entry-meta {
                font-size: 0.74rem;
                color: color-mix(in srgb, var(--color-white), transparent 35%);
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem 0.85rem;
                align-items: center;

                & .posted-on {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.35rem;

                    & svg {
                        width: 13px;
                        height: 13px;
                        fill: currentColor;
                        opacity: 0.85;
                        flex-shrink: 0;
                    }

                    & a {
                        color: inherit;
                        text-decoration: none;
                        transition: color var(--transition-fast);

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

                & .post--author {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.35rem;

                    & .avatar {
                        width: 18px;
                        height: 18px;
                        border-radius: 50%;
                        object-fit: cover;
                        border: 1px solid color-mix(in srgb, var(--color-white), transparent 70%);
                        display: block;
                        flex-shrink: 0;
                    }

                    & .author-name {
                        font-size: inherit;
                        font-weight: 600;
                        margin: 0;
                        display: inline-flex;
                        line-height: 1;

                        & a {
                            color: inherit;
                            text-decoration: none;
                            transition: color var(--transition-fast);

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

                    & .author-description {
                        display: none;
                    }
                }

                & .entry-categories {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.35rem;
                    padding: 0.2rem 0.55rem;
                    background-color: color-mix(in srgb, var(--color-primary, #8bc34a), transparent 88%);
                    border: 1px solid color-mix(in srgb, var(--color-primary, #8bc34a), transparent 75%);
                    color: var(--color-primary);
                    font-size: 0.72rem;
                    font-weight: 600;
                    line-height: 1;
                    transition: all var(--transition-fast);

                    & svg {
                        width: 12px;
                        height: 12px;
                        fill: currentColor;
                        flex-shrink: 0;
                    }

                    & a {
                        color: inherit;
                        text-decoration: none;
                        transition: color var(--transition-fast);

                        &:hover {
                            color: var(--color-white);
                        }
                    }

                    &:hover {
                        background-color: color-mix(in srgb, var(--color-primary, #8bc34a), transparent 60%);
                        border-color: color-mix(in srgb, var(--color-primary, #8bc34a), transparent 30%);
                        color: var(--color-white);
                    }
                }

                & a {
                    color: color-mix(in srgb, var(--color-white), transparent 25%);
                    text-decoration: none;
                    transition: color var(--transition-fast);

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

            & .entry-summary {
                font-size: .9rem;
                line-height: 1.55;
                color: color-mix(in srgb, var(--color-white), transparent 18%);
                margin-top: 0.25rem;

                & p {
                    margin: 0;

                    & a {
                        color: var(--color-primary);
                    }

                    & .read-more {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.25rem;
                        margin-top: 0.5rem;
                        color: var(--color-primary);
                        font-weight: 600;
                        text-decoration: none;
                        transition: color var(--transition-fast), transform var(--transition-fast);

                        &:hover {
                            color: var(--color-primary-accent);
                            transform: translateX(3px);
                        }
                    }
                }
            }
        }

        /* 3. Footer: Etiquetas con diseño Essentialis y mask-image dinámico al scroll */
        & .entry-footer {

            &:empty,
            &:not(:has(.post-tag)) {
                display: none;
            }

            min-height: 0;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding: 1rem;
            position: relative;
            transition: padding var(--transition-fast);

            &:has(.post--tags:not([data-scroll-state="none"])) {
                padding: 0.85rem 1rem 0.65rem;
            }

            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 1px;
                background-color: color-mix(in srgb, #000000, transparent 3%);
            }

            &::after {
                top: 1px;
                background-color: color-mix(in srgb, var(--color-white), transparent 90%);
            }

            & .post--tags__wrapper {
                width: 100%;
                overflow: hidden;
            }

            & .post--tags {
                display: flex;
                gap: 0.2rem;
                overflow-x: overlay;
                overflow-y: hidden;
                padding-bottom: 0;
                cursor: grab;
                -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
                mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
                -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;

                &:not([data-scroll-state="none"]) {
                    padding-bottom: 4px;
                }

                &[data-scroll-state="start"] {
                    -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%) !important;
                    mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%) !important;
                }

                &[data-scroll-state="middle"] {
                    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%) !important;
                    mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%) !important;
                }

                &[data-scroll-state="end"] {
                    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black 100%) !important;
                    mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black 100%) !important;
                }

                &[data-scroll-state="none"] {
                    -webkit-mask-image: none !important;
                    mask-image: none !important;
                    animation: none !important;
                    padding-bottom: 0 !important;

                    &::-webkit-scrollbar {
                        display: none !important;
                        height: 0 !important;
                    }
                }

                &.is-dragging {
                    cursor: grabbing;
                    user-select: none;
                }

                & a,
                & button {
                    cursor: pointer;
                }

                &::-webkit-scrollbar {
                    height: 3px;
                }

                &::-webkit-scrollbar-button,
                &::-webkit-scrollbar-button:single-button,
                &::-webkit-scrollbar-button:horizontal:decrement,
                &::-webkit-scrollbar-button:horizontal:increment,
                &::-webkit-scrollbar-button:vertical:decrement,
                &::-webkit-scrollbar-button:vertical:increment,
                &::-webkit-scrollbar-button:start,
                &::-webkit-scrollbar-button:end {
                    display: none !important;
                    width: 0 !important;
                    height: 0 !important;
                    background: transparent !important;
                }

                &::-webkit-scrollbar-track {
                    background: transparent;
                }

                &::-webkit-scrollbar-thumb {
                    background: color-mix(in srgb, var(--color-primary, #8bc34a), transparent 45%);
                    border-radius: 999px;
                    cursor: pointer;
                    transition: background var(--transition-fast);

                    &:hover {
                        background: var(--color-primary, #8bc34a);
                        cursor: pointer;
                    }

                    &:active {
                        background: var(--color-primary-accent, #47b23c);
                        cursor: grabbing;
                    }
                }

                @supports not selector(::-webkit-scrollbar) {
                    scrollbar-width: thin;
                    scrollbar-color: color-mix(in srgb, var(--color-primary, #8bc34a), transparent 40%) transparent;
                }
            }

            & .post-tag {
                display: inline-flex;
                flex-wrap: nowrap;
                white-space: nowrap;
                align-items: center;
                gap: 0.35rem;
                padding: 0.3rem 0.55rem;
                font-size: 0.72rem;
                font-weight: 600;
                line-height: 1;
                color: var(--color-white);
                background-color: color-mix(in srgb, var(--color-white), transparent 85%);
                border: 1px solid color-mix(in srgb, var(--color-white), transparent 80%);
                text-decoration: none;
                transition: all 0.3s ease;
                background-image: linear-gradient(-60deg, transparent, transparent 40%, rgba(255, 255, 255, 0.25) 40%, rgba(255, 255, 255, 0.25) 60%, transparent 60%, transparent 100%);
                background-size: 200% 100%;
                background-position-x: 150%;
                background-repeat: no-repeat;
                flex-shrink: 0;

                &:hover {
                    cursor: pointer;
                    background-position-x: -150%;
                    transition: all 0.8s;
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    border-color: var(--color-primary-accent);
                }

                &:active {
                    transform: translateY(1px);
                }

                & svg {
                    display: block;
                    width: 11px;
                    height: 11px;
                    flex-shrink: 0;
                    fill: currentColor;
                }
            }
        }
    }

    /* Pause and disable background animations when info overlay is visible */
    &:has(.info-overlay.is-visible) {

        & .audio-bg-glow,
        & .audio-bg-frequency-rings,
        & .audio-bg-frequency-rings::after,
        & .spectrum-bar,
        & .audio-vinyl-disc,
        & .audio-wave-equalizer .eq-bar {
            animation-play-state: paused !important;
        }
    }
}

.inset-shadow-effect {
    height: auto;
    padding: 4px;
    background-color: color-mix(in srgb, var(--shadow-color), transparent 80%);
    border: 1px solid color-mix(in srgb, var(--shadow-color), transparent 86%);
    box-shadow: inset 0 2px 4px color-mix(in srgb, var(--shadow-color), transparent 86%),
        inset 0 1px 2px color-mix(in srgb, var(--shadow-color), transparent 80%),
        0 1px 0 color-mix(in srgb, var(--color-white), transparent 50%);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-fast);
    position: relative;
    flex-shrink: 0;
}

/* =============================================================================
                   S I N G L E   S T O R Y   ( P O S T S )
   ============================================================================= */

.single-story {
    box-sizing: border-box;
    width: 100%;
    max-width: 960px;
    margin-inline: auto;
    margin-bottom: 3.5rem;

    & .entry-header {
        margin-bottom: 2.25rem;

        & .entry-header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.85rem;
            margin-bottom: 1.5rem;

            & .entry-badges-group {
                display: inline-flex;
                align-items: center;
                gap: 0.6rem;
                flex-wrap: wrap;

                & .post-type-badge {
                    display: flex;
                    align-items: center;
                    gap: .5rem;
                    font-weight: 500;
                    margin-right: 1rem;

                    & svg {
                        width: 16px;
                        height: 16px;
                    }
                }
            }

            & .entry-category-badge {
                display: inline-flex;
                align-items: center;
                padding: 0.35rem 0.85rem;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                background-color: color-mix(in srgb, var(--color-primary), transparent 88%);
                color: var(--color-primary-accent);
                text-decoration: none;
                border: 1px solid color-mix(in srgb, var(--color-primary), transparent 75%);
                transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

                &:hover {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 60%);
                }
            }

            & .entry-reading-time {
                display: inline-flex;
                align-items: center;
                gap: 0.45rem;
                font-size: 0.8rem;
                font-weight: 600;
                color: var(--color-text-muted);
                background-color: color-mix(in srgb, var(--bg-card), transparent 25%);
                padding: 0.35rem 0.75rem;
                border: 1px solid var(--border-light);
                border-radius: var(--badge-border-radius);

                & svg {
                    width: 14px;
                    height: 14px;
                    fill: currentColor;
                    opacity: 0.75;
                }
            }

            & .entry-meta-top-right {
                display: inline-flex;
                align-items: center;

                & .meta-likes .like-btn-container {
                    position: static;
                    opacity: 1;
                    display: inline-flex;
                }
            }
        }

        & .entry-title {
            font-size: clamp(2.2rem, 5vw, 3.4rem);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -0.025em;
            color: var(--color-text-heading);
            margin: 0 0 1.25rem 0;
            text-wrap: balance;
            word-break: break-word;
        }

        & .entry-subtitle {
            margin: 0 0 1.75rem 0;
            padding-left: 1.25rem;
            border-left: 3px solid var(--color-primary);

            & p {
                font-size: clamp(1.1rem, 2vw, 1.25rem);
                line-height: 1.6;
                color: var(--color-text-body);
                margin: 0;
                font-weight: 400;
                font-style: italic;
            }
        }

        & .entry-meta-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 1.25rem;
            padding: 1rem;
            background: var(--bg-card);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-card);
            margin-top: 1.5rem;
            margin-bottom: 2rem;

            & .meta-author-side {
                display: flex;
                align-items: center;
                gap: 0.85rem;

                & .author-avatar-link {
                    display: block;
                    position: relative;
                    padding: 2px;
                    border-radius: 50%;
                    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-accent));
                    transition: transform var(--transition-fast), box-shadow var(--transition-fast);

                    &:hover {
                        transform: scale(1.06);
                        box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 60%);
                    }

                    & .author-avatar {
                        width: 44px;
                        height: 44px;
                        border-radius: 50%;
                        object-fit: cover;
                        display: block;
                    }
                }

                & .author-info {
                    display: flex;
                    flex-direction: column;
                    gap: 0.15rem;

                    & .author-byline {
                        font-size: 0.72rem;
                        text-transform: uppercase;
                        letter-spacing: 0.06em;
                        font-weight: 700;
                        color: var(--color-text-muted);
                    }

                    & .author-name {
                        font-size: 0.95rem;
                        font-weight: 700;
                        color: var(--color-text-heading);
                        text-decoration: none;
                        transition: color var(--transition-fast);

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

            & .meta-details-side {
                display: flex;
                align-items: center;
                gap: 1.25rem;
                flex-wrap: wrap;

                & .meta-item {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.45rem;
                    font-size: 0.85rem;
                    font-weight: 600;
                    color: var(--color-text-muted);
                    text-decoration: none;
                    transition: color var(--transition-fast);

                    & svg {
                        width: 15px;
                        height: 15px;
                        fill: currentColor;
                        opacity: 0.75;
                    }

                    &.meta-comments:hover {
                        color: var(--color-primary-accent);
                    }
                }

                & .meta-likes {
                    display: inline-flex;
                    align-items: center;
                }
            }

            @media (max-width: 680px) {
                flex-direction: column;
                align-items: stretch;
                padding: 1.1rem;
                gap: 1rem;

                & .meta-details-side {
                    width: 100%;
                    justify-content: space-between;
                    border-top: 1px solid var(--border-light);
                    padding-top: 0.85rem;
                }
            }
        }

        & .like-btn-container {
            position: static;
            opacity: 1;
            display: inline-flex;
            transition: all var(--transition-fast);

            &:hover,
            &.is-liked {
                background: color-mix(in srgb, #f43f5e, transparent 82%);
                border-color: color-mix(in srgb, #f43f5e, transparent 75%);
            }

            & .button__like {
                min-width: var(--size-button, 36px);
                height: var(--size-button, 36px);
                font-family: var(--font-family-base);
                background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                color: var(--color-text-heading);
                border: none;
                cursor: pointer;
                font-size: 0.95rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                line-height: 1;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast), width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), gap 0.35s cubic-bezier(0.4, 0, 0.2, 1);

                &:active {
                    transform: scale(0.96);
                }

                & svg {
                    display: block;
                    width: 1rem;
                    height: 1rem;
                    flex-shrink: 0;
                    transition: transform var(--transition-fast), fill var(--transition-fast), color var(--transition-fast);
                }

                & .like-count {
                    font-size: 0.9rem;
                    font-weight: 600;
                    line-height: 1;
                    display: inline-block;
                    max-width: 80px;
                    opacity: 1;
                    transform: scale(1);
                    overflow: hidden;
                    white-space: nowrap;
                    transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);

                    &.is-entering {
                        max-width: 0;
                        opacity: 0;
                        transform: scale(0.5);
                    }

                    &.is-leaving {
                        max-width: 0 !important;
                        opacity: 0 !important;
                        transform: scale(0.5) !important;
                    }

                    &:empty {
                        display: none;
                    }
                }

                &:has(.like-count:not(.is-leaving):not(:empty)) {
                    width: auto;
                    padding: 0 0.8rem;
                    gap: 0.5rem;
                }

                &:hover,
                &.liked {
                    color: #f43f5e;

                    & svg {
                        fill: #f43f5e;
                    }
                }

                &.liked {
                    background-color: var(--bg-card);
                    box-shadow: 0 0 12px rgba(244, 63, 94, 0.45), 0 3px 8px rgba(244, 63, 94, 0.3);
                }

                &.animating svg,
                &.animating-like svg {
                    animation: likePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }

                &.animating-unlike svg {
                    animation: unlikePulse 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                }
            }
        }
    }

    & .post-thumbnail {
        margin: 0 0 2.5rem 0;
        overflow: hidden;
        box-shadow: var(--shadow-card);
        background: #000;

        & img {
            width: 100%;
            height: auto;
            max-height: 560px;
            object-fit: cover;
            display: block;
            transition: transform var(--transition-smooth);

            &:hover {
                transform: scale(1.015);
            }
        }

        & .thumbnail-caption {
            padding: 0.75rem 1.25rem;
            font-size: 0.82rem;
            color: var(--color-text-muted);
            text-align: center;
            background: var(--bg-card);
            font-style: italic;
            border-top: 1px solid var(--border-light);
        }
    }

    & .entry-content {
        font-size: 1.15rem;
        line-height: 1.85;
        color: var(--color-text-body);
        margin-bottom: 2.5rem;

        & p {
            margin-bottom: 1.6rem;
        }

        & img {
            max-width: 100%;
            height: auto;
            border-radius: var(--badge-border-radius);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }
    }

    & .entry-footer {
        padding-top: 2rem;
        border-top: 1px solid var(--border-light);
        margin-top: 3rem;
        font-size: 0.92rem;
        color: var(--color-text-muted);
        display: flex;
        flex-wrap: wrap;
        gap: 1.25rem;
        align-items: center;
        justify-content: space-between;

        & .cat-links,
        & .tags-links {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--color-text-muted);
        }

        & .cat-links {
            & a {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                padding: 0.35rem 0.8rem;
                font-size: 0.75rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 0.06em;
                line-height: 1;
                text-decoration: none;
                color: var(--color-primary-accent);
                background-color: color-mix(in srgb, var(--color-primary), transparent 88%);
                border: 1px solid color-mix(in srgb, var(--color-primary), transparent 75%);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
                transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

                &:hover {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    border-color: var(--color-primary);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 60%);
                }
            }
        }

        & .tags-links {

            & a,
            & .post-tag {
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                padding: 0.32rem 0.75rem;
                font-size: 0.76rem;
                font-weight: 600;
                line-height: 1;
                text-decoration: none;
                color: var(--color-text-heading);
                background-color: color-mix(in srgb, var(--bg-card), transparent 15%);
                border: 1px solid var(--border-light);
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
                transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);

                &::before {
                    content: '#';
                    color: var(--color-primary-accent);
                    font-weight: 700;
                    opacity: 0.85;
                    transition: color var(--transition-fast);
                }

                &:hover {
                    background-color: var(--color-primary);
                    color: var(--color-white);
                    border-color: var(--color-primary);
                    transform: translateY(-1px);
                    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 55%);

                    &::before {
                        color: var(--color-white);
                        opacity: 1;
                    }
                }
            }
        }

        @media (max-width: 680px) {
            flex-direction: column;
            align-items: flex-start;
            gap: 1rem;
        }
    }
}

/* =============================================================================
                   GUTENBERG FONT SIZE UTILITY CLASSES
   ============================================================================= */

.has-small-font-size {
    font-size: 0.875rem;
}

.has-normal-font-size,
.has-medium-font-size {
    font-size: 1.125rem;
}

.has-large-font-size {
    font-size: 1.5rem;
    line-height: 1.29;
    margin-top: 1.2rem;
    margin-bottom: 1.2lh;
}

.has-x-large-font-size {
    font-size: 2rem;
}

.has-xx-large-font-size,
.has-huge-font-size {
    font-size: 2.5rem;
    line-height: 1.2;
}

/* =============================================================================
                   S I N G L E   A U D I O   S T O R Y
   ============================================================================= */

.single-audio-story {
    & .single-audio-player-hero {
        position: relative;
        isolation: isolate;
        z-index: 0;
        margin: 2rem 0 2.5rem;
        min-height: 280px;
        height: 320px;
        box-shadow: var(--shadow-card);
        display: grid;
        grid-template-rows: 1fr auto;
        overflow: hidden;
        border-radius: var(--badge-border-radius);
        transition: box-shadow var(--transition-fast);

        & .audio-cover-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            background: radial-gradient(circle at 50% 35%, var(--header-background) 0%, var(--color-secondary) 50%, color-mix(in srgb, var(--color-tertiary), var(--color-quaternary) 55%) 100%);

            & .audio-bg-glow {
                position: absolute;
                top: 45%;
                left: 50%;
                width: 320px;
                height: 320px;
                transform: translate(-50%, -50%);
                border-radius: 50%;
                background: radial-gradient(circle, color-mix(in srgb, var(--color-primary), transparent 46%) 0%, color-mix(in srgb, var(--accent-background-1), transparent 86%) 45%, transparent 70%);
                filter: blur(36px);
                opacity: 0.75;
                animation: audioGlowPulse 4.5s ease-in-out infinite alternate;
                pointer-events: none;
            }

            & .audio-bg-frequency-rings {
                position: absolute;
                top: 45%;
                left: 50%;
                width: 220px;
                height: 220px;
                margin-top: -110px;
                margin-left: -110px;
                border-radius: 50%;
                background: radial-gradient(circle,
                        color-mix(in srgb, var(--color-primary-accent, #47b23c) 22%, transparent) 0%,
                        color-mix(in srgb, var(--color-primary, #8bc34a) 12%, transparent) 40%,
                        color-mix(in srgb, var(--accent-background-2, #89c39d) 6%, transparent) 70%,
                        transparent 100%);
                box-shadow:
                    0 0 0 30px color-mix(in srgb, var(--color-primary-accent, #47b23c) 12%, transparent),
                    0 0 0 70px color-mix(in srgb, var(--color-primary, #8bc34a) 8%, transparent),
                    0 0 0 120px color-mix(in srgb, var(--accent-background-2, #89c39d) 5%, transparent),
                    0 0 0 180px color-mix(in srgb, var(--color-primary-light, #eff1e1) 25%, transparent);
                pointer-events: none;
                animation: audioWaveExpand 6s cubic-bezier(0.25, 1, 0.5, 1) infinite;

                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    border-radius: 50%;
                    background: inherit;
                    box-shadow: inherit;
                    animation: audioWaveExpand 6s cubic-bezier(0.25, 1, 0.5, 1) infinite 3s;
                }
            }

            & .audio-bg-bars {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 55%;
                display: flex;
                align-items: flex-end;
                overflow: hidden;
                pointer-events: none;
                box-sizing: border-box;
                mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
                -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);

                & .audio-bars-spectrum {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: flex-end;
                    justify-content: space-between;
                    gap: 4px;
                    padding: 0 1rem;

                    & .spectrum-bar {
                        flex: 1 1 0;
                        max-width: 8px;
                        height: 100%;
                        border-radius: 4px 4px 1px 1px;
                        background: linear-gradient(180deg,
                                color-mix(in srgb, var(--accent-background-1, #89c39d) 90%, transparent) 0%,
                                color-mix(in srgb, var(--color-primary-accent, #47b23c) 75%, transparent) 45%,
                                color-mix(in srgb, var(--color-primary, #8bc34a) 40%, transparent) 100%);
                        box-shadow: 0 -2px 6px color-mix(in srgb, var(--color-primary-accent, #47b23c) 25%, transparent);
                        opacity: 0.35;
                        transform-origin: bottom center;
                        transform: scaleY(0.14);
                        transition: opacity var(--transition-normal), filter var(--transition-normal);
                        animation: spectrumDanceAmbient 2.2s ease-in-out infinite alternate;

                        /* Staggered Rhythm & Frequencies for Spectrum Bars */
                        &:nth-child(odd) {
                            animation-duration: 2.1s;
                        }

                        &:nth-child(even) {
                            animation-duration: 1.7s;
                        }

                        &:nth-child(3n) {
                            animation-duration: 2.5s;
                        }

                        &:nth-child(4n) {
                            animation-duration: 1.4s;
                        }

                        &:nth-child(5n) {
                            animation-duration: 2.8s;
                        }

                        &:nth-child(1) {
                            animation-delay: -0.2s;
                        }

                        &:nth-child(2) {
                            animation-delay: -0.7s;
                        }

                        &:nth-child(3) {
                            animation-delay: -1.3s;
                        }

                        &:nth-child(4) {
                            animation-delay: -0.5s;
                        }

                        &:nth-child(5) {
                            animation-delay: -1.8s;
                        }

                        &:nth-child(6) {
                            animation-delay: -0.9s;
                        }

                        &:nth-child(7) {
                            animation-delay: -1.5s;
                        }

                        &:nth-child(8) {
                            animation-delay: -0.3s;
                        }

                        &:nth-child(9) {
                            animation-delay: -1.1s;
                        }

                        &:nth-child(10) {
                            animation-delay: -1.7s;
                        }

                        &:nth-child(11) {
                            animation-delay: -0.4s;
                        }

                        &:nth-child(12) {
                            animation-delay: -1.2s;
                        }

                        &:nth-child(13) {
                            animation-delay: -0.8s;
                        }

                        &:nth-child(14) {
                            animation-delay: -1.6s;
                        }

                        &:nth-child(15) {
                            animation-delay: -0.6s;
                        }

                        &:nth-child(16) {
                            animation-delay: -1.4s;
                        }

                        &:nth-child(17) {
                            animation-delay: -0.1s;
                        }

                        &:nth-child(18) {
                            animation-delay: -1.9s;
                        }

                        &:nth-child(19) {
                            animation-delay: -0.7s;
                        }

                        &:nth-child(20) {
                            animation-delay: -1.3s;
                        }

                        &:nth-child(21) {
                            animation-delay: -0.4s;
                        }

                        &:nth-child(22) {
                            animation-delay: -1.5s;
                        }

                        &:nth-child(23) {
                            animation-delay: -0.8s;
                        }

                        &:nth-child(24) {
                            animation-delay: -1.2s;
                        }

                        &:nth-child(25) {
                            animation-delay: -0.5s;
                        }

                        &:nth-child(26) {
                            animation-delay: -1.7s;
                        }

                        &:nth-child(27) {
                            animation-delay: -0.9s;
                        }

                        &:nth-child(28) {
                            animation-delay: -0.3s;
                        }
                    }
                }
            }

            & .audio-bg-notes {
                position: absolute;
                inset: 0;
                overflow: hidden;
                pointer-events: none;

                & .music-note {
                    position: absolute;
                    color: color-mix(in srgb, var(--color-primary-accent, #47b23c), transparent 75%);
                    font-size: 1.25rem;
                    user-select: none;
                    animation: floatMusicNotes 8s ease-in-out infinite;

                    &.note-1 {
                        top: 20%;
                        left: 12%;
                        animation-delay: 0s;
                        font-size: 1.4rem;
                    }

                    &.note-2 {
                        top: 60%;
                        left: 8%;
                        animation-delay: 2.5s;
                        font-size: 1.1rem;
                    }

                    &.note-3 {
                        top: 18%;
                        right: 14%;
                        animation-delay: 1.2s;
                        font-size: 1.5rem;
                    }

                    &.note-4 {
                        top: 65%;
                        right: 10%;
                        animation-delay: 3.8s;
                        font-size: 1.2rem;
                    }

                    &.note-5 {
                        top: 40%;
                        right: 20%;
                        animation-delay: 5s;
                        font-size: 1rem;
                    }
                }
            }

            & .audio-cover-backdrop-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, color-mix(in srgb, var(--color-white), transparent 70%) 0%, transparent 40%, color-mix(in srgb, var(--footer-background), transparent 80%) 100%);
            }
        }

        & .audio-artwork-wrapper {
            position: relative;
            z-index: 4;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto 0;
            cursor: pointer;
            perspective: 520px;
            perspective-origin: 50% 30%;

            & .audio-artwork-3d {
                position: relative;
                z-index: 2;
                display: flex;
                align-items: center;
                justify-content: center;
                transform-style: preserve-3d;
                transform-origin: 50% 50%;
                transform: rotateX(50deg) rotateY(0deg) rotateZ(0deg) translateY(0) scale(1.4);
                transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
                will-change: transform;
            }

            & .audio-cover-art {
                position: relative;
                z-index: 2;
                width: 120px;
                height: 120px;
                border-radius: 4px;
                overflow: hidden;
                transform: translateZ(10px);
                box-shadow: -1px 2px 0 rgba(0, 0, 0, 0.4), -2px 4px 0 rgba(0, 0, 0, 0.35);
                transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1), box-shadow 0.55s cubic-bezier(0.34, 1.35, 0.64, 1);
                background: var(--bg-card);

                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    background: linear-gradient(130deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.08) 40%, transparent 60%);
                    pointer-events: none;
                    z-index: 3;
                }

                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                & .audio-cover-placeholder {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: linear-gradient(135deg, var(--accent-background-1), var(--accent-background-2));
                    color: var(--color-white);
                }

                & .audio-cover-title-badge {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    z-index: 4;
                    padding: 2.5rem 0.35rem 0.25rem;
                    background: linear-gradient(0deg, #00000080, transparent);
                    pointer-events: none;
                    box-sizing: border-box;

                    & .audio-cover-title-text {
                        display: block;
                        color: var(--color-white);
                        font-size: 0.85rem;
                        font-weight: 700;
                        line-height: 1.2;
                        text-align: center;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        letter-spacing: 0.015em;
                        text-shadow: 0 1px 3px color-mix(in srgb, var(--color-black), transparent 20%);
                    }
                }
            }

            & .audio-vinyl-disc {
                position: absolute;
                width: 116px;
                height: 116px;
                border-radius: 50%;
                background: radial-gradient(circle, var(--color-text-body) 0%, var(--bg-dark) 40%, color-mix(in srgb, var(--bg-dark), var(--color-black) 70%) 75%, var(--color-black) 100%);
                transform: translateX(14px) translateZ(0);
                opacity: 0.95;
                transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1), opacity 0.4s ease;
                z-index: 1;
                display: flex;
                align-items: center;
                justify-content: center;

                &::before {
                    content: '';
                    position: absolute;
                    inset: 5px;
                    border-radius: 50%;
                    border: 1px dashed color-mix(in srgb, var(--color-white), transparent 92%);
                    box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--color-black), transparent 45%),
                        inset 0 0 0 12px color-mix(in srgb, var(--color-white), transparent 96%),
                        inset 0 0 0 18px color-mix(in srgb, var(--color-black), transparent 35%);
                    pointer-events: none;
                }

                & .vinyl-center-label {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 2px solid var(--color-black);
                    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-white), transparent 75%);
                    background: var(--color-primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }

                    & .vinyl-center-icon {
                        color: var(--color-white);
                        display: flex;
                    }
                }
            }
        }

        /* Hover and Playing States for Artwork and Vinyl */
        &:hover,
        &.is-playing {
            & .audio-cover-bg .audio-bg-bars .audio-bars-spectrum .spectrum-bar {
                opacity: 0.85;
                filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-primary-accent, #47b23c) 65%, transparent));
                animation-name: spectrumDanceActive;
                animation-direction: alternate;
                animation-iteration-count: infinite;
            }

            & .audio-artwork-wrapper {
                & .audio-artwork-3d {
                    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateX(-15%) translateY(0) scale(1.4);
                }

                & .audio-cover-art {
                    transform: translateZ(16px);
                    box-shadow: -2px 3px 0 rgba(0, 0, 0, 0.45), -4px 6px 0 rgba(0, 0, 0, 0.35);
                }

                & .audio-vinyl-disc {
                    transform: translateX(48px) translateZ(0);
                    opacity: 1;
                }
            }
        }

        &.is-playing {
            & .audio-artwork-wrapper .audio-vinyl-disc {
                animation: vinylSpin 3.2s linear infinite;
            }

            & .audio-wave-equalizer {
                & .eq-bar-1 {
                    animation: eqDance 0.8s ease-in-out infinite alternate;
                }

                & .eq-bar-2 {
                    animation: eqDance 0.5s ease-in-out infinite 0.15s alternate;
                }

                & .eq-bar-3 {
                    animation: eqDance 0.7s ease-in-out infinite 0.3s alternate;
                }

                & .eq-bar-4 {
                    animation: eqDance 0.6s ease-in-out infinite 0.05s alternate;
                }
            }
        }

        & .custom-audio-controls {
            position: relative;
            z-index: 8;
            margin: 0 .5rem .5rem;
            padding: 0.65rem 1rem;
            background: color-mix(in srgb, var(--bg-card), transparent 10%);
            border: 1px solid color-mix(in srgb, var(--color-white), transparent 80%);
            box-shadow: var(--shadow-glass-controls);
            display: flex;
            align-items: center;
            gap: 0.65rem;
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            isolation: isolate;

            & .audio-btn {
                background: transparent;
                border: none;
                color: var(--color-text-heading);
                cursor: pointer;
                padding: 0;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast);

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

                &:active {
                    transform: scale(0.92);
                }

                & svg {
                    display: block;
                    width: 1.1rem;
                    height: 1.1rem;
                    flex-shrink: 0;
                    fill: currentColor;
                }

                &.play-pause-btn {
                    width: 34px;
                    height: 34px;
                    min-width: 34px;
                    border-radius: 50%;
                    background: var(--color-primary);
                    color: var(--color-white);
                    box-shadow: 0 2px 6px color-mix(in srgb, var(--color-black), transparent 75%);

                    &:hover {
                        background: var(--color-primary-accent);
                        color: var(--color-white);
                        transform: scale(1.08);
                    }

                    &:active {
                        transform: scale(0.94);
                    }

                    & svg {
                        width: 1rem;
                        height: 1rem;
                    }
                }

                &.mute-btn {
                    width: 26px;
                    height: 26px;
                    min-width: 26px;

                    &:hover {
                        transform: scale(1.1);
                    }
                }
            }

            & .audio-progress-container {
                flex: 1;
                height: 6px;
                background: color-mix(in srgb, var(--color-text-heading), transparent 85%);
                border-radius: 999px;
                cursor: pointer;
                position: relative;
                overflow: visible;
                display: flex;
                align-items: center;
                transition: height var(--transition-fast);

                &:hover {
                    height: 8px;

                    & .audio-progress-handle {
                        opacity: 1;
                        transform: scale(1);
                    }
                }

                & .audio-buffer-bar {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 0%;
                    background: color-mix(in srgb, var(--color-text-heading), transparent 75%);
                    border-radius: 999px;
                    pointer-events: none;
                    transition: width 0.2s ease;
                }

                & .audio-progress-bar {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 0%;
                    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-accent));
                    border-radius: 999px;
                    pointer-events: none;
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    transition: width 0.05s linear;
                }

                & .audio-progress-handle {
                    position: absolute;
                    right: -4px;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background: var(--color-white);
                    box-shadow: 0 1px 4px color-mix(in srgb, var(--color-black), transparent 60%);
                    opacity: 0;
                    transform: scale(0.7);
                    transition: opacity var(--transition-fast), transform var(--transition-fast);
                }
            }

            & .audio-time-display {
                color: var(--color-text-heading);
                font-size: 0.8rem;
                font-weight: 600;
                letter-spacing: 0.02em;
                white-space: nowrap;
                font-variant-numeric: tabular-nums;
                opacity: 0.85;
            }

            & .audio-wave-equalizer {
                display: flex;
                align-items: flex-end;
                gap: 2px;
                height: 16px;
                padding: 0 2px;

                & .eq-bar {
                    width: 3px;
                    height: 4px;
                    background: var(--color-primary-accent);
                    border-radius: 1px;
                    transition: height 0.2s ease;
                }
            }
        }

        & .entry-audio-iframe {
            position: relative;
            z-index: 5;
            margin: 0 1rem 1rem;
            border-radius: var(--badge-border-radius);
            overflow: hidden;

            & iframe {
                width: 100%;
                border: none;
                display: block;
            }
        }
    }
}

/* =============================================================================
                   S I N G L E   I M A G E   S T O R Y
   ============================================================================= */

.single-image-story {
    & .image-theater-section {
        margin: 0;
        position: relative;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;

        & .theater-media-frame {
            margin: 0;
            position: relative;
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            & .theater-image-wrapper {
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                max-height: 78vh;
                width: 100%;
                overflow: hidden;

                & .theater-image {
                    width: auto;
                    max-width: 100%;
                    height: auto;
                    display: block;
                    margin: 0 auto;
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
                    cursor: zoom-in;
                    transition: transform var(--transition-normal), box-shadow var(--transition-normal);

                    &:hover {
                        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
                    }
                }
            }

            & .theater-info-bar {
                width: 100%;
                box-sizing: border-box;
                background: var(--bg-card, #ffffff);
                border: 1px solid var(--border-light, #e1e8ed);
                display: flex;
                flex-direction: column;
                box-shadow: var(--shadow-card);

                & .theater-header {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    padding: 1rem;

                    & .theater-title {
                        margin: 0;
                        color: var(--color-text-heading, #1a1a1a);
                        font-size: 1.15rem;
                        font-weight: 700;
                        line-height: 1.3;
                    }

                    & .theater-caption {
                        margin: 0;
                        color: var(--color-text-muted, #718096);
                        font-size: 0.88rem;
                        font-style: italic;
                        line-height: 1.4;
                    }
                }

                & .theater-meta-group {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 0.5rem;
                    border-top: 1px solid var(--border-light, #e1e8ed);
                    padding: 1rem;

                    & .theater-meta-item {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.35rem;
                        background: var(--bg-body, #f5f7f5);
                        border: 1px solid var(--border-light, #e1e8ed);
                        padding: 0.28rem 0.7rem;
                        font-size: 0.75rem;
                        font-weight: 600;
                        color: var(--color-text-body, #4a5568);

                        & svg {
                            color: var(--color-primary-accent, #47b23c);
                            flex-shrink: 0;
                        }
                    }

                    & .theater-btn {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.4rem;
                        margin-left: auto;
                        padding: 0.41rem 0.85rem;
                        height: 29.34px;
                        background: var(--color-primary, #8bc34a);
                        color: #0b1510;
                        border: none;
                        font-size: 0.75rem;
                        font-weight: 700;
                        cursor: pointer;
                        transition: background-color var(--transition-fast), transform var(--transition-fast);

                        &:hover {
                            background: var(--color-primary-hover, #7cb342);
                            color: #000000;
                            transform: translateY(-1px);
                        }

                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
    }

    & .image-story-content {
        font-size: 1.15rem;
        line-height: 1.8;
    }
}

/* =============================================================================
                   S I N G L E   G A L L E R Y   S T O R Y
   ============================================================================= */

.single-gallery-story {
    & .gallery-theater-section {
        margin: 2rem 0 2.5rem;
        position: relative;
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;

        & .theater-media-frame {
            margin: 0;
            position: relative;
            width: 100%;
            max-width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1rem;

            & .gallery-theater-slideshow {
                margin: 0;
                width: 100%;
                max-width: 100%;
                background-color: transparent;
                box-shadow: none;

                & .theater-slides-wrapper {
                    height: 70vh;
                    min-height: 440px;
                    max-height: 760px;
                    position: relative;
                    width: 100%;
                    overflow: hidden;

                    & .slide-item {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        visibility: hidden;
                        transform: scale(1.01);
                        transition: opacity var(--transition-smooth, 0.4s ease), transform var(--transition-smooth, 0.4s ease), visibility 0.4s ease;
                        z-index: 1;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &.is-active {
                            opacity: 1;
                            visibility: visible;
                            transform: scale(1);
                            z-index: 2;
                        }

                        & .theater-image {
                            max-width: 100%;
                            width: 100%;
                            height: 100%;
                            object-fit: contain;
                            border: none;
                            box-shadow: none;
                            cursor: zoom-in;
                        }
                    }
                }

                & .theater-slideshow-bottom-bar {
                    position: relative;
                    bottom: 0;
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    gap: 1rem;
                    padding: 0.5rem 0;
                    z-index: 8;

                    & .slideshow-control-container {
                        opacity: 1;
                    }

                    & .slideshow-control {
                        min-width: var(--size-button, 36px);
                        height: var(--size-button, 36px);
                        font-family: var(--font-family-base);
                        background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                        color: var(--color-text-heading);
                        border: none;
                        cursor: pointer;
                        font-size: 1.05rem;
                        font-weight: 600;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        padding: 0;
                        line-height: 1;
                        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                        transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);

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

                        &:active {
                            transform: scale(.96);
                        }

                        & svg {
                            display: block;
                            width: 1.1rem;
                            height: 1.1rem;
                            flex-shrink: 0;
                        }
                    }

                    & .slideshow-dots {
                        display: flex;
                        align-items: center;
                        gap: 1rem;

                        & .dot-nav {
                            width: 8px;
                            height: 8px;
                            border-radius: 50%;
                            background: color-mix(in srgb, var(--color-text-muted, #718096), transparent 50%);
                            cursor: pointer;
                            transition: background var(--transition-normal), transform var(--transition-normal);

                            &:hover,
                            &.is-active {
                                background: var(--color-primary, #8bc34a);
                                transform: scale(1.3);
                            }
                        }
                    }

                    & .slideshow-counter-container {
                        opacity: 1;

                        & .slideshow-counter {
                            height: var(--size-button, 36px);
                            padding: 0 0.75rem;
                            background-color: color-mix(in srgb, var(--bg-card), transparent 8%);
                            color: var(--color-text-heading);
                            border: 1px solid var(--border-light, #e1e8ed);
                            font-size: 0.85rem;
                            font-weight: 600;
                            letter-spacing: 0.05em;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            line-height: 1;
                            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                        }
                    }
                }
            }

            & .theater-info-bar {
                width: 100%;
                box-sizing: border-box;
                background: var(--bg-card, #ffffff);
                border: 1px solid var(--border-light, #e1e8ed);
                border-radius: var(--badge-border-radius);
                display: flex;
                flex-direction: column;
                box-shadow: var(--shadow-card);

                & .theater-header {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;
                    padding: 1rem;

                    & .theater-title {
                        margin: 0;
                        color: var(--color-text-heading, #1a1a1a);
                        font-size: 1.15rem;
                        font-weight: 700;
                        line-height: 1.3;
                    }

                    & .theater-caption {
                        margin: 0;
                        color: var(--color-text-muted, #718096);
                        font-size: 0.88rem;
                        font-style: italic;
                        line-height: 1.4;
                    }
                }

                & .theater-meta-group {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 0.5rem;
                    padding: 1rem;
                    border-top: 1px solid var(--border-light, #e1e8ed);

                    & .theater-meta-item {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.35rem;
                        background: var(--bg-body, #f5f7f5);
                        border: 1px solid var(--border-light, #e1e8ed);
                        padding: 0.28rem 0.7rem;
                        font-size: 0.75rem;
                        font-weight: 600;
                        color: var(--color-text-body, #4a5568);

                        & svg {
                            color: var(--color-primary-accent, #47b23c);
                            flex-shrink: 0;
                        }
                    }

                    & .theater-btn {
                        display: inline-flex;
                        align-items: center;
                        gap: 0.4rem;
                        margin-left: auto;
                        padding: 0.41rem 0.85rem;
                        height: 29.34px;
                        background: var(--color-primary, #8bc34a);
                        color: #0b1510;
                        border: none;
                        font-size: 0.75rem;
                        font-weight: 700;
                        cursor: pointer;
                        transition: background-color var(--transition-fast), transform var(--transition-fast);

                        &:hover {
                            background: var(--color-primary-hover, #7cb342);
                            color: #000000;
                            transform: translateY(-1px);
                        }

                        &:active {
                            transform: translateY(0);
                        }
                    }
                }
            }
        }
    }

    & .gallery-story-content {
        font-size: 1.15rem;
        line-height: 1.8;

        & .wp-block-gallery,
        & .gallery {
            display: none !important;
        }
    }
}

/* =============================================================================
                   S I N G L E   A S I D E   S T O R Y
   ============================================================================= */

.single-aside-story {
    & .aside-post-thumbnail {
        margin: 2rem 0;

        & img {
            width: 100%;
            height: auto;
            border-radius: var(--badge-border-radius);
            box-shadow: var(--shadow-card);
            display: block;
        }

        & .thumbnail-caption {
            font-size: 0.85rem;
            color: var(--color-text-muted);
            margin-top: 0.5rem;
            font-style: italic;
        }
    }

    & .aside-single-card {
        border: 1px solid var(--border-light, #e1e8ed);
        box-shadow: var(--shadow-card);
        margin: 2rem 0 3rem;
        min-height: 280px;
        height: auto;
        overflow: hidden;
        position: relative;
        isolation: isolate;
        --notebook-line-height: 2rem;
        background-color: #fefefa;
        background-image:
            repeating-linear-gradient(to bottom,
                transparent,
                transparent calc(var(--notebook-line-height) - 1px),
                #d1dbe6 calc(var(--notebook-line-height) - 1px),
                #d1dbe6 var(--notebook-line-height));
        background-size: 100% var(--notebook-line-height);
        background-position: 0 calc(var(--notebook-line-height) - 0.35rem);

        /* Red margin line spanning full height */
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 48px;
            width: 0;
            height: 100%;
            border-left: 2px solid #e8747480;
            pointer-events: none;
            z-index: 2;
        }

        & .aside-decor {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 1;

            & .aside-holes {
                position: absolute;
                top: 0;
                left: 18px;
                width: 16px;
                height: 100%;
                pointer-events: none;
                z-index: 3;

                & .aside-hole {
                    position: absolute;
                    left: 0;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: var(--bg-body, #f5f7f5);
                    box-shadow:
                        inset 0 2px 6px color-mix(in srgb, var(--shadow-color), transparent 80%),
                        inset 0 1px 4px color-mix(in srgb, var(--shadow-color), transparent 74%),
                        0 1px 0 color-mix(in srgb, var(--bg-body), transparent 80%);

                    /* Renglones pares en single aside (2, 4, 6, 8, 10, 12, 14, 16...) */
                    &:nth-child(1)  { top: calc(var(--notebook-line-height) * 2 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(2)  { top: calc(var(--notebook-line-height) * 4 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(3)  { top: calc(var(--notebook-line-height) * 6 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(4)  { top: calc(var(--notebook-line-height) * 8 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(5)  { top: calc(var(--notebook-line-height) * 10 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(6)  { top: calc(var(--notebook-line-height) * 12 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(7)  { top: calc(var(--notebook-line-height) * 14 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(8)  { top: calc(var(--notebook-line-height) * 16 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(9)  { top: calc(var(--notebook-line-height) * 18 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(10) { top: calc(var(--notebook-line-height) * 20 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(11) { top: calc(var(--notebook-line-height) * 22 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(12) { top: calc(var(--notebook-line-height) * 24 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(13) { top: calc(var(--notebook-line-height) * 26 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(14) { top: calc(var(--notebook-line-height) * 28 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(15) { top: calc(var(--notebook-line-height) * 30 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(16) { top: calc(var(--notebook-line-height) * 32 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(17) { top: calc(var(--notebook-line-height) * 34 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(18) { top: calc(var(--notebook-line-height) * 36 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(19) { top: calc(var(--notebook-line-height) * 38 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(20) { top: calc(var(--notebook-line-height) * 40 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(21) { top: calc(var(--notebook-line-height) * 42 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(22) { top: calc(var(--notebook-line-height) * 44 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(23) { top: calc(var(--notebook-line-height) * 46 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(24) { top: calc(var(--notebook-line-height) * 48 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(25) { top: calc(var(--notebook-line-height) * 50 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(26) { top: calc(var(--notebook-line-height) * 52 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(27) { top: calc(var(--notebook-line-height) * 54 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(28) { top: calc(var(--notebook-line-height) * 56 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(29) { top: calc(var(--notebook-line-height) * 58 - (var(--notebook-line-height) / 2) - 14px); }
                    &:nth-child(30) { top: calc(var(--notebook-line-height) * 60 - (var(--notebook-line-height) / 2) - 14px); }
                }
            }

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='4' height='4' fill='%23faf8f4'/%3E%3Crect x='0' y='0' width='1' height='1' fill='%23f0ece4' fill-opacity='0.4'/%3E%3C/svg%3E");
                opacity: 0.5;
                pointer-events: none;
                z-index: 0;
            }
        }

        & .aside-single-content {
            font-size: 1.2rem;
            line-height: var(--notebook-line-height, 2rem);
            padding: 1.5rem 2rem 1.5rem 4.5rem;
            color: var(--color-text-body, #2d3748);
            position: relative;
            z-index: 3;

            & p {
                margin: 0 0 var(--notebook-line-height, 2rem);
                line-height: var(--notebook-line-height, 2rem);
                color: inherit;

                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}

/* =============================================================================
                   S T O R I E S   L I G H T B O X   M O D A L
   ============================================================================= */

html.lightbox-open,
body.lightbox-open,
body.stories-lightbox-open {
    overflow: hidden !important;
}

.stories-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    &.is-active {
        opacity: 1;
        visibility: visible;

        & .stories-lightbox-container {
            transform: scale(1);
        }
    }

    & .stories-lightbox-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(4, 9, 14, 0.94);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        cursor: pointer;
    }

    & .stories-lightbox-container {
        position: relative;
        z-index: 2;
        max-width: 94vw;
        max-height: 94vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        transform: scale(0.94);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
    }

    & .stories-lightbox-media {
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: 74vh;
        max-width: 100%;
    }

    & .stories-lightbox-image {
        max-width: 90vw;
        max-height: 74vh;
        object-fit: contain;
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
        display: block;
        pointer-events: auto;
    }

    & .stories-lightbox-info-bar {
        width: 100%;
        max-width: 800px;
        background: rgba(15, 23, 30, 0.75);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.12);
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    }

    & .stories-lightbox-header {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 1rem;
    }

    & .stories-lightbox-title {
        margin: 0;
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
    }

    & .stories-lightbox-caption {
        margin: 0;
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.85rem;
        font-style: italic;
        line-height: 1.4;
    }

    & .stories-lightbox-meta-group {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    & .stories-lightbox-meta-item {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        padding: 0.25rem 0.65rem;
        font-size: 0.75rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);

        & svg {
            color: var(--color-primary-accent, #47b23c);
            flex-shrink: 0;
        }
    }

    & .stories-lightbox-post-link {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        margin-left: auto;
        padding: 0.25rem 0.75rem;
        background: var(--color-primary, #8bc34a);
        color: #0b1510;
        font-size: 0.75rem;
        font-weight: 700;
        text-decoration: none;
        transition: all var(--transition-fast);

        &:hover {
            background: var(--color-primary-hover, #7cb342);
            color: #000000;
        }
    }

    & .stories-lightbox-close {
        position: absolute;
        top: 1.5rem;
        right: 1.5rem;
        z-index: 20;
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #ffffff;
        cursor: pointer;
        transition: all var(--transition-fast);

        @media (width >=1366px) {
            width: 36px;
            height: 36px;
        }

        &:active {
            transform: scale(0.96);
        }

        &:hover {
            background: #ffffff;
            color: #000000;
        }
    }

    & .stories-lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 46px;
        height: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 30, 0.65);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.18);
        color: #ffffff;
        cursor: pointer;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        transition: all var(--transition-fast);

        &:hover {
            background: #ffffff;
            color: #000000;
            border-color: #ffffff;
        }

        &.prev-nav {
            left: 1.5rem;
        }

        &.next-nav {
            right: 1.5rem;
        }

        @media (max-width: 768px) {
            width: 38px;
            height: 38px;

            &.prev-nav {
                left: 0.5rem;
            }

            &.next-nav {
                right: 0.5rem;
            }
        }
    }
}

/* =============================================================================
                            K E Y F R A M E S
   ============================================================================= */

/* format audio */
@keyframes audioGlowPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0.65;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.16);
        opacity: 0.95;
    }
}

@keyframes audioWaveExpand {
    0% {
        transform: scale(0.35);
        opacity: 0.25;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.85;
    }

    100% {
        transform: scale(2.6);
        opacity: 0;
    }
}

@keyframes floatMusicNotes {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.7;
    }

    80% {
        opacity: 0.7;
    }

    100% {
        transform: translateY(-40px) rotate(15deg);
        opacity: 0;
    }
}

@keyframes spectrumDanceAmbient {
    0% {
        transform: scaleY(0.08);
    }

    50% {
        transform: scaleY(0.32);
    }

    100% {
        transform: scaleY(0.18);
    }
}

@keyframes spectrumDanceActive {
    0% {
        transform: scaleY(0.12);
    }

    25% {
        transform: scaleY(0.72);
    }

    50% {
        transform: scaleY(0.38);
    }

    75% {
        transform: scaleY(0.96);
    }

    100% {
        transform: scaleY(0.22);
    }
}

@keyframes eqDance {
    0% {
        height: 3px;
    }

    50% {
        height: 12px;
    }

    100% {
        height: 6px;
    }
}

/* Vinyl Disc Spin Animation */
@keyframes vinylSpin {
    0% {
        transform: translateX(40px) translateZ(0) rotate(0deg);
    }

    100% {
        transform: translateX(40px) translateZ(0) rotate(360deg);
    }
}

/* Like Button animation */
@keyframes likePulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.1);
    }

    70% {
        transform: scale(0.9);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes unlikePulse {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

/* Post Tags Scroll Mask Animation */
@keyframes post-tags-mask-fade {
    0% {
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
        mask-image: linear-gradient(to right, black calc(100% - 1.5rem), transparent 100%);
    }

    4%,
    96% {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%);
    }

    100% {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 1.5rem, black 100%);
    }
}

@supports (animation-timeline: scroll()) {
    .post--tags {
        animation: post-tags-mask-fade linear both;
        animation-timeline: scroll(self inline);
    }

    .entry-body {
        animation: entry-body-mask-fade linear both;
        animation-timeline: scroll(self block);
    }
}

/* Entry Body Scroll Mask Animation (Vertical) */
@keyframes entry-body-mask-fade {
    0% {
        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
        mask-image: linear-gradient(to bottom, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
    }

    4%,
    96% {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
        mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black calc(100% - 1.5rem), transparent 100%), linear-gradient(black, black);
    }

    100% {
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black 100%), linear-gradient(black, black);
        mask-image: linear-gradient(to bottom, transparent 0%, black 1.5rem, black 100%), linear-gradient(black, black);
    }
}

/* ==========================================================================
   Dedicated Post Navigation Section Styling - Loop Cards Design
   ========================================================================== */
/* Custom post navigation section override - Expanding Corner Wave Animation */
section.block.posts--body.container--related-posts.post-navigation-block {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--color-primary-light, #eff1e1) 60%, var(--bg-card, #ffffff)) 0%,
            var(--bg-card, #ffffff) 30%,
            var(--bg-card, #ffffff) 70%,
            color-mix(in srgb, var(--accent-background-2, #89c39d) 15%, var(--bg-card, #ffffff)) 100%);
    border-top: 1px solid color-mix(in srgb, var(--color-primary-accent, #47b23c) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary-accent, #47b23c) 18%, transparent);

    /* Expanding Wave Animation originating from Top-Left corner expanding towards Bottom-Right */
    &::before {
        content: '';
        position: absolute;
        top: -100px;
        left: -100px;
        width: 280px;
        height: 280px;
        border-radius: 50%;
        background: radial-gradient(circle,
                color-mix(in srgb, var(--color-primary-accent, #47b23c) 22%, transparent) 0%,
                color-mix(in srgb, var(--color-primary, #8bc34a) 12%, transparent) 40%,
                color-mix(in srgb, var(--accent-background-2, #89c39d) 6%, transparent) 70%,
                transparent 100%);
        box-shadow:
            0 0 0 35px color-mix(in srgb, var(--color-primary-accent, #47b23c) 12%, transparent),
            0 0 0 80px color-mix(in srgb, var(--color-primary, #8bc34a) 8%, transparent),
            0 0 0 135px color-mix(in srgb, var(--accent-background-2, #89c39d) 5%, transparent),
            0 0 0 200px color-mix(in srgb, var(--color-primary-light, #eff1e1) 25%, transparent);
        pointer-events: none;
        z-index: 0;
        animation: cornerWaveExpand 7s cubic-bezier(0.25, 1, 0.5, 1) infinite;
    }

    /* Rich multi-corner ambient radial gradients */
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background:
            radial-gradient(ellipse 45% 55% at 0% 0%, color-mix(in srgb, var(--color-primary, #8bc34a) 18%, transparent) 0%, transparent 70%),
            radial-gradient(ellipse 45% 55% at 100% 100%, color-mix(in srgb, var(--color-primary-accent, #47b23c) 18%, transparent) 0%, transparent 70%),
            radial-gradient(ellipse 35% 45% at 100% 0%, color-mix(in srgb, var(--accent-background-2, #89c39d) 14%, transparent) 0%, transparent 65%),
            radial-gradient(ellipse 35% 45% at 0% 100%, color-mix(in srgb, var(--color-primary-light, #eff1e1) 60%, transparent) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
    }

    & .post-nav-bg-decor {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
        background-image: radial-gradient(color-mix(in srgb, var(--color-primary-accent, #47b23c) 10%, transparent) 1px, transparent 1px);
        background-size: 24px 24px;
    }

    & .content.related-posts--title,
    & .content.slideshow-wrapper,
    & .slideshow-mask-container {
        position: relative;
        z-index: 2;
    }

    & .content.related-posts--title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: min(100% - 2rem, var(--container-max-width, 1366px));
        margin-inline: auto;
        padding-bottom: 1rem;

        & .title-section {
            margin: 0;
        }

        & .navigation.post-nav-title-controls {
            height: auto;
            padding: 4px;
            background-color:
                color-mix(in srgb, var(--color-text-heading), transparent 80%);
            border: 1px solid color-mix(in srgb, var(--color-text-heading), transparent 86%);
            box-shadow: inset 0 2px 4px color-mix(in srgb, var(--color-text-heading), transparent 86%), inset 0 1px 2px color-mix(in srgb, var(--color-text-heading), transparent 80%), 0 1px 0 color-mix(in srgb, var(--color-white), transparent 50%);
            z-index: 30;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            opacity: 1;
            position: relative;
            flex-shrink: 0;
            gap: 5px;

            & .btn-pagination {
                min-width: var(--size-button, 36px);
                height: var(--size-button, 36px);
                font-family: var(--font-family-base);
                background-color:
                    color-mix(in srgb, var(--bg-card), transparent 8%);
                color: var(--color-text-heading);
                border: none;
                cursor: pointer;
                font-size: 1.05rem;
                font-weight: 600;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 0;
                line-height: 1;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
                transition: color var(--transition-fast), transform var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
            }
        }
    }

    & .slideshow-mask-container {
        padding-bottom: 3.5rem;
    }
}

@keyframes cornerWaveExpand {
    0% {
        transform: scale(0.4) translate(0, 0);
        opacity: 0.25;
    }

    50% {
        transform: scale(2.4) translate(25%, 25%);
        opacity: 0.85;
    }

    100% {
        transform: scale(4.8) translate(50%, 50%);
        opacity: 0;
    }
}

.nav-card-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    & .story-card {
        width: 100%;
    }

    & .nav-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.65rem;
        width: 100%;

        & .nav-badge.time-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: lowercase;
            letter-spacing: 0.03em;
            color: var(--color-primary-accent, #47b23c);
            text-decoration: none;
            cursor: pointer;
            transition: color 0.25s ease, transform 0.25s ease;
            white-space: nowrap;

            &:hover {
                color: var(--color-primary, #8bc34a);
                transform: translateY(-1px);
            }
        }

        & .nav-badge.count-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.25rem 0.65rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            background-color: var(--color-primary-light, #eff1e1);
            color: var(--color-primary-accent, #47b23c);
            border: 1px solid color-mix(in srgb, var(--color-primary-accent, #47b23c) 25%, transparent);
            white-space: nowrap;
        }
    }
}