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

:root {
    --bg: rgb(241, 241, 241);
    --ui: #000000;
    --uifade: rgba(234, 234, 234, 0.8);
    --link: rgb(0, 0, 0);
    --hover: #a126ae;
    --fade: rgba(241, 241, 241, 0.75);
    --text: #000000;
    --subtext: #3e3e3e;
    --accent: rgba(126, 126, 126, 0.5);
    --credits: #090909;
    --credits-sub: rgba(0, 0, 0, 0.5);

    /* --- FIXED GAP VARIABLES (Logical Scaling) --- */
    --gap-small: 20px;   /* Smallest spacing */
    --gap-medium: 40px;  /* Standard spacing (used for H2 margin-bottom) */
    --gap-large: 80px;   /* Large spacing (used for section padding/margins) */
    --gap-huge: 160px;   /* Largest spacing for wide gaps between sections */

    /* --- Hero Specific Variables (Kept as is) --- */
    --hero-padding-top: 15vh;
    --hero-padding-bottom: 200px;


    --logo: url('./assets/kawaiigwen.svg'); /* 👈 Light mode logo source */
    --quotes: url('./assets/quotes.svg'); /* 👈 Dark mode logo source */
}


@media (prefers-color-scheme: dark) {
    :root {
        --bg: rgb(0, 0, 0);
        --ui: #ffffff;
        --uifade: rgba(44, 44, 44, 0.8);
        --link: rgb(255, 255, 255);
        --hover: #a126ae;
        --fade: rgba(0, 0, 0, 0.75);
        --text: #ffffff;
        --subtext: #bcbcbc;
        --accent: rgba(126, 126, 126, 0.5);
        --credits: #ffffff;
        --credits-sub: rgba(255, 255, 255, 0.5);


        --logo: url('./assets/kawaiigwenwhite.svg');
        --quotes: url('./assets/quoteswhite.svg'); /* 👈 Dark mode logo source */
    }
}

body {
    background: var(--bg, #f7f7f7);
    color: var(--text, #333);
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; /* Prevents horizontal scroll from full-width sections */
}

img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}


/* Montserrat */
@font-face {
    font-family: 'Montserrat';
    src: url('./fonts/Montserrat.ttf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Athemi */
@font-face {
    font-family: 'Athemi'; /* Giving it a descriptive name */
    src: url('./fonts/athemi_otf-webfont.woff2') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Aesthetic */
@font-face {
    font-family: 'Aesthetic';
    src: url('./fonts/Aesthetic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Remington Noiseless */
@font-face {
    font-family: 'Remington';
    src: url('./fonts/Remington Noiseless.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/*
 * --------------------------------------
 * 0. SCALABLE CORE (CSS VARIABLES)
 * --------------------------------------
 */


/* Global Content Wrapper */
.content-wrapper {
    max-width: 1400px;
    margin: 0 auto; /* Center the main content */
    padding: 0 20px;
}

/* Parallax optimization (CRITICAL FOR PERFORMANCE) */
[data-speed] {
    transition: transform 0.05s ease-out;
    will-change: transform;
    /* Ensure absolute elements are visibly on the page for parallax to work */
    display: block;
}

/*
 * --------------------------------------
 * SPACER HEADER
 * --------------------------------------
 */
.spacer-header {
    height: 250px; /* Sets the height to 400 pixels */
    width: 100%;
    position: relative; /* Good practice for flow elements using data-speed */
    /* Ensure no background color unless intended */
    background-color: transparent;
}
/*
 * --------------------------------------
 * 1. INTRO SECTION (HERO - PARALLAX)
 * --------------------------------------
 */

.hero {
    margin-top: var(--gap-large);
    /* FIX: Reduced min-height to 100vh to remove initial massive gap */
    min-height: 100vh;
    position: relative; /* CRITICAL: Parent needs position relative */
    padding-top: var(--hero-padding-top);
    padding-bottom: var(--hero-padding-bottom);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Headline */
.headline {
    /* 🔥 CRITICAL FIX: Add position: relative to enable smooth JS transform on flow elements */
    position: relative;

    margin: 0 auto;
    font-size: clamp(8rem, 14vw, 18rem);
    font-weight: lighter;
    text-align: center;
    line-height: 0.9;
    z-index: 10;
    width: 90%;
    color: var(--text);
    font-family: 'Athemi', sans-serif;
    /* FIX: Reduced margin-bottom to rely on static top position of signature */
    margin-bottom: var(--gap-large);
}

.signature {
    /* CRITICAL FIX: Drastically reduced static 'top' to minimize the huge gap
       and rely on JS for smooth parallax movement */
    left: 50%;
    top: 90vh; /* Adjusted to a vh unit for better dynamic positioning */

    /* 🔥 CRITICAL FIX: REMOVE static translateX from CSS. JS handles the full transform. */
    /* transform: translateX(-50%); */

    width: clamp(200px, 25vw, 300px);
    z-index: 0;
    /* FIX: Removed extra bottom padding, rely on intro's top padding */
    margin-bottom: var(--gap-large);
}


/* Intro Text */
.intro {
    /* 🔥 CRITICAL FIX: Add position: relative */
    position: relative;

    margin: 0 auto;
    font-size: clamp(1.2rem, 2vw, 2rem);
    max-width: 800px;
    z-index: 10;
    text-align: center;
    /* FIX: Adjusted padding to be consistent with gap variables */
    padding-top: var(--gap-large);
    padding-bottom: var(--gap-huge);
}

/* General Parallax Item Positioning (Kept absolute for movement) */
.visionportrait, .signature {
    position: absolute; /* CRITICAL: Elements must be positioned absolutely */
    will-change: transform;
}

.visionportrait {
    top: 25vh;
    left: 10%;
    width: clamp(175px, 18vw, 300px);
    height: auto;
    z-index: 5;
}


/* -------------------------------------- */
/* 2. CRAFTS SECTION (Floating Cards - Minimalist) */
/* -------------------------------------- */
.section-crafts {
    padding-top: var(--gap-huge);
    padding-bottom: var(--gap-huge);
    position: relative;
    background-color: transparent;

    /* FULL-WIDTH BREAKOUT TRICK */
    padding-left: 0;
    padding-right: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}

.section-crafts h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: var(--gap-medium);
    text-align: center;
    font-family: 'Aesthetic', sans-serif;
}

/* --- Craft Grid Layout --- */
.craft-grid {
    display: grid;
    /* Set explicit 3x 1fr columns for max size */
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10%;
    margin: 0 auto;
    max-width: 2000px;
    align-items: start;

    /* Re-apply the side padding here to create the gutter inside the full-width section */
    padding-left: 5vw;
    padding-right: 5vw;

    margin-bottom: 60px;
}

/* Work Item Link (Now Borderless) */
.work-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s ease;
    font-family: 'Helvetica Neue', sans-serif;
}

.work-item:hover {
    color: initial;
    transform: translateY(-2px);
    box-shadow: none;
}

/* --- Adjusted Varying Card Sizes --- */
.work-item.visual {
    grid-column: span 1;
    margin-top: 0;
}

.work-item.motion {
    grid-column: span 1;
    margin-top: 20px;
}

.work-item.design {
    grid-column: span 1;
    margin-top: 40px;
}

/* --- Image Styling (B&W to Color Swap) --- */
.work-image-container {
    width: 100%;
    margin-bottom: 10px;
    position: relative;
    padding-top: calc(4 / 3 * 100%);
    overflow: hidden;
}

.work-image-container img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    filter: grayscale(100%);
    transition: filter 0.5s ease, transform 0.5s ease;
}

.work-item:hover .work-image-container img {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* --- Text Content Styling --- */
.work-content {
    padding: 0;
}

.work-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    font-family: 'Aesthetic', sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 5px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.work-item:hover .work-title {
    transform: translateX(10px);
    color: var(--hover);
}


.work-count {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--accent, #7a267e);
    margin-left: 10px;
    transition: color 0.3s ease;
}

.work-description {
    font-size: clamp(0.75rem, 1.5vw, 1rem);
    color: #666;
    text-transform: uppercase;
    text-align: left;
    margin-top: 0;
    transition: transform 0.3s ease;
}

.work-item:hover .work-description {
    transform: translateX(5px);
    color: #333;
}

/* --- NEW: Mission Statement Styling (Class .crafts-description) --- */
.crafts-description {
    width: clamp(40ch, 60%, 75ch);
    margin: 4rem auto 3rem auto;
    font-family: "Helvetica Neue", sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.7;
    text-align: left;
    opacity: 0.9;
    color: var(--text);
}

/* --- Social Call-to-Action Styling --- */
#crafts-footer {
    text-align: center;
    font-size: clamp(1rem, 2vw, 1.5rem);
    font-family: 'Helvetica Neue', sans-serif;
    color: var(--subtext);
    padding: 0 5vw;
    max-width: 1600px;
    margin: 0 auto;
    margin-top: 50px;
}

#crafts-footer a {
    color: inherit;
    text-decoration: none;
    padding-bottom: 12px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: left 95%;
    transition:
            color 0.6s ease-in-out,
            background-size 0.6s ease-in-out;
}

#crafts-footer a:hover {
    color: var(--hover, #555555);
    background-size: 0 2px;
    background-position: right 95%;
}

/* -------------------------------------- */
/* 3. PROCESS SECTION                     */
/* -------------------------------------- */
.process-section {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: var(--gap-medium);
    padding-bottom: var(--gap-huge);
    padding-left: 20px;
    padding-right: 20px;
}

.process-headline {
    position: relative;
    margin: 0 0 var(--gap-medium) 0;
    font-size: clamp(3rem, 7vw, 6rem);
    font-family: 'Aesthetic', sans-serif;
    font-weight: bold;
    line-height: 1.1;
    max-width: 800px;
}


/* --- Quote Wrapper (Positioning Context) --- */
.quote-wrapper {
    position: relative;
    margin: 0 auto;
    /* FIX: Reduced padding from HUGE to LARGE/MEDIUM */
    padding: var(--gap-large) 0;
    overflow: visible;
}

/* --- .quotes (Parallax Target Image) --- */
.quotes {
    content: var(--quotes);
    position: absolute;
    top: 10vh;
    left: -15%;
    width: 600px;
    height: auto;
    z-index: 0;
    opacity: 0.15;
    will-change: transform;
    overflow: hidden;
}

/* --- .quote (The Text) --- */
.quote {
    position: relative;
    z-index: 1;
    font-size: clamp(3rem, 12vw, 16rem);
    font-family: "Athemi", sans-serif;
    font-weight: lighter;
    line-height: 0.9;
    margin: 0 auto;
    text-align: left;

    /* FIX: Reduced excessive vertical margin */
    margin-top: 10vh;
    margin-bottom: 10vh;
}

.process-subline {
    position: relative;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.8;
    max-width: 650px;
    margin-top: var(--gap-large);
    margin-bottom: var(--gap-large);
}

.process-description {
    position: relative;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    line-height: 1.8;
    text-align: right;
    max-width: 900px;
    margin-left: auto;
    margin-right: 0;
}

/* -------------------------------------- */
/* 4. MACINTOSH IMAGE                     */
/* -------------------------------------- */

.macintosh-wrapper {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;

    padding-top: var(--gap-huge);
    padding-bottom: var(--gap-large);
    padding-left: 20px;
    padding-right: 20px;
}

.macintosh-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    padding: 0;
}


/* -------------------------------------- */
/* 5. COMPANIONS/WORKSPACE SECTION        */
/* -------------------------------------- */
.section-workspace {
    padding: var(--gap-huge) 0;
    text-align: center;
}

.workspace-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: lighter;
    margin-bottom: var(--gap-small);
    color: var(--text);
}


/* Styling for the new Apple Ecosystem Description */
.apple-ecosystem-note {
    font-family: 'Helvetica Neue', sans-serif; /* Using a cleaner font for functional description */
    font-size: clamp(1.2rem, 2vw, 2rem);
    line-height: 1.6;
    max-width: 800px;
    margin: var(--gap-small) auto var(--gap-large) auto; /* Adjust vertical spacing */
    color: var(--subtext);
    opacity: 0.85;
}

.apple-ecosystem-note strong {
    color: var(--text);
}


.workspace-subtitle {
    font-family: 'Aesthetic', sans-serif;
    font-size: clamp(3rem, 4vw, 4rem);
    font-weight: 300;
    margin-bottom: var(--gap-large);
    color: var(--subtext);
}

/* --- Companion Block (Flex Layout) --- */
.companion-block {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: left;
    left: 0;
    position: relative;
}

/* --- Image Styling (Pinned Left) --- */
.companion-image {
    flex-shrink: 0;
    width: 55%;
    max-width: 900px;
    left: 0;
    margin: 0;
    padding: 0;
}

.companion-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Text Details (Right Side Content) --- */
.companion-details {
    width: 45%;
    max-width: 600px;
    flex-shrink: 0;
    padding: 50px 30px 50px 80px;
}

.companion-names {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    margin-bottom: var(--gap-small);
}

.name-highlight {
    color: var(--hover, #a126ae);
    font-family: 'Athemi', sans-serif;
    font-size: clamp(4rem, 7vw, 6rem);
    font-weight: lighter;
    margin-bottom: var(--gap-medium);
    display: block;
}

.companion-description {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    color: var(--subtext);
    margin-top: 20px;
}

/* --- Flexibility Note --- */
.flexibility-note {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: clamp(1.2rem, 2.5vw, 2rem);
    margin: 0 auto;
    padding-top: var(--gap-large);
    color: var(--subtext);
    text-align: center;
}

.flexibility-note strong {
    color: var(--text);
}

/* -------------------------------------- */
/* 6. SOFTWARE SKILLS (CHAOTIC CLUSTER) - REVISED */
/* -------------------------------------- */

.section-software {
    padding: var(--gap-huge) 0;
    text-align: center;
}

.software-title {
    font-family: 'Aesthetic', sans-serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    margin-bottom: var(--gap-large);
    color: var(--text);
}

.software-cluster {
    position: relative;
    /* FIX: Reduced height to prevent a huge gap below the elements */
    min-height: 450px;
    max-width: 900px;
    margin: 0 auto;
    overflow: visible;
    text-align: left;
    margin-top: 50px;
}

.app {
    position: absolute;
    white-space: nowrap;
    font-family: 'Athemi', sans-serif;
    color: var(--subtext);
    opacity: 0.8;
    cursor: default;
    transition: transform 0.3s ease, color 0.3s ease, opacity 0.3s ease;
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.app:hover {
    color: var(--hover);
    opacity: 1;
    transform: scale(1.05) rotate(0deg) !important;
}

/* --- NEW: Icon Styling --- */
.app-icon {
    width: 0.5em;
    height: 0.5em;
    margin-right: 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 1.2em;
    flex-shrink: 0;
}

.app-text {
    line-height: 1;
}

/* --- Specific Icon Placement (You MUST set these to your actual icon files) --- */
.icon-affinity { background-image: url('./assets/affinity.svg'); }
.icon-photoshop { background-image: url('./assets/photoshop.svg'); }
.icon-procreate { background-image: url('./assets/procreate.svg'); }
.icon-dreams { background-image: url('./assets/dreams.svg'); }
.icon-spline { background-image: url('./assets/spline.svg'); }
.icon-finalcut { background-image: url('./assets/finalcut.svg'); }
.icon-illustrator { background-image: url('./assets/illustrator.svg'); }


/* --- Positioning and Styling Individual Apps (CRAMPED CHAOS) --- */
.app-affinity {
    font-size: clamp(2.5rem, 4vw, 5rem);
    top: 0;
    left: 15%;
    color: var(--text);
    transform: rotate(-10deg);
}

.app-photoshop {
    font-size: clamp(3rem, 5vw, 6rem);
    top: 50px;
    right: 10%;
    color: var(--text);
    transform: rotate(5deg);
}

.app-procreate {
    font-size: clamp(2rem, 3vw, 4rem);
    top: 100px;
    left: 40%;
    transform: rotate(15deg);
}

.app-dreams {
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    top: 150px;
    left: 5%;
    transform: rotate(-15deg);
}

.app-spline {
    font-size: clamp(3rem, 4.5vw, 5rem);
    top: 200px;
    left: 25%;
    color: var(--accent);
    transform: rotate(10deg);
}

.app-finalcut {
    font-size: clamp(2.5rem, 4vw, 5rem);
    top: 250px;
    right: 5%;
    transform: rotate(-8deg);
}

.app-illustrator {
    font-size: clamp(1.8rem, 3vw, 3.5rem);
    top: 300px;
    left: 15%;
    transform: rotate(5deg);
}

.app-designer {
    font-size: clamp(2.2rem, 3.5vw, 4.2rem);
    top: 350px;
    right: 25%;
    transform: rotate(-5deg);
}

.app-indesign {
    font-size: clamp(1.5rem, 2vw, 2.5rem);
    top: 380px;
    left: 45%;
    transform: rotate(20deg);
}

.app-premiere {
    font-size: clamp(4rem, 6vw, 7rem);
    top: 450px;
    right: 0;
    transform: rotate(-12deg);
}

/* --- NEW: Centered "and more..." text below the cluster --- */
.app-more-centered {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.2rem, 2vw, 2rem);
    font-weight: 300;
    text-align: center;
    margin-top: var(--gap-medium);
    color: var(--subtext);
}

/* --- 7. SOFTWARE PROFICIENCY TEXT --- */
.software-proficiency-text {
    max-width: 900px;
    margin: var(--gap-huge) auto 0 auto;
    text-align: left;
    font-family: 'Helvetica Neue', sans-serif;
    line-height: 1.6;
}

.proficiency-title {
    font-family: 'Aesthetic', sans-serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    margin-bottom: var(--gap-medium);
    text-align: center;
}

.proficiency-subtitle {
    font-family: 'Athemi', sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-top: var(--gap-large);
    margin-bottom: var(--gap-small);
}

.proficiency-details p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    margin-bottom: 1.5rem;
}

.proficiency-details strong {
    color: var(--text);
}

/* -------------------------------------- */
/* 8. MEDIA QUERIES (Mobile Optimization) */
/* -------------------------------------- */

@media (max-width: 800px) {
    /* --- VARIABLE OVERRIDES FOR MOBILE --- */
    :root {
        --gap-small: 20px;
        --gap-medium: 30px;
        --gap-large: 50px;
        --gap-huge: 80px;

        --hero-padding-top: 10vh;
        --hero-padding-bottom: 50px;
    }

    .content-wrapper {
        padding: 0 10px;
    }

    /* --- HERO --- */
    .hero {
        min-height: 80vh;
    }

    .headline {
        margin-bottom: var(--gap-large);
    }

    .signature {
        /* Reset top/position for mobile flow or smaller viewport */
        top: 450px;
        width: clamp(150px, 40vw, 200px);
    }

    .visionportrait {
        /* Adjust image position for smaller screens */
        top: 15vh;
        left: 5%;
        width: clamp(120px, 20vw, 180px);
    }

    .intro {
        /* Ensure intro text is contained */
        padding-top: var(--gap-large);
        padding-bottom: var(--gap-large);
    }


    /* --- CRAFTS SECTION (Grid) --- */
    .craft-grid {
        /* FIX: Stack items vertically (single column) */
        grid-template-columns: 1fr;
        gap: var(--gap-large); /* Vertical gap between stacked items */
        padding-left: var(--gap-medium);
        padding-right: var(--gap-medium);
        max-width: 600px;
    }

    /* Remove vertical offset for stacked items */
    .work-item.motion,
    .work-item.design {
        margin-top: 0;
    }

    /* --- PROCESS SECTION --- */
    .quote {
        font-size: clamp(3rem, 15vw, 8rem);
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .quotes {
        /* Push the background quotes image further left to stay hidden */
        left: -50%;
    }

    .process-description {
        /* Center text on mobile or align left */
        text-align: left;
        margin-left: 0;
    }


    /* --- COMPANIONS (Workspace) --- */
    .companion-block {
        /* FIX: Stack image and text vertically */
        flex-direction: column;
        gap: var(--gap-medium);
    }

    .companion-image {
        /* Image should take most of the screen width */
        width: 90%;
        max-width: none;
    }

    .companion-details {
        /* Text should also take most of the screen width and center text */
        width: 90%;
        max-width: none;
        text-align: center;
        /* Reset padding for column layout */
        padding: var(--gap-medium) 0;
    }

    .name-highlight {
        /* Ensure highlight text is centered when container is centered */
        display: inline-block;
    }

    /* --- SOFTWARE CLUSTER --- */
    .software-cluster {
        /* FIX: Revert to normal flow and stack elements */
        position: static;
        min-height: auto;
        padding: 0 20px;
    }

    .app {
        /* Revert to flow and stack vertically */
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        display: flex; /* Keep flex to align icon and text */
        justify-content: flex-start; /* Align text to the left */
        text-align: left;
        margin: 10px 0;
        font-size: 1.5rem !important;
        opacity: 1;
    }

    .app-icon {
        /* Adjust icon size for mobile stack */
        width: 1.5rem;
        height: 1.5rem;
        font-size: 1.5rem;
        margin-right: 10px;
    }

    /* --- PROFICIENCY TEXT --- */
    .software-proficiency-text {
        padding: 0 20px;
        margin-top: var(--gap-large)
    }
}