/* ---------------------------------------------------- */
/* INFINITE ZOOM SECTION                                */
/* ---------------------------------------------------- */
    
    .infinite-zoom-section {
        position: relative;
        width: 100vw;
        height: 100vh; 
        background: #000;
    }

    .iz-sticky {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000;
    }

    /* Flourish 1: Cinematic Vignette Overlay */
    .iz-sticky::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.7) 120%);
        z-index: 50; 
    }

    /* STACKED SLIDES */
    .iz-slide {
        position: absolute;
        inset: 0;
        width: 100vw;
        height: 100vh;
        transform-origin: center center;
        pointer-events: none;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
    
    .iz-slide.is-active {
        pointer-events: auto;
    }

    /* THE MAGIC PORTAL CLIP PATH */
    .iz-slide-clipped {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        clip-path: polygon(0% 0%, 0% 100%, 37.5% 100%, 37.5% 37.5%, 62.5% 37.5%, 62.5% 62.5%, 37.5% 62.5%, 37.5% 100%, 100% 100%, 100% 0%);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Solid slides (like the final layer) don't have a hole or frame */
    .iz-solid {
        clip-path: none;
        background-color: #EFEBE1;
    }

    /* The Oxford Rule frame that sits OVER the clipped hole */
    .iz-hole-frame {
        position: absolute;
        top: 37.5%;
        left: 37.5%;
        width: 25%;
        height: 25%;
        border: 4px solid #2b2824;
        outline: 1px solid #2b2824;
        outline-offset: -8px;
        pointer-events: none;
        box-shadow: 0 0 40px rgba(0,0,0,0.5); 
        z-index: 10;
    }
    
    /* Layouts with dark backgrounds get a white frame */
    .iz-slide[data-index="1"] .iz-hole-frame {
        border-color: #EFEBE1;
        outline-color: #EFEBE1;
    }

    .iz-slide[data-index="3"] .iz-hole-frame {
        display: none;
    }

    /* --- THE HOTSPOT FOR CLICK-TO-WARP --- */
    .iz-portal-click {
        position: absolute;
        top: 37.5%;
        left: 37.5%;
        width: 25%;
        height: 25%;
        z-index: 50; /* Ensure it sits on top of everything to catch the click */
        cursor: pointer;
    }
    .iz-portal-click:focus-visible {
        outline: 2px dashed #9D0D0D;
        outline-offset: 4px;
        background-color: rgba(255, 255, 255, 0.05); /* Slight visual feedback on focus */
    }

    /* GENERIC TYPOGRAPHY AND IMAGES */
    .iz-title {
        font-family: var(--title-font-family);
        font-size: clamp(36px, 5vw, 64px);
        color: #9D0D0D;
        margin: 0;
        text-transform: uppercase;
        line-height: 1;
    }

    .iz-copy {
        font-family: var(--copy-font-family);
        font-size: 18px;
        color: #2b2824;
        margin: 0 0 25px 0;
        line-height: 1.5;
    }
    
    .iz-img {
        width: 100%;
        height: 100%;
        max-height: 65vh; /* Enforce the 65% height constraint globally */
        object-fit: contain; /* Keeps image in bounds without cropping */
        z-index: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .iz-text-zone {
        z-index: 10;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    /* Flourish 2: Breathing Background Watermark Animation */
    @keyframes iz-breath {
        0% { opacity: 0.03; }
        100% { opacity: 0.06; }
    }

    .iz-giant-bg-text {
        font-family: var(--title-font-family);
        color: #2b2824;
        opacity: 0.04;
        position: absolute;
        pointer-events: none;
        z-index: 0; 
        text-transform: uppercase;
        letter-spacing: -2px;
        white-space: normal; /* Allows text to wrap to two lines */
        text-align: center;
        line-height: 0.85; /* Keeps the wrapped lines tight */
        width: 100%;
        margin: 0;
        padding: 0 4vw;
        animation: iz-breath 5s infinite alternate ease-in-out;
    }
    
    .iz-bg-dark .iz-giant-bg-text {
        color: #EFEBE1;
        opacity: 0.03;
    }

    /* Slide 1: Empty Top Zone */
    .iz-slide[data-index="0"] .iz-giant-bg-text {
        top: 3vh; 
        left: 50%;
        transform: translateX(-50%);
        font-size: min(11vw, 12vh); 
    }

    /* Slide 2: Empty Bottom Zone */
    .iz-slide[data-index="1"] .iz-giant-bg-text {
        bottom: 3vh;
        left: 50%;
        transform: translateX(-50%);
        font-size: min(11vw, 12vh); 
    }

    /* Slide 3: Empty Top Zone */
    .iz-slide[data-index="2"] .iz-giant-bg-text {
        top: 3vh;
        left: 50%;
        transform: translateX(-50%);
        font-size: min(11vw, 12vh);
    }

    /* Slide 4: Bottom Right (Avoids the top-left Inset Card) */
    .iz-slide[data-index="3"] .iz-giant-bg-text {
        bottom: 4vh;
        right: 4vw;
        left: auto;
        transform: none;
        text-align: right;
        width: auto;
        font-size: min(9vw, 10vh);
    }

    .ep-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px; /* Space for the external link icon */
        background-color: #2b2824;
        color: #EFEBE1;
        font-family: monospace;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 15px 30px;
        text-decoration: none;
        border: 1px solid #2b2824;
        transition: all 0.3s ease;
    }

    /* BACKGROUND COLOR CLASSES */
    .iz-bg-paper {
        background-color: #EFEBE1;
        background-image: url('/wp-content/uploads/2026/04/anna-savina-QNFJRjo279k-unsplash-copy.jpg');
        background-size: cover;
        background-blend-mode: multiply;
    }
    .iz-bg-dark {
        background-color: #9d0d0d;
    }

    /* --- MODULAR LAYOUT CLASSES --- */
    
    /* Layout: Split (Image Left, Text Right) */
    .iz-layout-split .iz-img-zone {
        position: absolute;
        left: 0;
        width: 37.5%; 
        height: 100%;
        border-right: 2px solid #2b2824;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4vw; 
    }
    .iz-layout-split .iz-text-zone {
        position: absolute;
        right: 0;
        width: 37.5%; 
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5vw;
        border-left: 2px solid #2b2824;
    }

    /* Layout: Reverse Split (Text Left, Image Right) */
    .iz-layout-reverse .iz-text-zone {
        position: absolute;
        left: 0;
        width: 37.5%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 5vw;
        border-right: 2px dashed rgba(43, 40, 36, 0.4);
    }
    .iz-layout-reverse .iz-img-zone {
        position: absolute;
        right: 0;
        width: 37.5%;
        height: 100%;
        border-left: 2px dashed rgba(43, 40, 36, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4vw;
    }

    /* Alternate borders for reverse split on Dark Backgrounds */
    .iz-bg-dark.iz-layout-reverse .iz-text-zone {
        border-right: 2px dashed rgba(43, 40, 36, 0.4);
        background-color: #EFEBE1;
        background-image: url('/wp-content/uploads/2026/04/anna-savina-QNFJRjo279k-unsplash-copy.jpg');
        background-size: cover;
        background-blend-mode: multiply;
        box-shadow: -10px 0 30px rgba(0,0,0,0.3); /* Adds depth to the paper card on the red mat */
    }
    .iz-bg-dark.iz-layout-reverse .iz-img-zone {
        border-left: none; /* The card now handles the border divide organically */
    }

    /* Layout: Inset Card (Final Layer, No Hole) */
    .iz-layout-inset .iz-img-zone {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 4vw;
    }
    .iz-layout-inset .iz-text-zone {
        position: absolute;
        top: 8vh;
        left: 5vw;
        width: 400px;
        background-color: #EFEBE1;
        background-image: url('/wp-content/uploads/2026/04/anna-savina-QNFJRjo279k-unsplash-copy.jpg');
        background-size: cover;
        background-blend-mode: multiply;
        border: 2px solid #2b2824;
        box-shadow: 10px 10px 0px rgba(0,0,0,0.3);
        padding: 40px;
    }

    @media (hover: hover) and (pointer: fine) {
        .pl-action:hover, .ep-cta:hover {
            background-color: #9D0D0D;
            border-color: #9D0D0D;
            color: #FFFFFF;
        }
        .pl-audio-toggle:hover {
            background-color: rgba(239, 235, 225, 0.08);
            border-color: rgba(239, 235, 225, 0.8);
        }
    }

    @media (max-width: 1000px) {
        .pl-audio-toggle { top: 40px; left: 20px; padding: 6px 12px; font-size: 10px; }
        .pl-container { flex-direction: column; height: auto; min-height: 100vh; }
        .pl-item { flex: none; height: 15vh; border-right: none; border-bottom: 1px solid rgba(239, 235, 225, 0.15); }
        .pl-item:last-child { border-bottom: none; }
        .pl-item.is-active { flex: none; height: 85vh; }
        .pl-collapsed-title { writing-mode: horizontal-tb; transform: none; }
        .pl-content-wrapper { bottom: 20px; left: 20px; width: calc(100% - 40px); }
        
        /* Ensures the Ledger matches the 25px rule perfectly */
        .pl-content-inner { padding: 25px; gap: 15px; }
        
        .pl-title { font-size: 32px; }
        
        /* Infinite Zoom Mobile Fallbacks */
        .infinite-zoom-section { height: auto !important; }
        .iz-sticky { height: auto; overflow: hidden; }
        .iz-sticky::after { display: none; } /* Hide the cinematic vignette on mobile */
        .iz-slide { 
            position: relative; 
            height: auto; 
            width: 100%; 
            clip-path: none !important; 
            pointer-events: auto !important; 
            border-bottom: 1px dashed #9d0d0d;
        }
        .iz-slide-clipped, .iz-solid { position: relative; clip-path: none !important; transform: none !important; }
        .iz-hole-frame, .iz-portal-click { display: none; }
        
        /* Mobile Refinement: Lock all background text safely to the top of each slide with 25px padding */
        .iz-slide[data-index] .iz-giant-bg-text { 
            top: 2vh !important;
            bottom: auto !important;
            left: 50% !important;
            right: auto !important;
            transform: translateX(-50%) !important;
            text-align: center !important;
            font-size: min(16vw, 10vh) !important; 
            width: 100% !important;
            padding: 0 25px !important;
            box-sizing: border-box;
        } 
        
        /* Mobile Refinement: Force strict Image Top / Text Bottom grid using Flexbox Order */
        .iz-layout-split, .iz-layout-reverse, .iz-layout-inset { 
            display: flex !important; 
            flex-direction: column !important; 
            height: auto !important; 
        }
        
        /* Enforce the strict 25px left/right grid on all zones */
        .iz-img-zone { 
            order: 1 !important; 
            position: relative !important; 
            width: 100% !important; 
            height: 400px !important; 
            border: none !important; 
            padding: 40px 25px !important; 
        }
        .iz-img { max-height: 100%; }

        .iz-text-zone { 
            order: 2 !important; 
            position: relative !important; 
            top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; 
            width: 100% !important; height: auto !important; 
            padding: 40px 25px !important; 
            border: none !important; 
            opacity: 1 !important; 
            transform: none !important; 
            flex-direction: column !important; 
            align-items: flex-start !important; 
            justify-content: flex-start !important; 
            gap: 20px; 
        }

        .iz-slide[data-index="3"] .iz-text-zone { 
            width: 100% !important; 
            padding: 40px 25px !important; 
            box-shadow: none; 
            border: none; 
        }
    }

    /* ---------------------------------------------------- */
/* EDITOR PREVIEW OVERRIDES                             */
/* ---------------------------------------------------- */

.iz-editor-mode {
    height: auto !important;
    background: #111;
    padding: 40px;
}

.iz-editor-mode .iz-sticky {
    overflow: visible;
    height: auto;
}

.iz-editor-mode .iz-sticky::after {
    display: none;
}

.iz-editor-mode .iz-slide {
    position: relative;
    clip-path: none;
    height: auto;
    min-height: 400px;
    padding-bottom: 60px;
    margin-bottom: 60px;
    border-bottom: 2px dashed rgba(255, 255, 255, 0.2);
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
}

.iz-editor-mode .iz-slide-clipped,
.iz-editor-mode .iz-solid {
    position: relative;
    height: auto;
    min-height: 400px;
    clip-path: none !important;
    transform: none !important;
}

.iz-editor-mode .iz-giant-bg-text {
    position: relative;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    font-size: 60px !important;
    opacity: 0.2;
}

.iz-placeholder-img {
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    text-align: center;
    width: 100%;
    color: #fff;
    font-family: sans-serif;
    font-size: 14px;
}

.iz-empty-state {
    padding: 60px;
    text-align: center;
    color: #fff;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    font-family: sans-serif;
}