@custom-media --pointer-fine (pointer: fine);
@custom-media --tablet-up (min-width: 1024px);
@custom-media --tablet-down (max-width: 1024px);
@custom-media --phone-up (min-width: 440px);
@custom-media --phone-down (max-width: 440px);

@media (min-width:1024px) {
    .AboutSectionIntroduction-module-scss-module__zcVEiq__container {
        padding-bottom: 240px
    }
}

@media (max-width:1024px) {
    .AboutSectionIntroduction-module-scss-module__zcVEiq__container {
        padding-bottom: 120px
    }
}

.AboutSectionIntroduction-module-scss-module__zcVEiq__heading,
.AboutSectionIntroduction-module-scss-module__zcVEiq__image,
.AboutSectionIntroduction-module-scss-module__zcVEiq__caption {
    margin-left: var(--inset);
    margin-right: var(--inset)
}

@media (min-width:1024px) {

    .AboutSectionIntroduction-module-scss-module__zcVEiq__heading,
    .AboutSectionIntroduction-module-scss-module__zcVEiq__image,
    .AboutSectionIntroduction-module-scss-module__zcVEiq__caption {
        padding-left: calc(var(--column)*17 + var(--gutter)*0);
        padding-right: calc(var(--column)*2 + var(--gutter)*0)
    }
}

@media (max-width:1024px) {

    .AboutSectionIntroduction-module-scss-module__zcVEiq__heading,
    .AboutSectionIntroduction-module-scss-module__zcVEiq__image,
    .AboutSectionIntroduction-module-scss-module__zcVEiq__caption {
        padding-right: 120px
    }
}

.AboutSectionIntroduction-module-scss-module__zcVEiq__divider {
    /* border-bottom: 1px solid var(--light-grey); */
    margin-bottom: 16px;
    padding-bottom: 16px
}

.AboutSectionIntroduction-module-scss-module__zcVEiq__caption {
    padding-top: 16px
}

@media (min-width:1024px) {
    .AboutSectionIntroduction-module-scss-module__zcVEiq__caption {
        padding-right: calc(var(--column)*3 + var(--gutter)*2)
    }
}

@custom-media --pointer-fine (pointer: fine);
@custom-media --tablet-up (min-width: 1024px);
@custom-media --tablet-down (max-width: 1024px);
@custom-media --phone-up (min-width: 440px);
@custom-media --phone-down (max-width: 440px);

.AboutSectionGallery-module-scss-module__RrQtgq__gallery {
    /* border-bottom: 1px solid var(--light-grey); */
    padding-top: 16px;
    padding-bottom: 12px
}

.AboutSectionGallery-module-scss-module__RrQtgq__container {
    margin-left: var(--inset);
    margin-right: var(--inset);
    gap: 0 var(--gutter);
    display: grid;
}

@media (min-width:1024px) {
    .AboutSectionGallery-module-scss-module__RrQtgq__container {
        padding-top: 12px;
        grid-template-columns: calc(var(--column)*17 + var(--gutter)*-1)1fr;
    }
}

.AboutSectionGallery-module-scss-module__RrQtgq__details {
    flex-direction: column;
    display: flex;
    font-family: var(--font-family-mono);
}

@media (min-width:1024px) {
    .AboutSectionGallery-module-scss-module__RrQtgq__details {
        padding-right: calc(var(--column)*3 + var(--gutter)*0)
    }
}

@media (max-width:1024px) {
    .AboutSectionGallery-module-scss-module__RrQtgq__details {
        padding-bottom: 100px
    }
}

.AboutSectionGallery-module-scss-module__RrQtgq__caption {
    padding-top: .5em
}

.AboutSectionGallery-module-scss-module__RrQtgq__slideshow {
    position: relative
}

.AboutSectionGallery-module-scss-module__RrQtgq__pager {
    margin-top: auto;
    margin-bottom: 0
}

@media (max-width:1024px) {
    .AboutSectionGallery-module-scss-module__RrQtgq__pager {
        order: -1;
        padding-top: 16px;
        padding-bottom: 40px
    }
}

.ProjectRelated-module-scss-module__oVuQQq__container h2 {
    display: block;
    padding-bottom: 8px;
}

@media (max-width: 1023px) {
    .ProjectRelated-module-scss-module__oVuQQq__container {
        padding-bottom: 12px;
    }
}

.hero {
    padding-right: 12px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    /* min-height: 90vh; */
    /* border-bottom: 1px solid var(--light-grey); */
    opacity: 0;
    animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@media (max-width: 7612px) {
    .hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

.hero__image-col {
    position: relative;
    overflow: hidden;
    background: #d9d0c7;
    min-height: 100vh;
}


@media (max-width: 7612px) {
    .hero__image-col {
        min-height: 70vw;
    }
}

.hero__image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;

}

.hero__text-col {
    /* display: flex; */
    flex-direction: column;
    justify-content: space-between;
    padding-top: var(--inset);
    padding-left: var(--inset);
}

@media (max-width: 7612px) {
    .hero__text-col {
        border-left: none;
        gap: 40px;
    }
}

.hero__label {
    color: var(--red);
    font-family: var(--font-family-mono);
    padding-bottom: 12px;
}

.hero__bio {
    font-family: var(--font-family-mono);
    letter-spacing: 0em;
    text-align: left;
    align-self: flex-end;
    padding-top: 0;
    padding-bottom: 15px;
}

@media (max-width: 7612px) {
    .hero__bio {
        text-align: left;
        align-self: auto;
        max-width: none;
    }
}

.hero__bio p+p {
    margin-top: 12px;
}

.hero__bottom {
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.hero__currently {
    color: var(--pink);
}

.hero__currently strong {
    color: var(--red);
}

.hero__index-label {
    align-self: flex-end;
    margin-top: auto;
}

@media (max-width: 7612px) {
    .hero__index-label {
        display: none;
    }
}

.HomeLanding-module-scss-module__LwAsna__introduction2 {
    margin-left: var(--inset);
    margin-right: 0%;  /* match left inset */
    display: flex;
}

/* ─── Info Strip ─── */
.info-model {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 112px;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

@media (max-width: 7612px) {
    .info-model {
        grid-template-columns: 1fr 1fr;
    }
}

.info-strip__cell {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}


@media (max-width: 7612px) {
    .info-strip__cell:nth-child(2) {
        border-right: none;
    }

    .info-strip__cell:last-child {
        grid-column: 1 / -1;
        border-right: none;
    }
}

.info-strip__key {
    color: var(--red);
    font-family: var(--font-family-mono);
}

.info-strip__val {
    color: var(--black);
}

.contact-section {
    display: grid;
    gap: 0 var(--gutter);
    opacity: 0;
    animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
    width: 50vw;
}

@media (max-width: 7612px) {
    .contact-section {
        grid-template-columns: 1fr;
    }
}

.contact-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-left: 12px;
}

@media (max-width: 1024px) {
    .contact-links {
        grid-template-columns: 1fr;
    }
}

@media (max-width:1024px) {
    .contact-links {
        grid-template-columns: 1fr;
    }
}

.contact-link-item {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    position: relative;
    color: var(--red);
}

.contact-link-item:hover {
    z-index: 1;
}

.contact-link-item:hover .contact-link-item__key,
.contact-link-item:hover .contact-link-item__val {
    color: var(--pink);
}

.contact-link-item__key {
    color: var(--red);
    transition: color 0.2s ease;
}

.contact-link-item:hover .contact-link-item__key {
    color: var(--pink);
}

.contact-link-item__arrow {
    margin-top: auto;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-link-item:hover .contact-link-item__arrow {
    opacity: 1;
    color: var(--pink);
    transform: translateX(0);
}

.footer-note {
    padding: 32px var(--inset);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    opacity: 0;
    animation: fadeUp 0.6s ease 0.75s forwards;
}

.footer-note a {
    color: var(--red);
}

.footer-note a:hover {
    color: var(--red);
}

/* ─── Animations ─── */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Vertical Label ─── */
.vertical-label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 9rem;
    letter-spacing: .16em;
    color: #ccc;
    font-family: var(--font-family-mono);
}

/* ─── Divider line accent ─── */
.section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px var(--inset);
    /* border-bottom: 1px solid var(--light-grey); */
}

.section-label__text {
    color: var(--red);
    font-family: var(--font-family-mono);
    /* white-space: nowrap; */
}

.section-label__line {
    flex: 1;
    height: 1px;
    /* background: var(--light-grey); */
}

.section-label__num {
    /* letter-spacing: .1em; */
    color: #ccc;
    font-family: var(--font-family-mono);
}

.FooterLayout-module-scss-module__Xbw8wq__copyright2 {
color: var(--black);
}

.playground-section {
    padding-top: 200px;
    padding-left: 12px;
    padding-right: 12px;
}

.playground-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--light-grey);
    margin-bottom: 16px;
}

.playground-header__label {
    font-family: var(--font-family-mono);
    text-transform: uppercase;
    color: var(--red);
}

.playground-header__link {
    font-family: var(--font-family-mono);
    color: var(--lightgrey);
    transition: color 0.2s ease;
}

.playground-header__link:hover {
    color: var(--foreground);
}

.playground-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(7, 90px);
    gap: 12px;
}

.playground-item:nth-child(1) {
    grid-column: 1 / 4;
    grid-row: 2 / 6;
}

.playground-item:nth-child(2) {
    grid-column: 4 / 7;
    grid-row: 1 / 4;
}

.playground-item:nth-child(3) {
    grid-column: 7 / 10;
    grid-row: 1 / 5;
}

.playground-item:nth-child(4) {
    grid-column: 10 / 13;
    grid-row: 2 / 4;
}

.playground-item:nth-child(5) {
    grid-column: 4 / 6;
    grid-row: 4 / 7;
}

.playground-item:nth-child(6) {
    grid-column: 6 / 10;
    grid-row: 5 / 8;
}

.playground-item:nth-child(7) {
    grid-column: 10 / 13;
    grid-row: 4 / 7;
}


.playground-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* remove any aspect-ratio overrides */
    aspect-ratio: unset;
}