.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
#page-works:not(.visible) .works-container {
    pointer-events: none !important;
}
/* Restyled 3D model loading bar (was fully hidden before, giving zero feedback while it loads) */
model-viewer {
    --progress-bar-height: 2px;
    --progress-bar-color: var(--text-color);
}
.work-image.no-shadow {
    box-shadow: none !important;
    background: transparent !important;
}


/* Ensure the close button stays on top of the fullscreen 3D model */
.lightbox-close {
    z-index: 310 !important;
}
/* --- PRELOADER --- */
        #preloader {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--bg-color); /* Matches your dark/light mode */
            z-index: 99999; /* Stays above absolutely everything */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.45s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0.45s;
        }

        #preloader.loaded {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }

        .loader-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            animation: preloaderPulse 2s infinite alternate ease-in-out;
        }

        .loader-logo {
            width: 170px;
            height: auto;
            filter: var(--logo-filter);
            transition: filter 0.3s ease;
        }

        .loader-bar-container {
            width: 140px;
            height: 2px;
            background: rgba(128,128,128,0.25);
            border-radius: 2px;
            overflow: hidden;
            position: relative;
        }

      .loader-bar {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 40%;
    background: var(--text-color);
    border-radius: 2px;
    animation: lb-loader-sweep 1s ease-in-out infinite;
}
#page-duck {
    z-index: 9999; /* Ensure it sits on top */
    background: var(--bg-color); /* Matches your current theme */
}

#page-duck .overlay-content {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Ensure the viewer is responsive */
#duck-viewer {
    width: 100%;
    height: 100%;
}
        @keyframes preloaderPulse {
            0% { opacity: 0.78; }
            100% { opacity: 1; }
        }

        /* Add a subtle entrance animation to the main UI once loaded */
        /* Fixed: Excluded lightbox and page-overlays from being forced visible */
        body.site-loaded > *:not(#preloader):not(#canvas):not(.page-overlay):not(.lightbox):not(.studies-viewer) {
            animation: uiFadeIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        @keyframes uiFadeIn {
            0% { opacity: 0; transform: translateY(6px); }
            100% { opacity: 1; transform: translateY(0); }
        }
        /* --- CSS VARIABLES FOR DARK MODE --- */
        :root {
            --bg-color: #ffffff;
            --text-color: #1a1a1a;
            --text-muted: #666666;
            --overlay-bg: rgba(255, 255, 255, 0.97);
            --lightbox-bg: rgba(255, 255, 255, 0.98);
            --logo-filter: none;
            --dot-color: #000000;
            --frace-blend: multiply;
--loader-invert: invert(1);
        }

        body.dark-mode {
            --bg-color: #1a1a1a;
            --text-color: #ffffff;
            --text-muted: #aaaaaa;
            --overlay-bg: rgba(26, 26, 26, 0.97);
            --lightbox-bg: rgba(26, 26, 26, 0.98);
            --logo-filter: invert(1);
            --dot-color: #ffffff;
            --frace-blend: screen;
--loader-invert: invert(0);
        }

        body, html { 
            margin: 0; padding: 0; width: 100%; height: 100%; 
            overflow: hidden; 
            background: var(--bg-color); 
            color: var(--text-color);
            font-family: 'Helvetica', 'Arial', sans-serif;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

/* --- NAVIGATION --- */
        .top-left-logo {
            position: fixed; top: 20px; left: 20px;
            width: 170px; height: auto; z-index: 250; /* Increased to beat artwork hovers */
            pointer-events: auto; cursor: pointer; opacity: 0.9;
            filter: var(--logo-filter);
            transition: filter 0.3s ease;
        }

        .nav-links {
            display: flex; 
            position: fixed; top: 35px; right: 35px;
            gap: 24px; z-index: 250; /* Increased to beat artwork hovers */
            align-items: flex-start;
            white-space: nowrap;
        }

        .nav-links a, .dropbtn {
            text-decoration: none; color: var(--text-color);
            font-size: 0.82rem; letter-spacing: 0.9px;
            text-transform: uppercase; font-weight: bold;
            opacity: 0.65; transition: opacity 0.3s ease, color 0.3s ease;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
        }

        /* Five balanced primary links on tablets/smaller laptops. */
        @media (min-width: 769px) and (max-width: 1100px) {
            .nav-links {
                right: 24px;
                gap: 16px;
            }
            .nav-links a, .dropbtn {
                font-size: 0.72rem;
                letter-spacing: 0.55px;
            }
        }

        .nav-links a:hover, .nav-links a.active, .dropbtn.active { opacity: 1; }

        /* Keep a parent dropdown visibly active when its current page is
           represented by a submenu link, such as About under Contact. */
        .dropdown:has(.dropdown-content a.active) > .dropbtn {
            opacity: 1;
        }

        /* --- DROPDOWN NAVIGATION --- */
        .dropdown {
            position: relative;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
        }

    .dropdown-content {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0px; /* Removed gap so clicks don't fall through */
            padding-top: 15px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s ease;
            min-width: 140px; /* Slightly wider to catch sloppy taps */
            white-space: nowrap;
        }

/* --- SEVEN OF HEARTS SLICED GRID LOGIC --- */

/* 1. Hide the single image fallback so it doesn't block the grid */
#art-sevenofhearts .single-fallback,
#art-praiseyou .single-fallback {
    display: none !important;
}

/* 2. Override the global hover-scale logic specifically for this piece */
/* We reset the transform to the base state so the item doesn't scale as a whole */
#art-sevenofhearts:has(.work-image:hover),
#art-praiseyou:has(.work-image:hover) {
    transform: var(--base-transform) !important;
    opacity: 1 !important;
}

/* 3. Grid Container Setup */
#art-sevenofhearts .sliced-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: auto;
    gap: 0;
    width: 100%;
    height: auto;
    position: relative;
    overflow: visible !important;
}

#art-praiseyou .sliced-container {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: clamp(260px, 34vw, 480px);
    max-width: 100%;
    position: relative;
    overflow: visible !important;
}

#art-praiseyou .sliced-container img {
    flex: 0 1 auto;
    height: 100%;
    width: auto;
    max-width: 100%;
    min-width: 0;
    /* The three source photos are slightly different physical sizes
       (600x2109 / 600x2245 / 600x2145). Lock them to one shared aspect
       ratio and crop with cover so all three decks render at the exact
       same size instead of the middle one looking bigger. */
    aspect-ratio: 600 / 2166;
    object-fit: cover;
    object-position: center;
}

/* In collage mode, let the triptych scale with the column width like every
   other artwork (instead of being capped to a small fixed height), so at
   higher zoom levels it grows tall and you scroll to see it, matching the
   rest of the gallery. */
.works-grid.mode-collage #art-praiseyou .sliced-container {
    height: auto;
}

.works-grid.mode-collage #art-praiseyou .sliced-container img {
    flex: 1 1 0;
    width: 100%;
    height: auto;
}

/* 4. Ensure images fill grid cells and react to hover individually */
#art-sevenofhearts .sliced-container img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    pointer-events: auto !important;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
    will-change: transform;
    backface-visibility: hidden;
    transform: var(--slice-transform, translate(0px, 0px)) !important;
}

#art-praiseyou .sliced-container img {
    display: block !important;
    pointer-events: auto !important;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    z-index: 1;
    will-change: transform;
    backface-visibility: hidden;
    transform: var(--slice-transform, translate(0px, 0px)) !important;
}

/* 5. The Hover Effect: Scale ONLY the slice, matching the calmer feel of other works */
#art-sevenofhearts .sliced-container img:hover {
    transform: var(--slice-transform, translate(0px, 0px)) scale(1.15) !important;
    z-index: 100 !important;
    cursor: pointer;
}

/* Gentler hover scale specifically for the large skateboard triptych */
#art-praiseyou .sliced-container img:hover {
    transform: var(--slice-transform, translate(0px, 0px)) scale(1.05) !important;
    z-index: 100 !important;
    cursor: pointer;
}

/* Update this block to include both elements */
#art-sevenofhearts .work-image,
#art-praiseyou .work-image,
#art-camera .work-image {
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* Only disable hover interaction when the Lightbox (not the page) is active */
#lightbox.active ~ * #art-sevenofhearts .sliced-container img,
#lightbox.active ~ * #art-praiseyou .sliced-container img,
body:has(#lightbox.active) #art-sevenofhearts .sliced-container img,
body:has(#lightbox.active) #art-praiseyou .sliced-container img {
    pointer-events: none !important;
    transform: none !important; 
}

/* Mobile Fallback */
@media (max-width: 768px) {
    #art-sevenofhearts .sliced-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
.nav-cart {
        margin-left: 2px !important; /* Adds breathing room from the text links */
    }
   .dropdown-content a {
            width: 100%;
            text-align: center;
            justify-content: center;
            padding: 12px 20px; /* Swapped gap for thick padding (massive touch targets) */
            box-sizing: border-box;
        }

        /* Desktop hover menus only. Restricting hover to a real mouse avoids
           Safari's sticky :hover state trapping the menu on iPhone/iPad. */
        @media (hover: hover) and (pointer: fine) {
            .dropdown:hover .dropdown-content {
                opacity: 1;
                pointer-events: auto;
            }

            .dropdown:hover .dropbtn {
                opacity: 1;
            }
        }

        /* Touch menus are controlled explicitly by JavaScript. */
        .dropdown.is-open .dropdown-content {
            opacity: 1;
            pointer-events: auto;
        }

        .dropdown.is-open .dropbtn {
            opacity: 1;
        }

        .dropdown-content {
            z-index: 270;
        }

        .dropbtn,
        .dropdown-content a {
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        /* --- FOOTER, COPYRIGHT & THEME TOGGLE --- */
        .footer {
            position: fixed; bottom: 25px; right: 25px;
            display: flex; align-items: center; gap: 15px;
            z-index: 250; /* Increased to beat artwork hovers */
            pointer-events: auto; 
        }

        .footer a {
            text-decoration: none; color: var(--text-color);
            font-size: 0.75rem; letter-spacing: 0.5px;
            opacity: 0.6; transition: opacity 0.3s ease, color 0.3s ease; 
            display: flex; align-items: center;
        }

        .footer-icons {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .ig-icon { 
            width: 18px; height: 18px; 
            filter: grayscale(100%) var(--logo-filter); 
            transition: filter 0.3s ease;
        }

        .theme-toggle, .download-icon, .layout-toggle, .zoom-toggle {
            cursor: pointer;
            width: 18px; height: 18px;
            display: flex; align-items: center; justify-content: center;
            opacity: 0.6; transition: opacity 0.3s ease, transform 0.2s ease;
            color: var(--text-color);
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation; 
        }

        .theme-toggle:hover, .download-icon:hover, .layout-toggle:hover, .zoom-toggle:hover { opacity: 1; }
        .zoom-toggle:active { transform: scale(0.85); } /* Nice little click pop */
        
        .theme-toggle svg, .download-icon svg, .layout-toggle svg, .zoom-toggle svg { width: 100%; height: 100%; }
        
        .icon-sun { display: block; }
        .icon-moon { display: none; }
        
        body.dark-mode .icon-sun { display: none; }
        body.dark-mode .icon-moon { display: block; }

        .download-icon { display: none; }
        .zoom-toggle { display: none; } /* Hidden by default until Gallery is opened */

/* --- FOOTER, COPYRIGHT & THEME TOGGLE --- */
.copyright {
    position: fixed; bottom: 25px; left: 25px;
    font-size: 0.45rem; color: var(--text-color); letter-spacing: 0.8px; 
    opacity: 0.3; /* Base opacity */
    z-index: 100; pointer-events: none; 
    max-width: calc(100vw - 300px); line-height: 1.5;
    transition: opacity 0.4s ease, color 0.3s ease;
}

/* Ensure this selector is specific enough to override other styles */
body.overlay-open .copyright { 
    opacity: 0.15 !important; 
}

/* If the site-loaded animation is affecting it, ensure copyright is not forced to full opacity */
body.site-loaded .copyright {
    /* If you added an animation that targets all children, 
       make sure it doesn't force opacity: 1 on the copyright */
    animation: none; 
}
        /* --- IOS BRUSH SELECTOR --- */
        #ios-brush-selector {
            display: none; 
            position: fixed; bottom: 33px; left: 13px;
            z-index: 150; gap: 6px; align-items: center;
            pointer-events: auto;
        }

        .palette-toggle {
            position: relative;
            display: flex; align-items: center; justify-content: center;
            width: 44px; height: 44px; /* comfortable tap target on iPad/iPhone */
            flex-shrink: 0;
            opacity: 0.6;
            cursor: pointer; transition: opacity 0.3s ease, transform 0.2s ease;
        }
        
        .palette-toggle img {
            width: 26px; height: 26px; object-fit: contain;
            filter: var(--logo-filter); transition: filter 0.3s ease;
        }
        
        .palette-toggle:hover, .palette-toggle:active { opacity: 1; transform: scale(1.15); }

        .brush-slider-wrap {
            position: relative;
            display: flex;
            align-items: center;
            width: 130px;
            height: 44px;
        }

        .brush-slider {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 44px;
            background: transparent;
            cursor: pointer;
            margin: 0;
        }

        /* Track */
        .brush-slider::-webkit-slider-runnable-track {
            height: 2px;
            background: var(--dot-color);
            opacity: 0.3;
            border-radius: 2px;
        }
        .brush-slider::-moz-range-track {
            height: 2px;
            background: var(--dot-color);
            opacity: 0.3;
            border-radius: 2px;
        }

        /* Thumb - its width/height are driven live by JS via --thumb-size so it visibly grows and shrinks as you drag */
        .brush-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: var(--thumb-size, 14px);
            height: var(--thumb-size, 14px);
            border-radius: 50%;
            background: var(--dot-color);
            cursor: pointer;
            margin-top: calc((2px - var(--thumb-size, 14px)) / 2);
            transition: background-color 0.3s ease;
        }
        .brush-slider::-moz-range-thumb {
            width: var(--thumb-size, 14px);
            height: var(--thumb-size, 14px);
            border: none;
            border-radius: 50%;
            background: var(--dot-color);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* --- OVERLAY PAGES --- */
/* Update your .page-overlay class */
.page-overlay {
    position: fixed; 
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--overlay-bg); 
    z-index: 50; 
    
    /* Change these to properly hide the element */
    opacity: 0;
    visibility: hidden; 
    pointer-events: none; 
    
    transition: opacity 0.4s ease, background-color 0.3s ease, visibility 0.4s; 
    overflow-y: auto; 
}

.page-overlay.visible { 
    opacity: 1; 
    visibility: visible;
    pointer-events: auto; 
    touch-action: auto;
}

        .overlay-content {
            min-height: 100%; display: flex; 
            align-items: flex-start; justify-content: center;
            padding: 120px 40px 60px 40px; box-sizing: border-box;
            position: relative; z-index: 2;
        }

        /* --- DRAWN SYMBOLS & INLINE ARTWORK --- */
        .art-symbol {
            position: absolute;
            mix-blend-mode: var(--frace-blend);
            filter: var(--logo-filter);
            opacity: 0.85;
            pointer-events: none;
            z-index: -1;
            transition: filter 0.3s ease;
        }
        
        /* About Page Scattered Symbols */
        .sym-1 { top: 19%; right: -19%; width: 250px; transform: rotate(-4deg); }
        .sym-2 { top: 40%; left: -77px; width: 220px; transform: rotate(4deg); }
        .sym-3 { bottom: 28%; right: 12%; width: 90px; transform: rotate(5deg); }
        .sym-5 { bottom: 35%; right: 22%; top: auto; left: auto; width: 290px; transform: rotate(-6deg); }
        .sym-6 { top: -28px; left: -25px; width: 220px; transform: rotate(-7deg); }
        
        /* Contact Page Scattered Symbols */
        .sym-4 {
            display: block !important; 
            position: absolute !important;
            right: 20px;
            bottom: 5px;
            width: 250px !important;
            pointer-events: none;
            z-index: 1;
        }
        .inline-human {
            height: 2.5em; 
            width: auto; 
            vertical-align: middle; 
            mix-blend-mode: var(--frace-blend);
            filter: var(--logo-filter);
            margin: 0; 
            position: relative;
            top: -4px; 
            transition: filter 0.3s ease;
        }

        .enquiry-title-img {
            max-width: 350px; 
            margin-bottom: 40px; 
            display: block;
            mix-blend-mode: var(--frace-blend);
            filter: var(--logo-filter);
            transition: filter 0.3s ease;
        }

        .frace-cabbage-wrapper {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 40px;
            margin-top: 20px;
        }

        .about-frace {
            width: 120px;
            margin-top: 0;
            opacity: 0.9;
            mix-blend-mode: var(--frace-blend);
            filter: var(--logo-filter);
            transition: filter 0.3s ease;
        }

        .boy-cabbage {
            width: 200px;
            display: block;
            mix-blend-mode: var(--frace-blend);
            filter: var(--logo-filter);
            transition: filter 0.3s ease;
            z-index: 5;
        }

        /* Glitch Animation Keyframes */
        @keyframes glitch-shake {
            0% { transform: translate(-50%, -50%) rotate(0deg) translate(0, 0); }
            25% { transform: translate(-50%, -50%) rotate(4deg) translate(2px, -2px); }
            50% { transform: translate(-50%, -50%) rotate(-4deg) translate(-2px, 2px); }
            75% { transform: translate(-50%, -50%) rotate(4deg) translate(2px, 2px); }
            100% { transform: translate(-50%, -50%) rotate(0deg) translate(0, 0); }
        }

        .is-glitching {
            animation: glitch-shake 0.3s infinite;
        }

        .dropbtn {
            position: relative;
        }

        .gallery-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .gallery-glitch-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 2.8em;
            width: auto;
            filter: var(--logo-filter);
            pointer-events: none;
            display: none;
        }

    /* --- ABOUT PAGE (SLIDER ADDED) --- */
        #page-about { overflow-y: auto; overflow-x: hidden; } /* Allow scrolling when zoomed */
        #page-about .overlay-content { padding: 0; align-items: stretch; min-height: 100vh; }
        
        .about-container { 
            display: flex; 
            width: 100vw; 
            min-height: 100vh; /* Changed from fixed 100vh to support zooming */
            height: auto; 
            max-width: none; 
            gap: 0; 
        }
        
        /* About Page Image Slider - New Structure */
        .about-image { 
            position: relative; 
            flex: none; 
            width: 60%; 
            min-height: 100%; /* Ensures the image container stretches to match text */
            background: transparent; 
            overflow: hidden; 
        }

        .about-image img { 
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; 
            height: 100%; 
            object-fit: cover; 
            object-position: top left; 
            display: block; 
            transition: opacity 0.6s ease-in-out;
            opacity: 0;
        }

        .about-image img.active {
            opacity: 1;
        }

     .slider-arrow {
            position: absolute; top: 50%;
            width: 20px; height: 20px; cursor: pointer; z-index: 10;
            border-top: 3px solid var(--text-color); border-right: 3px solid var(--text-color);
            opacity: 0.5; transition: opacity 0.2s ease;
        }
/* Creates a large invisible clickable area around the arrows */
.slider-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;  /* Increase or decrease to change the hitbox size */
    height: 60px;
    background-color: transparent;
}
        .slider-arrow:hover { opacity: 1; }
        .left-arrow { left: 40px; transform: translateY(-50%) rotate(-135deg); }
        .right-arrow { right: 40px; transform: translateY(-50%) rotate(45deg); }

   .about-text {
    position: relative;
    flex: none;
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 120px 60px 100px 60px; /* Slightly adjusted padding for balance */
    overflow-y: auto;
    overflow-x: hidden; /* Prevents symbols from pushing the page width */
}
        .about-text p {
    line-height: 2; /* Ensures a consistent, readable gap between lines */
    margin-bottom: 22px; /* Aligns paragraph spacing to match the line-height rhythm */
    color: var(--text-color);
    font-size: 1.1rem;
    transition: color 0.3s ease;
    position: relative;
    z-index: 2;
    padding-right: 20px; /* Adds breathing room from the right-hand symbols */
}

        /* --- DYNAMIC WORKS GRID --- */
        .works-container { 
            max-width: 1800px; 
            width: 100%; 
            margin: 0 auto; 
            padding: 20px 2vw 80px 2vw; 
            box-sizing: border-box; 
        } 
        
        .works-grid { 
            display: grid; 
            align-items: start; 
            transition: gap 1.2s cubic-bezier(0.22, 1, 0.36, 1);
        } 
/* (Removed: old rule that forced Splinter/peanut-butter to the top of Collage Mode) */

        /* Collage Mode Setup */
/* Collage Mode Setup */
.works-grid.mode-collage {
    /* Now handled mostly by JavaScript for the zoom feature */
    grid-template-columns: 1fr; 
    gap: 40px; 
    grid-auto-flow: row;
    justify-items: center;
    align-items: center; /* <-- ADD THIS LINE */
    width: 100%;
    margin-top: -60px;
}

        /* Rows Mode Setup - Fixed vertical alignment */
        .works-grid.mode-rows {
            grid-template-columns: repeat(3, 1fr);
            gap: 34px;
            margin-top: -35px;
            width: calc(100% + 4vw);
            margin-left: -2vw;
            align-items: stretch; /* Ensure all items stretch to match row height */
        }

        /* --- IPAD CENTERING FIX (Max-Width: 1024px) --- */
        @media (max-width: 1024px) {
            .works-container {
                padding: 20px 1vw 80px 1vw; /* Fixed: Generous gutters for iPad */
            }
.zoom-toggle {
                display: none !important;
            }
            .works-grid.mode-rows, .works-grid.mode-collage {
                width: 100%; 
                margin: 0 auto; 
                justify-items: center; /* Fixed: Forces iPad grids to center */
            }
            .works-grid.mode-collage {
                margin-top: -45px !important; /* Increased from the global -60px */
            }
            .works-grid.mode-rows { 
                grid-template-columns: repeat(2, 1fr); 
                gap: 75px; 
                margin-left: 0; 
                margin-top: -20px; /* Brought up slightly for iPad */
            }
        }

        @media (max-width: 768px) {
.zoom-toggle {
                display: none !important;
            }
            .works-container {
                padding: 20px 0 80px 0; /* Fixed: Even and generous gutters for mobile */
            }
            .works-grid.mode-rows { 
                width: 100%; 
                margin: 0 auto; 
                padding-left: 15px !important;
                padding-right: 15px !important;
                box-sizing: border-box;
                justify-items: center; /* Fixed: Forces mobile grids to center */
            }
            #page-works .overlay-content {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .works-grid.mode-collage {
                margin-top: -30px !important; /* Increased from the global -60px */
            }
     .works-grid.mode-collage .work-item:not(.sketch-item) {
                width: 100% !important;
                padding: 0 !important; 
                box-sizing: border-box;
                transform: scale(1) !important; 
            }
            
            .works-grid.mode-collage .sketch-item {
                /* Let sketches keep their wild rotations and translations on mobile */
                transform: var(--base-transform) !important;
            }

            /* Keep a subtle tap animation for mobile since hover doesn't exist */
            .works-grid.mode-collage .work-item:active {
                transform: scale(1.02) !important;
            }

            /* Constrain the image container to create a nice left/right border */
            .works-grid.mode-collage .work-image {
                width: 92% !important;
                max-width: 92% !important;
                margin: 0 auto !important; /* Keeps it perfectly centered */
            }

            /* Let the image itself fill that new 92% container */
            .works-grid.mode-collage .work-image img {
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important; 
                min-width: 0 !important; 
                border-radius: 0 !important;
                object-fit: contain !important; 
            }


            /* Use % instead of vw to keep the text aligned with the new container constraints */
            .works-grid.mode-collage .work-caption {
                width: 92% !important;
                max-width: 92% !important;
                margin: 0 auto;
            }

            .works-grid.mode-rows {
                grid-template-columns: 1fr; 
                gap: 40px; 
                margin-top: -20px; /* Brought up slightly for mobile */
            }
        }
        
        #page-works .work-item {
            color: inherit;
            text-decoration: none;
        }

        .work-item { 
            position: relative; 
            display: flex; 
            flex-direction: column; 
            gap: 15px; 
            cursor: pointer; 
            width: 100%; 
            contain: layout style;
            transform-origin: center center;
            /* Set up for Dragging */
            touch-action: auto; 
            user-select: none;
            -webkit-user-select: none;
            -webkit-user-drag: none;

            /* Organic, slow transition for layout mode changes */
            transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), 
                        margin-top 1.2s cubic-bezier(0.22, 1, 0.36, 1),
                        opacity 0.2s ease;
            
            /* Using a CSS variable allows the hover scale to compound dynamically with drags */
            transform: var(--base-transform, rotate(0deg) translate(0px, 0px) scale(1));
        }

        /* Rows mode specific item setup for vertical alignment */
        .works-grid.mode-rows .work-item {
            justify-content: flex-end; /* Push caption to the bottom */
            height: 100%; /* Stretch to grid row height */
        }

        /* Prevent native ghost dragging */
        .work-item img {
            pointer-events: none;
            -webkit-user-drag: none;
        }

        .work-item:has(.work-image:hover) {
            opacity: 0.975;
            transform: var(--base-transform, rotate(0deg) translate(0px, 0px) scale(1)) scale(1.04) !important;
            z-index: 100 !important;
        }

        .work-image { 
            background: transparent; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: box-shadow 0.8s ease;
        }

        /* Specific styles for modes */
        .works-grid.mode-collage .work-item {
            align-items: center; /* Ensures items stay centered within their grid cell */
            overflow: visible; 
        }
        
        /* Bind both image and caption to the same widths to restore text alignment */
        .works-grid.mode-collage .work-image,
        .works-grid.mode-collage .work-caption {
            width: 100%;
            max-width: 95vw; /* Keeps the massive column comfortably bounded */
        }

        @media (min-width: 1025px) {
            .works-grid.mode-collage .work-image,
            .works-grid.mode-collage .work-caption {
                max-width: 90vw; /* Slightly narrower bounds on huge desktop monitors */
            }
        }

   /* 1. Remove the box-shadow from the div */
.works-grid.mode-collage .work-image { 
    box-shadow: none !important; 
    background: transparent !important;
}

/* 2. Add the organic drop-shadow to the image inside */
.works-grid.mode-collage .work-image img {
    filter: drop-shadow(3px 12px 12px rgba(0,0,0,0.46));
    width: 100%;
    height: auto;
    display: block;
}

/* 3. Keep your existing override for the no-shadow items */
.work-image.no-shadow img {
    filter: none !important;
}

        body.dark-mode .works-grid.mode-collage .work-image { box-shadow: 0 15px 40px rgba(0,0,0,0.7); }
        
        /* Rows mode specific image styling */
        .works-grid.mode-rows .work-image { 
            flex: 1; /* Allow image container to absorb the remaining vertical space above caption */
            display: flex;
            align-items: center; /* Centrally align the image inside the flex container */
            justify-content: center;
            aspect-ratio: auto !important; 
            margin-bottom: 0; /* Let flex gap handle spacing */
            box-shadow: none; 
            overflow: hidden; 
        }
        
        .work-image img { width: 100%; height: auto; object-fit: contain; display: block; }
        
        .works-grid.mode-rows .work-image img { 
            height: auto; 
            max-height: 450px; /* Keep standard aspect ratio constraint for rows */
            object-fit: contain; 
        }
        
        .work-caption { 
            font-size: 0.85rem; 
            color: var(--text-muted); 
            display: flex; 
            justify-content: space-between; 
            pointer-events: none; 
            
            opacity: 0;
            transform: translateY(5px); 
            transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; 
        }

        .work-item:has(.work-image:hover) .work-caption {
            opacity: 1;
            transform: translateY(0);
        }

        /* Ensure captions display permanently in rows mode */
        .works-grid.mode-rows .work-caption {
            opacity: 1;
            transform: none;
        }

        /* --- NONE PAGES (EXHIBITIONS / PRESS) --- */
        .none-page { 
            padding: 0 !important; 
            overflow-y: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        .none-page .overlay-content { 
            padding: 0; 
            width: 100vw; 
            min-height: 100vh;
            position: relative; 
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Desktop & iPad */
        .none-desktop { 
            display: block !important;
            width: 103vw !important; 
            height: auto !important;
            margin: 50px auto;
            filter: var(--logo-filter);
            transition: filter 0.3s ease;
            pointer-events: none;
        }

        /* Mobile Only */
        .none-mobile { 
            display: none !important; 
            width: 120vw !important;
            height: auto !important;
            margin: 50px auto;
            filter: var(--logo-filter);
            transition: filter 0.3s ease;
            pointer-events: none;
        }

        @media (max-width: 1024px) {
            .none-desktop { display: none !important; }
            .none-mobile { display: block !important; }
        }

        /* --- CONTACT FORM --- */
        .form-container { position: relative; max-width: 800px; width: 100%; text-align: left; margin: 0 auto; }
        @media (min-width: 1025px) {
            .form-container { margin-top: -40px; }
        }
        .form-group { display: flex; margin-bottom: 25px; align-items: flex-start; }
        .form-group label { width: 150px; font-weight: bold; letter-spacing: 0.5px; font-size: 1.3rem; padding-top: 10px; color: var(--text-color); transition: color 0.3s ease; text-transform: uppercase; }
        .form-group input, .form-group textarea { flex: 1; width: 100%; padding: 12px; border: 1px solid var(--text-muted); background: transparent; color: var(--text-color); font-family: 'Helvetica', 'Arial', sans-serif; box-sizing: border-box; opacity: 0.5; transition: opacity 0.3s ease, border-color 0.3s ease; font-size: 1.3rem; resize: vertical; }
        .form-group input:focus, .form-group textarea:focus { outline: none; opacity: 1; border-color: var(--text-color); }
        .button-row {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-left: 150px;
            position: relative;
        }
        .submit-btn { 
            background: var(--text-color); color: var(--bg-color); border: none; padding: 15px 30px; 
            font-weight: bold; cursor: pointer; text-transform: uppercase; 
        }
        .sym-4 {
            position: static !important;
            width: 250px !important;
            pointer-events: none;
            display: block !important;
            margin: 0 !important;
        }

        @media (max-width: 768px) {
            .button-row { margin-left: 0 !important; gap: 10px; }
            .button-row .sym-4 { width: 250px !important; }
            .form-group { flex-direction: column; }
            .form-group label { width: 100%; margin-bottom: 8px; }
            .submit-btn { margin-left: 0 !important; }
            #responseMessage { margin-left: 0 !important; }
        }
        
/* --- LIGHTBOX OPTIMIZED --- */
.lightbox { 
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
    background: var(--lightbox-bg); z-index: 300; display: flex; 
    align-items: center; justify-content: center; opacity: 0; 
    pointer-events: none; transition: opacity 0.3s ease, background-color 0.3s ease; 
    overflow-y: auto; overflow-x: hidden; padding: 10px; /* Reduced padding */
    box-sizing: border-box; 
}
.lightbox.active { opacity: 1; pointer-events: auto; }

.lightbox-close { 
    position: fixed; top: 30px; right: 40px; font-size: 3rem; font-weight: 300; 
    cursor: pointer; color: var(--text-color); opacity: 0.3; 
    transition: opacity 0.2s, color 0.3s ease; z-index: 301; line-height: 1; 
}
.lightbox-close:hover { opacity: 1; }

.lightbox-content { 
    display: flex; max-width: 95vw; /* Use almost full screen width */
    width: 100%; gap: 27px; align-items: center; margin: auto; 
    position: relative; z-index: 5; 
    pointer-events: none; 
}

.lightbox-left {
    flex: 3; /* Give image 75% of container width */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    height: 95vh;
    width: 100%;
    overflow: visible; 
}

/* Allow children to be clickable */
.lightbox.active .lightbox-left img,
.lightbox.active .lightbox-left model-viewer,
.lightbox.active .lightbox-left .slider-arrow,
.lightbox.active .lightbox-text,
.lightbox.active #lb-fullscreen-btn {
    pointer-events: auto;
}

.lightbox-left img { 
    max-width: 100%; 
    max-height: 95vh; /* Larger max height */
    width: auto;
    height: auto;
    object-fit: contain; 
    cursor: zoom-in; 
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; 
    transform-origin: center center;
    min-width: 0; /* Removed fixed 400px constraint */
contain: content; /* Tells browser to isolate layout/paint for this element */

}

/* Persistent decoded image buffer used during front/back swaps. It sits above
   the main image only while the replacement frame is being painted. There is
   deliberately no opacity transition: cross-fading GPU layers caused an
   occasional blue flash in Safari/Chromium. */
#lb-img {
    position: relative;
    z-index: 20;
}
#lb-img-buffer {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: none;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 95vh;
    margin: auto;
    object-fit: contain;
    object-position: center;
    opacity: 1 !important;
    transition: none !important;
    transform: none !important;
    pointer-events: none !important;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.lightbox-right { 
    flex: 1; /* Keep text column slim */
    display: flex; flex-direction: column; text-align: left; 
    position: relative; z-index: 5; 
}

.lightbox-text { max-width: 350px; }
.lightbox-text strong,
.lightbox-text h1 {
    font-size: 1.4rem;
    display: block;
    margin: 0 0 5px;
    color: var(--text-color);
}
.lightbox-specs { font-size: 1rem; color: var(--text-muted); margin-bottom: 15px; font-style: italic; }
.lightbox-text p { font-size: 1rem; line-height: 1.6; color: var(--text-color); margin: 0; }
.lb-email-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: opacity 0.2s ease; }
.lb-email-link:hover { opacity: 0.6; }
.lb-sold-tag { text-transform: uppercase; letter-spacing: 1px; font-weight: bold; opacity: 0.6; }

/* --- FULLSCREEN & RESPONSIVE OVERRIDES --- */
#lb-fullscreen-btn {
    position: absolute; bottom: 20px; right: 20px;
    width: 30px; height: 30px; z-index: 30;
    cursor: pointer; opacity: 0.3; transition: opacity 0.2s;
    color: var(--text-color); display: none !important; 
}
#lb-fullscreen-btn:hover { opacity: 1; }

.lightbox.is-fullscreen { background: var(--bg-color); padding: 0 !important; }
.lightbox.is-fullscreen #lb-img {
    max-width: 100vw; max-height: 100vh; padding: 10px; cursor: zoom-out; z-index: 10000;
}
.lightbox.is-fullscreen .lightbox-close, .lightbox.is-fullscreen #lb-fullscreen-btn, 
.lightbox.is-fullscreen .lightbox-right, .lightbox.is-fullscreen .slider-arrow { display: none !important; }

@media (max-width: 1024px) {
    .lightbox-content { flex-direction: column; gap: 20px; padding-bottom: 20px; }
    .lightbox-left { flex: 0 0 70vh; height: 70vh; }
    .lightbox-left img { max-height: 70vh; }
}

@media (max-width: 768px) {
    .lightbox-close { top: 15px; right: 25px; font-size: 2.5rem; }
    .lightbox-left img { max-height: 65vh; max-width: 90vw; }
}
        /* --- CANVAS --- */
        #canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1; cursor: none; touch-action: none; transition: filter 0.3s ease; }
        body.dark-mode #canvas { filter: invert(1) hue-rotate(180deg); }

        /* --- BREAKPOINTS --- */
        @media (max-width: 1024px) {

            .download-icon { display: flex; }
            .ig-icon, .download-icon, .theme-toggle, .layout-toggle, .zoom-toggle { width: 22px; height: 22px; }
            #page-about { overflow-y: auto; }
            #page-about .overlay-content { padding: 120px 40px 60px 40px; align-items: flex-start; }
            .about-container { flex-direction: column; align-items: center; gap: 30px; width: 100%; height: auto; max-width: 1200px; }
            
            .about-text { flex: none; width: 100%; height: auto; padding: 0; overflow: visible; }
            .about-image { flex: none; width: 100%; height: 70vh; padding: 0; overflow: hidden; justify-content: center; }
            .about-image img { height: 100%; width: 100%; max-height: none; object-fit: cover; object-position: top center; }
            
            .sym-1 { top: 5%; right: -2%; width: 100px; opacity: 0.3; }
            .sym-2 { top: 15%; left: -10px; width: 90px; opacity: 0.3; }
            .sym-3 { top: 40%; right: 5%; width: 70px; opacity: 0.3; }
            .sym-5 { top: 60%; left: 10%; width: 90px; opacity: 0.3; }
            .sym-6 { top: 25%; right: 10%; left: auto; width: 80px; opacity: 0.3; }
            
            .frace-cabbage-wrapper { justify-content: center; } 
            
            .lightbox-content { flex-direction: column; gap: 30px; margin-top: 20px; }
            .lightbox-left { justify-content: center; max-height: 80vh; }
            .lightbox-left img { max-height: 80vh; }
        }

        @media (max-width: 768px) {
            .top-left-logo { width: 125px; top: 15px; left: 15px; }
            .nav-links { 
    top: 28px; 
    right: 22px; 
    gap: clamp(4px, 1.45vw, 7px); 
    max-width: calc(100vw - 145px); 
    justify-content: flex-end; 
    align-items: center; 
    flex-wrap: nowrap; 
}
            .nav-links a, .dropbtn {
                font-size: clamp(0.46rem, 1.9vw, 0.54rem);
                letter-spacing: -0.05px;
                white-space: nowrap;
                text-align: center;
            }
            /* Keep the iPhone Gallery submenu compact: Notes and Play
               should read as two closely grouped choices, not oversized rows. */
            .dropdown-content { padding-top: 6px; gap: 0; }
            .dropdown-content a {
                padding: 6px 15px;
                min-height: 0;
                line-height: 1.05;
            }

            /* Keep About directly centred beneath Contact on iPhone.
               A compact intrinsic-width menu prevents it drifting left or
               stretching toward the cart icon. */
            .contact-dropdown .dropdown-content {
                left: 50%;
                right: auto;
                width: max-content;
                min-width: 0;
                transform: translateX(-50%);
                align-items: center;
            }
            .contact-dropdown .dropdown-content a {
                width: auto;
                padding-left: 12px;
                padding-right: 12px;
                justify-content: center;
                text-align: center;
            }
            .footer { bottom: 38px; right: 15px; flex-direction: column-reverse; align-items: flex-end; gap: 12px; }
            .footer a { font-size: 0.55rem; } 
            .ig-icon, .download-icon, .theme-toggle, .layout-toggle, .zoom-toggle { width: 22px; height: 22px; }
            .copyright { bottom: 12px; left: 15px; max-width: calc(100vw - 30px); font-size: 0.4rem; line-height: 1.4; text-align: left; }
            #ios-brush-selector { bottom: 25px; left: 10px; transform: scale(0.9); transform-origin: bottom left; }
            #page-about .overlay-content { padding-top: 90px; padding-bottom: 150px; }
            .about-image { max-height: 60vh; }
            .about-image img { max-height: 60vh; object-position: center; }
            
            .sym-3 { top: 45%; right: 2%; }
            .sym-5 { top: 65%; left: 2%; }
            .frace-cabbage-wrapper { gap: 20px; margin-top: 30px; }
            .about-frace { width: 100px; }
            .boy-cabbage { width: 140px; }
            
            .slider-arrow { width: 15px; height: 15px; }
            .left-arrow { left: 15px; } .right-arrow { right: 15px; }
            
            .enquiry-title-img { max-width: 250px; }

            .overlay-content { padding-top: 90px; padding-bottom: 150px; }
            .none-desktop { display: none !important; }
            .none-mobile { display: block !important; }
            .lightbox-close { top: 15px; right: 25px; font-size: 2.5rem; }
            .lightbox-left img { 
                max-height: 85vh; 
                min-width: 0;       /* Kills the 400px desktop minimum */
                min-height: 0;      
                max-width: 90vw;    /* Guarantees at least a 5% border on the left and right */
            }
            .form-group { flex-direction: column; }
            .form-group label { width: 100%; margin-bottom: 8px; padding-top: 0; }
            .submit-btn, .form-footer { margin-left: 0; }
            
            #responseMessage {
                margin-left: 0 !important;
                text-align: left;
            }
            
            .sym-4 {
                right: 40px !important; 
                bottom: -50px !important;
                width: 220px !important;
                opacity: 0.9;
            }
        }
/* --- Fix for larger images in Rows Mode --- */
@media (max-width: 1024px) {
    .works-container:has(.mode-rows) {
        padding-left: 0.05vw !important;
        padding-right: 0.05vw !important;
    }

    .works-grid.mode-rows {
        width: 100% !important;
        margin-left: 0 !important;
    }
}
/* --- NOTES / DIGITAL STUDIES: ORDERED JUSTIFIED ROWS --- */
/* Notes and Digital Studies are curated still-image sections, not a second draggable collage.
   It follows the Digital page's visual rhythm: natural image ratios, shared
   row heights, and consistent gaps across desktop, iPad and iPhone. */
.still-grid-page .overlay-content {
    padding-top: 88px !important;
}
.still-grid-page .works-container {
    padding-left: 1.2vw !important;
    padding-right: 1.2vw !important;
}
.still-grid-page .works-grid.mode-studies {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    width: 100% !important;
    margin: -16px 0 0 !important;
    padding: 0 !important;
}
.still-grid-page .works-grid.mode-studies :is(.sketch-item, .study-item) {
    flex: 0 0 var(--study-item-width, 100%) !important;
    width: var(--study-item-width, 100%) !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    transform: scale(1) !important;
    transform-origin: center center !important;
    transition: transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.2s ease !important;
    opacity: 1 !important;
    z-index: auto !important;
    cursor: pointer !important;
    contain: layout style;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
}
.still-grid-page .works-grid.mode-studies :is(.sketch-item, .study-item):has(.work-image:hover) {
    opacity: 0.985 !important;
}

@media (hover: hover) and (pointer: fine) {
    .still-grid-page .works-grid.mode-studies :is(.sketch-item, .study-item):has(.work-image:hover) {
        transform: scale(1.035) !important;
        z-index: 20 !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .still-grid-page .works-grid.mode-studies :is(.sketch-item, .study-item):active {
        transform: scale(1.015) !important;
    }
}
.still-grid-page .works-grid.mode-studies :is(.sketch-item, .study-item) .work-image {
    position: relative;
    width: 100% !important;
    height: var(--study-row-height, auto) !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.still-grid-page .works-grid.mode-studies :is(.sketch-item, .study-item) .work-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 0 !important;
    filter: none !important;
    transform: none !important;
    pointer-events: none !important;
}

@media (max-width: 1024px) {
    .still-grid-page .overlay-content {
        padding-top: 76px !important;
    }
    .still-grid-page .works-container {
        padding-left: 1vw !important;
        padding-right: 1vw !important;
    }
    .still-grid-page .works-grid.mode-studies {
        gap: 16px !important;
        margin-top: -10px !important;
    }
}

@media (max-width: 768px) {
    .still-grid-page .overlay-content {
        padding-top: 58px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
    .still-grid-page .works-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .still-grid-page .works-grid.mode-studies {
        gap: 14px !important;
        margin-top: -8px !important;
    }
}

/* --- EXTRA-TALL STUDIES / MOTION FEATURE TILES --- */
/* Media narrower than the JavaScript threshold can occupy the height of two
   neighbouring rows. The original source order is preserved: the tall item
   stays first, followed by consecutive items stacked in two rows beside it. */
.media-tall-cluster {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: var(--media-tall-gap, 22px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.media-tall-cluster .media-tall-primary {
    flex-shrink: 0 !important;
    align-self: flex-start !important;
    margin: 0 !important;
}
.media-tall-stack {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--media-tall-gap, 22px);
}
.media-tall-row {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--media-tall-gap, 22px);
}
.media-tall-row > .work-item {
    margin: 0 !important;
}

/* Most phone layouts keep ultra-tall media full width. Digital Studies is
   the exception: its portrait feature stays compact and uses a two-row stack
   beside it, reducing scroll while preserving the uncropped source image. */
@media (max-width: 768px) {
    .media-tall-cluster {
        display: block !important;
    }

    #page-digital-studies .media-tall-cluster {
        display: flex !important;
        align-items: flex-start !important;
    }

    #page-digital-studies .media-tall-stack {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
}

/* --- STUDIES FULLSCREEN VIEWER --- */
.studies-viewer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: 405;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease,
                visibility 0.28s ease,
                background-color 0.3s ease;
}
.studies-viewer.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto;
}
.studies-image-stage {
    position: relative;
    width: 92vw;
    height: 92vh;
    height: 92dvh;
    max-width: 1800px;
    overflow: hidden;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.studies-viewer-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: scale(0.995);
    transition: opacity 0.2s linear,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.studies-viewer-image.is-active {
    opacity: 1 !important;
    transform: scale(1);
}

#studies-viewer-image-a {
    z-index: 2;
}

#studies-viewer-image-b {
    display: none !important;
}
.studies-viewer .lightbox-close {
    position: fixed;
    top: 30px;
    right: 40px;
}
.studies-viewer .slider-arrow {
    position: fixed;
    top: 50%;
}
.studies-viewer .left-arrow { left: 40px; }
.studies-viewer .right-arrow { right: 40px; }

@media (max-width: 768px) {
    .studies-image-stage {
        width: 94vw;
        height: 92vh;
        height: 92dvh;
    }
    .studies-viewer .lightbox-close {
        top: 15px;
        right: 25px;
        font-size: 2.5rem;
    }
    .studies-viewer .left-arrow { left: 18px; }
    .studies-viewer .right-arrow { right: 18px; }
}

/* Real iPhone/iPad Safari can expose a one-pixel compositor seam on the
   right edge when a 100% x 100% object-fit image sits on a transformed layer.
   On WebKit touch screens, let the image keep its intrinsic aspect ratio and
   fit it with max bounds instead. Desktop and non-WebKit layouts are unchanged. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .studies-image-stage {
            /* On real iPhone Safari the 94vw overflow clip can paint a 1px
               compositor seam exactly on the stage edge. Make the stage fill
               the viewer and remove that interior clipping boundary. */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            max-width: none;
            overflow: visible;
        }

        .studies-viewer-image {
            position: relative;
            inset: auto;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            transform: none !important;
            -webkit-transform: none !important;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .studies-viewer-image.is-active {
            transform: none !important;
            -webkit-transform: none !important;
        }
    }
}
/* --- DIGITAL PAGE (motion / experimental video works) --- */
#page-motion .overlay-content {
    padding-top: 88px !important;
}
@media (max-width: 768px) {
    #page-motion .overlay-content {
        padding-top: 58px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

#page-motion .works-container {
    padding-left: 1.2vw !important;
    padding-right: 1.2vw !important;
}

#page-motion .works-grid.mode-collage {
    grid-template-columns: repeat(4, 1fr) !important;
    grid-auto-flow: row dense !important;
    gap: 22px !important;
    width: 100%;
    margin-top: -16px !important;
}
@media (min-width: 1400px) {
    #page-motion .works-grid.mode-collage {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 25px !important;
    }
}
@media (max-width: 1024px) {
    #page-motion .works-grid.mode-collage {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 16px !important;
        margin-top: -10px !important;
    }
    #page-motion .works-container {
        padding-left: 1vw !important;
        padding-right: 1vw !important;
    }
}
@media (max-width: 768px) {
    /* Use the same justified-row principle as desktop/iPad on phones.
       JavaScript gives every card in a physical row one shared height and
       calculates its width from the native MP4 ratio. This removes the uneven
       bottoms created by two equal-width CSS grid columns. */
    #page-motion .works-grid.mode-collage {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        grid-auto-flow: initial !important;
        gap: 14px !important;
        margin-top: -8px !important;
    }
    #page-motion .works-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #page-motion .works-grid.mode-collage .motion-item {
        flex: 0 0 var(--motion-item-width, 100%) !important;
        width: var(--motion-item-width, 100%) !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        grid-column: auto !important;
    }
    #page-motion .works-grid.mode-collage .motion-item .work-image {
        width: 100% !important;
        height: var(--motion-row-height, auto) !important;
        aspect-ratio: auto !important;
    }
}

/* iPad only: add a little breathing room below the fixed navigation.
   The width/height gates keep the existing iPhone layout unchanged. */
@supports (-webkit-touch-callout: none) {
    @media (min-width: 600px) and (min-height: 600px) and (max-width: 1366px) {
        #page-motion .overlay-content { padding-top: 76px !important; }
    }
}

/* Keep motion items straight and make taps immediate/reliable on iOS. */
#page-motion .work-item {
    transform: none !important;
    margin-top: 0 !important;
    grid-column: auto !important;
    z-index: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    /* Motion thumbnails must not resize when the pointer leaves. The old
       1.015 hover scale exposed the card background around the edges and made
       the frozen frame appear to jump even when the media handoff was sound. */
    transition: none !important;
    opacity: 1 !important;
}
#page-motion .work-item:has(.work-image:hover) {
    transform: none !important;
    opacity: 1 !important;
    z-index: 5 !important;
}


/* Motion cards use each file's real dimensions. Landscape files span two
   columns, while portrait and square files keep one column. */
#page-motion .works-grid.mode-collage .motion-item.motion-landscape {
    grid-column: span 2 !important;
}
#page-motion .works-grid.mode-collage .motion-item.motion-square,
#page-motion .works-grid.mode-collage .motion-item.motion-portrait {
    grid-column: span 1 !important;
}

/* On phones, every aspect ratio now participates in the same balanced
   justified-row planner. Square and landscape clips can sit beside compatible
   neighbours instead of forcing isolated rows with empty space. */
@media (max-width: 768px) {
    #page-motion .works-grid.mode-collage .motion-item.motion-square,
    #page-motion .works-grid.mode-collage .motion-item.motion-landscape {
        grid-column: auto !important;
    }

    #page-motion .works-grid.mode-collage .motion-item.motion-square .work-image,
    #page-motion .works-grid.mode-collage .motion-item.motion-landscape .work-image {
        height: var(--motion-row-height, auto) !important;
        aspect-ratio: auto !important;
    }
}

/* The general mobile Gallery rule sets artwork <img> elements to height:auto
   and object-fit:contain. That is correct for Gallery artwork, but it was also
   overriding the Motion poster on iPhone. The square WebP therefore used
   different geometry from the full-height MP4 and appeared to jump upward
   when playback began. Keep every Motion poster locked to the exact same
   crop, centre point and box as its video layer. */
@media (max-width: 768px) {
    #page-motion .works-grid.mode-collage .motion-item .motion-poster {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        object-fit: cover !important;
        object-position: 50% 50% !important;
    }
}

/* Desktop and iPad use justified Motion rows. Every item in a completed row
   receives one shared height, while its width is calculated from the native
   video ratio. A 16:9 clip therefore becomes wider instead of shorter and the
   following cards move to the next row when the remaining space is too small. */
@media (min-width: 769px) {
    #page-motion .works-grid.mode-collage {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        grid-template-columns: none !important;
        grid-auto-flow: initial !important;
    }

    #page-motion .works-grid.mode-collage .motion-item {
        flex: 0 0 var(--motion-item-width, 100%) !important;
        width: var(--motion-item-width, 100%) !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        grid-column: auto !important;
    }

    #page-motion .works-grid.mode-collage .motion-item .work-image {
        width: 100% !important;
        height: var(--motion-row-height, auto) !important;
        aspect-ratio: auto !important;
    }
}

#page-motion .works-grid.mode-collage .motion-item .work-image {
    position: relative;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    box-shadow: none !important;
    /* A decoded poster or frozen canvas always owns the visible surface.
       Keeping this transparent removes the grey pulse Safari/Chrome could
       briefly composite while switching GPU video layers. */
    background: transparent;
    aspect-ratio: var(--motion-ratio, 0.5625);
    overflow: hidden;
    border-radius: 0 !important;
    cursor: pointer;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

/* Every device loads the checked-in WebP first frame immediately. After a clip
   has played, the poster is replaced by the exact stopped frame, preserving
   the freeze-frame effect without decoding every MP4 during initial loading. */
.motion-poster {
    position: absolute !important;
    inset: 0;
    z-index: 1;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center;
    opacity: 1;
    transform: scale(1.08);
    transform-origin: center;
    filter: none !important;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: opacity 0.12s linear;
}
/* Keep the poster permanently painted underneath the video stack.
   The moving/frozen canvas remains above it, so there is never a frame where
   the card background can become the visible surface. */
.motion-item.is-playing .motion-poster,
.motion-item.is-freezing .motion-poster {
    opacity: 1 !important;
    transition: none !important;
}
.motion-item.is-freezing .motion-video-stack {
    opacity: 1 !important;
    transition: none !important;
}

/* A poster made from the transition canvas already contains the same 1.08
   crop as the live MP4. Do not apply the poster's initial 1.08 transform a
   second time, which previously caused the visible zoom/jump after hover-out. */
#page-motion .motion-item.has-frozen-poster .motion-poster {
    transform: none !important;
}


/* This appears only when a checked-in poster is missing or still loading.
   The old serial MP4 decoder is retained purely as a safety fallback. */
.motion-item.poster-loading .work-image::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        var(--bg-color)
        linear-gradient(110deg,
            rgba(127,127,127,0.10) 25%,
            rgba(127,127,127,0.24) 42%,
            rgba(127,127,127,0.10) 58%);
    background-size: 220% 100%;
    animation: motion-poster-loading 1.15s linear infinite;
}
@keyframes motion-poster-loading {
    to { background-position: -220% 0; }
}

/* Two decoded layers alternate at every loop point. The stack is transparent
   and hidden until a valid moving frame exists; the poster remains underneath. */
.motion-video-stack {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: transparent;
    contain: strict;
    opacity: 0;
    transition: opacity 0.08s linear;
}
.motion-video-stack.has-frame { opacity: 1; }
.motion-video-stack:empty::after { display: none; }

/* Desktop hover-in must be a direct visual handoff, not a fade through the
   card background. The poster remains underneath as a safety frame while the
   already-painted video/canvas stack is revealed instantly above it. */
@media (hover: hover) and (pointer: fine) {
    #page-motion .motion-video-stack,
    #page-motion .motion-poster,
    #page-motion .motion-video-layer,
    #page-motion .motion-transition-canvas {
        transition: none !important;
    }
}
#page-motion .motion-video-layer { background: transparent; }
.motion-video-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transform: scale(1.08);
    transform-origin: center;
    will-change: opacity, transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.motion-video-layer.is-active {
    opacity: 1;
    z-index: 2;
}

/* iPhone/iPad native video layers must always inherit the complete card box.
   This is especially important for square MP4s displayed in the custom
   full-row mobile height, where Safari otherwise may briefly fall back to an
   intrinsic-size hardware layer during rapid pause/resume cycles. */
@supports (-webkit-touch-callout: none) {
    #page-motion .motion-video-stack .motion-video-layer {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        object-position: 50% 50% !important;
    }

    #page-motion .motion-video-stack .motion-video-layer:not(.is-active) {
        z-index: 0 !important;
    }

    #page-motion .motion-item.mobile-video-frozen .motion-video-layer.is-active {
        z-index: 3 !important;
        opacity: 1 !important;
        transform: scale(1.08) !important;
        transform-origin: 50% 50% !important;
        will-change: auto !important;
    }
}

/* The card box owns the native MP4 ratio. Every visual layer fills that box
   without ever supplying geometry back to the layout, preventing a later
   frozen canvas snapshot from changing portrait/landscape classification. */
#page-motion .motion-poster,
#page-motion .motion-video-layer,
#page-motion .motion-transition-canvas {
    aspect-ratio: inherit;
}

/* Notes, Digital Studies and Digital motion use clean, square-edged presentation. This is scoped to
   these two sections only; Gallery artwork and all other site elements retain
   their existing corner treatment. */
.still-grid-page .works-grid.mode-studies .work-image,
.still-grid-page .works-grid.mode-studies .work-image img,
#page-motion .works-grid.mode-collage .motion-item .work-image,
#page-motion .works-grid.mode-collage .motion-item .motion-poster,
#page-motion .works-grid.mode-collage .motion-item .motion-video-stack,
#page-motion .works-grid.mode-collage .motion-item .motion-video-layer,
#page-motion .works-grid.mode-collage .motion-item .motion-transition-canvas {
    border-radius: 0 !important;
}

/* --- Per-video fullscreen button, bottom right of each thumbnail --- */
.motion-fullscreen-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease;
    padding: 6px;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.motion-fullscreen-btn svg { width: 100%; height: 100%; }
.motion-fullscreen-btn:hover { background: rgba(0, 0, 0, 0.7); }
/* The fullscreen control belongs to the active loop only. Keeping it hidden
   on idle cards also prevents a grid of controls covering mobile artwork. */
#page-motion .motion-item.is-playing .motion-fullscreen-btn {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Desktop uses the complete thumbnail as the fullscreen control. The small
   corner button remains available on touch devices such as iPhone and iPad,
   where tapping the thumbnail itself still controls play/pause. */
#page-motion.desktop-click-fullscreen .motion-fullscreen-btn {
    display: none !important;
}

/* --- MOTION FULLSCREEN VIEWER --- */
.motion-viewer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-color);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0.3s;
}
.motion-viewer.active { opacity: 1; visibility: visible; pointer-events: auto; }

/* This stage is sized in JS to the video's real aspect ratio. It clips the
   small overscale below, trimming any baked-in one-pixel/tiny black bars while
   preserving the artwork's full portrait framing. */
.motion-video-stage {
    position: relative;
    width: 96vw;
    height: 96vh;
    height: 96dvh;
    max-width: 96vw;
    max-height: 96vh;
    max-height: 96dvh;
    overflow: hidden;
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    contain: layout paint;
}

/* Fullscreen videos are decoder-only. Safari's promoted native video surface
   is never made visible, so it cannot flash black when a differently shaped
   MP4 replaces it. All moving output is painted into the canvas instead. */
.motion-video-stage .motion-video-layer {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
}
.motion-transition-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 5;
    image-rendering: auto;
    pointer-events: none;
    background: transparent;
}

.motion-freeze-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 6;
    pointer-events: none;
}

/* During next/previous navigation, this independent canvas holds the outgoing
   frame at its original pixel dimensions. The hidden stage is free to resize
   for the incoming MP4 behind it, so Safari can never stretch the old video
   into the new aspect ratio and the viewer never has to flash black. */
.motion-viewer-safety {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: block;
    overflow: hidden;
    background: var(--bg-color);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.motion-viewer-safety.is-visible {
    opacity: 1;
    visibility: visible;
}
.motion-viewer-safety-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    object-position: center;
    transform: scale(1.075);
    transform-origin: center;
    opacity: 0;
    visibility: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}
.motion-viewer-safety-image.is-active {
    opacity: 1;
    visibility: visible;
}

.motion-viewer-hold {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 8;
    width: 96vw;
    height: 96vh;
    height: 96dvh;
    max-width: 96vw;
    max-height: 96vh;
    max-height: 96dvh;
    background: transparent;
    pointer-events: none;
    image-rendering: auto;
}

/* The outgoing canvas snapshot or decoded incoming WebP remains above the
   decoder canvas throughout a source change. The stage itself is never the
   only visible surface. */
.motion-video-stage.is-switching .motion-video-layer,
.motion-video-stage.is-switching .motion-transition-canvas,
.motion-video-stage.is-switching .motion-freeze-frame {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Native media controls are intentionally disabled in this custom viewer.
   This prevents Safari/Chrome from flashing the bottom loading/progress bar
   each time a loop changes layers. Tap the video itself to play/pause. */
.motion-viewer video {
    border: 0;
    outline: 0;
    box-shadow: none;
}
.motion-viewer video::-webkit-media-controls,
.motion-viewer video::-webkit-media-controls-panel,
.motion-viewer video::-webkit-media-controls-enclosure,
.motion-viewer video::-webkit-media-controls-overlay-play-button,
.motion-viewer video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
}

.motion-viewer .lightbox-close { position: fixed; top: 30px; right: 40px; }
.motion-viewer .slider-arrow { position: fixed; top: 50%; }
.motion-viewer .left-arrow { left: 40px; }
.motion-viewer .right-arrow { right: 40px; }
@media (max-width: 768px) {
    .motion-video-stage {
        max-width: 96vw;
        max-height: 96vh;
        max-height: 96dvh;
    }
    .motion-viewer .lightbox-close { top: 15px; right: 25px; font-size: 2.5rem; }
    .motion-viewer .left-arrow { left: 18px; }
    .motion-viewer .right-arrow { right: 18px; }
}
/* --- STORE PAGE - PERFECT EQUAL SPACING --- */

#page-store .overlay-content {
    padding: 0 !important; /* Strip this so it stops fighting the wrapper below */
    align-items: flex-start !important; /* Let items start from the top naturally */
}

#store-content {
    /* Overrides the inline HTML styles completely */
    width: 100% !important;
    max-width: 1600px !important; /* Widened to 1600px to match your gallery's breathing room */
    margin: 0 auto !important; 
    
    /* THE FIX: The left/right padding EXACTLY matches the grid gap */
    padding: 85px 40px 80px 40px !important; 
    box-sizing: border-box;
}

.store-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: stretch;
    column-gap: 28px !important;
    row-gap: 42px !important;
    margin: 0 !important;
    padding: 0;
    width: 100%;
}

/* Responsive adjustments for iPads / Tablets */
@media (max-width: 1024px) {
    #store-content {
        padding: 85px 30px 60px 30px !important;
    }
    .store-tabs {
        max-width: none;
    }
    .store-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 22px !important;
        row-gap: 36px !important;
    }
    .store-item img {
        height: clamp(280px, 38vw, 390px);
    }
}

/* Responsive adjustments for Mobile */
@media (max-width: 768px) {
    #store-content {
        padding: 70px 20px 60px 20px !important;
    }
    .store-tabs {
        max-width: none;
    }
.store-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 14px !important;
        row-gap: 28px !important;
    }
    .store-item img {
        height: clamp(190px, 56vw, 280px);
    }
}
.store-item {
    min-width: 0;
    text-decoration: none;
    color: var(--text-color);
    text-align: center;
}

.store-item-media {
    position: relative;
    display: block;
    overflow: hidden;
}

.store-item img {
    width: 100%;
    height: clamp(320px, 31vw, 480px);
    object-fit: contain;
    object-position: center;
    background-color: var(--overlay-bg); /* Shared square image stage keeps every product card aligned */
    display: block;
    transition: transform 0.3s ease;
}

.store-item.sold-out .store-item-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(110, 110, 110, 0.58);
    pointer-events: none;
}

.store-item .sold-out-label {
    opacity: 0.8;
    font-weight: 600;
}

.store-item:hover img {
    transform: scale(1.02);
}

.store-item h3 {
    margin: 13px 0 3px;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 500;
}

.store-item p {
    margin: 0;
    opacity: 0.65;
    font-size: 13px;
    line-height: 1.25;
}

@media (max-width: 768px) {
    /* Use a square media stage on phones. The Seven of Hearts images are
       square, so this removes the hidden vertical space beneath them while
       keeping both columns aligned. */
    .store-item img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        object-position: center;
    }

    .store-item h3 {
        margin-top: 9px;
    }
}

/* --- STORE CATEGORY TABS (Editions / Apparel) --- */
.store-tabs {
    display: flex;
    justify-content: flex-start;
    gap: 36px;
    margin: 0 0 28px;
    width: 100%;
}

.store-tab {
    background: none;
    border: none;
    padding: 0 0 8px 0;
    color: var(--text-color);
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s ease;
    position: relative;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.store-tab::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--text-color);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .store-tab:hover { opacity: 0.8; }
}
.store-tab.active { opacity: 1; }
.store-tab.active::after { transform: scaleX(1); }

@media (max-width: 768px) {
    .store-tabs { gap: 24px; margin-bottom: 22px; }
    .store-tab { font-size: 0.6rem; letter-spacing: 0; }
}

.store-coming-soon {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 0.5;
}
/* --- PRODUCT DETAIL OVERLAY --- */
#page-product { z-index: 100000; overflow-y: auto; overflow-x: hidden; background: var(--overlay-bg); }
/* 1. Lift the product lightbox higher */
.product-container { 
    max-width: 1000px; 
    width: 100%;
    margin: 0 auto; 
    padding: 38px 40px 24px; /* Slight breathing room above the product lightbox */
    box-sizing: border-box; 
}
@media (max-width: 768px) { 
    .product-container {
        padding: 42px 20px 30px;
        width: 100%;
        max-width: none;
        overflow-x: hidden;
    }

    .product-layout {
        width: 100%;
        min-width: 0;
        gap: 14px;
    }

    .product-left,
    .product-right {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .product-right {
        align-self: stretch;
        margin-top: -4px;
    }

    .product-carousel-shell {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        margin-top: 8px;
        padding-bottom: 4px;
    }

    #prod-carousel {
        width: 100%;
        min-width: 0;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
}
.back-btn { background: none; border: none; font-size: 1rem; cursor: pointer; margin-bottom: 20px; opacity: 0.6; color: var(--text-color); padding: 0; }
.product-layout { display: flex; gap: 60px; color: var(--text-color); }
.product-left {
    flex: 1.6;
    min-width: 0;
    position: relative;
}

.product-main-stage {
    position: relative;
    width: 100%;
    height: min(68vh, 660px);
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-main-stage #prod-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: center;
    transition: opacity 0.3s ease;
}

.product-main-stage #prod-img-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    margin: 0;
    transform: translate(-50%, -50%);
}
.product-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.product-right h1 { margin: 0; font-size: 1.7rem; line-height: 1.2; }
.prod-desc { font-size: 0.9rem; line-height: 1.4; opacity: 0.8; }
.product-option-groups {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}
.product-option-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.product-option-group > label {
    display: block;
    margin: 0;
}
.selector-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.selector-group.compact-sizes {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.selector-group.compact-colours {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
}
@media (max-width: 560px) {
    .selector-group.compact-sizes {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
.prod-option-btn { 
    padding: 7px 16px; 
    border: 1px solid var(--text-color); 
    background: none; 
    color: var(--text-color); 
    cursor: pointer; 
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.prod-option-btn.active {
    background: var(--text-color);
    color: var(--bg-color);
}
.buy-btn {
    width: 100%;
    padding: 16px;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 3px;
    text-transform: uppercase;
    
    /* Sleek Outline Style */
    background: transparent;
    color: var(--text-color);
    border: 2px solid var(--text-color);
    border-radius: 4px;
    
    /* Smooth transition */
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: visible;
}
.buy-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
}
.buy-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--text-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
    /* Add these to keep the background fill contained within the radius */
    border-radius: 4px;
    overflow: hidden; 
}

.buy-btn:hover::before {
    transform: scaleX(1);
}
.buy-btn.black { background: var(--text-color); color: var(--bg-color); }
.price-tag { font-size: 1.5rem; font-weight: bold; margin: 6px 0; }
.shipping-info { margin-top: 20px; font-size: 0.8rem; line-height: 1.6; opacity: 0.7; }
@media (max-width: 768px) { 
    .product-layout { flex-direction: column; } 
    .product-left { flex: 1; }
    .product-main-stage {
        height: min(58vh, 520px);
        min-height: 340px;
    }
}
/* --- SHOPPING CART ELEMENTS & DRAWER --- */
.quantity-container {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 4px 0;
}

/* Cart Drawer Footer */
.cart-footer {
    margin-top: auto;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 20px;
}
body.dark-mode .cart-footer {
    border-top: 1px solid rgba(255,255,255,0.1);
}
.cart-totals {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.cart-totals span:last-child {
    font-size: 1.3rem;
}
.cart-tax-info {
    font-size: 0.85rem;
    text-align: right;
    opacity: 0.7;
    margin-bottom: 25px;
    line-height: 1.4;
}

.qty-btn {
    background: none;
    border: 1px solid var(--text-color);
    color: var(--text-color);
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#qty-display {
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}
.cart-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background: var(--overlay-bg);
    border-left: 1px solid var(--text-muted);
    z-index: 100001;
    box-sizing: border-box;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.cart-drawer.active {
    right: 0;
}
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.cart-header h3 {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: 1px;
}
.cart-header button {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 2rem;
    cursor: pointer;
}
#cart-items {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.cart-item {
    display: flex;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 15px;
}
body.dark-mode .cart-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cart-item img {
    width: 70px;
    height: auto;
}
.cart-item-details {
    flex: 1;
}
.cart-item-details h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
}
.cart-item-details p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.7;
}
.remove-cart-item {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
    opacity: 0.5;
    padding: 0;
    margin-top: 5px;
}
.remove-cart-item:hover {
    opacity: 1;
}
/* --- NAV CART ICON --- */
.nav-cart {
    position: relative;
    display: inline-flex !important; /* Overrides hidden */
    align-items: center;
    opacity: 0.65;
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-left: -10px; /* Gives a tiny bit of extra breathing room from Contact */
}

.nav-cart.hidden {
    display: none !important;
}

.nav-cart:hover {
    opacity: 1;
    transform: scale(1.05);
}

#cart-badge {
    position: absolute;
    top: -8px;
    right: -12px;
    background: var(--text-color);
    color: var(--bg-color);
    font-size: 0.6rem;
    font-weight: bold;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* --- STORE PRODUCT CAROUSEL --- */
.product-carousel-shell {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    padding: 0 34px 10px;
    box-sizing: border-box;
}
#prod-carousel {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    padding: 0;
    cursor: pointer;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
#prod-carousel::-webkit-scrollbar { display: none; }
#prod-carousel.is-overflowing {
    justify-content: flex-start;
}

#prod-carousel img {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    object-fit: cover;
    border: 1px solid transparent;
    opacity: 0.28;
    transition: opacity 0.22s ease, border-color 0.22s ease;
}
#prod-carousel img:hover { opacity: 0.7; }
#prod-carousel img.is-active {
    opacity: 1;
    border-color: var(--text-color);
}
.product-carousel-arrow {
    position: absolute;
    top: 40px;
    margin: 0;
    z-index: 20;
    outline: none;
}

.product-carousel-arrow:focus-visible {
    opacity: 1;
}

#prod-carousel img:focus {
    outline: none;
}
#prod-carousel-prev { left: 5px; }
#prod-carousel-next { right: 5px; }
.product-carousel-arrow[hidden] { display: none !important; }
@media (max-width: 768px) {
    .product-carousel-shell {
        padding-left: 28px;
        padding-right: 28px;
    }
    #prod-carousel img {
        flex-basis: 68px;
        width: 68px;
        height: 68px;
    }
    .product-carousel-arrow { top: 34px; }
    #prod-carousel-prev { left: 3px; }
    #prod-carousel-next { right: 3px; }
}
/* Force disable interactions and reset cursor when an overlay is not visible */
.page-overlay:not(.visible),
.page-overlay:not(.visible) * {
    pointer-events: none !important;
    cursor: default !important;
}
/* Slower, theme-aware loading graphic */
@keyframes throb-animation {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.5; }
}

/* --- LOADING GRAPHIC (Static, Centered) --- */
.btn-loading-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfectly centers the image */
    height: 90%;                     /* Adjust this percentage to make it larger/smaller */
    width: auto;
    object-fit: contain;             /* Ensures it doesn't stretch/distort */
    z-index: 10;
    pointer-events: none;
}
/* 2. Dynamic Theme Logic */
/* Standard transparent buttons use the base text color */
.buy-btn .btn-loading-img {
    filter: var(--logo-filter);
}

/* Hovering standard buttons fills them, so invert the graphic */
.buy-btn:hover .btn-loading-img {
    filter: var(--loader-invert);
}

/* 3. Filled/Black buttons ALWAYS have a filled background matching text-color */
/* Therefore they always need the inverted contrast graphic */
.buy-btn.black .btn-loading-img,
.buy-btn.black:hover .btn-loading-img {
    filter: var(--loader-invert);
}
/* --- STORE COUNTDOWN TIMER --- */
#store-countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute; 
    top: 0; left: 0;
    z-index: 10;
}
.cd-title {
    text-align: center;
    font-size: 1.2rem;
    font-weight: normal;
    letter-spacing: 4px;
    opacity: 0.6;
    margin-bottom: 35px;
    text-transform: uppercase;
}
.store-countdown {
    display: flex;
    gap: 15px;
    align-items: center;
    color: var(--text-color);
}
.cd-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}
.cd-item span:first-child {
    font-size: 4rem;
    font-weight: bold;
    line-height: 1;
}
.cd-separator {
    font-size: 3.5rem;
    font-weight: bold;
    line-height: 1;
    opacity: 0.2;
    margin-bottom: 25px; /* Adjust to align with the numbers */
}
.cd-label {
    font-size: 0.75rem;
    letter-spacing: 2px;
    opacity: 0.5;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .cd-item span:first-child { font-size: 2.5rem; }
    .cd-item { width: 55px; }
    .cd-separator { font-size: 2.2rem; margin-bottom: 20px; }
    .cd-title { font-size: 1rem; }
}

/* --- TIME PAGE (hidden /time) --- */
.time-page-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.time-eyebrow {
    font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase;
    opacity: 0.55; font-weight: bold; margin-bottom: 22px;
}
.time-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-color); margin-right: 8px; vertical-align: 1px;
    animation: timePulse 1.6s ease-in-out infinite;
}
@keyframes timePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.time-intro { font-size: 1rem; line-height: 1.6; opacity: 0.75; margin: 0 0 50px; }
.time-intro strong { opacity: 1; }
.time-counter {
    display: flex; justify-content: center; align-items: center; gap: 18px;
    color: var(--text-color); flex-wrap: wrap; margin-bottom: 30px;
}
.time-item { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.time-item span:first-child {
    font-size: 3.4rem; font-weight: bold; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.time-sep { font-size: 3rem; font-weight: bold; line-height: 1; opacity: 0.2; margin-bottom: 22px; }
.time-label { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; opacity: 0.5; margin-top: 12px; }
.time-ticker { font-size: 0.8rem; letter-spacing: 0.5px; opacity: 0.6; margin-bottom: 30px; font-variant-numeric: tabular-nums; }
.time-copy { font-size: 0.85rem; line-height: 1.7; opacity: 0.55; max-width: 520px; margin: 0 auto; }
.time-copy strong { opacity: 0.85; }
@media (max-width: 768px) {
    .time-item span:first-child { font-size: 2.1rem; }
    .time-sep { font-size: 1.8rem; margin-bottom: 14px; }
    .time-item { min-width: 62px; }
    .time-counter { gap: 8px; }
    .time-intro { margin-bottom: 34px; }
}

/* When /time is open, strip the site chrome down to just the logo */
body.time-mode .nav-links,
body.time-mode .footer,
body.time-mode .copyright,
body.time-mode #ios-brush-selector {
    display: none !important;
}

.inline-artist {
    height: 2.4em; /* Scales perfectly with the paragraph text */
    width: auto; 
    vertical-align: middle; 
    mix-blend-mode: var(--frace-blend);
    filter: var(--logo-filter);
    margin: 0 3px; /* Gives the image a tiny bit of breathing room from the commas */
    position: relative;
    top: -2px; /* Nudges it down slightly to sit nicely on the baseline */
    transition: filter 0.3s ease;
}
/* --- UNRESTRICTED 3D MODEL VIEWER --- */
#lb-model {
    position: fixed !important;
    top: 0 !important;
    /* Spans 124% of the screen, shifted left by 24% to perfectly center on the 75% left column */
    left: -24vw !important;
    width: 124vw !important;
    height: 100vh !important;
    transform: none !important;
    z-index: 20 !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    background: transparent !important;
    outline: none !important;
    transition: opacity 0.3s ease;
}

/* Small centered loading bar shown while a .glb streams in, instead of a poster that pops */
.lb-model-loader {
    position: fixed;
    top: 50%;
    left: 38%; /* Center of the model's actual -24vw to 100vw span, not the full viewport */
    transform: translate(-50%, -50%);
    z-index: 21;
    width: 140px;
    height: 2px;
    background: rgba(128,128,128,0.25);
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .lb-model-loader {
        left: 50%; /* Model goes full-width on mobile, so horizontal center is correct here */
        top: 46%; /* Center of the model's -18vh to 110vh span on mobile */
    }
}

.lb-model-loader-bar {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 40%;
    background: var(--text-color);
    border-radius: 2px;
    animation: lb-loader-sweep 1s ease-in-out infinite;
}

@keyframes lb-loader-sweep {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Generic small loading bar (same look as the .glb loader above) used for
   art lightbox images and the store product lightbox while a higher-res
   image streams in. Positioned absolute + centered within its own
   position:relative parent, rather than fixed like the model loader,
   since these containers don't have the model's special fixed layout. */
.img-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    width: 140px;
    height: 2px;
    background: rgba(128,128,128,0.25);
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
}

.img-loader-bar {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 40%;
    background: var(--text-color);
    border-radius: 2px;
    animation: lb-loader-sweep 1s ease-in-out infinite;
}

/* Mobile/Tablet alignment */
@media (max-width: 1024px) {
    #lb-model {
        left: 0 !important;
        /* Spans 128% of screen height, shifted up 28% to center perfectly on the top column */
        top: -18vh !important;
        width: 100vw !important;
        height: 128vh !important;
    }
}

/* --- SECTION LOADERS: NOTES / STUDIES / DIGITAL MOTION --- */
.section-page-loader {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.section-page-loader.visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease;
}

.section-page-loader-track {
    position: relative;
    width: 140px;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
    background: rgba(128, 128, 128, 0.25);
}

.section-page-loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    border-radius: 2px;
    background: var(--text-color);
    animation: lb-loader-sweep 1s ease-in-out infinite;
}

@media (max-width: 1024px) {
    .section-page-loader-track {
        width: 132px;
    }
}

@media (max-width: 768px) {
    .section-page-loader-track {
        width: 118px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section-page-loader-bar {
        animation-duration: 1.6s;
    }
}