:root {
    --bg-main: #ffffff;
    --text-main: #1a1a1a;
    --text-muted: #666666;
    --border-color: #eaeaea;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* Precise Notion Light Mode Tag Colors */
    --tag-green-bg: #e1efe6; --tag-green-txt: #356b46;
    --tag-blue-bg: #e3ebfb; --tag-blue-txt: #3b5a9b;
    --tag-gray-bg: #f1f1ef; --tag-gray-txt: #787774;
    --tag-brown-bg: #f4eeee; --tag-brown-txt: #7f5233;
    --tag-yellow-bg: #fdf5e0; --tag-yellow-txt: #b27b14;
    --tag-orange-bg: #faece5; --tag-orange-txt: #a14c24;
    --tag-default-bg: #f1f1f1; --tag-default-txt: #37352f;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background-color: var(--bg-main);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* 1:2 Layout Grid */
.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

/* Sidebar Styles */
.sidebar { display: flex; flex-direction: column; gap: 2rem; }

/* Tiered Profile Picture Scaling */
.profile-pic {
    width: 110px; /* Base for Mobile */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
}
@media (min-width: 801px) {
    .profile-pic { width: 140px; } /* Laptops */
}
@media (min-width: 1200px) {
    .profile-pic { width: 170px; } /* Large Desktop */
}

.profile-header h1 { font-family: var(--font-sans); font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.bio { font-size: 0.95rem; color: var(--text-muted); }

/* Sticky Panel combining Contact & Navigation */
.sticky-panel {
    position: sticky;
    top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.contact-links { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--font-mono); font-size: 0.85rem; }
.contact-links a { text-decoration: none; color: var(--text-main); border-bottom: 1px dashed var(--text-muted); width: fit-content; transition: border-bottom-color 0.2s; }
.contact-links a:hover { border-bottom-style: solid; border-bottom-color: var(--text-main); }
.contact-social-row { display: flex; gap: 1rem; margin-top: 0.25rem; }

.nav-links { 
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    font-family: var(--font-mono); 
    font-size: 0.85rem; 
}
.nav-links a { text-decoration: none; color: var(--text-muted); padding: 0.25rem 0; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: var(--text-main); font-weight: 600; }

.back-to-top { margin-bottom: 1rem; font-weight: 500; }

/* Main Content Styles */
.content { display: flex; flex-direction: column; gap: 5rem; }

section { scroll-margin-top: 5rem; }

section h2 {
    font-family: var(--font-mono); font-size: 1rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem;
}

/* Monospace Chevron Bullet Points */
.details-content { font-size: 0.95rem; color: var(--text-muted); padding-top: 1rem; }
.details-content ul { 
    list-style-type: none; 
    padding-left: 0; 
    margin-bottom: 1rem; 
}
.details-content li { 
    position: relative;
    padding-left: 1.25rem; 
    margin-bottom: 0.5rem; 
}
.details-content li::before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--font-mono);
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
}

/* Inline Editorial Links */
.inline-link {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: color 0.2s, border-bottom-color 0.2s;
}
.inline-link:hover {
    color: var(--text-main);
    border-bottom-color: var(--text-main);
}
/* Force italics for inline links inside specific sections */
#education-container .inline-link,
#publications-container .inline-link {
    font-style: italic;
}

/* Project Assets */
.project-asset {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    display: block;
}

/* Toggles / Dropdowns (Experience, Edu, Projects) */
details { 
    margin-bottom: 1.5rem; 
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 1.5rem; 
}

summary { 
    cursor: pointer; list-style: none; display: flex; 
    justify-content: space-between; align-items: flex-start; gap: 1rem; 
    position: relative;
}
summary::-webkit-details-marker { display: none; }

/* Structure */
.summary-left { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
.summary-right { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; }

.role-title { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; color: var(--text-main); }

.entity-link { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-main); text-decoration: none; border-bottom: 1px dashed var(--text-muted); transition: border-bottom-color 0.2s; width: fit-content; }
.entity-link:hover { border-bottom-style: solid; border-bottom-color: var(--text-main); }
.entity-no-link { border-bottom: none; cursor: default; }
.entity-no-link:hover { border-bottom: none; }

.role-date { 
    font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted); 
    white-space: nowrap; text-align: right; 
}

/* Thumbnail Specifics */
.project-thumb { 
    width: 44px; 
    height: 44px; 
    object-fit: cover; 
    border-radius: 6px; 
    border: 1px solid var(--border-color);
    background-color: var(--tag-gray-bg);
    transition: opacity 0.2s;
}
.project-thumb:hover { opacity: 0.8; }
.project-details summary { align-items: center; padding-right: 0; }
.project-details summary::after { content: none; display: none; }

/* 2-Column Split for Affiliations & Languages */
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }

/* Affiliations Grid */
.affiliations-list { display: flex; flex-direction: column; gap: 1rem; list-style-type: none; font-size: 0.95rem; color: var(--text-muted); }
.affiliations-list li { display: flex; gap: 1rem; align-items: center; }
.aff-emoji { flex-shrink: 0; font-size: 1.1rem; }
.aff-text { flex: 1; }

/* Languages Grid */
.language-list { display: flex; flex-direction: column; gap: 1rem; font-size: 0.95rem; color: var(--text-muted); }
.language-item { display: flex; align-items: center; gap: 1rem; }
.language-name { width: 70px; color: var(--text-muted); font-weight: 600; } 

/* Publications Grid */
.publications-list { display: flex; flex-direction: column; gap: 1rem; list-style-type: none; font-size: 0.95rem; color: var(--text-muted); }
.publications-list li { display: block; }

/* Skill Tags */
.tags-container { display: flex; flex-direction: column; gap: 0.5rem; }
.skills-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.skills-row.tags-spaced { margin-top: 1.5rem; }

.tag { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 4px; font-weight: 500; height: fit-content; }
.tag.green { background-color: var(--tag-green-bg); color: var(--tag-green-txt); }
.tag.blue { background-color: var(--tag-blue-bg); color: var(--tag-blue-txt); }
.tag.gray { background-color: var(--tag-gray-bg); color: var(--tag-gray-txt); }
.tag.brown { background-color: var(--tag-brown-bg); color: var(--tag-brown-txt); }
.tag.yellow { background-color: var(--tag-yellow-bg); color: var(--tag-yellow-txt); }
.tag.orange { background-color: var(--tag-orange-bg); color: var(--tag-orange-txt); }
.tag.default { background-color: var(--tag-default-bg); color: var(--tag-default-txt); border: 1px solid #e0e0e0; padding: 0.2rem 0.5rem; }

/* Mobile Footer (Hidden on Desktop) */
.mobile-footer { display: none; }

/* --- MOBILE RESPONSIVE RULES --- */
@media (max-width: 800px) {
    .container { grid-template-columns: 1fr; padding: 2rem 1.5rem 6rem 1.5rem; gap: 3rem; }
    .sidebar { position: relative; top: 0; }
    .sticky-panel { position: static; gap: 1.5rem; }
    .nav-links { display: none; }
    
    .content { gap: 3rem; }
    section { scroll-margin-top: 3rem; }
    details { margin-bottom: 1rem; padding-bottom: 1rem; }
    
    /* Accordion Mobile Restructure & Naked Toggles */
    summary { 
        flex-direction: column; 
        align-items: flex-start; 
        gap: 0.25rem; 
        padding-right: 1.5rem; 
    }
    .summary-left { gap: 0.15rem; width: 100%; }
    
    .summary-right { 
        flex-direction: row; 
        justify-content: space-between; 
        align-items: center;
        width: 100%; 
        margin-top: 0.25rem; 
    }
    .role-date { text-align: left; }

    /* Project Specific Mobile Overrides */
    .project-details summary {
        flex-direction: row; 
        padding-right: 0; 
        justify-content: space-between;
        align-items: center;
    }
    .project-details .summary-left {
        width: auto;
        flex: 1;
        padding-right: 1rem; 
    }
    .project-details .summary-right {
        width: auto;
        margin-top: 0;
        justify-content: center;
    }
    
    /* Pure CSS Naked Mobile Toggle Icons (For everything except projects) */
    summary::after {
        content: '+';
        position: absolute;
        top: 0.1rem; 
        right: 0;
        font-family: var(--font-mono);
        font-size: 1.2rem;
        color: var(--text-muted);
    }
    details[open] summary::after {
        content: '-';
        color: var(--text-main);
    }
    .project-details summary::after { display: none; }

    /* Reduced gap for Mobile Affiliations & Languages */
    .split-section { grid-template-columns: 1fr; gap: 2rem; }

    /* Sticky Mobile Footer Styling: Glassmorphism */
    .mobile-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.55); 
        -webkit-backdrop-filter: blur(14px) saturate(150%);
        backdrop-filter: blur(14px) saturate(150%);
        border-top: 1px solid var(--border-color);
        padding: 1rem 1.5rem;
        font-family: var(--font-mono);
        font-size: 0.85rem;
        z-index: 1000;
    }
    .mobile-footer a { color: var(--text-main); text-decoration: none; }
    .mobile-footer .mf-email { border-bottom: 1px dashed var(--text-muted); transition: border-bottom-color 0.2s; }
    .mobile-footer .mf-email:hover { border-bottom-style: solid; border-bottom-color: var(--text-main); }
}