/* --- Global Layout --- */
html, body {
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%;
    background-image: url('/assets/bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex; 
    flex-direction: column;
    overflow: hidden; /* Prevents global document scroll */
}

/* --- Header and Footer --- */
#main-header { 
    width: 100%;
    height: 120px; 
    background-image: url('/assets/header.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain; /* Ensures full graphic is visible */
}

#main-footer { 
    width: 100%;
    height: 60px; 
    background-image: url('/assets/footer.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: contain; /* Ensures full graphic is visible */
}

/* --- Grid System: 2-Column Split --- */
.grid-container {
    flex: 1; 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    overflow: hidden; /* Stops frames from pushing outside the viewport */
}

.frame {
    border: none; 
    height: 100%;
    overflow-y: auto; /* Scrollbar only appears vertically if needed */
    overflow-x: hidden; /* Forces content to wrap, stopping horizontal scroll */
}

/* Force specific widths */
.frame:nth-child(1) {
    flex: 0 0 20%; /* Biographies: 20% width */
}

.frame:nth-child(2) {
    flex: 1; /* History: Takes the remaining 80% width */
}

/* --- Plaque System --- */
.biography-plaque-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px;
}

/* --- Content Constraints --- */
body {
    padding: 15px;
    line-height: 1.5;
    color: #333;
    font-family: sans-serif;
    overflow-x: hidden; /* Prevents overflow inside iframes */
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px; background: transparent; }
::-webkit-scrollbar-thumb { background: #c5a059; border-radius: 4px; }