/* ==========================================================================
   1. GLOBAL RESET & BOX SIZING CALIBRATION (THE EXPLICIT OVERRIDE)
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box !important;
}

html, body {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevents the main page body from scrolling out of frame */
}

body {
    display: grid;
    grid-template-rows: auto 1fr auto; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #ffffff;
    width: 100% !important;
    max-width: 100vw !important;
}

/* ==========================================================================
   2. SITE HEADER BAR (CLEAN INTEGRATION - RESTORED MASTER COPY)
   ========================================================================== */
.site-header {
    width: 100%; 
    background-color: #ffffff;
    border-bottom: 1px solid #cccccc;
    padding: 2rem;
    position: relative; 
    display: flex;
    align-items: center;
    min-height: 100px; /* Your explicit large header headroom layout scale */
    z-index: 100;
    /* RESTORED: Your signature full-scale horizontal branding texture */
    background: url("../images/MRW-full-lg-bg.png") center #f1f1f1;
    background-size: 100%;
}

/* Grouping Logo and Burger tightly together on the left baseline */
.brand-group {
    position: absolute;
    left: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 1.5rem; /* Precise 24px spatial gap between your stamp mark and the burger button */
    z-index: 115;
}

.logo-area a {
    display: block;
}

.logo-img {
    max-width: 80px;
    height: auto;
    display: block;
}

/* Burger Icon Box Trigger Frame */
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 120;
    display: block;
}

/* Bounding box wrapper to hold line spacing calculations rigid */
.burger-icon-box {
    width: 30px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* Individual line properties */
.burger-line {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #999999; /* Your signature slate grey color fill */
    border-radius: 1.5px;
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                background-color 0.2s ease;
}

/* Coloration shift when a user mouse-overs the active lines */
.menu-toggle:hover .burger-line {
    background-color: #111111;
}

/* THE LEFT SLIDE DRAWER (Widened and fully flexed for multi-column layouts) */
.navigation-drawer {
    position: fixed;
    top: calc(100px + 24px); /* Starts exactly 24px below your fixed header row */
    left: 0;   
    display: flex !important; 
    gap: 3rem;
    width: auto;
    min-width: 680px; /* Widened comfortably to clear your 3 parallel horizontal paths */
    
    /* Balanced precisely to fit your 100px header and 48px padding boundaries */
    height: calc(100vh - 100px - 100px - 48px); 
    
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); /* Soft floating card shadow */
    border: 1px solid rgba(200, 200, 200, 0.5);
    border-radius: 4px; 
    padding: 2rem 2.5rem; 
    z-index: 95;   /* Sits cleanly over the center content panel window */
    
    /* Explicitly pushes the drawer off the LEFT edge of the screen */
    transform: translateX(-120%); 
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* The active class triggered by your JavaScript click action */
.navigation-drawer.drawer-open {
    transform: translateX(24px) !important; /* Slides out and rests exactly 24px from left wall */
}

/* ACTIVE OPEN SELECTIONS (Triggered automatically by your JS toggling .drawer-open) */
.navigation-drawer.drawer-open ~ .brand-group .burger-line:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
    background-color: #111111; /* Locked crisp dark charcoal black when open */
}
.navigation-drawer.drawer-open ~ .brand-group .burger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0); 
}
.navigation-drawer.drawer-open ~ .brand-group .burger-line:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
    background-color: #111111;
}

/* Elegant, right-aligned dynamic page title indicator zone */
.header-dynamic-title {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    color: #222222; 
    text-align: right;
    pointer-events: none;
    z-index: 10;
}

/* Drawer Menu Links Formatting */
.drawer-menu {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    flex-direction: column;
    gap: 1.25rem;
    
    /* THE ANTI-JITTER FIX: Gives a completely rigid horizontal lane footprint 
          so bold letter shifts are entirely absorbed without twitching the drawer card */
    width: 180px !important;
    min-width: 180px;
}

.drawer-section-title {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15rem;
    color: #999999;
    margin-top: 1rem;
    font-weight: bold;
    list-style: none;
}

.drawer-menu li {
    width: 100% !important; 
    text-align: left !important;
    border: none !important;
    padding: 0 !important;
    background: none !important;
}

.drawer-menu li a {
    text-decoration: none;
    color: #555555;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    display: inline-block;
    width: 100%;
    position: relative;
    transition: color 0.2s ease;
}

.drawer-menu li a:hover,
.drawer-menu li a.active-link {
    color: #111111;
    font-weight: 600;
}

/* Underline tracker styling inside your list entries */
.drawer-menu li a.active-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background-color: #222222;
}

/* MEGA-NAV COLUMN 3: GET IN TOUCH CALIBRATION */
.contact-drawer-column {
    width: 240px !important;
    min-width: 240px !important;
}

.contact-icon-row,
.contact-text-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem; 
    text-decoration: none;
    color: #555555;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05rem;
    width: 100%;
    transition: color 0.2s ease;
}

.contact-icon-row:hover,
.contact-text-link:hover {
    color: #111111;
    font-weight: 600;
}

.drawer-social-icon {
    height: 14px; 
    width: auto;
    display: block;
    opacity: 0.6; 
    transition: opacity 0.2s ease;
}

.contact-icon-row:hover .drawer-social-icon {
    opacity: 1; 
}

.contact-drawer-meta {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #666666;
    font-weight: 300;
}

/* ==========================================================================
   3. MIDDLE PANEL WRAPPERS (AJAX INJECTION TARGET)
   ========================================================================== */
#dynamic-content-pane {
    width: 100%;
    height: 100%;
    min-height: 0;     /* CRITICAL: Breaks out of the default HTML height loop */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;  /* Prevents any child element from leaking wide calculations */
}

.gallery-wrapper, 
.splash-wrapper {
    width: 100%;
    height: 100%;      
    min-height: 0;     
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;  
}

.splash-wrapper {
    background-image: url("../galleries/Canvas/202502_M-Wedderburn_Sculptures_407_WebRes.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* ==========================================================================
   4. EMBLA MINIMALIST SLIDER ARCHITECTURE (PREMIUM VIEWPORTS)
   ========================================================================== */
.embla {
    position: relative; /* Anchor framework frame for absolute chevrons & gradients */
    width: 100vw;       
    height: 100%;
    max-width: 100%;
    overflow: hidden;   
    cursor: grab;     
}

.embla:active {
    cursor: grabbing; 
}

/* THE GRADIENT DESIGN OVERLAYS: Creates soft, translucent vignettes on screen edges */
.embla::before,
.embla::after {
    content: '';
    position: absolute;
    top: 0;
    width: 180px; /* Widened to perfectly isolate center frames */
    height: 100%;
    z-index: 8;   /* Sits safely behind chevrons but floats over the slider runway */
    pointer-events: none; /* Passes all finger drag and mouse click gestures cleanly through */
    transition: opacity 0.3s ease;
}

.embla::before {
    left: 0;
    background: linear-gradient(to right, rgba(240, 240, 240, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}

.embla::after {
    right: 0;
    background: linear-gradient(to left, rgba(240, 240, 240, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
}

/* The Moving Runway Strip Container */
.embla__container {
    display: flex !important; 
    height: 100%;
    will-change: transform;
}

/* Individual Slide Display Slot */
.embla__slide {
    flex: 0 0 auto !important;    
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10rem; /* Generous 10rem buffer isolates tall sculpture portrait frames */
}

/* ==========================================================================
   5. THREE-LAYER SECURITY PROTECTIVE SHIELD (ORGANIC SCALING)
   ========================================================================== */
.image-protection-container {
    position: relative;
    height: 60vh; /* Anchors everything vertically so images never break your header/footer rows */
    width: auto; 
    max-width: 90vw;   
    margin: 0 auto;
    user-select: none;
    -webkit-user-select: none;
    background-color: #ffffff;
}

/* The Core Sculptural Image */
.base-artwork {
    width: auto; 
    height: 100%;
    object-fit: contain; 
    display: block;
}

/* Watermark Overlay Graphic Layer */
.watermark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; 
    opacity: 0.12; 
    mix-blend-mode: difference;  
    padding: 3rem; 
    z-index: 2;
}

.watermark-overlay img {
    max-width: 60%;
    max-height: 25%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Premium Art Museum Info Hover Card Overlay Box */
.artwork-hover-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    z-index: 3; 
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.image-protection-container:hover .artwork-hover-card {
    opacity: 1;
}

.hover-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hover-card-content h3 {
    margin: 0;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.08rem;
    color: #111111;
    font-weight: 600;
}

.hover-card-specs {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12rem;
    color: #555555;
    font-weight: 400;
}

/* Top Transparent Defensive Wall Barrier */
.invisible-shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
    cursor: default;
    z-index: 4; 
}

/* MINIMAL TEXT-BASED GEOMETRIC CHEVRONS */
.embla-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.5rem;
    z-index: 10; 
    user-select: none;
    -webkit-user-select: no-prevent;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 3.5rem; 
    font-weight: 100;      
    line-height: 1;
    color: #444444; /* Darkened crisp charcoal to pop over the edge gradients */
    transition: color 0.2s ease, transform 0.2s ease;
}

.embla-nav:hover {
    color: #111111;        
    transform: translateY(-50%) scale(1.1); 
}

.embla-prev { left: 2.5rem; }  
.embla-next { right: 2.5rem; } 

/* ==========================================================================
   6. SPLASH / CONTENT PAGES PANORAMIC PANELS
   ========================================================================== */
.content-area {
    max-width: 1280px !important; 
    width: 95%; 
    background-color: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(204, 204, 204, 0.5); 
    padding: 3rem; 
    margin: auto auto; /* Centers the panoramic container card vertically and horizontally */
    height: 100%;
    max-height: 75vh;       
    overflow-y: auto !important; 
}

/* Minimalist Scrollbar Track matching your high-end transparency */
.content-area::-webkit-scrollbar { width: 4px; }
.content-area::-webkit-scrollbar-track { background: transparent; }
.content-area::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 2px; }

/* Symmetrical Dynamic Column Grid */
.splash-split-grid {
    width: 100%;
    height: 100%; 
    display: grid;
    grid-template-columns: 1fr 1.5fr; 
    gap: 4rem; 
    align-items: start; 
}

/* Left Side Studio Portrait Sizing */
.splash-image-pane {
    width: 100%;
    max-width: 360px; 
    height: 100%;
    max-height: 52vh; 
    margin: 0 auto;
}
.splash-portrait-wrapper {
    position: relative;
    width: 100%;
    height: 100%; 
    aspect-ratio: 4 / 5; 
    overflow: hidden;
    background-color: #f5f5f5;
    border: 1px solid rgba(200, 200, 200, 0.3);
}
.splash-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Right Side Typography Sizing */
.splash-typography-pane { width: 100%; text-align: left; display: flex; flex-direction: column; }
.splash-typography-pane h2 { font-size: 1.8rem; text-transform: uppercase; letter-spacing: 0.05rem; margin: 0 0 0.25rem 0; color: #111111; }
.splash-sub-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15rem; color: #222; font-weight: bold; display: block; margin-bottom: 1.5rem; }
.splash-typography-pane p { font-size: 1rem; line-height: 1.6; font-weight: 400; color: #111; margin: 0 0 1.25rem 0; }
.splash-typography-pane p:last-child { margin-bottom: 0; }

/* TIMELINE LAYOUT ARCHITECTURE */
.timeline-container { display: flex; flex-direction: column; gap: 1.5rem; width: 100%; }
.timeline-row { display: grid; grid-template-columns: 70px 1fr; gap: 1.5rem; border-bottom: 1px solid rgba(44, 44, 44, 0.5); padding-bottom: 1.25rem; }
.timeline-row:last-child { border-bottom: none; padding-bottom: 0; }
.timeline-year { font-family: monospace; font-size: 1.1rem; color: #222; font-weight: bold; line-height: 1.2; }
.timeline-details h3 { margin: 0 0 0.35rem 0; font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; color: #111; }
.timeline-details p { font-size: 0.9rem !important; color: #222 !important; font-weight: 400 !important; line-height: 1.5 !important; margin: 0 !important; }

/* ==========================================================================
   DYNAMIC TIMELINE INTERACTIVE LINKS (ZERO-INLINE REFACTORING)
   ========================================================================== */
.timeline-link-wrapper {
    margin-top: 0.5rem;
    display: block;
}

.timeline-action-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0a004e;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s ease;
}

.timeline-action-link:hover {
    color: #111111;
}


/* Fade-In Entrance Animation for Seamless AJAX Links Switches */
.content-fade-in { animation: galleryFadeIn 0.4s ease forwards; }
@keyframes galleryFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   7. SITE FOOTER
   ========================================================================== */
.site-footer {
    width: 100%;
    padding: 1.5rem 2.5rem; 
    border-top: 1px solid #cccccc;
    background: url("../images/MRW-full-lg-bg.png") center center #f1f1f1;
    background-size: 100%;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: flex-end; 
}
.footer-left-stack { display: flex; flex-direction: column; text-align: left; }
.copyrite p { font-size: 0.72rem; color: #888888; letter-spacing: 0.02rem; margin: 0; }
.footer-right-brand { display: flex; align-items: center; }
.sliced-text-container { height: 30px; overflow: hidden; position: relative; display: inline-block; }
.sliced-text-container img { display: block; height: 34px; width: auto; margin-top: -2px; opacity: 0.85; }

/* ==========================================================================
   8. MOBILE RESPONSIVE ADAPTATIONS (THE COMPLETE RECONSTRUCTION)
   ========================================================================== */
@media (max-width: 768px) {
    html, body { overflow: auto !important; height: auto !important; }
    body { display: flex; flex-direction: column; overflow-x: hidden; }

    #dynamic-content-pane, .gallery-wrapper, .splash-wrapper {
        height: auto !important;
        min-height: calc(100vh - 100px - 80px); 
        overflow: visible !important;
    }

    .content-area {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important; /* DROPS THE CEILING COMPLETELY FOR MOBILE FINGERS */
        overflow: visible !important;  /* Hands scrolling execution to the main page body */
        padding: 2.5rem 1.5rem !important;
        margin: 0 !important;
        border-left: none; border-right: none; border-radius: 0;
        background-color: rgba(255, 255, 255, 0.94); 
    }

    .splash-split-grid { grid-template-columns: 1fr !important; gap: 2rem !important; height: auto !important; }
    .splash-image-pane { max-width: 280px !important; max-height: none !important; }
    .splash-portrait-wrapper { height: auto !important; }

    .navigation-drawer {
        position: fixed;
        top: calc(100px + 0px) !important; 
        left: 0;
        width: calc(100vw - 48px) !important;
        min-width: 0 !important;
        height: calc(100vh - 100px - 24px) !important;
        flex-direction: column !important; 
        overflow-y: auto !important; /* Enables vertical scrolling inside the menu drawer itself */
        gap: 2.5rem !important;
        padding: 2rem 1.5rem !important;
        transform: translateX(-120%);
    }

    .navigation-drawer.drawer-open { transform: translateX(24px) !important; }
    .embla-nav, .embla::before, .embla::after { display: none !important; }

    .site-footer {
        flex-direction: column-reverse !important;
        align-items: center !important;
        gap: 2.5rem !important;
        padding: 2rem 1.5rem !important;
        text-align: center !important;
        width: 100% !important;
    }
    .footer-left-stack { align-items: center !important; text-align: center !important; }
    .sliced-text-container { height: 24px !important; }
    .sliced-text-container img { height: 30px !important; margin-top: -3px !important; width: 96%; }

    /* 👈 THE COMPLETE OVERLAP RESCUE: Force-collapses the dynamic title on phone screens 
            so it never clips or crowds his signature brand logo monogram */
    .header-dynamic-title,
    #site-header-title {
        display: none !important;
    }

}

/* ==========================================================================
   9. DEVICE-LEVEL SYSTEM COLOR SAFEGUARDS (DARK MODE BLOCK)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* 👈 THE COLOR GUARD WALL: Force-locks your intentional light museum washes 
          on all displays, instantly stopping automatic mobile dark-mode distortions */
    body, 
    .site-header, 
    .site-footer,
    .navigation-drawer {
        background-color: #f1f1f1 !important;
        color: #111111 !important;
        border-color: #cccccc !important;
    }
    
    .content-area {
        background-color: rgba(255, 255, 255, 0.4) !important;
    }
    
    /* Ensure typography descriptions stay deep charcoal and highly legible */
    .splash-typography-pane p,
    .timeline-year,
    .timeline-details h3,
    .timeline-details p,
    .header-dynamic-title,
    .drawer-menu li a {
        color: #111111 !important;
    }
    
    /* Keep your soft slate-grey subtitle accent intact */
    .splash-sub-title,
    .drawer-section-title {
        color: #222 !important;
    }
}