@charset "UTF-8";

/* =====================================================
   INTRO
===================================================== */
.intro-section {
    padding: 2rem var(--m) 1.5rem;
}

.intro-text {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.75rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    /* Exactly half the grid width — aligns with left column */
    width: calc(50% - var(--gap) / 2);
}

.intro-text strong { font-weight: 700; }

/* Blinking cursor inline with text */
.intro-cursor {
    display: inline-block;
    width: 1.5px;
    height: 0.9em;
    background: var(--ink);
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.7s step-end infinite;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* =====================================================
   WORK SECTION
===================================================== */
.work-section {
    padding: 5rem var(--m);
    padding-left: 10rem;
    padding-right: 10rem;
}

.project-grid {
    display: flex;
    gap: var(--gap);
    align-items: flex-start;
}

/* =====================================================
   COLUMN
===================================================== */
.project-col {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

.col-inner {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.project-item {
    display: block;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.project-item[data-pos="bottom"] {
    overflow: hidden;
}

.bottom-inner {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* =====================================================
   PROJECT TITLES
===================================================== */
.project-title-display {
    font-family: var(--font-display);
    font-size: 5rem;
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.04em;
    color: var(--ink);
    padding: 0 0 0px;
    display: block;
    white-space: nowrap;
    flex-shrink: 0;
}

.project-col.left  .project-title-display { text-align: left; }
.project-col.right .project-title-display { text-align: right; }

/* =====================================================
   PROJECT IMAGE
===================================================== */
.project-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-color: #aaa;
    display: block;
    flex-shrink: 0;
    transition: filter 0.4s ease;
}

.project-item:hover .project-image { filter: brightness(0.92); }

/* =====================================================
   ILLUSTRATION BANNER
===================================================== */
.illustration-banner {
    margin: 50px var(--m) 0;
}

.illustration-banner a { display: block; }

.banner-image {
    width: 100%;
    aspect-ratio: 16 / 5;
    background-size: cover;
    background-position: center;
    background-color: #d0cfcd;
    display: block;
    transition: filter 0.3s ease;
}

.illustration-banner a:hover .banner-image { filter: brightness(0.88); }

/* =====================================================
   FOOTER
===================================================== */
.site-footer {
    margin-top: 2rem;
}