/* ==========================================================================
   1. GLOBAL FOUNDATION RULES (ISOLATED GALLERIES DEFAULTS)
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f7f7f7;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #000000;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

/* Master 1250px Canvas Boundary Rail Guard */
.site-container {
    width: 100%;
    max-width: 1250px;
    background-color: #ffffff;
    height: 100vh; /* Locks window height safely to screen boundaries */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.04);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Stops double scrollbars from appearing */
}

.site-inner {
    width: 100%;
    max-width: 1250px;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
}

a {
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.accent-red {
    color: #cc0000;
}

/* ==========================================================================
   2. REUSABLE STICKY NAV HEADER COMPONENT
   ========================================================================== */
.main-header {
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    z-index: 1000;
}

.header-layout {
    display: flex;
    align-items: center;
    height: 90px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1.5;
}

.logo-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.logo-graphic-container {
    display: flex;
    align-items: center;
    height: 38px;
    width: 38px;
}

.logo-graphic-container svg {
    width: 100%;
    height: 100%;
    display: block;
}

.logo-text {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: 0.12em;
}

/* Social Menu Alignment Row */
.header-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1.2;
    gap: 20px;
}

.social-icon-link {
    display: inline-flex;
    align-items: center;
}

.platform-label-link { gap: 5px; }

.inline-platform-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #555555;
    display: inline-block;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    flex: 2;
}

.nav-menu:hover .nav-item { opacity: 0.4; }
.nav-menu .nav-item:hover { color: #000000 !important; opacity: 1 !important; }

.nav-item {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #555555;
}

.nav-item.active {
    color: #cc0000 !important;
    font-weight: 600 !important;
}

.mobile-toggle { display: none; }


/* ==========================================================================
   3. GALLERY TWO-PILLAR FLUID SYSTEM (THE EXACT DESKTOP SCALE ENGINE)
   ========================================================================== */
.main-content {
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.gallery-two-pillar-grid {
    width: 100%;
    display: flex;
    align-items: stretch;
    height: calc(100vh - 150px); /* Perfectly fills layout between header and footer rows */
}
/* PILLAR 1: Left Fixed Narrative Segment Column (Fluid Percentage Scale) */
.gallery-left-narrative-pillar {
    width: 24%; /* Claims exactly 24% of your site container's horizontal space */
    flex-shrink: 0;
    padding: 40px;
    border-right: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 30px;
}

.gallery-subpage-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.2;
}

.gallery-narrative-scroll-track {
    overflow-y: auto;
}

.gallery-description-paragraph {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #444444;
}

.subpage-back-to-hub-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #000000;
}
.subpage-back-to-hub-link:hover { color: #cc0000; }
.back-arrow-graphic { font-size: 1.1rem; transition: transform 0.2s ease; }
.subpage-back-to-hub-link:hover .back-arrow-graphic { transform: translateX(-4px); }

/* PILLAR 2: Right Image Scroll Area (Handles own scroll calculations independently) */

.gallery-right-images-pillar {
    flex-grow: 1;
    width: 76%;
    padding: 40px;
    
    /* KEY FORCED RESOLUTION FIX: */
    display: block !important;
    height: 100% !important;
    overflow-y: scroll !important; /* Forces vertical scrolling ONLY on the images side if text or items clip */
    background-color: #ffffff;
}

/* Unshakeable 3-Column Fluid Grid Layout */
.acrylic-canvas-grid {
    display: grid !important;
    /* KEY CHASSIS FIX: Slices the horizontal track into 3 fluid, identical width columns */
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 45px 20px !important;
    width: 100% !important;
}

.fine-art-display-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important; /* Removes rigid pixel caps so items resize elegantly */
    cursor: pointer;
}


/* ==========================================================================
   SUBPAGE CANVAS ARTWORK DISPLAY DISPLAY WRAPPER (UPDATED PROPORTIONS)
   ========================================================================== */
.tall-portrait-frame-box {
    width: 100%;
    
    /* KEY PROPORTIONAL TWEAK: Changed from 10/12 to 9/13. 
       This instantly elongates the frames vertically, making them sit taller, 
       slenderer, and completely beautifully proportioned on the screen! */
    aspect-ratio: 9 / 13 !important; 
    
    background-color: #ffffff; /* Stable crisp white exhibition backdrop base */
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* Your fine-tuned sharp museum exhibition track lighting shadow values */
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.265),
        0 2px 4px rgba(0, 0, 0, 0.265),
        0 3px 4px rgba(0, 0, 0, 0.265);
        
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}
.tall-portrait-frame-box-square {
    width: 100%;
    
    /* KEY PROPORTIONAL TWEAK: Changed from 10/12 to 9/13. 
       This instantly elongates the frames vertically, making them sit taller, 
       slenderer, and completely beautifully proportioned on the screen! */
    aspect-ratio: 10 / 10 !important; 
    
    background-color: #ffffff; /* Stable crisp white exhibition backdrop base */
    border: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
    /* Your fine-tuned sharp museum exhibition track lighting shadow values */
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.265),
        0 2px 4px rgba(0, 0, 0, 0.265),
        0 3px 4px rgba(0, 0, 0, 0.265);
        
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

/* Master Core Image Rules inside your taller gallery boxes */
.subpage-gallery-art {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Spans fully edge-to-edge eliminating all white gaps */
    display: block;

    /* THE ULTRA-FIDELITY SCALE ENGINE:
       Bypasses the browser's fast, low-quality software downsizer. 
       Forces the device's graphics processor to render your fluid acrylic 
       textures using high-quality bicubic resampling! */
    image-rendering: auto !important; 
    
    /* HARDWARE ACCELERATION ENGINE OVERRIDES:
       Pushes the image layer onto its own standalone composite GPU rendering line.
       This eliminates blurriness, compression artifacts, and jagged pixel edges on desktops and mobile devices! */
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    perspective: 1000px !important;
}





.fine-art-display-card:hover .tall-portrait-frame-box { border-color: #000000; }

/* ==========================================================================
   FINE-ART CARD METADATA LABEL TYPOGRAPHY (NAME COMPLIANCE)
   ========================================================================== */

.subpage-art-label-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-top: 12px !important;
    
    /* KEY ACTION SQUEEZE FIXES: */
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;   /* Absolutely forces the text block to render outside clipping bounds */
    word-break: break-word !important; /* Forces text wrap if it strikes the column edge cell wall */
    white-space: normal !important;   /* Prevents the text string from stretching into one wide invisible row line */
}


/* KEY NAME FIX: Changed from .subpage-art-title to match your actual HTML class string */
.art-card-title { 
    font-size: 0.9rem !important; 
    font-weight: 600 !important; 
    color: #000000 !important;
    display: block !important;
}

/* KEY NAME FIX: Changed from .subpage-art-specs to match your actual HTML class string */
.art-card-specs { 
    font-size: 0.75rem !important; 
    color: #777777 !important; 
    letter-spacing: 0.02em !important;
    display: block !important;
}

/* ==========================================================================
   4. REUSABLE STICKY FOOTER ENGINE
   ========================================================================== */
.main-footer {
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
    z-index: 1000;
}

.footer-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}

.copyright-text { font-size: 0.75rem; color: #777777; }
.footer-nav { display: flex; align-items: center; gap: 24px; }
.footer-item { font-size: 0.8rem; font-weight: 500; color: #666666; }
.footer-item:hover { color: #cc0000; }

/* ==========================================================================
   5. FIXED SLIDESHOW ENGINE LAYER WITH BOTTOM NAVIGATION SYSTEM
   ========================================================================== */
.inner-slideshow-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(255, 255, 255, 0.99) !important;
    z-index: 3000 !important;
    display: none;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 0 0 !important; /* Tiny top gap to keep the art clean off the glass */
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* THE CENTRAL SHOWCASE DISPLAY WINDOW */
.slideshow-display-window {
    width: 100% !important;
    height: calc(100vh - 55px) !important; /* Perfect vertical height clearance */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* Filmstrip Track Frame Layout */
.horizontal-slideshow-track {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    overflow-x: scroll !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important; /* Enables fluid iOS inertial swiping */
    
    /* Completely strips visible layout scrollbars */
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
.horizontal-slideshow-track::-webkit-scrollbar {
    display: none !important;
}

/* KEY MOBILE FIX: Stripping extra rules ensures the slide container 
   is perfectly sized so touch swiping glides smoothly to both left and right! */
.slideshow-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
}

.media-box {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.media-box img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   MINIMAL COMPACT FIXED CLOSE TRIGGER (UPPER EDGE)
   -------------------------------------------------------------------------- */
.inner-close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    background: transparent !important;
    border: none !important;
    
    /* KEY FIX: Squeezed size down, softened tone, and restricted letter-spacing */
    font-size: 0.68rem !important; 
    letter-spacing: 0.08em !important; 
    color: #666666 !important; 
    font-weight: 600 !important;
    text-transform: uppercase !important;
    
    cursor: pointer !important;
    z-index: 3500 !important;
    padding: 8px !important;
    transition: color 0.2s ease, opacity 0.2s ease !important;
    opacity: 0.85;
}
.inner-close-btn:hover { 
    color: #cc0000 !important; 
    opacity: 1 !important;
}

/* Mobile Screen Specific Tweaks */
@media (max-width: 1150px) {
    .inner-close-btn { 
        top: 8px !important; 
        right: 10px !important; 
        font-size: 0.65rem !important; /* Even stealthier on mobile glass profiles */
    }
}


/* --------------------------------------------------------------------------
   THE UNIFIED CONTROLS BASELINE ROW (ARROW + COUNTER MATRIX GATHERING)
   -------------------------------------------------------------------------- */
.slideshow-controls-row {
    width: 100% !important;
    height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important; /* Groups everything in the center of the baseline */
    gap: 30px !important; /* Space between the arrows and the counter numbers */
    position: relative !important;
    border-top: 1px solid #f0f0f0 !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
}

.slideshow-indicator-text {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #000000 !important;
    letter-spacing: 0.05em !important;
    min-width: 45px !important; /* Ensures numbers don't jump around when changing */
    text-align: center !important;
}

/* THE LOWER ROW NAVIGATION ARROWS ENGINE */
.inline-nav-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    color: #cc0000 !important; /* Signature red */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    z-index: 3100 !important;
    transition: transform 0.2s ease !important;
}
.inline-nav-btn:hover { transform: scale(1.25) !important; }

/* Mobile Touchscreen Adjustments */
@media (max-width: 1150px) {
    .inline-nav-btn { display: none !important; } /* Removes arrow buttons on mobile to favor touch swiping */
    .inner-close-btn { top: 10px !important; right: 15px !important; }
}

/* ==========================================================================
   6. UNIFIED MASTER TRACK BREAKPOINTS (MOBILE OVERRIDES)
   ========================================================================== */@media (max-width: 1150px) {
    .site-inner { padding-left: 20px !important; padding-right: 20px !important; }
    .site-container { height: auto !important; overflow: visible !important; }
    .main-content { overflow: visible !important; }
    
    /* Header grid conversion */
    .header-layout { height: auto !important; padding: 25px 20px !important; display: grid !important; grid-template-columns: auto 1fr 32px !important; align-items: center !important; position: relative !important; }
    .header-left { grid-column: 1 / 3 !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; }
    .logo-graphic-container { height: 22px !important; width: 22px !important; }
    .logo-text { font-size: 1rem !important; }
    .mobile-toggle { grid-column: 3 !important; grid-row: 1 !important; display: flex !important; width: 32px !important; height: 16px !important; background: transparent !important; border: none !important; }
    .mobile-toggle span { width: 100%; height: 2px; background-color: #000000; }
    .header-socials { grid-column: 1 / 4 !important; grid-row: 2 !important; display: flex !important; margin-top: 18px !important; gap: 18px !important; }
    .nav-menu { display: none !important; }

    /* Subpage column flattening tracking paths */
    .gallery-two-pillar-grid { grid-template-columns: 100% !important; height: auto !important; display: block !important; }
    .gallery-left-narrative-pillar { width: 100% !important; border-right: none !important; border-bottom: 1px solid #f0f0f0 !important; height: auto !important; padding: 30px 20px !important; }
    .gallery-right-images-pillar { width: 100% !important; height: auto !important; overflow: visible !important; padding: 30px 20px !important; }
    
    /* KEY CHANGE: Flattens the new custom named grid class into a single fluid stream on phones */
    .acrylic-canvas-grid { grid-template-columns: 100% !important; gap: 35px !important; }
    .tall-portrait-frame-box { aspect-ratio: 12 / 10 !important; }
    
    /* Footer list stacking layout tracks */
    .footer-layout { flex-direction: column-reverse !important; height: auto !important; padding: 25px 0 !important; gap: 20px !important; align-items: flex-start !important; }
    .copyright-text { padding-left: 20px !important; }
    .footer-nav { padding-left: 20px !important; gap: 20px !important; }
}