/* --- The Canvas --- */
body {
    background: url('/vault/bg/2016/bg_2016.10.03_wee_house_bg02.webp') no-repeat;
    /* --- The Magic --- */
    background-size: cover; /* Ensures the ENTIRE image is visible, no cropping */
    background-position: right bottom; /* Pushes the image to the bottom right corner */
    background-attachment: fixed; /* Keeps it in place when content scrolls */
    /* --- The Background Color "Filler" --- */
    /* This color fills the empty space not covered by 'contain' */
    background-color: #323e34; /* The dark upper background color */

    color: #e0e0e0;
    font-family: 'Avenir', sans-serif;
    overflow-x: hidden;
}


/* --- The Title Bar --- */
#title-bar {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 80px; /* Slightly taller for better fade */
    
    /* The Magic: Vertical Fade */
    /* Adjust the first color (#1a1a1a) to match your #323e34 background color */
    background: linear-gradient(to bottom, 
                rgba(26, 26, 26, 1) 0%, 
                rgba(26, 26, 26, 0.8) 50%, 
                rgba(26, 26, 26, 0) 100%);

    display: flex; align-items: center; padding-left: 20px;
    font-size: 2.2rem; color: #edd492; font-weight: bold; letter-spacing: 2px;
    z-index: 1000;
    
    /* Remove the solid border-bottom for a smoother dissolve */
    border-bottom: none; 
    justify-content: center;

}

/* --- The New Floating Nav --- */
#sidebar {
    position: fixed;
    top: 70px; /* Positioned just under the fading title-bar */
    left: 50%;
    transform: translateX(-50%); /* The 'Solder' for perfect centering */
    width: auto; /* Shrinks to fit your links */
    height: auto;
    display: flex; /* Aligns links horizontally */
    gap: 40px;
    padding: 8px 45px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* Adds depth to the float */
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border-radius: 50px; /* "Pill" shape for that glassy dock look */
    border: 1px solid rgba(255, 255, 255, 0.18);
    z-index: 1000;
}

#sidebar a {
    font-size: 1.4rem; /* HUD links need more mass */
    font-weight: 300; /* A bit bolder for that "Sanguine" presence */
    margin-bottom: 0; /* Clear the vertical margin */
    color: #fff; /* Manganese */
    text-decoration: none;
    transition: 0.3s;
}

#sidebar a:hover { color: #fff;
    text-shadow: 0 0 10px #977d33;
    text-shadow: 0 0 15px #977d33; /* The "Sulfur" glow on hover */
    transform: scale(1.1); /* Subtle "Hot Rod" throttle response */
    }

/* --- The Fading Sections --- */
#content {
    top: 100px;
    margin-left: 0; /* Remove the 220px sidebar offset */
    padding: 150px 10% 50px 10%; /* Center the content area */
    display: flex;
    justify-content: center;
}

.fade-in {
    opacity: 0;
    visibility: hidden;
    position: fixed; /* Stack them on top of each other */
    margin-top: 50px;
    margin-bottom: 100px;
    transition: opacity 1.5s ease-in-out;
    width:100%;
    max-width: 1000px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50px;
    box-shadow: 0 0 60px 10px rgba(0, 0, 0, 0.7);
/*    border: 1px solid rgba(255, 255, 255, 0.05); */
    padding: 10px 80px; border-radius: 15px;
    top: 100px;
    font-size: 1.25rem; /* Base font jump (approx 20px) */
    line-height: 1.8;   /* Opens up the "grind" of long-form text */
     /* This says: "Be 1.2rem at minimum, scale with the screen, but cap at 1.5rem" */
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    /* THE FIX: Allows vertical scrolling inside the box on small screens */
    max-height: 80vh;   /* Caps the height at 80% of the screen */
    overflow-y: auto;   /* Adds a scrollbar only if the text is too long */
    
    /* Custom Scrollbar (Manganese & Sulfur palette) */
    scrollbar-width: thin;
    scrollbar-color: #977d33 rgba(0,0,0,0);

}

/* For Webkit (Chrome/Safari/iOS) */
.fade-in::-webkit-scrollbar { width: 6px; }
.fade-in::-webkit-scrollbar-thumb { background: #977d33; border-radius: 10px; }

/* The Magic: When the URL hash matches the ID */
section:target {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Show the 'Home' section by default on first load */
#home { opacity: 1; visibility: visible; }
section:target ~ #home { opacity: 0; visibility: hidden; }

/* If #home is specifically clicked again, bring it back */
#home:target {
    opacity: 1;
    visibility: visible;
}

/* 4. The Magic "Vanishing" trick: 
   If ANY section is targeted, hide the home section */
section:target ~ #home, 
#home:not(:target) {
    /* If the URL has a hash that isn't #home, kill the home opacity */
    opacity: 0;
    visibility: hidden;
}

/* The 'Hot Rod' Float logic */
.build-media {
    float: right;
/*    width: 35%;      /* Occupies less than half the lozenge */
    margin-left: 30px;
    margin-bottom: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
}

.build-media:hover {
    transform: scale(1.05); /* The 'Slight Expansion' */
    z-index: 999;          /* Ensure it stays 'Sanguine' on top */
    position: relative;    /* Required for z-index to clutch */
    transition: transform 0.3s ease;
    backface-visibility: hidden; 
    transform-origin: center;
}

/* Clearfix to prevent the lozenge from collapsing if the image is too tall */
.fade-in::after {
    content: "";
    clear: both;
    display: table;
}

/* ---- The Footer Anchor --- */
#footer-anchor {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    /* Mirroring your header's beautiful fade but upward */
    background: linear-gradient(to top, 
            rgba(26, 26, 26, 1) 0%, 
            rgba(26, 26, 26, 0.8) 50%, 
            rgba(26, 26, 26, 0) 100%);
    color: #7ca881;
    font-size: 0.75rem;
    letter-spacing: 1px;
    z-index: 1000;
}

.footer-content {
    display: flex;
    flex-direction: row;
    /* THE FIX: Distributes items with equal space between them */
    justify-content: space-around; 
    align-items: center; /* Vertically centers the items in the 80px bar */
    height: 100%;
    width: 90%; /* Keeps the items from hitting the very edge of the glass */
 /*   margin: 0 auto; /* Centers the whole content block */
    margin-top: 20px; /* Forces the footer-item down into the depths */
}

.footer-item {
    /* Remove the fixed padding-right so flex can do the math */
    padding: 0;
    display: flex;
    align-items: center;
    white-space: nowrap; /* This is the 'no break' solder */
    display: flex;
    align-items: center;
}

.footer-item p { margin: 0; } /* Keep the text tight */

/* The 1995-meets-2026 Badge */
.geek-badge {
    display: inline-block;
    font-family: 'Courier New', Courier, monospace;
    font-weight: bold;
    border: 1px solid #7ca881;
    font-size: 10px;
}

.geek-badge .left {
    background: #7ca881;
    color: #1a1a1a;
    padding: 2px 6px;
}

.geek-badge .right {
    background: transparent;
    color: #edd492; /* Sulfur */
    padding: 2px 6px;
}


/* ---- Typography ----- */
.fade-in p, .fade-in a, .fade-in ul {
    line-height: 1.6;
    font-size: 1.1rem;
    margin-bottom: 15px;
}

.fade-in a {
    color: #7ca881;
    transition: color 0.4s ease, text-shadow 0.4s ease;

    text-decoration: none;
}

.fade-in a:hover {
    color: #edd492;
    text-shadow: 0 0 8px rgba(237, 212, 146, 0.5);
/*    text-decoration: underline;  */
}

.fade-in h1 {
    font-size: 1.6rem;  /* Make the section titles truly "Leap" */
    color: #7ca881;     /* Sulfur ignite */
    margin-bottom: 2%;
    letter-spacing: 1px; 
}

.leader {
    font-size:1.2rem;
    color:#edd492;
    letter-spacing:2px;
}

/* ---- Phone Stuff ----- */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        height: auto;
        margin-top: 10px;
        gap: 10px; /* Space between the stacked items */
    }
    #footer-anchor {
        height: auto;
        padding: 20px 0;
    }
}