/* CSS Custom Properties (Variables) */
/*
 * ==============================
 * VARIABLE OPTIMIZATION COMPLETED
 * ==============================
 * 
 * ✅ All float values converted to integers
 * ✅ Variable names made intuitive and clear
 * ✅ Redundant variables consolidated
 * ✅ Logical grouping implemented
 * 
 * Benefits:
 * - Immediate recognition of variable purpose
 * - Integer values for better performance  
 * - Reduced redundancy and better organization
 * - Consistent naming convention
 */
:root {
    /* ===== COLORS ===== */
    --bg-main: #ebe8de;
    --text-dark: #000000;
    --text-gray: #828282;
    --text-light: #757575;
    --color-text-primary: #000000;  /* Alias for main text color */
    --button-bg: #000000;
    --button-text: #f0efe9;
    --border-main: #d9d9d9;
    --border-light: #bfb79f;
    
    /* ===== TYPOGRAPHY ===== */
    --font-body: 'Inter', sans-serif;
    --font-primary: 'Inter', sans-serif;  /* Alias for main content font */
    --font-logo: 'Libre Barcode 39 Text', sans-serif;
    --font-accent: 'Poppins', sans-serif;
    
    /* ===== FONT SIZES ===== */
    --text-hero: 64px;        /* Hero titles, logo */
    --text-heading: 32px;     /* Section headings */
    --text-body: 20px;        /* Main content */
    --text-nav: 16px;         /* Navigation, labels */
    --text-small: 14px;       /* Captions, metadata */
    --font-size-medium: 18px; /* Medium text for project content */
    
    /* ===== LETTER SPACING ===== */
    --letter-tight: -1px;     /* Rounded from -1.28px */
    --letter-normal: -1px;     /* Rounded from -0.72px, -0.48px */
    
    /* ===== LAYOUT CONTAINERS ===== */
    --container-min: 1200px;   /* Minimum page width */
    --container-max: 1920px;   /* Maximum page width */
    --content-width: 1024px;   /* Main content sections */
    
    /* ===== COMPONENT SIZES ===== */
    --bio-image-width: 400px;
    --bio-image-height: 526px;  /* Rounded from 525.6px */
    --card-width: 257px;
    --company-logo-height: 180px;
    --footer-links-width: 185px;
    --skill-height: 30px;       /* Rounded from 30.4px */
    --logo-container-height: 45px; /* Rounded from 44.8px */
    
    /* ===== SPACING SYSTEM ===== */
    --space-page: 30px;        /* Page margins */
    --space-section: 150px;    /* Between major sections */
    --space-large: 48px;       /* Between content blocks */
    --space-medium: 38px;      /* Between related items */
    --space-small: 26px;       /* Rounded from 25.6px */
    --space-tiny: 6px;         /* Rounded from 6.4px */
    --space-bio: 19px;         /* Rounded from 19.2px */
    --space-affiliations: 38px; /* Rounded from 38.4px */
    --space-companies: 30px;    /* Rounded from 30.4px */
    --space-micro: 3px;        /* Rounded from 3.2px */
    
    /* ===== COMPONENT PADDING ===== */
    --pad-button: 11px 19px;   /* Rounded from 11.2px 19.2px */
    --pad-nav: 27px 60px;
    --pad-footer: 56px 53px;
    --pad-small: 7px 14px;     /* Rounded from 7.2px 14.4px */
    --pad-icon: 9px;           /* Rounded from 9.143px */
    --pad-project: 30px 59px;  /* Rounded from 30px 58.777px */
    
    /* ===== ANIMATIONS ===== */
    --transition-normal: 0.3s ease;
    --transition-fast: 0.2s ease;
    
    /* ===== BORDERS & ICONS ===== */
    --radius-normal: 8px;
    --radius-small: 4px;
    --icon-small: 20px;
    --icon-medium: 24px;
    --icon-large: 32px;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-main);
    line-height: 1.5;
    min-width: var(--container-min);
    overflow-x: auto;
    overflow-y: auto;
    position: relative;
}

/* Smooth scroll optimizations */
html {
    scroll-behavior: auto;
}

/* Main Page Container */
.main-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding: 0 170px;
    width: 100%;
    min-width: var(--container-min);
    min-height: 100vh;
    background-color: var(--bg-main);
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* Navigation Bar */
.navigation-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container-max);
    min-width: var(--container-min);
    width: 100%;
    padding: var(--pad-nav);
    background-color: var(--bg-main);
    overflow: hidden;
}

.logo {
    font-family: var(--font-logo);
    font-size: var(--text-hero);
    color: var(--text-dark);
    font-weight: normal;
    white-space: nowrap;
    flex-shrink: 0;
}

.logo a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-normal);
}

.logo a:hover {
    color: var(--text-light);
}

.logo p {
    margin: 0;
    line-height: 1.5;
    white-space: nowrap;
}

.button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-tiny);
    padding: var(--pad-button);
    background-color: var(--button-bg);
    /* border-radius: 0; */
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0px 0.8px 1.6px 0px rgba(0,0,0,0.05);
}

.button-text {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-body);
    color: var(--button-text);
    text-align: center;
    white-space: nowrap;
    line-height: 1.5;
}

/* Body Container */
.body {
    display: flex;
    flex-direction: column;
    gap: var(--space-large);
    align-items: center;
    justify-content: center;
    max-width: var(--container-max);
    min-width: var(--container-min);
    width: 100%;
    padding: 0 var(--space-page);
}

/* Bio Section */
.bio {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--bio-image-height);
}

.bio-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-bio);
    align-items: flex-start;
    justify-content: center;
    flex: 1;
    max-width: var(--content-width);
    margin-right: 142px;
    text-align: left;
}

.bio-title {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-hero);
    color: var(--text-dark);
    letter-spacing: var(--letter-tight);
    width: 100%;
    line-height: normal;
}

.bio-title p {
    margin: 0;
}

.bio-subtitle {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-heading);
    color: rgba(0,0,0,0.75);
    width: 100%;
}

.bio-subtitle p {
    margin: 0;
    line-height: 1.5;
}

.bio-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-body);
    color: var(--text-dark);
    width: 100%;
    line-height: 1.5;
}

.bio-description p {
    margin-bottom: 0;
}

.bio-image {
    width: var(--bio-image-width);
    height: var(--bio-image-height);
    flex-shrink: 0;
    margin-left: auto;
    overflow: hidden;
}

.bio-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Section Styles */
.section {
    display: flex;
    flex-direction: column;
    gap: var(--space-affiliations);
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.section-title {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 36px;
    color: var(--text-dark);
    letter-spacing: var(--letter-normal);
    text-align: left;
}

.section-title p {
    margin: 0;
    line-height: normal;
}

/* Companies Section */
.companies {
    display: flex;
    flex-direction: row;
    gap: 50px;
    align-items: center;
    justify-content: center;
    width: 100%;
    cursor: pointer;
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-companies);
    align-items: flex-start;
    justify-content: flex-start;
    height: var(--company-logo-height);
    flex: 1;
    text-decoration: none;
    overflow: visible;
}

.company-image {
    height: var(--logo-container-height);
    mix-blend-mode: darken;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.company-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.company-details {
    display: flex;
    flex-direction: column;
    gap: var(--space-micro);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    font-size: var(--text-nav);
    text-align: left;
}

.company-name {
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--text-dark);
    width: 100%;
    font-size: 24px;
}

.company-name p {
    margin: 0;
    line-height: 1.5;
}

.company-description {
    font-family: var(--font-body);
    font-weight: 400;
    color: var(--text-gray);
    width: 100%;
    font-size: var(--text-body);
}

.company-description p {
    margin: 0;
    line-height: 1.5;
}

/* Project Styles */
.project-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
}

.project-link:hover {
    transform: scale(1.02);
}

.project-link:hover .project-video video,
.project-link:hover .project-video img {
    transform: scale(1.05);
}

.project {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.project-video {
    width: 100%;
    aspect-ratio: 1280/597;
    overflow: hidden;
    /* border-radius: 8px; */
}

.project-video video,
.project-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-details {
    display: flex;
    flex-direction: column;
    gap: 6.4px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.project-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 24px;
    color: var(--text-dark);
    text-align: left;
    width: 100%;
}

.project-title p {
    margin: 0;
    line-height: 1.5;
}

.project-meta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-body);
    color: var(--text-gray);
    text-align: left;
    width: 100%;
}

.project-meta p {
    margin: 0;
    line-height: 1.5;
}

.project-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-body);
    color: var(--text-gray);
    text-align: left;
    width: 100%;
}

.project-description p {
    margin: 0;
    line-height: 1.5;
}

.bold {
    font-weight: 700;
}

/* Skills */
.skills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.skill {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--skill-height);
    padding: var(--pad-small);
    background-color: #dfdacb;
    border-radius: 16px;
    box-shadow: 0px 0.8px 1.6px 0px rgba(0,0,0,0.05);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: var(--text-nav);
    color: #666666;
    text-align: center;
    white-space: nowrap;
}

/* Project Grid */
.project-grid {
    display: flex;
    flex-direction: column;
    gap: 38.4px;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.project-row {
    display: flex;
    flex-direction: row;
    gap: var(--space-medium);
    justify-content: flex-start;
    width: 100%;
}

.project-small-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    flex: 1;
    height: 100%;
}

.project-small-link:hover {
    transform: scale(1.02);
}

.project-small-link:hover .project-image img {
    transform: scale(1.05);
}

.project-small {
    display: flex;
    flex-direction: column;
    gap: var(--space-small);
    align-items: flex-start;
    justify-content: flex-start;
    flex: 1;
    height: 100%;
    overflow: hidden;
}

.project-image {
    width: 100%;
    aspect-ratio: 539.3/272.8;
    border: 0.8px solid #d9d9d9;
    overflow: hidden;
    /* border-radius: 8px; */
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

/* Experience Section */
.experiences {
    display: flex;
    flex-direction: column;
    gap: 38.4px;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}

.experience {
    display: flex;
    flex-direction: column;
    gap: 6.4px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.experience-row {
    display: flex;
    flex-direction: row;
    gap: 70px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
}

.experience-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 24px;
    color: var(--text-dark);
    text-align: left;
    width: var(--card-width);
    flex-shrink: 0;
}

.experience-title p {
    margin: 0;
    line-height: 1.5;
}

/* Skills in experience row */
.experience-row .skills {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
}

.experience-company {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 19.2px;
    color: var(--text-gray);
    text-align: left;
    width: var(--card-width);
    line-height: 1.5;
    flex-shrink: 0;
}

.experience-company p {
    margin: 0;
}

.experience-description {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-body);
    color: var(--text-gray);
    text-align: left;
    flex: 1;
    line-height: 1.5;
}

.experience-description p {
    margin: 0;
}

/* Education Section */
.educations {
    display: flex;
    flex-direction: column;
    gap: 38.4px;
    align-items: flex-end;
    justify-content: flex-start;
    width: var(--content-width);
}

.education {
    display: flex;
    flex-direction: column;
    gap: 6.4px;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

.education-degree {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 24px;
    color: var(--text-dark);
    text-align: left;
    line-height: 1.5;
}

.education-degree p {
    margin: 0;
}

.education-description {
    display: flex;
    flex-direction: row;
    gap: 70px;
    align-items: center;
    justify-content: flex-start;
    width: 1025.4px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-body);
    color: var(--text-gray);
    text-align: left;
}

.education-school {
    width: var(--card-width);
    line-height: 1.5;
}

.education-school p {
    margin: 0;
}

.education-details {
    flex: 1;
    line-height: 1.5;
}

.education-details p {
    margin: 0;
}

/* Footer */
.footer {
    background-color: var(--bg-main);
    max-width: var(--container-max);
    min-width: var(--container-min);
    width: 100%;
    border-top: 1px solid #000000;
    box-sizing: border-box;
}

.footer-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--pad-footer);
    width: 100%;
    max-width: inherit;
    min-width: inherit;
    overflow: hidden;
}

.footer-logo {
    font-family: 'Libre Barcode 39 Text', monospace;
    font-size: 48px;
    color: var(--text-dark);
    text-align: left;
    width: var(--footer-links-width);
    white-space: nowrap;
    flex-shrink: 0;
}

.footer-logo p {
    margin: 0;
    line-height: 1.5;
}

.footer-email {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: var(--text-body);
    color: var(--text-gray);
    text-align: left;
    white-space: nowrap;
}

.footer-email p {
    margin: 0;
    line-height: 1.5;
}

.social-icons {
    display: flex;
    flex-direction: row;
    gap: 8.5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.social-icon {
    display: flex;
    flex-direction: column;
    gap: 11.429px;
    align-items: center;
    justify-content: center;
    padding: var(--pad-icon);
    border-radius: 4.571px;
    text-decoration: none;
    overflow: visible;
}

.icon-image {
    height: var(--icon-large);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}