/* =========================================
   JACLYNN WILKIE
   MAIN STYLESHEET
========================================= */


/* =========================================
   COLORS
========================================= */

:root {

    --paper: #eeeae0;

    --frame: #e3ded2;

    --ink: #263f63;

    --light-blue: #7897bd;

    --muted: #64758d;

    --line: rgba(38, 63, 99, 0.18);

}



/* =========================================
   RESET
========================================= */

* {

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    color: var(--ink);

    background-color: var(--paper);

    font-family:
        "Helvetica Neue",
        Helvetica,
        Arial,
        sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.5;


    /* construction paper texture */

    background-image:

        radial-gradient(
            rgba(60, 50, 35, 0.045)
            0.7px,
            transparent 0.7px
        );

    background-size: 5px 5px;

}



/* =========================================
   LINKS
========================================= */

a {

    color: inherit;

    text-decoration: none;

}


a:hover {

    opacity: 0.65;

}



/* =========================================
   HEADER
========================================= */

.header {

    width: 100%;

    height: 70px;

    padding:
        14px
        20px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    position: sticky;

    top: 0;

    z-index: 100;

    background-color:
        rgba(238, 234, 224, 0.94);

    backdrop-filter: blur(3px);

}



/* =========================================
   MOTH
========================================= */

.logo {

    display: block;

    width: 78px;

    height: 52px;

    flex-shrink: 0;

}


.logo img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: left top;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;

}


.logo:hover img {

    opacity: 0.65;

    transform:
        rotate(-3deg)
        scale(1.04);

}



/* =========================================
   NAVIGATION
========================================= */

nav {

    display: flex;

    gap: 30px;

    padding-top: 4px;

}


nav a {

    color: var(--ink);

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 0.13em;

    white-space: nowrap;

    transition:
        opacity 0.2s ease;

}


nav a:hover {

    opacity: 0.5;

}



/* =========================================
   MAIN
========================================= */

main {

    width: 100%;

    display: grid;

    grid-template-columns:
        25% 75%;

    align-items: start;

}



/* =========================================
   NAME AREA
========================================= */

.name-area {

    padding:
        38px
        20px
        100px;

    position: sticky;

    top: 70px;

}



/* =========================================
   LARGE NAME
========================================= */

/*
    FIG-inspired display treatment.

    FIG itself is a distinctive display
    typeface. This fallback gives the name
    a clean geometric character until you
    add your licensed FIG font file.
*/

.name-area h1 {

    margin: 0;

    color: var(--ink);

    font-family:
        "Century Gothic",
        "Avenir Next",
        Avenir,
        "Futura",
        "Trebuchet MS",
        sans-serif;

    font-size:
        clamp(58px, 6.5vw, 100px);

    font-weight: 400;

    line-height: 0.78;

    letter-spacing: -0.075em;

}



/* =========================================
   GALLERY
========================================= */

.gallery {

    width: 100%;

    padding:
        38px
        28px
        150px
        18px;

    display: grid;

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

    column-gap: 32px;

    row-gap: 82px;

    align-items: start;

}



/* =========================================
   PROJECT
========================================= */

.project {

    width: 100%;

    margin: 0;

    text-align: center;

}



/* =========================================
   IMAGE FRAME
========================================= */

.image-box {

    width: 100%;

    aspect-ratio: 1 / 1;

    background: var(--frame);

    border-radius: 7px;

    overflow: hidden;

    box-shadow:
        0 1px 3px
        rgba(0, 0, 0, 0.10);

    transition:
        transform 0.28s ease;

}



/* =========================================
   IMAGE
========================================= */

.image-box img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 5px;

}



/* =========================================
   PHOTO TILT
========================================= */

/*
    1 = LEFT
    2 = RIGHT
    3 = RIGHT
    4 = RIGHT

    Then repeat.
*/


.project:nth-child(4n + 1):hover .image-box {

    transform:
        rotate(-2deg)
        translateY(-2px);

}


.project:nth-child(4n + 2):hover .image-box,
.project:nth-child(4n + 3):hover .image-box,
.project:nth-child(4n + 4):hover .image-box {

    transform:
        rotate(2deg)
        translateY(-2px);

}



/* =========================================
   CAPTIONS
========================================= */

.project figcaption {

    margin-top: 10px;

    color: var(--ink);

    font-size: 12px;

    font-weight: 400;

    line-height: 1.35;

    letter-spacing: 0.045em;

}


.project figcaption span {

    color: var(--muted);

    font-size: 11px;

}



/* =========================================
   ABOUT / CONTACT
========================================= */

.info-section {

    min-height: 75vh;

    padding:
        120px
        28px;

    border-top:
        1px solid var(--line);

    color: var(--ink);

}


.info-section h2 {

    margin:
        0
        0
        60px;

    font-size: 56px;

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.04em;

}


.about-text {

    width: 600px;

    max-width: 100%;

}


.about-text .hey {

    display: block;

    margin-bottom: 18px;

    color: var(--light-blue);

    font-size: 17px;

    font-weight: 400;

    line-height: 1;

    letter-spacing: 0.04em;

}


.about-text p {

    margin:
        0
        0
        25px;

    color: var(--ink);

    font-size: 16px;

    font-weight: 400;

    line-height: 1.75;

    letter-spacing: 0.025em;

}



/* =========================================
   EMAIL
========================================= */

.info-section a {

    color: var(--ink);

    text-decoration: none;

    border-bottom:
        1px solid
        rgba(38, 63, 99, 0.35);

}


.info-section a:hover {

    color: var(--light-blue);

    border-color:
        var(--light-blue);

    opacity: 1;

}



/* =========================================
   CONTACT
========================================= */

.contact-section {

    min-height: 55vh;

}


.contact-section p {

    margin: 0;

    font-size: 16px;

    line-height: 1.7;

}



/* =========================================
   FOOTER
========================================= */

footer {

    display: flex;

    justify-content: space-between;

    padding:
        22px
        28px
        35px;

    border-top:
        1px solid var(--line);

    color: var(--muted);

    font-size: 11px;

    letter-spacing: 0.04em;

}



/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    main {

        grid-template-columns:
            23% 77%;

    }


    .gallery {

        column-gap: 20px;

        row-gap: 65px;

        padding-right: 18px;

    }


    .name-area {

        padding-left: 16px;

    }


    .name-area h1 {

        font-size: 55px;

    }


    nav {

        gap: 20px;

    }

}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .header {

        height: auto;

        min-height: 62px;

        padding:
            13px
            14px;

    }


    .logo {

        width: 65px;

        height: 45px;

    }


    nav {

        flex-direction: column;

        align-items: flex-end;

        gap: 5px;

        padding-top: 2px;

    }


    nav a {

        font-size: 11px;

        letter-spacing: 0.12em;

    }


    main {

        display: block;

    }


    .name-area {

        position: relative;

        top: auto;

        padding:
            48px
            14px
            55px;

    }


    .name-area h1 {

        font-size: 72px;

        line-height: 0.78;

    }


    .gallery {

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

        column-gap: 14px;

        row-gap: 55px;

        padding:
            0
            14px
            100px;

    }


    .project figcaption {

        margin-top: 8px;

        font-size: 11px;

    }


    .project figcaption span {

        font-size: 10px;

    }


    .info-section {

        min-height: auto;

        padding:
            90px
            14px
            120px;

    }


    .info-section h2 {

        margin-bottom: 50px;

        font-size: 52px;

    }


    .about-text {

        width: 100%;

    }


    .about-text .hey {

        font-size: 16px;

    }


    .about-text p {

        font-size: 15px;

        line-height: 1.7;

    }


    .contact-section {

        min-height: 50vh;

    }


    footer {

        padding:
            20px
            14px
            30px;

        flex-direction: column;

        gap: 8px;

    }

}



/* =========================================
   VERY SMALL PHONES
========================================= */

@media (max-width: 430px) {

    .gallery {

        grid-template-columns: 1fr;

        padding-left: 28px;

        padding-right: 28px;

    }


    .name-area h1 {

        font-size: 64px;

    }

}