/*    1. GLOBAL RESET & BASE STYLES */
*, *:before, *:after {
    box-sizing: border-box; /* CRUCIAL: Keeps borders & padding inside the width calculation so margins show */
}

body {
    font-family: 'Sacramento', cursive;
    background-color: #f5edd6;   /* Papyrus */
    color: #3c2f2f;
    margin: 0;
    padding: 20px 0;             /* Adds a top/bottom cushion on the screen */
    line-height: 1.7;
}

/*    2. HEADER LAYOUT & COMPONENTS */
.header-box {
    background-color: #6b2c2c;   /* Brown-reddish header */
    color: #f5e8c7;
    padding: 35px 40px;
    text-align: center;
    
    /* Responsive Width Guardrails */
    width: calc(100% - 40px);    /* Forces exactly 40px of space left over on the screen */
    max-width: 1100px;          /* Prevents stretching past desktop limit */
    margin: 20px auto 30px auto; /* Centering the container via 'auto' */
    
    border-radius: 12px;
    position: relative;
    border: 5px solid #d3d3d3;  /* 5px Light Gray Border */
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.45),
                0 0 10px rgba(0, 0, 0, 0.25);
}

.header-profile {
    width: 150px;
    height: 150px;
    border-radius: 50%;         /* Makes image circular */
    border: 5px solid #d3d3d3;  /* 5px Light Gray Border */
    object-fit: cover;          /* Prevents stretching */
    margin-bottom: 10px;
}

.header-box h1 {
    margin: 0 0 8px 0;
    font-size: 3.5em;
    font-family: 'Sacramento', cursive;
    font-weight: 400;
    letter-spacing: 2px;
}

.header-box h2 {
    margin: 0;
    font-size: 2.0em;
    font-family: 'Sacramento', cursive;
    font-weight: 400;
}

.back-link {
    position: absolute;
    top: 25px;
    right: 40px;
    font-size: 16pt;
    color: #f5e8c7;
    text-decoration: none;
}

.back-link:hover {
    color: #ffdab9;
    text-decoration: underline;
}

/*   3. MAIN CONTENT AREA */
.content-box {
    background-color: #2c3f2f;     /* Dark green-brown */
    color: #f5e8c7;
    padding: 45px;
    border-radius: 8px;
    min-height: 70vh;
    border: 5px solid #d3d3d3;     /* 5px Light Gray Border */

    /* Responsive Width Guardrails */
    width: calc(100% - 40px);    /* Forces exactly 40px of space left over on the screen */
    max-width: 1100px;          
    margin: 0 auto 40px auto;   /* Centering the container via 'auto' */
}

.portfolio-list {
    text-align: left;
    max-width: 100%;             /* Changed from 700px to flow fluidly inside mobile constraints */
    font-size: 20pt;
}

.portfolio-list ul {
    padding-left: 30px;
}

.portfolio-list li {
    margin: 22px 0;
}

.portfolio-list a {
    color: #e0d4b8;
    text-decoration: none;
}

.portfolio-list a:hover {
    color: #ffdab9;
    text-decoration: underline;
}

.section-title {
    font-size: 24pt;
    margin: 40px 0 18px 0;
    color: #f5e8c7;
}

.lab-description {
    font-size: 18pt;
    line-height: 1.75;
    margin: 25px 0 40px 0;       /* Flattened left margin so text scales nicely on smaller frames */
    max-width: 100%;             /* Containment safeguard */
    color: #e0d4b8;
}

.footer-bottom {
    text-align: center;
    padding: 20px;
    font-size: 14pt;
}

/*   4. RESPONSIVE BREAKPOINTS (MOBILE INTERACTION)*/
@media (max-width: 600px) {
    .header-box {
        padding: 25px 20px;      /* Reduces internal space so text doesn't squeeze on phones */
    }
    
    .back-link {
        position: static;        /* Drops link down cleanly into natural content flow */
        display: block;
        margin-top: 15px;
    }
    
    .content-box {
        padding: 25px 20px;      /* Keeps comfortable side spacing inside the green box */
    }
    
    .lab-description {
        font-size: 16pt;         /* Scales text size down slightly for compact devices */
    }
    
    .portfolio-list {
        font-size: 18pt;         /* Compact list scaling */
    }
}