/* GLOBAL RESET - Removes default browser styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* BODY - Sets the overall font and background for the entire website */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background: #fafaf9;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* CONTAINER - Centers content and sets maximum width */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
}

/* HEADER - Top section containing navigation and hero */
header {
    padding: 80px 0 32px;
    position: relative;
}

/* NAVIGATION - Vertical menu positioned on the right */
nav {
    position: fixed;
    top: 48px;
    right: 24px;
    z-index: 100;
}

/* NAVIGATION LIST - Vertical menu */
nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 0;
}

/* NAVIGATION BULLETS - Removed for vertical layout */
nav li::after {
    content: "";
}

/* LAST NAVIGATION ITEM - No special styling needed */
nav li:last-child::after {
    content: "";
}

/* NAVIGATION LINKS - Styling for menu items (Home, About, Projects, etc.) */
nav a {
    color: #a1a1aa;
    text-decoration: none;
    font-size: 12px; /* Was 11px, now 10% larger */
}

/* NAVIGATION HOVER - What happens when you hover over menu items */
nav a:hover {
    text-decoration: underline;
}

/* HOMEPAGE HERO SECTION */

/* HERO CONTAINER - Contains name and description, constrained to left 50% on desktop */
.hero {
    max-width: 55%;
}

/* H1 - Main name/title at the top of homepage (e.g., "YZ Yang") */
.hero h1 {
    font-size: 32px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 24px;
    color: #0f0f0f;
    letter-spacing: -0.02em;
}

/* HERO SUBTITLE - Description under main title (e.g., "I design industrial products...") */
.hero p {
    font-size: 15px;
    color: #525252;
    margin-bottom: 16px;
    font-weight: 400;
    line-height: 1.7;
}

/* LAST HERO PARAGRAPH - Extra bottom margin for spacing before projects */
.hero p:last-child {
    margin-bottom: 48px;
}

/* HERO LINKS */
.hero a {
    color: #0f0f0f;
    text-decoration: underline;
    text-decoration-color: #d6d3d1;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s ease;
}

.hero a:hover {
    text-decoration-color: #a8a29e;
}

/* CATEGORY FILTER - Navigation tabs for filtering projects */
.category-filter {
    display: flex;
    gap: 8px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.category-btn {
    padding: 8px 16px;
    background: #ffffff;
    color: #737373;
    border: 1px solid #e7e5e4;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: none;
    font-family: inherit;
    text-transform: capitalize;
}

.category-btn:hover {
    background: #fafaf9;
}

.category-btn.active {
    background: #0f0f0f;
    color: #ffffff;
    border-color: #0f0f0f;
}

/* SECTION CONTAINER - Each main section on the page */
.section {
    margin-bottom: 64px;
}

/* H2 - Section headings like "SELECTED PROJECTS" */
.section h2 {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 24px;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* PROJECTS CONTAINER - Three column grid layout by default on desktop */
.projects-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* PROJECT CARDS - Individual project items on homepage (3-column layout) */
.project {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0;
    transition: none;
    text-decoration: none;
    color: inherit;
    border-radius: 5px;
}

/* PROJECT HOVER - No hover effect (only image changes) */
.project:hover {
    transform: none;
}

.project:hover .project-image {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* FEATURED PROJECT CARDS - Larger cards that span full width (3 columns) */
.project.featured {
    grid-column: span 3;
    flex-direction: row;
    gap: 48px;
    align-items: center;
    padding: 48px;
    background: #ffffff;
    border: 1px solid #e7e5e4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    border-radius: 5px;
}

.project.featured:hover {
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.project.featured .project-image {
    width: 320px;
    height: 320px;
    border-radius: 5px;
}

.project.featured:hover .project-image {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.project.featured .project-content {
    flex: 1;
}

.project.featured h3 {
    font-size: 28px;
    margin-bottom: 16px;
}

.project.featured p {
    font-size: 17px;
    line-height: 1.7;
}

/* PROJECT TEXT CONTENT - Contains project title and description */
.project-content {
    width: 100%;
}

/* H3 - Project titles (e.g., "MOSTAVIO eVTOL Aircraft", "Jewellery Design Collection") */
.project h3 {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #0f0f0f;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* PROJECT DESCRIPTIONS - Text describing each project */
.project p {
    font-size: 14px;
    color: #737373;
    margin-bottom: 0;
    line-height: 1.6;
}

/* PROJECT IMAGES - Square cover images on homepage */
.project-image {
    width: 100%;
    aspect-ratio: 1;
    background: #f5f5f4;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #a3a3a3;
    border: 1px solid #e7e5e4;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: none;
}

/* COVER IMAGES - The main cover.png image */
.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image proportions within square */
    transition: opacity 0.3s ease;
}

/* HOVER IMAGES - The cover_hover.gif that appears on hover */
.project-image .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keeps image proportions within square */
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

/* IMAGE HOVER EFFECT - Shows hover image when mouse is over the entire project card */
.project:hover .hover-img {
    opacity: 1; /* Makes hover image visible */
}

/* PROJECT DETAIL PAGES - Styling for individual project pages */

/* BACK LINK - "← Back to projects" link at top of project pages */
.back-link {
    font-size: 14px;
    color: #737373;
    text-decoration: none;
    margin-bottom: 32px;
    display: inline-block;
    font-weight: 400;
}

/* BACK LINK HOVER - Underline appears when hovering over back link */
.back-link:hover {
    text-decoration: underline;
}

/* PROJECT HEADER - Container for project title */
.project-header {
    margin-bottom: 48px;
}

/* PROJECT TITLE - Large title on project detail pages (e.g., "MOSTAVIO eVTOL Aircraft") */
.project-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 24px;
    color: #0f0f0f;
    letter-spacing: -0.02em;
}

/* PROJECT META SECTION - Grid containing Tools, Time, Role information */
.project-detail-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
    padding: 24px 0;
    border-top: 1px solid #e7e5e4;
    border-bottom: 1px solid #e7e5e4;
}

/* META LABELS - "TOOLS", "TIME", "ROLE" headings */
.meta-item h3 {
    font-size: 12px;
    font-weight: 500;
    color: #737373;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* META VALUES - The actual tools, time, and role information */
.meta-item p {
    font-size: 14px;
    color: #525252;
    line-height: 1.6;
}

/* PROJECT CONTENT CONTAINER - Contains all project description content */
.project-detail-content {
    margin-bottom: 32px;
}

/* CONTENT SECTIONS - Individual sections like "About" */
.content-section {
    margin-bottom: 24px;
}

/* CONTENT HEADINGS - Section titles like "ABOUT" on project pages */
.content-section h2 {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    color: #737373;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* CONTENT PARAGRAPHS - Main project description text */
.content-section p {
    font-size: 15px;
    color: #525252;
    line-height: 1.7;
    margin-bottom: 12px;
}

/* LINKS IN CONTENT - Hyperlinks within project descriptions */
.content-section a {
    color: #0f0f0f;
    text-decoration: underline;
    text-decoration-color: #d6d3d1;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s ease;
}

.content-section a:hover {
    text-decoration-color: #a8a29e;
}

/* PROJECT IMAGES GRID - Single column layout for project detail images (1.png, 2.png, etc.) */
.images-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 64px;
}

/* IMAGE CONTAINERS - Individual image items in the grid */
.image-item {
    background: #ffffff;
    border: 1px solid #e7e5e4;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* PROJECT DETAIL IMAGES - The numbered images (1.png, 2.png, etc.) */
.image-item img {
    width: 100%;
    height: auto; /* Maintains original aspect ratio */
    display: block;
}

/* IMAGE CAPTIONS - Optional text descriptions under images */
.image-caption {
    padding: 16px;
    font-size: 13px;
    color: #737373;
    background: #fafaf9;
    border-top: 1px solid #e7e5e4;
    line-height: 1.6;
}

/* EMPTY CAPTIONS - Hides caption area when no caption is provided */
.image-caption:empty {
    display: none;
}

/* IMAGE PLACEHOLDERS - No longer used for loading, but kept for fallback cases */
.image-placeholder {
    aspect-ratio: 4/3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #a3a3a3;
    background: #f5f5f4;
}

/* CONTACT SECTION - Contact information on homepage */
.contact {
    margin-top: 80px;
    padding: 32px 0;
    border-top: 1px solid #e7e5e4;
}

/* CONTACT TEXT - Email, phone, location information  */
.contact p {
    font-size: 14px;
    color: #737373;
    margin-bottom: 6px;
    line-height: 1.6;
}

/* CONTACT LINKS - Clickable email and phone links */
.contact a {
    color: #0f0f0f;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* CONTACT HOVER - Underline appears when hovering over contact links */
.contact a:hover {
    color: #525252;
}

/* FOOTER - Bottom section with copyright information */
footer {
    margin-top: 80px;
    padding: 32px 0;
    border-top: 1px solid #e7e5e4;
}

/* FOOTER TEXT - Copyright and other footer information */
footer p {
    font-size: 14px;
    color: #737373;
    margin-bottom: 6px;
    line-height: 1.6;
}

/* FOOTER LINKS - Any clickable links in footer */
footer a {
    color: #0f0f0f;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* FOOTER HOVER - Underline appears when hovering over footer links */
footer a:hover {
    color: #525252;
}

/* BACK TO PROJECTS BUTTON - Button at the end of project detail pages */
.back-to-projects {
    text-align: center;
    margin: 64px 0 32px;
}

.back-to-projects a {
    display: inline-block;
    padding: 12px 24px;
    background: #ffffff;
    color: #0f0f0f;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    border: 1px solid #e7e5e4;
    border-radius: 5px;
    transition: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.back-to-projects a:hover {
    background: #ffffff;
    border-color: #e7e5e4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* RESPONSIVE DESIGN - Adjustments for different screen sizes */

/* TABLET SCREENS - Medium sized devices (1024px and smaller) */
@media (max-width: 1024px) {
    /* Hero takes full width on tablet */
    .hero {
        max-width: 100%;
    }

    /* Two column layout on tablet */
    .projects-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Featured cards span full width on tablet */
    .project.featured {
        grid-column: span 2;
        flex-direction: column;
        padding: 40px;
        gap: 32px;
    }

    .project.featured .project-image {
        width: 100%;
        aspect-ratio: 1;
    }

    .project.featured h3 {
        font-size: 24px;
    }

    .project.featured p {
        font-size: 16px;
    }
}

/* MOBILE SCREENS - Small devices (768px and smaller) */
@media (max-width: 768px) {
    /* Less padding on mobile */
    .container {
        padding: 0 16px;
    }

    /* Hero takes full width on mobile */
    .hero {
        max-width: 100%;
    }

    /* Single column layout on mobile */
    .projects-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Featured cards single column on mobile */
    .project.featured {
        grid-column: span 1;
        padding: 32px;
        gap: 24px;
    }

    .project.featured h3 {
        font-size: 22px;
    }

    .project.featured p {
        font-size: 15px;
    }

    /* Category filter on mobile */
    .category-filter {
        gap: 6px;
        margin-bottom: 32px;
    }

    .category-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    /* Navigation adjustments for mobile */
    nav {
        position: static;
        top: auto;
        right: auto;
        margin-bottom: 32px;
    }

    nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    nav li::after {
        content: " •";
        color: #666;
        margin-left: 10px;
    }

    nav li:last-child::after {
        content: "";
    }

    /* Smaller main title on mobile */
    .hero h1 {
        font-size: 28px;
    }

    /* Smaller subtitle on mobile */
    .hero p {
        font-size: 14px;
    }

    /* Smaller project detail titles on mobile */
    .project-title {
        font-size: 28px;
    }

    /* Project cards remain in column layout on mobile */
    .project {
        flex-direction: column;
        gap: 16px;
    }

    /* Images maintain aspect ratio on mobile */
    .project-image {
        width: 100%;
        aspect-ratio: 1;
    }

    /* Stack meta information vertically on mobile */
    .project-detail-meta {
        grid-template-columns: 1fr; /* Single column instead of three */
        gap: 16px;
    }

    /* Tighter spacing for image grids on mobile */
    .images-grid {
        gap: 24px;
        margin-top: 48px;
    }

    /* Smaller captions on mobile */
    .image-caption {
        padding: 12px;
        font-size: 12px;
    }

    /* Tighter navigation spacing on mobile */
    nav ul {
        gap: 10px;
    }

    /* Closer bullet spacing on mobile */
    nav li::after {
        margin-left: 10px;
    }
}