/* Photography Page */

.photography-page {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding:
        10rem
        4rem
        8rem;

}


/* Photography Intro */

.photography-intro {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        4rem;

    align-items: end;

    margin-bottom:
        clamp(7rem, 12vw, 12rem);

}


.photography-intro-header h1 {

    margin: 0;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size:
        clamp(3rem, 6vw, 6rem);

    font-weight:
        400;

    line-height:
        0.9;

    letter-spacing:
        -0.06em;

    text-transform:
        uppercase;

}


.photography-intro-text {

    max-width:
        480px;

}


.photography-intro-text p {

    margin: 0;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size:
        clamp(0.9rem, 1.2vw, 1.1rem);

    line-height:
        1.7;

    letter-spacing:
        0.02em;

}


/* Photography Grid */

.photography-projects {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        clamp(1.25rem, 2.5vw, 2.5rem);

    align-items:
        start;

}


/* Photography Project */

.photography-project {

    position: relative;

    display: block;

    min-width: 0;

    color: inherit;

    text-decoration: none;

}


/* Project Number */

.photography-project-number {

    margin-bottom:
        0.5rem;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(3rem, 4vw, 5rem);

    font-style:
        italic;

    font-weight:
        400;

    line-height:
        0.8;

    letter-spacing:
        -0.06em;

    color:
        var(--accent);

    transform:
        translateY(0);

    transition:
        transform 0.8s
        cubic-bezier(.22, 1, .36, 1);

}


/* Project Image */

.photography-project-image {

    width: 100%;

    aspect-ratio: 2 / 5;

    overflow: hidden;

    background: var(--bg);

    transition:
        box-shadow 0.8s
        cubic-bezier(.22, 1, .36, 1);

}


.photography-project-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    filter:
        grayscale(100%);

    transition:
        filter 1s ease,
        transform 1s
        cubic-bezier(.22, 1, .36, 1);

}


/* Project Label */

.photography-project-label {

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        1rem;

    padding:
        0.9rem
        0
        0;

    font-family:
        "IBM Plex Mono",
        monospace;

    font-size:
        clamp(0.7rem, 0.9vw, 0.85rem);

    font-weight:
        400;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;

}


.photography-project-arrow {

    display: inline-block;

    font-size:
        1.1em;

    letter-spacing:
        0;

    transform:
        translateX(0);

    transition:
        transform 0.7s
        cubic-bezier(.22, 1, .36, 1);

}


/* Hover */

.photography-project:hover
.photography-project-image img {

    filter:
        grayscale(0%);

    transform:
        scale(1.025);

}


.photography-project:hover
.photography-project-number {

    transform:
        translateY(-4px);

}


.photography-project:hover
.photography-project-arrow {

    transform:
        translateX(7px);

}


/* Page Entrance */

.photography-page {

    opacity:
        0;

    transform:
        translateY(20px);

}


.photography-page.is-loaded {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 1s ease,
        transform 1s
        cubic-bezier(.22, 1, .36, 1);

}


.photography-intro-header,
.photography-intro-text,
.photography-project {

    opacity:
        0;

    transform:
        translateY(25px);

}


/* Intro Entrance */

.photography-page.is-loaded
.photography-intro-header {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.8s ease 0.1s,
        transform 0.8s
        cubic-bezier(.22, 1, .36, 1) 0.1s;

}


.photography-page.is-loaded
.photography-intro-text {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.8s ease 0.2s,
        transform 0.8s
        cubic-bezier(.22, 1, .36, 1) 0.2s;

}


/* Project Entrance */

.photography-page.is-loaded
.photography-project:nth-child(1) {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.9s ease 0.35s,
        transform 0.9s
        cubic-bezier(.22, 1, .36, 1) 0.35s;

}


.photography-page.is-loaded
.photography-project:nth-child(2) {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.9s ease 0.5s,
        transform 0.9s
        cubic-bezier(.22, 1, .36, 1) 0.5s;

}


.photography-page.is-loaded
.photography-project:nth-child(3) {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.9s ease 0.65s,
        transform 0.9s
        cubic-bezier(.22, 1, .36, 1) 0.65s;

}


.photography-page.is-loaded
.photography-project:nth-child(4) {

    opacity:
        1;

    transform:
        translateY(0);

    transition:
        opacity 0.9s ease 0.8s,
        transform 0.9s
        cubic-bezier(.22, 1, .36, 1) 0.8s;

}