css/* ==========================================================================
   1. GLOBAL SYSTEM DEFAULTS & ARCHITECTURE LABELS
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Forces layout tracking coordinates inward */
}

html {
    scroll-behavior: smooth;
}

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

/* ==========================================================================
   2. THE CORE SITE ALIGNMENT RAIL ENGINE (THE OVERFLOW FIX)
   ========================================================================== */
/* Outer Frame Scaffold Shell */
/* Outer Frame Scaffold Shell */
/* Outer Frame Scaffold Shell */
.site-container {
    width: 100%;
    max-width: 1250px; 
    background-color: #ffffff;
    /* KEY CHASSIS TWEAK: Swapped strict height for min-height so long pages can grow downward naturally */
    min-height: 100vh; 
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.04);
    position: relative;
    display: flex;
    flex-direction: column; 
}



/* THE STRUCTURAL GUARDIAN ROW WRAPPER: Used across all layout elements to enforce constraints */
.site-inner {
    width: 100%;
    max-width: 1250px;
    padding-left: 40px;  /* Master structural vertical alignment coordinate boundary line */
    padding-right: 40px; 
    margin: 0 auto;      /* Keeps internal grids perfectly centered inside your canvas */
    box-sizing: border-box;
}

/* ==========================================================================
   3. GLOBAL INTERACTIVE UTILITIES & DEFAULTS
   ========================================================================== */
a {
    color: #000000;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.accent-red {
    color: #cc0000;
}

/* ==========================================================================
   4. STICKY HEADER STYLING ENGINE (DESKTOP)
   ========================================================================== */
.main-header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 1px solid #f0f0f0;
    z-index: 1000;
}

.header-layout {
    display: flex;
    align-items: center;
    height: 90px; /* Locked fixed height prevents elements from drifting or breaking bounds */
}

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

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

.logo-icon {
    display: inline-flex;
    align-items: center;
}
/* ==========================================================================
   CUSTOM GRAPHIC LOGO ENGINE RULES (UPDATED SCALE)
   ========================================================================== */
.logo-text-link {
    display: inline-flex;
    align-items: center;
    gap: 16px; /* Slightly increased gap to balance the larger graphic mark */
}

.logo-graphic-container {
    display: flex;
    align-items: center;
    /* KEY FIX: Increased from 28px to 38px to give the asset a stronger presence */
    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;
    color: #000000;
    white-space: nowrap;
}

/* ==========================================================================
   DESKTOP SOCIAL LINK TRACK ADJUSTMENTS
   ========================================================================== */
.header-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    /* KEY CHANGE: Increased from 0.5 to 1.2 to give your links space on desktop screens */
    flex: 1.2; 
    gap: 20px; /* Uniform horizontal spacing between all 4 platform links */
}

.social-icon-link {
    display: inline-flex;
    align-items: center;
    color: #000000;
    opacity: 0.8;
}

.social-icon-link:hover {
    color: #cc0000;
    opacity: 1;
}

.platform-label-link {
    gap: 5px; /* Creates clean breathing room between the icon circle and the text label */
}

.inline-platform-tag {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #555555;
    /* KEY CHANGE: Ensures the label sits inline horizontally next to the icon on computers */
    display: inline-block; 
    line-height: 1;
}

/* Hover feedback effect for the label typography string */
.social-icon-link:hover .inline-platform-tag {
    color: #cc0000;
}

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

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

.nav-item:hover, .nav-item.active {
    color: #000000;
    font-weight: 500;
}
.nav-menu:hover .nav-item {
    opacity: 0.4; /* NEW EFFECT: Fades ALL menu items to a muted gray when the mouse enters the menu area */
}

.nav-menu .nav-item:hover {
    color: #000000 !important;
    opacity: 1 !important; /* NEW EFFECT: Pulls the specific item you are hovering over back to full crisp black */
}

/* KEY CORE CHANGE: Forces active links to pop instantly in your brand signature red color */
.nav-item.active, .footer-item.active {
    color: #cc0000 !important;
    font-weight: 600 !important;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.mobile-toggle span {
    width: 100%;
    height: 2px;
    background-color: #000000;
}
/* Add these utility classes inside Section 4 of your CSS file */
.social-icon-link {
    display: inline-flex;
    align-items: center;
    color: #000000;
    opacity: 0.8;
}

.platform-label-link {
    gap: 4px; /* Space between custom bandcamp circle graphic and the project name */
}

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

.social-icon-link:hover .inline-platform-tag {
    color: #cc0000;
}

/* Base Hamburger Line Structure Rules */
.bar-line {
    width: 100%;
    height: 2px;
    background-color: #000000;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ==========================================================================
   5. MAIN SCROLL LANDING CONTENT STYLING PANEL (DESKTOP)
   ========================================================================== */
.main-content {
    flex: 1; /* Automatically stretches to claim all available vertical space */
    width: 100%;
    overflow-y: auto; /* KEY CHANGE: Enables independent vertical scrolling inside the main content area */
}


.home-grid-layout {
    width: 100%;
    min-height: calc(100vh - 150px); /* Factors out space footprints for top header and bottom footer */
    display: grid;
    grid-template-columns: min(78%, min(950px, 102vh)) 1fr; /* Image container takes exact natural width, text column takes remaining space */
    column-gap: 40px; /* Keep a gap of exactly 40px between the image container and the text column */
    align-content: center; /* Center the grid row within the min-height container, keeping its height natural */
    align-items: stretch; /* Stretch items to make vertical alignment of columns matching */
    padding: 20px 0;
}

.hero-image-pane {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; /* Prevent image container from stretching and violating its aspect ratio */
    width: 100%;
}

/* ==========================================================================
   5. REBUILT AUTOMATED CROSS-FADE ART CAROUSEL (DESKTOP CHASSIS)
   ========================================================================== */
.cinematic-art-frame {
    width: 100%;
    max-width: min(950px, 102vh); /* Ensure container narrows to maintain 3:2 ratio when height is capped by viewport (68vh * 1.5 = 102vh) */
    aspect-ratio: 3 / 2;     /* Match the 3:2 aspect ratio of the horizontal carousel images */
    max-height: 68vh;        /* Hard vertically capped limit safety rail guard */
    background-color: #f5f5f5; /* Opaque white cushioning background for different formats */
    border: 1px solid #f5f5f5d4;
    
    /* KEY CONFIGURATION FOR IMAGES LOOPING: */
    position: relative;      /* Forces all stacked images to overlay on top of each other exactly */
    overflow: hidden;
}

/* Master Core Image Rules: Handles all incoming multi-format artwork scales */
.carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* THE SMART MULTI-FORMAT ENGINE: 
       Whether you drop an ultra-wide landscape, a square canvas, or a tall portrait photo,
       it scales perfectly down to fit inside the frame without stretching or cropping! */
    object-fit: contain; 
    
    /* Clean, soft cross-fade layout timing track parameter boundaries */
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Premium 1.2 second slow dissolution curve */
    z-index: 1;
}

/* Activated state handled smoothly by your JavaScript tracking script */
.carousel-img.active {
    opacity: 1;
    z-index: 2; /* Elevates the active format cleanly to the front of the display stack */
}


.placeholder-art-text {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    color: #999999;
}

.hero-text-pane {
    padding-left: 0; /* Gap is handled by the grid's column-gap */
    height: 100%; /* Stretches to the exact height of the grid layout (and therefore the image container) */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Align content to top and bottom edges */
}

.hero-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 12px;
    margin-top: 0; /* Align perfectly with the top edge of the image container */
}

.hero-title {
    font-size: 2.88rem; /* Made 10% smaller (from 3.2rem) */
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hero-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 0; /* Remove default margin to align text perfectly with the container's bottom edge */
}

/* ==========================================================================
   6. STICKY FOOTER STYLING ENGINE (DESKTOP)
   ========================================================================== */
.main-footer {
    width: 100%;
    background-color: #ffffff;
    border-top: 1px solid #f0f0f0;
    z-index: 1000;
    
    /* KEY FIX FOR DESKTOP SCREENS: 
       Pins the footer bar cleanly to the bottom baseline of the screen frame 
       so it stays perfectly stuck in place while your page content scrolls behind it! */
    position: absolute;
    bottom: 0;
    left: 0;
}

.footer-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px; /* Clean low profile footprint */
}

.copyright-text {
    font-size: 0.75rem;
    color: #777777;
    letter-spacing: 0.02em;
}

.footer-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-item {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #666666;
}

.footer-item:hover {
    color: #cc0000;
}

/* ==========================================================================
   6a. DESKTOP CONTAINER HEIGHT CONSTRAINTS (NEW UNIFIED ADDITION)
   ========================================================================== */
/* PASTE THIS RIGHT HERE: Directly below your footer styles, but safely ABOVE 
   your Section 7 mobile media query block! */
@media (min-width: 1151px) {
    .site-container {
        height: 100vh !important; /* Locks the master frame chassis strictly inside the monitor bounds */
        overflow: hidden !important; 
        position: relative;
    }

    .main-content {
        height: calc(100vh - 150px) !important; /* Shaves off top header (90px) + bottom footer (60px) */
        overflow-y: scroll !important; /* Confines all vertical scrolling strictly inside your middle section */
        overflow-x: hidden !important;
        
        /* Adds a tiny breathing room buffer padding track at the baseline 
           so content elements never get choked behind your sticky footer bar */
        padding-bottom: 40px; 
    }
}


/* ==========================================================================
   6b. SEAMLESS HUB COLLECTIONS LAYOUT STYLING (DESKTOP)
   ========================================================================= */
.hub-scroll-section {
    width: 100%;
    padding: 20px 0; /* Creates spacious breathing room between your stacked pages */
    border-bottom: 1px solid #f9f9f9;
}

.hub-section-header {
    margin-bottom: 40px;
    width: 100%;
}

.hub-section-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
}

.hub-section-title {
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: -0.01em;
    padding-bottom: 30px;
}

/* Master Grid: Creates equal fluid columns based on fractional spacing units */
.hub-category-grid {
    display: grid;
    gap: 15px; /* Uniform grid separation channels */
    width: 100%;
}

/* Specific 2-Column setup for the Painting Section */
.painting-grid-proportions {
    grid-template-columns: repeat(2, 1fr);
}

/* ==========================================================================
   IMAGE-BACKED COLLECTIONS CARD HUB ENGINE (COMPRESSED)
   ========================================================================== */
.hub-category-card {
    display: block;
    width: 100%;
    aspect-ratio: 14 / 10; /* Keeps your elegant horizontal box shape preferences */
    
    /* KEY CHASSIS FIX: Hard limit prevents the boxes from stretching too tall on big screens.
       This shaves massive pixels off the height, letting the grid fit fully on landing! */
    max-height: 300px !important; 
    
    border: 1px solid #e0e0e0;
    position: relative;
    overflow: hidden;
    background-color: #fafafa;
    
    /* BACKGROUND LAYOUT CONSTRAINTS */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Smooth transition engine track for premium card hover micro-animations */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s ease;
}


/* THE HOVER OVERLAY MESH: Creates an elegant dim effect so centered text tags pop into focus */
.hub-image-placeholder-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.412); /* Currently white wireframe layout style default */
    transition: background-color 0.1s ease;
    padding: 20px;
    box-sizing: border-box;
}

/* INTERACTIVE STATE REFINEMENTS: Pulls white curtains back to reveal the beautiful textures behind them */
.hub-category-card:hover .hub-image-placeholder-box {
    background-color: rgba(0, 0, 0, 0.15); /* Dims the card softly so text labels remain 100% crisp and readable */
}

.hub-category-card:hover {
    border-color: #000000;
}

/* Forces text color strings inside cards to swap contrast dynamically on mouse hover over image assets */
.hub-category-card:hover .hub-category-name { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.hub-category-card:hover .hub-action-link-text { color: #ffffff !important; }


.hub-category-name {
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: #000000;
}

.hub-action-link-text {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    color: #cc0000; /* Signature portfolio accent red pops color anchor */
    text-transform: uppercase;
}
/* Specific 3-Column setup for the Photography Section */
.photography-grid-proportions {
    grid-template-columns: repeat(3, 1fr);
}
/* ==========================================================================
   6c. PRECISE EDITORIAL SECTION STYLING (DESKTOP)
   ========================================================================== */
.precise-editorial-section {
    width: 100%;
    padding: 80px 0;
    border-bottom: 1px solid #f9f9f9;
}
.precise-editorial-grid-about-page-spacing {
    padding: 80px 0;
    width: 68%;
    flex-direction: column;
}

.precise-editorial-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 32% 68%; /* Proportions mirroring your landing style layout */
    align-items: stretch; /* Forces left column height to match the right image box height */
    gap: 0px;
}

/* Left Column: Stacking text up to the top and buttons completely down to the bottom */
.editorial-left-column {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    padding-right: 40px; /* Airspace barrier between text blocks and media container */
}

.editorial-text-group {
    width: 100%;
}

.section-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444444;
    margin-top: 25px; /* Spacing below the title headline */
}

/* Interactive Explore Button Styling */
.editorial-action-group {
    margin-top: 30px;
}

.explore-gallery-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: #000000;
}

.explore-gallery-btn:hover {
    color: #cc0000;
}

.explore-arrow {
    font-size: 1.1rem;
    color: #cc0000;
    transition: transform 0.2s ease;
}

.explore-gallery-btn:hover .explore-arrow {
    transform: translateX(4px); /* Interactive micro-animation nudge on mouse hover */
}

/* Right Column: Large Landscape Asset Frame */
.editorial-right-column {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.precise-landscape-container {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 10 / 10;     /* Balanced landscape frame matching your home specs */
    max-height: 68vh;          /* STRICT GUARD: Prevents box from scaling past monitor dimensions */
    background-color: #fcfcfc;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Custom spacing padding rule strictly for independent sub-page frames */
.about-page-spacing {
    padding: 80px 0;
}
/* ==========================================================================
   6d. INDEPENDENT SUB-PAGE COMPONENT STYLING (DESKTOP CHASSIS)/ REBUILT CONTACT PAGE VERTICAL CHASSIS RULES
   ========================================================================== */

.page-content-padding {
    padding: 80px 0 120px 0;
}

/* Forces the elements inside the 68% column track to stack nicely with clean spacing */
.contact-vertical-stack {
    display: flex;
    flex-direction: column;
    gap: 45px; 
    width: 100%;
    max-width: 900px; /* Elegant text measure stops layout blowout on wide views */
    padding-left: 40px; /* Breathing room separating the columns */
}

.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-block-label {
    font-size: 0.90rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #000000;
    text-transform: uppercase;
    padding-bottom: 10px;
}

.contact-action-link {
    font-size: 1rem;
    color: #000000;
    width: fit-content;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.contact-action-link:hover {
    color: #cc0000;
    border-bottom-color: #cc0000;
}

.contact-narrative-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444444;
    padding-bottom: 10px;
}

.contact-inline-links {
    display: flex;
    gap: 24px;
}
/* ==========================================================================
   PAINTING HUB ARTWORK ASSETS MAP PATHS
   ========================================================================== */
.hub-bg-acrylic {
    background-image: url('../photos/hub-acrylic-cover.jpg');
}

.hub-bg-textural {
    background-image: url('../photos/hub-textural-cover.jpg');
}

.hub-bg-ink {
    background-image: url('../photos/hub-ink-cover.jpg');
}

.hub-bg-alcohol {
    background-image: url('../photos/hub-alcohol-cover.jpg');
}
/* ==========================================================================
   PHOTOGRAPHY HUB ARTWORK ASSETS MAP PATHS
   ========================================================================== */
.hub-bg-abstract {
    background-image: url('../photos/hub-abstract-cover.jpg');
}

.hub-bg-minimal {
    background-image: url('../photos/hub-minimal-cover.jpg');
}

.hub-bg-street {
    background-image: url('../photos/hub-street-cover.jpg');
}
/* ==========================================================================
   LIVE PERFORMANCES HUB ARTWORK ASSETS MAP PATHS
   ========================================================================== */
.hub-bg-art-perf {
    background-image: url('../photos/hub-art-perf-cover.jpg');
}

.hub-bg-music-perf {
    background-image: url('../photos/hub-music-perf-cover.jpg');
}
/* ==========================================================================
   SOUND PROJECTS HUB ARTWORK ASSETS MAP PATHS
   ========================================================================== */
.hub-bg-mire-portal {
    background-image: url('../photos/hub-mire-cover.jpg');
}

.hub-bg-vellvm-portal {
    background-image: url('../photos/hub-vellvm-cover.jpg');
}




/* ==========================================================================
   7. UNIFIED RESPONSIVE MOBILE MASTER TRACK BREAKPOINTS (FULLY REBUILT)
   ========================================================================== */
@media (max-width: 1150px) {
    
    /* --- GLOBAL RULES --- */
    /* Shrinks edge constraints slightly to prevent content from hitting the glass edges */
    .site-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .scroll-section {
        min-height: auto !important; 
        padding: 40px 0 !important; 
    }
    
    /* --- HEADER & NAVIGATION MOBILE ROUTE --- */
    .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;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 32px !important;
        height: 16px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin-left: auto !important;
    }
    
    .mobile-toggle.open .bar-line:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
    .mobile-toggle.open .bar-line:nth-child(2) { opacity: 0 !important; }
    .mobile-toggle.open .bar-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }

    .header-socials {
        grid-column: 1 / 4 !important;
        grid-row: 2 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin-top: 18px !important;
        gap: 18px !important;
        width: 100% !important;
    }

    .nav-menu {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background-color: #ffffff !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 20px 0 !important;
        border-top: 1px solid #f0f0f0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: all 0.3s ease !important;
        z-index: 999 !important;
    }
    .nav-menu.open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
    .nav-item { width: 100% !important; padding: 14px 20px !important; font-size: 1rem !important; }

    /* --- 1. LANDING PAGE OVERRIDES --- */
    .home-grid-layout {
        grid-template-columns: 100% !important;
        gap: 30px !important;
        padding: 30px 0 !important;
    }
    .cinematic-art-frame {
        aspect-ratio: 10 / 14 !important;
        max-height: none !important;
    }
    .hero-text-pane {
        padding-left: 0 !important;
        height: auto !important;
        display: block !important;
    }
    .hero-title { font-size: 2.2rem !important; margin-bottom: 15px !important; }
    .hero-description { font-size: 0.88rem !important; }

    /* --- 2 & 3. MASTER COLLECTION HUB OVERRIDES (THE OVERFLOW FIX) --- */
    /* KEY FORCED OVERRIDES: Erases multi-column grids and forces an single column track */
    .hub-category-grid,
    .painting-grid-proportions,
    .photography-grid-proportions {
        grid-template-columns: 100% !important;
        gap: 25px !important; /* Space between your card rows */
        width: 100% !important;
    }
    
    .hub-section-title {
        font-size: 2rem !important;
    }

    /* --- MASTER HUB CARD MOBILE TYPOGRAPHY COMPRESSION --- */
    .hub-category-name {
        font-size: 0.72rem !important; 
        letter-spacing: 0.12em !important;
        padding: 0 10px !important; 
        text-align: center !important;
    }

    .hub-action-link-text {
        font-size: 0.62rem !important;
        letter-spacing: 0.03em !important;
    }

    /* --- FOOTER MOBILE RESPONSIVE ADAPTATIONS --- */
    .footer-layout {
        flex-direction: column-reverse !important;
        height: auto !important;
        padding: 25px 0 !important;
        gap: 20px !important;
        align-items: flex-start !important; 
    }

    /* KEY ONLY MOBILE FIX: Enforces the exact 20px padding alignment on your copyright text line */
    .copyright-text {
        padding-left: 20px !important; /* Pulls your name cleanly away from the phone glass edge */
        font-size: 0.75rem !important;
        color: #777777 !important;
    }

    /* KEY ONLY MOBILE FIX: Aligns your navigation link line perfectly with your copyright text */
    .footer-nav {
        padding-left: 20px !important;
        flex-direction: row !important; /* Keeps your 3 footer links sitting in a clean row layout */
        flex-wrap: wrap !important;     /* Prevents links from breaking on tiny phone screens */
        gap: 20px !important;
    }

      /* --- 4. LIVE PERFORMANCES MOBILE OVERRIDES --- */
    /* Flattens the grid into a single top-to-bottom stack flow */
    .precise-editorial-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 0px !important; 
    }

    .editorial-left-column {
        display: flex !important; 
        flex-direction: column !important;
        padding-right: 0 !important; 
        height: auto !important; 
        width: 100% !important;
    }

    /* Target position 1: Keeps Title and Paragraph description at the very top */
    .editorial-text-group { 
        order: 1 !important; 
        margin-bottom: 25px !important; 
    }

    /* Target position 2: Pushes image block layout to sit directly below text */
    .editorial-right-column { 
        display: block !important; 
        width: 100% !important; 
        order: 2 !important; 
        margin-bottom: 20px !important; 
    }

    .precise-landscape-container { 
        max-width: 100% !important; 
        width: 100% !important; 
        aspect-ratio: 12 / 10 !important; 
        max-height: none !important; 
    }

    /* Target position 3: Places explore gallery action link safely at the bottom */
    .editorial-action-group { 
        order: 3 !important; 
        margin-top: 0px !important; 
    }
    /* --- 6. INDEPENDENT CONTACT PAGE MOBILE OVERRIDES --- */
    .contact-vertical-stack {
        padding-left: 0 !important; /* Drops the desktop indent on narrow screens */
        gap: 35px !important;
    }
    /* --- 8. INDEPENDENT SUBPAGE CONTAINER MOBILE OVERRIDES --- */
    /* Erases 2-pillar desktop lock, cascading panels into standard vertical flow lines */
    .gallery-two-pillar-grid {
        grid-template-columns: 100% !important;
        height: auto !important;
        overflow-y: visible !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;
        display: block !important;
    }
    
    .gallery-narrative-scroll-track {
        margin-bottom: 20px !important;
    }
    
    .gallery-back-button-box {
        margin-bottom: 15px !important;
    }
    
    .gallery-right-images-pillar {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        padding: 30px 20px !important;
    }
    
    /* Collapses portrait visual cards into a single clean column stream on phones */
    .gallery-artwork-cards-grid {
        grid-template-columns: 100% !important;
        gap: 35px !important;
    }
    
    .tall-portrait-frame-box {
        aspect-ratio: 12 / 10 !important; /* Converts to fluid wide shape for comfortable phone previewing */
    }


} /* <--- EXACT CLOSING BRACKET FOR MEDIA QUERY ENGINE */