:root {
    /* Color Tokens */
    --bg-color: #1E1E1E;
    --text-color: #ffffff;
    --text-secondary: #c0c0c0;
    /* Lightened from #ababab for better contrast on dark bg */
    --card-bg: #2A2A2A;
    /* Tag background */
    --card-bg-hover: #2A2A2A;
    /* Hover background */
    --border-color: #383838;
    --border-hover: #505050;
    --border-color: #383838;
    --border-hover: #505050;
    --text-hover: #e0e0e0;
    --focus-color: #ffffff;
    /* Visible focus color against dark bg */

    /* Font */
    --font-main: 'Noto Sans', sans-serif;

    /* Layout */
    --sidebar-width: 35%;
}

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

:focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 4px;
    border-radius: 2px;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    line-height: 1.4;
    /* Default body line height */
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
}

ul {
    list-style: none;
}

/* Layout */
.container {
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    padding: 3rem;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Was space-between, causing unstable Bio position */
    gap: 0;
    /* Control spacing via margins */
    border-right: 1px solid transparent;
}

/* Header Component */
.profile-header h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: var(--text-color);
    margin-bottom: 0px;
}

.profile-header h2 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: var(--text-secondary);
}

/* Bio Section */
.bio {
    max-width: 340px;
    font-size: 16px;
    /* Increased */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--text-color);
    margin-top: 2rem;
}

.bio p {
    margin-bottom: 1rem;
}

/* Contact Links */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    /* Increased */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.065px;
    color: var(--text-color);
}

.contact-link[href^="tel"],
.contact-link[href^="http"] {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.12px;
}

.contact-link::after {
    /* Arrow icon simulation */
    content: "↗";
    font-size: 11px;
    font-weight: 400;
    letter-spacing: -0.0987px;
}

.contact-link:hover {
    color: var(--text-hover);
}

/* Contact CTA (Footer - Sidebar) */
.contact-footer .contact-me-btn {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: var(--text-color);
}

.contact-footer .contact-me-btn:hover {
    color: var(--text-hover);
}

/* Main Content */
.content {
    margin-left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    padding: 3rem 4rem;
}

/* Mobile Only Title - Hidden by default on Desktop */
.mobile-only-title {
    display: none;
}

.top-nav {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    /* Removed margin-bottom (was 4rem) to align Experiences with Bio */
    height: 0;
    /* Ensure it doesn't take space if empty */
}

/* Section Headers */
.section {
    margin-bottom: 0;
    border-bottom: none;
    padding-bottom: 0;
    padding-top: 0;
}

/* Align Experiences with Bio on Desktop */
/* Align Experiences with Bio on Desktop */
#experience {
    /* 
       Fixed Bio Position Alignment
    */
    margin-top: 5rem;
    padding-top: 0;
    border-top: none;
}

.section:last-child {
    border-bottom: none;
}

.section-title {
    font-size: 24px;
    /* Increased from 13px to 24px per request */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.48px;
    text-transform: none;
    color: var(--text-color);
    margin-bottom: 2.5rem;
    opacity: 1;
}


/* Experience Items */
.job-item {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-bottom: 3rem;
}

.job-meta h4 {
    font-size: 18px;
    /* Increased */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.18px;
    color: var(--text-color);
    margin-bottom: 0.2rem;
}

.job-meta .company,
.job-meta .duration,
.job-meta .location {
    font-size: 16px;
    /* Increased */
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.2rem;
}

.job-details ul li {
    font-size: 16px;
    /* Increased */
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.08px;
    color: var(--text-color);
    margin-bottom: 1rem;
    padding-left: 1rem;
    position: relative;
}

.job-details ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--text-secondary);
}


/* Work Grid */
.work-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.filter-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 400;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.filter-btn:hover,
.filter-btn.active {
    border-color: var(--text-color);
    color: var(--text-color);
    background-color: var(--card-bg-hover);
}


/* View Toggles */
.view-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    /* Inactive color */
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.view-btn:hover {
    color: var(--text-color);
}

.view-btn.active {
    color: var(--text-color);
}

.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    transition: opacity 0.3s ease;
    /* Smooth transition when switching */
}

/* List View Rules */

/* List View Rules */
/* List View Rules */
.work-grid.list-view {
    grid-template-columns: 1fr;
    /* Single column */
    gap: 3rem;
}

.work-grid.list-view .work-item {
    display: block;
    transition: none;
}

.work-grid.list-view .work-item:hover {
    transform: none;
}

.work-grid.list-view .work-image {
    display: none;
}

.work-grid.list-view .work-info {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    align-items: flex-start;
    padding-top: 0;
}

/* Portfolio Items (Grid Defaults) */
.work-item {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
}

.work-item:hover {
    transform: translateY(-4px);
}

.work-image {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: var(--card-bg);
    margin-bottom: 1rem;
    border-radius: 12px;
    transition: background-color 0.3s ease;
    border: 1px solid var(--border-color);
    overflow: hidden;
    /* Clips image to rounded corners */
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures image covers the area without distortion */
    display: block;
}

.work-item:hover .work-image {
    background-color: var(--card-bg-hover);
    border-color: var(--border-hover);
}

/* Typography & Layout for Work Items */
.work-info h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.18px;
    color: var(--text-color);
    margin-bottom: 0.2rem;
}

.work-info .entity,
.work-info .year {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    display: inline-block;
    /* Inline for single row */
}

.work-info .entity::after {
    content: " • ";
    /* Bullet Separator */
    margin: 0 0.4rem;
    font-size: 0.8em;
    color: var(--text-secondary);
    vertical-align: middle;
}

.work-info .description {
    font-size: 16px;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 1rem;
    display: none;
    /* Hidden in Grid View by default to keep cards clean? Or show? Let's hide in grid, show in list per standard patterns unless asked. User asked for "chips, year, work name, short description, client" in list view. */
}

.work-grid.list-view .work-info .description {
    display: block;
    /* Show in List View */
}

/* Tags / Chips */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tags span {
    font-size: 12px;
    background-color: var(--card-bg);
    color: var(--text-secondary);
    padding: 4px 12px;
    border-radius: 100px;
    transition: all 0.2s ease;
}

.work-item:hover .tags span {
    background-color: var(--card-bg-hover);
    color: var(--text-color);
}

/* Adjustments for Grid View to handle new structure if needed */
.work-meta {
    margin-bottom: 0.5rem;
}

/* Skills & Certifications */
.skills-grid,
.misc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
}

.skill-category h4,
.certifications h3 {
    margin-bottom: 1.5rem;
    font-size: 13px;
    /* Assuming matches section headers or sub-headers */
    font-weight: 600;
    color: var(--text-secondary);
}

.skill-category ul li,
.certifications p {
    margin-bottom: 0.5rem;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.15px;
    color: var(--text-color);
}

.skill-category ul li::before {
    content: "•";
    margin-right: 0.5rem;
    color: var(--text-secondary);
}

/* Education */
.education-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
}

.education-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.school-name {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 0;
}

.degree-info h4 {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 0.2rem;
    color: var(--text-color);
}

.degree-info p {
    color: var(--text-secondary);
    font-size: 15px;
}

/* Project Detail Page Styles (Moved here for consistency) */
.project-detail-bd .detail-header {
    margin-bottom: 2rem;
    border-bottom: none;
    padding-bottom: 0;
}

.project-detail-bd .detail-meta {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: -0.065px;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    margin-bottom: 2rem;
    text-transform: none;
}

.project-detail-bd .mockup-full {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
}

.project-detail-bd .mockup-grid {
    display: grid;
    /* Ratio 3.0fr 1fr - Interpolated sweet spot for alignment */
    grid-template-columns: 3.0fr 1fr;
    gap: 2rem;
    margin-bottom: 3rem;
    align-items: start;
}

.project-detail-bd .mockup-grid img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--border-color);
}

.project-detail-bd .mockup-grid .mockup-full {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .project-detail-bd .mockup-grid {
        grid-template-columns: 1fr;
    }
}

.project-detail-bd .detail-title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--text-color);
}

@media (min-width: 900px) {
    .project-detail-bd .detail-title {
        font-size: 48px;
    }
}

.project-detail-bd .detail-hero {
    width: 100%;
    height: auto;
    /* Allow height to adapt to video/image */
    overflow: hidden;
    /* Ensure content stays within border radius */
    background-color: var(--card-bg);
    margin-bottom: 4rem;
    border: 1px solid var(--border-color);
}

.project-detail-bd .detail-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
}

.project-detail-bd .content-block {
    margin-bottom: 3rem;
}

.project-detail-bd .content-block h3 {
    font-size: 24px;
    /* Section headers h2/h3 */
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.48px;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.project-detail-bd .content-block p {
    font-size: 16px;
    /* Body text */
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.08px;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

.btn-primary {
    display: inline-block;
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: opacity 0.2s ease;
    margin-top: 1rem;
}

.btn-primary:hover {
    opacity: 0.9;
}

.project-detail-bd .lead-description {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -0.09px;
}



.skills-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Separators - Unified Top-Driven System (96px Total Gap) */
#work,
#skills,
#other-works,
#certifications,
#education {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--border-color);
}

/* 
   Override default .section styles (which have large 6rem+6rem gaps and border-bottom)
   to prevent double borders and ensure consistent 3rem+3rem spacing 
*/
#other-works,
#certifications {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#other-works {
    /* Specific override if needed, but covered by above group */
}

.other-work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 2rem;
    /* 3rem vertical, 2rem horizontal to match Selected Works */
}

.other-work-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.other-work-item .year {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    opacity: 0.8;
    order: 2;
    display: block;
    margin-bottom: 0.5rem;
}

.other-work-item h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0;
    line-height: 1.3;
}

.other-work-item .company {
    font-size: 14px;
    color: var(--text-secondary);
    display: block;
}

.other-work-item .meta-row {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.other-work-item .meta-row .company::after {
    content: "•";
    margin-left: 0.5rem;
    color: var(--text-secondary);
    opacity: 0.5;
}

.other-work-item .meta-row .company:last-child::after {
    display: none;
}

.other-work-item .tags {
    margin-top: 0.25rem;
    /* Reduced from 0.5rem to tighten gap */
}

.other-work-item .tags span {
    font-size: 11px;
    padding: 3px 10px;
    background-color: var(--card-bg);
}

/* Certifications Layout Update */
.misc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.misc-grid .job-item {
    margin-bottom: 0;
    display: block;
    /* Override default grid layout to use full width */
}

/* Mobile Responsive */
@media (max-width: 900px) {
    .other-work-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 900px) {
    .container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 2rem 2rem 0 2rem;
        /* Removed bottom padding */
        margin-bottom: 0;
        /* Ensure no external gap */
    }

    .bio {
        margin-top: 4rem;
        /* Increased from 1rem */
        max-width: 100%;
        margin-bottom: 0;
    }

    .content {
        width: 100%;
        margin-left: 0;
        padding: 0 2rem 2rem 2rem;
        /* Removed top padding (was 2rem) */
    }

    .job-item,
    .education-item,
    .education-grid,
    .misc-grid,
    .skills-grid,
    .work-grid,
    .project-detail-bd .detail-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Reset Section Styles for Mobile to avoiding conflicts */
    .section {
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border: none !important;
        /* Force remove any section borders */
    }

    /* Reset specific top spacing overrides for mobile */
    #work,
    #skills,
    #other-works,
    #certifications,
    #education {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    #experience {
        margin-top: 0 !important;
        /* Reset desktop alignment spacing */
    }

    /* Accordion Styles (Mobile Only) */
    .mobile-only-title {
        display: block !important;
        margin-bottom: 0;
        font-size: 18px;
        font-weight: 600;
        cursor: pointer;
        position: relative;
        /* Single border source */
        border-top: 1px solid var(--border-color);
        padding: 1rem 0;
        /* Vertical breathing room for the tap target */
    }

    .section-title.accordion-trigger {
        margin-bottom: 0;
        font-size: 18px;
        /* Single border source */
        border-top: 1px solid var(--border-color);
        padding: 1rem 0;
        /* Vertical breathing room for the tap target */
    }

    /* Special case: The very first accordion (About) might need no top border if it's at the very top, 
       BUT consistency is usually better. If user wants it flush, keep border. 
       If "About" is inside .bio, let's check .bio first. */

    .bio .mobile-only-title {
        /* If we want the first one to NOT have a border */
        border-top: 1px solid var(--border-color);
    }

    .accordion-trigger {
        cursor: pointer;
        position: relative;
        padding-right: 20px;
        user-select: none;
    }

    .accordion-trigger::after {
        content: '';
        position: absolute;
        right: 0;
        top: 50%;
        /* Center vertically */
        transform: translateY(-50%);
        width: 10px;
        height: 6px;
        background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.3s ease;
    }

    .accordion-trigger.active::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .accordion-content {
        display: none;
        padding-top: 0;
        padding-bottom: 1.5rem;
        /* Add space ONLY at the bottom of open content */
    }

    .accordion-content.active {
        display: block;
        animation: fadeIn 0.3s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hide desktop work title on mobile if needed, or handle via JS/display classes */
    .desktop-work-title {
        display: none;
    }

    .mobile-work-title {
        display: block !important;
    }

    .top-nav {
        display: none;
    }
}

/* List spacing refinement */
.job-details ul li {
    margin-bottom: 0.5rem;
    /* Reduced from 1rem */
}

/* Lightbox Styles */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(5px);
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    cursor: grab;
    /* Indicates functionality */
}

.lightbox-content:active {
    cursor: grabbing;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    display: block;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    object-fit: contain;
    transition: opacity 0.2s ease-in-out;
}

.lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: white;
    font-size: 30px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    line-height: 1;
    transition: color 0.2s;
}

.lightbox-close:hover {
    color: var(--secondary-text);
}

body.lightbox-open {
    overflow: hidden;
}

/* Lightbox Navigation - Improved Positioning */
.lightbox-prev,
.lightbox-next {
    position: fixed;
    /* Fixed to viewport for easy clicking */
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.3);
    /* Slight background for visibility */
    border: none;
    color: rgba(255, 255, 255, 0.8);
    font-size: 4rem;
    /* Larger hit target */
    cursor: pointer;
    padding: 1rem 1.5rem;
    z-index: 10002;
    /* Above image */
    transition: all 0.3s ease;
    user-select: none;
    border-radius: 8px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

/* Ensure controls are accessible on smaller screens */
@media (max-width: 900px) {

    .lightbox-prev,
    .lightbox-next {
        font-size: 3rem;
        padding: 0.8rem;
        background: rgba(0, 0, 0, 0.2);
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }
}