body { 
    margin: 0; padding: 0; 
    font-family: "Source Sans 3", sans-serif; 
    background-image: url('images/background.jpg'); 
    background-size: cover; background-position: center; background-attachment: fixed; 
    height: 100vh; overflow: hidden; 
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.05); }
::-webkit-scrollbar-thumb { background: #bbb; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

/* Journal Paper Box Styling */
.journal-box {
    background-color: #f4efe9;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
    position: relative;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
    border: 1px solid #dcd7ce;
}

/* Header & Logo */
header { height: 175px; display: flex; justify-content: center; align-items: center; position: relative; margin-top: 20px; }
.logo-container { position: absolute; left: 40px; }
.logo-container img { width: 144px; display: block; }

.header-content { display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Business Name Box (Wood-Burned Style) */
.title-box { 
    background-color: #f4efe9;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
    padding: 15px 30px; 
    border: 2px solid #3d2b1f; 
    box-shadow: 4px 4px 0px rgba(61, 43, 31, 0.3);
}

/* Social Box (Matching Wood-Burned Style) */
.social-box { 
    background-color: #f4efe9;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
    padding: 12px 25px; 
    border: 2px solid #3d2b1f; 
    box-shadow: 4px 4px 0px rgba(61, 43, 31, 0.3);
}

h1 { 
    font-family: "Oswald", sans-serif; 
    font-weight: 700; 
    font-size: 3.2rem; 
    color: #3d2b1f; 
    margin: 0; 
    letter-spacing: 0.1rem;
    text-transform: uppercase;
}

.social-box a { font-size: 1.5rem; color: #555; transition: color 0.3s ease; text-decoration: none; }
.social-box a:hover { color: #000; }

/* Layout */
.page-layout { display: flex; height: calc(100vh - 175px); overflow: hidden; }
.sidebar { width: 40%; height: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 20px 15px; box-sizing: border-box; }

/* About Me Box */
.about-me-box { 
    background-color: #f4efe9;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
    padding: 40px; max-width: 82%; margin-bottom: 20px; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); border: 1px solid #dcd7ce;
}

.about-me-image-box img { width: 100%; max-width: 375px; display: block; margin: 0 auto 19px auto; border: 1px solid #ccc; }
.about-me-box h2 { color: #111; margin: 0 0 13px 0; font-size: 1.75rem; }
.about-me-box p { color: #333; line-height: 1.8; margin: 0 0 10px 0; font-size: 1.2rem; }
.about-me-box .sig-name { font-family: 'Dancing Script', cursive; font-size: 2.5rem; margin: 20px 0 0 0; color: #111; }

/* Blog Grid */
.blog-grid { width: 60%; height: 100%; overflow-y: auto; padding: 20px; box-sizing: border-box; }

.entry { 
    background-color: #f4efe9;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");
    padding: 30px; margin-bottom: 30px; box-shadow: 5px 5px 15px rgba(0,0,0,0.1); border: 1px solid #dcd7ce;
    display: flex; flex-direction: column; align-items: center;
}

.image-box { width: 100%; max-width: 500px; margin-bottom: 25px; border: 1px solid #ccc; }
.image-box img { width: 100%; display: block; }
.text-box { width: 100%; text-align: left; }
.entry p { font-size: 1.2rem; color: #333; line-height: 1.8; margin: 0 0 10px 0; }
.clickable { cursor: pointer; transition: transform 0.2s; }
.clickable:hover { transform: scale(1.01); }

/* Modal */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); justify-content: center; align-items: center; }
.modal-content { max-width: 90%; border: 5px solid #fff; cursor: zoom-out; }