:root {
    --bg-color: #112219;
    --bg-gradient-start: #112219;
    --bg-gradient-end: #1D3D2C;
    --text-active: #ffffff;
    --text-inactive: #EEDBCC;
    --line-color: rgba(255, 255, 255, 0.5);
    --font-main: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-active);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll; /* Force vertical scrollbar to prevent layout shift */
    position: relative;
}

/* Background Layer */
.background-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: auto 100%; /* Fixes sizing to height, preventing shift and excessive zoom */
    background-position: left top; /* Align to left */
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.8s ease;
    /* If the image needs to be darker or blended */
    /* filter: brightness(0.6); */
}

.bg-image.active {
    opacity: 1;
}

.bg-gradient {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%; /* Cover full width but gradient focuses on right */
    height: 100%;
    background: linear-gradient(to right, transparent 75%, var(--bg-gradient-end) 100%);
    pointer-events: none;
}

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Header */
header {
    margin-bottom: 60px; /* More space after header */
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px; /* Fixed height for alignment */
}

.brand-text {
    font-family: var(--font-main);
    font-size: 32px;
    /* "Tim Green and Designer text should be identical" */
    font-weight: 500;
    color: var(--text-active);
    margin: 0;
}

.nav-container {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 200px; /* Fixed width to align 'About' and 'Work' vertically if needed, or just flex-end */
    justify-content: flex-end;
}

.nav-link {
    background: none;
    border: none;
    font-family: var(--font-main);
    font-size: 18px;
    cursor: pointer;
    padding: 5px 18px 5px 10px; /* Added 8px to right padding */
    border-radius: 4px;
    position: relative;
    display: inline-block;
    margin-right: -18px; /* Pull text to align with line end, letting padding hang over */
    text-align: right; /* Align text to right to keep end fixed */
    
    /* We need a fixed width or method to prevent layout shift if spans differ slightly, 
       though overlapping handles visual shift. */
    
    transition: background-color 0.3s ease;
}

.nav-link span {
    display: block;
    transition: opacity 0.5s ease, color 0.5s ease;
}

.label-light {
    font-weight: 300; /* Helvetica Neue Light */
    color: var(--text-inactive);
    opacity: 1;
}

.label-medium {
    font-weight: 500; /* Helvetica Neue Medium */
    color: var(--text-active);
    opacity: 0;
    position: absolute;
    top: 5px; /* Match padding */
    right: 18px; /* Align to right padding edge */
    left: auto; 
    pointer-events: none; /* Ensure clicks go to button */
    white-space: nowrap; /* Prevent wrapping which can cause shifts */
}

.nav-link.active .label-light {
    opacity: 0;
}

.nav-link.active .label-medium {
    opacity: 1;
}

.nav-link:hover {
    /* Hover: 5% filled #fff rounded rectangle box */
    background-color: rgba(255, 255, 255, 0.05);
}

/* LinkedIn Icon */
.linkedin-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.linkedin-icon svg {
    width: 100%;
    height: 100%;
}

.linkedin-bg {
    fill: var(--text-inactive); /* Recolor to #EEDBCC */
}

.linkedin-fg {
    fill: var(--bg-color); /* The "in" text part should likely be dark or transparent knockout. 
                              Original SVG has white 'in' on blue rect. 
                              If we make rect EEDBCC, 'in' should probably be the bg color or similar dark. */
}

.linkedin-placeholder {
    width: 24px; /* Matches icon width to keep 'Work' aligned with 'About' */
}


/* Separator */
.separator {
    width: 100%;
    height: 1px; 
    background-color: var(--line-color);
    margin: 5px 0; /* Small gap between rows */
}

/* Main Content */
main {
    flex-grow: 1;
    position: relative;
}

.page-section {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.page-section.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

/* About Layout */
.about-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    /* Ensure text column is on the right */
}

.spacer-column {
    /* Empty column to push text to right, leaving left open for background image visibility */
    min-height: 1px; 
}

.text-column {
    /* Text content wrapper */
    position: relative;
    z-index: 1;
}

.about-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid transparent; /* Maintain structure */
}

.email-link {
    display: block;
    color: var(--text-active);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: 18px;
}

.bio-text p {
    margin-bottom: 20px;
    font-size: 16px; /* Match body text size */
    line-height: 1.6;
    font-weight: 300;
    color: var(--text-active); /* Assuming body text should be white/active color now? 
                                  Prompt says "body text under email should be the same size..."
                                  Let's stick to white or slightly off-white. 
                                  User said unselected nav is EEDBCC. Body text is usually legible white. */
    letter-spacing: 0.4px;
}

.divider {
    width: 100%;
    height: 1px;
    background-color: var(--line-color);
    margin: 40px 0;
    opacity: 0.3;
}

.interests-section h3 {
    font-size: 16px;
    font-weight: 500; /* Match styles */
    margin-bottom: 10px;
    margin-top: 30px;
    /* "Other interests shouldn't be underlined" */
    text-decoration: none; 
    color: var(--text-active);
}

.interests-section h3:first-of-type {
    margin-top: 0;
}

.interests-section p {
    font-size: 16px; /* Match body text */
    line-height: 1.6;
    color: var(--text-active);
    margin-bottom: 20px;
    font-weight: 300;
    letter-spacing: 0.4px;
}

.interests-section p:last-child {
    margin-bottom: 0; /* Remove bottom margin from last paragraph */
}

.interests-section {
    margin-bottom: 40px; /* Match the divider margin spacing */
}

.text-link {
    color: var(--text-active);
    text-decoration: underline;
    font-weight: 400;
    transition: color 0.3s ease;
}

.text-link:hover {
    color: var(--text-inactive); /* #EEDBCC on hover */
}

.text-link-header {
    color: var(--text-active);
    text-decoration: underline; /* Always underlined */
    text-underline-offset: 4px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.text-link-header:hover {
    color: var(--text-inactive); /* #EEDBCC on hover */
}

/* Work Section */
#work-section {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

.password-align {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Center horizontally in the page */
    height: 60vh;
    width: 100%;
}

.password-block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.password-label {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 500;
}

.password-wrapper {
    display: flex;
    gap: 10px;
}

#password-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 15px;
    border-radius: 6px;
    font-size: 16px;
    width: 300px;
    outline: none;
}

#password-input:focus {
    border-color: rgba(255, 255, 255, 0.5);
}

#enter-btn {
    background-color: #e0e0e0;
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.2s;
}

#enter-btn:hover {
    background-color: #fff;
}

#error-message {
    color: #ff6b6b;
    font-size: 14px;
    height: 20px;
    /* display: none;  Removed to handle visibility instead for layout stability */
    text-align: center;
    position: absolute;
    bottom: -30px; /* Position below the wrapper */
    width: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Iframe */
#work-content {
    width: 100%;
    opacity: 0;
    transition: opacity 1s ease;
}

#slides-frame {
    width: 100%;
    aspect-ratio: 1440 / 839;
    height: auto;
    display: block;
    border: none;
}

/* Footer */
footer {
    margin-top: auto;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
}

.fade-content {
    transition: opacity 0.5s ease;
}

/* Responsive */
@media (max-width: 900px) {
    .about-layout {
        grid-template-columns: 1fr;
    }
    
    .spacer-column {
        display: none; /* On mobile, stack text, maybe image is bg or hidden */
    }
    
    .bg-image {
        /* Adjust bg for mobile if needed */
        background-size: cover;
        background-position: center top;
    }

    .container {
        padding: 20px 20px;
    }
    
    .header-row {
        flex-wrap: nowrap;
    }
    
    .brand-text {
        font-size: 24px;
    }
    
    .bg-image.active {
        /* Adjust bg for mobile if needed */
        opacity: 0.4;
    }
}