:root {
    color-scheme: light only;
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
    --accent-color: #000000;
    --gray-color: #888888;
    --grid-gap: 40px;
    /* Added gap as requested */
    --gallery-cols: 2;
    /* Configurable gallery columns */
}

.home-page {
    --bg-color: #f9f9f9;
}

.home-page .site-header {
    background-color: var(--bg-color);
}

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

/* Enforce custom cursor globally - only when cursor-hidden class is applied */
body.cursor-hidden,
body.cursor-hidden * {
    cursor: none !important;
}

body.cursor-hidden iframe {
    cursor: none !important;
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 1px solid #000;
    /* Default circle border */
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    /* Center the cursor element on the coordinate */
    margin-left: -10px;
    /* half of width */
    margin-top: -10px;
    /* half of height */
    transition: width 0.2s ease, height 0.2s ease, margin 0.2s ease;
    overflow: hidden;
    /* To mask the inner heightmap */
}

.custom-cursor-inner {
    width: 100%;
    height: 100%;
    /* Background properties will be set via JS when active */
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.2s;
}

.custom-cursor.showing-heightmap {
    /* Kept constant size */
    background-color: #fff;
    /* Optional background */
    border: 1px solid #ccc;
}

.custom-cursor.showing-heightmap .custom-cursor-inner {
    opacity: 1;
}

.custom-cursor.hover-link {
    transform: scale(1.5);
    /* Scale effect for other links if needed, handled via JS transform usually but scale transform on top of translate is tricky in CSS if JS sets translate. Better to use width/height or separate scale element. */
    /* Since JS sets translate on .custom-cursor, verification might fail if I use transform: scale here without preserving translate. 
       Actually JS sets style.left/top in previous code, but in my NEW code I used transform: translate.
       Let's stick to simple width/height change or just border color for hover-link for now to avoid conflict.
    */
    border-color: #555;
    background-color: rgba(0, 0, 0, 0.05);
}

body {
    font-family: 'Inter', 'Zen Kaku Gothic New', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Header - No longer used on home page, kept for project pages if needed */
.site-header {
    padding: 0rem;
    text-align: center;
    background-color: rgba(255, 255, 255, 1.0);
    backdrop-filter: blur(5px);
}

/* Logo container in project grid */
.logo-container {
    width: 100%;
    text-align: center;
    padding: 0.5rem 0 1rem 0;
}

.logo {
    font-size: 4rem;
    font-weight: 3400;
    letter-spacing: 0.05em;
    text-transform: lowercase;
}

.logo img {
    height: 10rem;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Project Grid */
/* Project Grid */
.project-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Center the packed circles */
    align-items: flex-start;
    /* Align to top */
    width: 100%;
    /* Gooey Effect removed */
    gap: var(--grid-gap);
    padding: 20px var(--grid-gap) 0;
    /* Added top padding to clear header */
    max-width: 1200px;
    /* Optional: limit width to prevent too much spreading on large screens */
    margin: 0 auto;
}

.project-item {
    position: relative;
    aspect-ratio: 1 / 1;
    /* border-radius and clip-path removed - using SVG masks instead */
    overflow: visible;
    cursor: pointer;
    flex-shrink: 0;
    /* Prevent shrinking below set width */
    width: 250px;
    /* Default width if not specified inline */
    /* Animation removed for JS physics */
    filter: drop-shadow(2px 0px 3px rgba(0, 0, 0, 0.15));
}

.project-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    /* border-radius removed - using SVG masks instead */
}

/* SVG Clip Path Masks - dynamically applied via JS using CSS custom property */
.project-item img,
.project-item .project-overlay {
    clip-path: var(--mask-path);
}

/* Shadow behind project items */
/* Shadow removed */

/* Hover Effects */
.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project-info {
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.project-item:hover .project-overlay {
    opacity: 1;
}

.project-item:hover .project-info {
    transform: translateY(0);
}

.project-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

.project-date {
    font-size: 0.85rem;
    color: var(--gray-color);
    font-weight: 300;
}

/* Footer / About Section */
.about-section {
    padding: 10rem 2rem 6rem 2rem;
    background-color: var(--bg-color);
    /* border-top removed as requested */
}

.about-container {
    max-width: 900px;
    /* Constrain width for the "chunk" look, slightly wider for row layout */
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    /* Side-by-side */
    align-items: center;
    /* Vertically center text */
    /* Align top */
    justify-content: center;
    gap: 4rem;
    text-align: left;
    /* Reset text align */
}

.profile-image-container {
    width: 100%;
    max-width: 300px;
}

.profile-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Force square aspect ratio */
    object-fit: cover;
    /* Cover */
    border-radius: 0;
    /* Square shape */
    display: block;
    margin: 0 auto;
}

.profile-info-block {
    text-align: left;
    /* Align text to left as per new layout */
    font-size: 0.95rem;
    line-height: 1.8;
}

.profile-role,
.profile-edu {
    margin-bottom: 2rem;
    /* Add spacing between blocks */
}

/* Underline social links */
.profile-contact a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    color: inherit;
}

.profile-details section {
    margin-bottom: 3rem;
}

.profile-details h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
    color: var(--gray-color);
}

.history-list,
.specialization-list {
    list-style: none;
}

.history-list li {
    display: grid;
    grid-template-columns: 100px 1fr;
    margin-bottom: 0.8rem;
    font-size: 0.95rem;
}

.year {
    font-weight: 500;
}

.specialization-list li {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}


/* Responsive */
@media (max-width: 1024px) {
    /* Flexbox handles wrapping naturally */
}

@media (max-width: 768px) {
    /* Flexbox handles wrapping naturally */

    .about-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 3rem;
    }

    .history-list li {
        grid-template-columns: 80px 1fr;
    }

    .year {
        display: block;
        color: var(--gray-color);
        font-size: 0.85rem;
    }

    .site-header {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    /* Flexbox handles wrapping naturally */

    .site-header {
        padding: 1rem;
    }

    .about-section {
        padding: 4rem 1.5rem;
    }

    .history-list li {
        grid-template-columns: 1fr;
        /* Stack year and event */
        margin-bottom: 1rem;
        gap: 0.2rem;
    }

    /* Mobile Project Page Styles */
    img.project-hero {
        aspect-ratio: 1 / 1;
        object-fit: cover;
        height: auto !important;
        /* Override fixed height if any */
    }

    iframe.project-hero {
        aspect-ratio: 16 / 9;
        height: auto !important;
        background: transparent;
        /* Avoid black background */
    }
}

/* Project Detail Styles */
.project-hero {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
    margin-bottom: 4rem;
}

.project-detail-content {
    width: 80%;
    /* Set width to 80% as requested */
    max-width: none;
    /* Remove fixed max-width restriction if desired, or keep it large */
    margin: 0 auto;
    padding: 0 0 4rem;
    /* Adjusted padding since width determines spacing */
}

.detail-image {
    width: 100%;
    height: auto;
    margin-bottom: 3rem;
    display: block;
}

.detail-header {
    margin-bottom: 2rem;
}

.detail-title {
    font-size: 2rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.detail-meta {
    color: var(--gray-color);
    margin-bottom: 2rem;
    font-family: 'Inter', sans-serif;
}

.detail-description {
    font-size: 1rem;
    line-height: 1.8;
    max-width: 100%;
    /* Full width of container */
    color: var(--text-color);
}

.detail-description p {
    margin-bottom: 1.5rem;
    line-height: 1.8;
    text-indent: 1em;
    /* Added indent as requested */
}

.back-link {
    display: inline-block;
    margin-top: 4rem;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    font-size: 0.9rem;
    transition: opacity 0.3s;
}

.back-link:hover {
    opacity: 0.6;
}

/* Mobile Active State (Simulated Hover) */
.project-item.mobile-active .project-overlay {
    opacity: 1;
}

.project-item.mobile-active .project-info {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .project-detail {
        padding: 2rem 1.5rem;
    }

    .detail-title {
        font-size: 1.5rem;
    }

    .detail-image {
        margin-bottom: 2rem;
    }

    /* Square Hero Image on Mobile */
    .project-hero {
        height: 100vw;
        object-fit: cover;
    }

    /* Disable Video Spotlight Overlay on Mobile */
    body.cinema-mode #video-overlay {
        opacity: 0;
    }

    /* Ensure videos don't dim on mobile */
    body.cinema-mode video.hover-sound {
        filter: brightness(1) !important;
    }
}

/* Gallery 2-column grid */
.project-gallery {
    display: grid;
    grid-template-columns: repeat(var(--gallery-cols), 1fr);
    /* Use variable */
    gap: 20px;
    /* Constant gap */
    gap: 20px;
    /* Constant gap */
    margin: 20px 0;
    /* Matching gap for vertical spacing between blocks */
}

/* Ensure adequate spacing from the content above the FIRST gallery block */
.project-awards+.project-gallery,
.project-detail-content>p+.project-gallery {
    margin-top: 3rem;
}

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

.project-gallery img,
.project-gallery video,
.project-gallery iframe {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure centering of history text block but keeping text left-aligned if desired, or center */
.history-list li {
    justify-content: center;
    /* Since we are in a centered flex container, but the LI is a grid. Let's see. */
    /* The LI is grid 100px 1fr. */
    /* If we want the whole block centered, the UL/container should be centered. */
    /* .about-container has align-items: center, so .profile-details is centered. */
    /* .profile-details content text-align is center. */
    /* Grid items justify-start by default. */
}

/* Override history list to look good centered */
.history-list {
    display: inline-block;
    /* Or flex column centered */
    text-align: left;
    /* Keep the time/content relationship clear */
    max-width: 600px;
    margin: 0 auto;
}

/* Awards List */
.project-awards {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
    font-size: 0.95rem;
    color: var(--gray-color);
}

.project-awards li {
    margin-bottom: 0.5rem;
}

.project-awards a {
    text-decoration: underline;
    color: inherit;
    /* Inherit color from parent to match text */
}

/* Project Credits */
.project-credits {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 2rem;
    margin: 2rem 0;
    font-size: 0.95rem;
}

.credit-role {
    color: var(--gray-color);
}

.credit-name {
    color: var(--text-color);
}

/* Video Spotlight Effect */
#video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    z-index: 900;
    transition: opacity 1s ease;
}

body.cinema-mode #video-overlay {
    opacity: 1;
}

/* Default state for videos with sound */
video.hover-sound {
    transition: filter 1s ease, transform 0.3s ease;
    will-change: filter;
}

/* When cinema mode is active, lift all videos but dim them */
body.cinema-mode video.hover-sound {
    position: relative;
    z-index: 901;
    /* Bring above overlay */
    filter: brightness(0.2);
    /* Dim inactive videos */
}

/* The specific active video stays bright */
body.cinema-mode video.hover-sound.video-active {
    z-index: 902;
    filter: brightness(1);
}