/* --- 1. GLOBAL RESET (THE FIX) --- */
* {
    box-sizing: border-box; /* Prevents padding from adding extra width */
}

html, body {
    width: 100%;
    overflow-x: hidden; /* Cuts off any accidental side-scrolling */
}

/* --- 2. FONTS --- */
@font-face {
    font-family: 'EmotionEngine';
    src: url('Fonts/EmotionEngineBold.ttf') format('truetype');
}

/* --- 3. MAIN STYLES --- */
body {
    background-color: #000000;
    color: #ffffff;
    margin: 0;
    padding: 0; 
    font-family: sans-serif; 
}

/* --- HEADER SECTION --- */
header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px; 
    width: 100%; /* Ensures header fits inside the hidden overflow */
}

/* --- LOGO & NAME --- */
.brand {
    display: flex;
    align-items: center;
    gap: 35px; 
    padding: 20px 20px 12px 20px; 
    width: 100%; /* Ensures container stays within bounds */
}

/* Wrapper to position the TM symbol */
.logo-wrapper {
    position: relative;
    width: 80px; 
    height: auto;
    display: flex;
    flex-shrink: 0; /* Prevents logo from squishing on small screens */
}

.logo {
    width: 100%; 
    height: auto;
}

/* The Trademark Symbol */
.tm-symbol {
    position: absolute;
    top: -5px;   
    left: 85px; 
    width: 20px; 
    font-size: 1rem;
    font-family: sans-serif;
    color: #ffffff;
    font-weight: bold;
}

.site-name {
    font-family: 'EmotionEngine', sans-serif;
    font-size: 4rem;
    color: #ffffff;
    letter-spacing: 2px;
    /* GLOW EFFECT */
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 30px rgba(255, 255, 255, 0.3);
}

/* --- NAVIGATION BAR --- */
.nav-bar {
    display: flex;
    width: 100%; 
    gap: 0;
    border-top: 1px solid #ffffff; 
    border-bottom: 1px solid #ffffff; 
    padding-left: 20px; 
    background-color: #000000; 
}

.nav-box {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 40px; 
    
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    margin-right: -1px; 
    
    padding: 0; 
    
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background 0.2s, color 0.2s;
}

/* --- SPECIFIC BUTTON SIZES --- */
.nav-box:nth-child(1) { width: 80px; }  /* Home */
.nav-box:nth-child(2) { width: 110px; } /* Gallery */
.nav-box:nth-child(3) { width: 110px; } /* Projects */
.nav-box:nth-child(4) { width: 150px; } /* Commissions */
.nav-box:nth-child(5) { width: 110px; } /* Contact */
.nav-box:nth-child(6) { width: 120px; } /* About Me */

/* Hover Effect for boxes */
.nav-box:hover {
    background-color: #ffffff;
    color: #000000;
    position: relative; 
    z-index: 1;
}

/* --- INVISIBLE ART VOID --- */
.art-void {
    width: 100%;
    min-height: 50vh;
    padding: 20px; 
}