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

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

html {
    scroll-behavior: smooth;
}

body {
    background: #f7f7f4;
    color: #111111;

    font-family:
        "EB Garamond",
        "Times New Roman",
        Times,
        serif;

    line-height: 1.2;
}

img {
    display: block;

    width: 100%;
}

a {
    color: inherit;

    text-decoration: none;
}


/* =================================
   GLOBAL SPACING
================================= */

:root {
    --photo-gap: 2.25vw;
}


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

.site-header {
    width: 100%;

    padding: 25px 3.5vw;

    display: flex;

    justify-content: space-between;

    align-items: baseline;
}

.site-heading {
    display: flex;

    align-items: baseline;

    gap: 0.55rem;

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

    font-size: 0.94rem;

    letter-spacing: 0.075em;

    text-transform: lowercase;
}

.separator {
    opacity: 0.5;
}

.navigation {
    display: flex;

    gap: 1.9rem;

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

    font-size: 0.94rem;

    letter-spacing: 0.075em;

    text-transform: lowercase;
}

.site-heading a,
.navigation a {
    transition: opacity 0.25s ease;
}

.site-heading a:hover,
.navigation a:hover {
    opacity: 0.45;
}


/* =================================
   HOMEPAGE — GRID
================================= */

.visual-grid {
    padding: 5vh 3.5vw 7vh;

    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(0, 0.82fr);

    column-gap: var(--photo-gap);

    align-items: start;

    overflow: visible;
}

.left-column {
    width: 100%;
}

.right-column {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* =================================
   HOMEPAGE — TITLE
================================= */

.hero-title {
    padding-top: 2vh;
}

.hero-title h1 {
    font-size: clamp(4rem, 7.7vw, 8.3rem);

    font-weight: 400;

    line-height: 0.92;

    letter-spacing: -0.01em;

    white-space: nowrap;
}

.hero-title p {
    margin-top: 3vh;

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

    font-size: clamp(1.08rem, 1.45vw, 1.35rem);

    letter-spacing: 0.05em;

    text-transform: lowercase;
}


/* =================================
   HOMEPAGE — MUSIC PHOTO
================================= */

.music-photo {
    width: 100%;

    margin-top: 6.5vh;

    position: relative;

    z-index: 1;
}

.music-photo img {
    width: 100%;

    aspect-ratio: 1.62 / 1;

    object-fit: cover;

    object-position: center 42%;
}


/* =================================
   HOMEPAGE — CANDID PHOTO
================================= */

.candid-photo {
    width: 96%;

    height: 69vh;

    min-height: 565px;

    margin-top: 2vh;

    position: relative;

    z-index: 3;
}

.candid-photo img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: 64% center;
}


/* =================================
   HOMEPAGE — ARCHITECTURE PHOTO
================================= */

.architecture-photo {
    width: 138%;

    margin-top: var(--photo-gap);

    transform: translateX(-46%);

    position: relative;

    z-index: 2;
}

.architecture-photo img {
    width: 100%;

    aspect-ratio: 1.78 / 1;

    object-fit: cover;

    object-position: center 27%;
}


/* =================================
   HOMEPAGE — LINKS
================================= */

.home-links {
    border-top: 1px solid #111111;

    padding: 1vh 3.5vw 9vh;
}

.large-link {
    display: block;

    padding: 2.5vh 0;

    border-bottom: 1px solid #c8c8c3;

    font-size: clamp(3.5rem, 8vw, 8rem);

    line-height: 0.9;

    letter-spacing: -0.025em;

    transition:
        padding-left 0.35s ease,
        opacity 0.35s ease;
}

.large-link:hover {
    padding-left: 2vw;
}


/* =================================
   ABOUT — MAIN
================================= */

.about-main {
    padding: 3vh 3.5vw 10vh;
}


/* =================================
   ABOUT — HERO
================================= */

.about-hero {
    position: relative;

    min-height: 100vh;

    padding-bottom: 10vh;
}

.about-title {
    position: relative;

    z-index: 5;

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

    font-weight: 400;

    line-height: 0.85;

    letter-spacing: -0.025em;

    margin-bottom: 5vh;
}


/* =================================
   ABOUT — WTC PHOTO
================================= */

.about-photo-primary {
    position: absolute;

    top: 13vh;

    right: 0;

    width: 84%;

    height: 78vh;

    overflow: hidden;

    z-index: 1;
}

.about-photo-primary img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center center;

    opacity: 0.94;
}

.about-photo-primary::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(247, 247, 244, 0.98) 0%,
            rgba(247, 247, 244, 0.94) 15%,
            rgba(247, 247, 244, 0.78) 32%,
            rgba(247, 247, 244, 0.48) 52%,
            rgba(247, 247, 244, 0.16) 73%,
            rgba(247, 247, 244, 0.02) 100%
        );
}

.about-photo-primary::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(247, 247, 244, 0.00) 62%,
            rgba(247, 247, 244, 0.12) 74%,
            rgba(247, 247, 244, 0.55) 90%,
            rgba(247, 247, 244, 1.00) 100%
        );
}


/* =================================
   ABOUT — BIO
================================= */

.about-bio {
    position: relative;

    z-index: 5;

    width: min(760px, 57vw);

    margin-top: 13vh;

    margin-left: 2vw;
}

.about-bio p {
    font-size: clamp(1.25rem, 1.8vw, 1.65rem);

    line-height: 1.35;
}

.about-bio .about-intro {
    font-size: clamp(1.8rem, 2.8vw, 2.75rem);

    line-height: 1.12;

    letter-spacing: -0.018em;

    margin-bottom: 4vh;
}

.cv-link {
    display: inline-block;

    position: relative;

    z-index: 10;

    margin-top: 4vh;

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

    font-size: 0.9rem;

    letter-spacing: 0.08em;

    text-transform: lowercase;

    border-bottom: 1px solid #111111;

    padding-bottom: 3px;
}

.cv-link:hover {
    color: #24364b;
}


/* =================================
   ABOUT — CV AREA
================================= */

.about-lower {
    position: relative;

    padding-top: 3vh;

    padding-bottom: 5vh;
}

.cv-section {
    width: 70%;

    max-width: 900px;

    margin: 0 auto;

    position: relative;

    z-index: 4;
}

.cv-heading {
    display: flex;

    justify-content: space-between;

    align-items: baseline;

    margin-bottom: 2vh;

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

    font-size: 0.82rem;

    letter-spacing: 0.075em;

    text-transform: lowercase;
}

.cv-heading a {
    border-bottom: 1px solid #111111;

    padding-bottom: 2px;
}

.cv-heading a:hover {
    color: #24364b;
}


/* =================================
   ABOUT — SCROLLABLE CV
================================= */

.cv-pages {
    width: 100%;

    height: 650px;

    overflow-y: auto;

    overflow-x: hidden;

    padding: 20px;

    background: #deded9;

    border: 1px solid #bcbcb6;

    scrollbar-width: thin;
}

.cv-page {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 18px;
}

.cv-page:last-child {
    margin-bottom: 0;
}

.cv-page canvas {
    display: block;

    max-width: 100%;

    height: auto;

    background: #ffffff;

    box-shadow:
        0 1px 5px rgba(0, 0, 0, 0.16);
}

.cv-loading,
.cv-error {
    padding: 5vh 2vw;

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

    font-size: 0.8rem;

    letter-spacing: 0.06em;

    text-transform: lowercase;
}

.cv-error a {
    display: inline-block;

    margin-top: 2vh;

    border-bottom: 1px solid #111111;
}


/* =================================
   PROJECTS — MAIN
================================= */

.projects-main {
    padding: 4vh 5vw 12vh;
}

.projects-header,
.projects-list,
.projects-future {
    width: 100%;

    max-width: 1220px;

    margin-left: auto;

    margin-right: auto;
}


/* =================================
   PROJECTS — HEADER
================================= */

.projects-header {
    padding-top: 2vh;

    padding-bottom: 5vh;
}

.projects-header h1 {
    font-size: clamp(5rem, 10vw, 10.5rem);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.03em;
}

.projects-header-note {
    margin-top: 7vh;

    display: flex;

    align-items: baseline;

    justify-content: flex-start;

    gap: 1.5rem;

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

    font-size: 0.78rem;

    letter-spacing: 0.09em;

    text-transform: lowercase;
}


/* =================================
   PROJECTS — LIST
================================= */

.projects-list {
    border-top: 1px solid #111111;
}

.project {
    display: block;

    width: 100%;

    padding: 6vh 0;

    border-bottom: 1px solid #bdbdb7;
}


/* =================================
   PROJECTS — FEATURED
================================= */

.project-featured-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, 0.75fr);

    column-gap: 4vw;

    align-items: center;
}


/* =================================
   PROJECTS — TITLE
================================= */

.project-main {
    width: 100%;
}

.project-main h2 {
    width: 100%;

    max-width: 1050px;

    font-size: clamp(3.2rem, 5.6vw, 6.5rem);

    font-weight: 400;

    line-height: 0.93;

    letter-spacing: -0.025em;

    transition: transform 0.35s ease;
}

.project:hover .project-main h2 {
    transform: translateX(0.6vw);
}


/* =================================
   PROJECTS — META
================================= */

.project-meta {
    margin-top: 2.7vh;

    display: flex;

    align-items: baseline;

    flex-wrap: wrap;

    gap: 0.7rem 1.7rem;

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

    font-size: 0.76rem;

    letter-spacing: 0.075em;

    text-transform: lowercase;

    font-style: normal;
}


/* =================================
   PROJECTS — DESCRIPTION
================================= */

.project-description {
    max-width: 680px;

    margin-top: 2.5vh;

    font-size: clamp(1.05rem, 1.35vw, 1.3rem);

    line-height: 1.38;

    font-style: italic;

    color: #323230;
}

.project-description-wide {
    max-width: none;

    width: 100%;

    white-space: nowrap;
}


/* =================================
   PROJECTS — LINKS
================================= */

.project-media {
    margin-top: 3vh;

    display: flex;

    align-items: baseline;

    flex-direction: row;

    flex-wrap: wrap;

    gap: 1.7rem;

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

    font-size: 0.74rem;

    letter-spacing: 0.075em;

    text-transform: lowercase;

    font-style: normal;
}

.project-link {
    display: inline-block;

    border-bottom: 1px solid #111111;

    padding-bottom: 3px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.project-link:hover {
    color: #24364b;

    transform: translateX(3px);
}


/* =================================
   PROJECTS — VIDEO
================================= */

.project-video-block {
    width: 100%;

    align-self: center;
}

.youtube-player {
    width: 100%;

    aspect-ratio: 16 / 9;

    background: #111111;

    overflow: hidden;
}

.youtube-player iframe {
    display: block;

    width: 100%;

    height: 100%;

    border: 0;
}

.video-caption {
    display: inline-block;

    margin-top: 1rem;

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

    font-size: 0.72rem;

    letter-spacing: 0.075em;

    text-transform: lowercase;

    border-bottom: 1px solid #111111;

    padding-bottom: 3px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.video-caption:hover {
    color: #24364b;

    transform: translateX(3px);
}


/* =================================
   PROJECTS — END NOTE
================================= */

.projects-future {
    margin-top: 8vh;

    text-align: right;
}

.projects-future p {
    font-size: clamp(2rem, 4vw, 4.5rem);

    line-height: 1;

    letter-spacing: -0.02em;

    color: #54544f;
}


/* =================================
   CONTACT — MAIN
================================= */

.contact-main {
    padding: 4vh 5vw 12vh;
}

.contact-header,
.contact-content {
    width: 100%;

    max-width: 1220px;

    margin-left: auto;

    margin-right: auto;
}


/* =================================
   CONTACT — HEADER
================================= */

.contact-header {
    padding-top: 2vh;

    padding-bottom: 5vh;
}

.contact-header h1 {
    font-size: clamp(5rem, 10vw, 10.5rem);

    font-weight: 400;

    line-height: 0.9;

    letter-spacing: -0.03em;
}

.contact-header-note {
    margin-top: 7vh;

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

    font-size: 0.78rem;

    letter-spacing: 0.09em;

    text-transform: lowercase;
}


/* =================================
   CONTACT — CONTENT
================================= */

.contact-content {
    border-top: 1px solid #111111;

    padding-top: 6vh;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    column-gap: 6vw;

    align-items: start;
}


/* =================================
   CONTACT — INTRO
================================= */

.contact-form-area {
    width: 100%;
}

.contact-intro {
    max-width: 560px;

    margin-bottom: 6vh;

    font-size: clamp(2.2rem, 3.2vw, 3.4rem);

    line-height: 1.05;

    letter-spacing: -0.02em;
}


/* =================================
   CONTACT — FORM
================================= */

.contact-form {
    width: 100%;
}

.form-field {
    width: 100%;

    margin-bottom: 4vh;
}

.form-field label {
    display: block;

    margin-bottom: 1rem;

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

    font-size: 0.74rem;

    letter-spacing: 0.09em;

    text-transform: lowercase;
}

.form-field input,
.form-field textarea {
    display: block;

    width: 100%;

    border: 0;

    border-bottom: 1px solid #8d8d88;

    border-radius: 0;

    outline: none;

    padding: 0.4rem 0 0.8rem;

    background: transparent;

    color: #111111;

    font-family:
        "EB Garamond",
        "Times New Roman",
        Times,
        serif;

    font-size: 1.4rem;

    line-height: 1.35;

    transition: border-color 0.25s ease;

    -webkit-appearance: none;

    appearance: none;
}

.form-field textarea {
    min-height: 165px;

    resize: vertical;
}

.form-field input:focus,
.form-field textarea:focus {
    border-bottom-color: #111111;
}


/* =================================
   CONTACT — BUTTON
================================= */

.contact-form button {
    display: inline-block;

    appearance: none;

    border: 0;

    border-bottom: 1px solid #111111;

    border-radius: 0;

    padding: 0 0 4px;

    background: transparent;

    color: #111111;

    cursor: pointer;

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

    font-size: 0.78rem;

    letter-spacing: 0.09em;

    text-transform: lowercase;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.contact-form button:hover {
    color: #24364b;

    transform: translateX(3px);
}


/* =================================
   CONTACT — PHOTO COLLAGE
================================= */

.contact-images {
    --contact-gap: 1.4rem;

    width: 100%;

    position: relative;

    min-height: 820px;
}


/* =================================
   CONTACT — PRIMARY / TENNIS COURTS
================================= */

.contact-photo-primary {
    width: 88%;

    margin-left: auto;

    position: relative;

    z-index: 1;
}

.contact-photo-primary img {
    width: 100%;

    height: 385px;

    object-fit: cover;

    object-position: center 48%;
}


/* =================================
   CONTACT — SUBWAY
================================= */

.contact-photo-secondary {
    width: 40%;

    position: absolute;

    left: 0;

    top: 300px;

    z-index: 3;
}

.contact-photo-secondary img {
    width: 100%;

    height: 280px;

    object-fit: cover;

    object-position: center center;
}


/* =================================
   CONTACT — PARTY
================================= */

.contact-photo-tertiary {
    width: 55%;

    position: absolute;

    left: calc(40% + var(--contact-gap));

    top: calc(385px + var(--contact-gap));

    z-index: 2;
}

.contact-photo-tertiary img {
    width: 100%;

    height: 345px;

    object-fit: cover;

    object-position: center center;
}


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

footer {
    border-top: 1px solid #111111;

    padding: 24px 3.5vw 32px;

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

    font-size: 0.78rem;

    letter-spacing: 0.08em;

    text-transform: lowercase;

    color: #555555;
}


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

@media (max-width: 700px) {

    :root {
        --photo-gap: 2.5vw;
    }


    /* HEADER */

    .site-header {
        padding: 20px;

        align-items: flex-start;
    }

    .site-heading {
        font-size: 0.67rem;

        gap: 0.3rem;
    }

    .navigation {
        font-size: 0.67rem;

        gap: 1rem;

        flex-wrap: wrap;

        justify-content: flex-end;
    }


    /* =================================
       HOMEPAGE
    ================================= */

    .visual-grid {
        padding: 7vh 20px 9vh;

        grid-template-columns: 1fr;

        row-gap: 6vh;
    }

    .hero-title {
        padding-top: 0;
    }

    .hero-title h1 {
        font-size: 16.5vw;

        white-space: nowrap;
    }

    .hero-title p {
        margin-top: 3vh;

        font-size: 0.86rem;

        line-height: 1.4;
    }

    .music-photo {
        margin-top: 6vh;
    }

    .music-photo img {
        aspect-ratio: 1.5 / 1;

        object-position: center 42%;
    }

    .right-column {
        align-items: flex-start;
    }

    .candid-photo {
        width: 84%;

        height: 103vw;

        min-height: 0;

        margin-top: 0;

        transform: translateX(12%);
    }

    .architecture-photo {
        width: 98%;

        margin-top: var(--photo-gap);

        transform: translateX(-8%);
    }

    .architecture-photo img {
        aspect-ratio: 1.7 / 1;

        object-position: center 27%;
    }

    .home-links {
        padding-left: 20px;

        padding-right: 20px;
    }

    .large-link {
        font-size: 17vw;
    }

    .large-link:hover {
        padding-left: 0;
    }


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

    .about-main {
        padding: 5vh 20px 9vh;
    }

    .about-hero {
        min-height: auto;

        padding-bottom: 8vh;
    }

    .about-title {
        font-size: 24vw;

        margin-bottom: 6vh;
    }

    .about-photo-primary {
        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        height: 52vh;
    }

    .about-photo-primary::after {
        background:
            linear-gradient(
                180deg,
                rgba(247, 247, 244, 0.05) 0%,
                rgba(247, 247, 244, 0.20) 38%,
                rgba(247, 247, 244, 0.78) 76%,
                rgba(247, 247, 244, 1.00) 100%
            );
    }

    .about-photo-primary::before {
        display: none;
    }

    .about-bio {
        width: 94%;

        margin-top: -17vh;

        margin-left: 3%;

        padding: 22px;

        background: rgba(247, 247, 244, 0.91);
    }

    .about-bio .about-intro {
        font-size: 1.75rem;

        line-height: 1.15;

        margin-bottom: 3vh;
    }

    .about-bio p {
        font-size: 1.12rem;

        line-height: 1.4;
    }

    .cv-link {
        margin-top: 3vh;
    }

    .about-lower {
        padding-top: 4vh;
    }

    .cv-section {
        width: 88%;

        max-width: none;

        margin: 0 auto;
    }

    .cv-pages {
        height: 60vh;

        padding: 10px;
    }

    .cv-page {
        margin-bottom: 10px;
    }


    /* =================================
       PROJECTS
    ================================= */

    .projects-main {
        padding: 5vh 20px 10vh;
    }

    .projects-header {
        padding-top: 0;

        padding-bottom: 4vh;
    }

    .projects-header h1 {
        font-size: 23vw;

        line-height: 0.9;
    }

    .projects-header-note {
        margin-top: 6vh;

        gap: 1rem;

        font-size: 0.68rem;
    }

    .project {
        padding: 5vh 0;
    }

    .project-featured-layout {
        grid-template-columns: 1fr;

        row-gap: 4vh;
    }

    .project-main h2 {
        max-width: none;

        font-size: 12vw;

        line-height: 0.95;
    }

    .project:hover .project-main h2 {
        transform: none;
    }

    .project-meta {
        margin-top: 2vh;

        gap: 0.6rem 1rem;

        font-size: 0.66rem;
    }

    .project-description {
        max-width: 95%;

        margin-top: 2vh;

        font-size: 1.08rem;
    }

    .project-description-wide {
        width: 95%;

        white-space: normal;
    }

    .project-media {
        margin-top: 2.5vh;

        gap: 1.4rem;

        font-size: 0.67rem;
    }

    .video-caption {
        font-size: 0.67rem;
    }

    .projects-future {
        margin-top: 7vh;

        text-align: right;
    }

    .projects-future p {
        font-size: 10vw;
    }


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

    .contact-main {
        padding: 5vh 20px 10vh;
    }

    .contact-header {
        padding-top: 0;

        padding-bottom: 4vh;
    }

    .contact-header h1 {
        font-size: 23vw;

        line-height: 0.9;
    }

    .contact-header-note {
        margin-top: 6vh;

        max-width: 90%;

        font-size: 0.68rem;

        line-height: 1.5;
    }

    .contact-content {
        grid-template-columns: 1fr;

        row-gap: 7vh;

        padding-top: 5vh;
    }

    .contact-intro {
        max-width: 95%;

        margin-bottom: 5vh;

        font-size: 2.1rem;
    }

    .form-field {
        margin-bottom: 3.5vh;
    }

    .form-field input,
    .form-field textarea {
        font-size: 1.2rem;
    }


    /* =================================
       CONTACT — MOBILE COLLAGE
    ================================= */

    .contact-images {
        --contact-gap: 0.9rem;

        min-height: 630px;
    }


    /* PRIMARY */

    .contact-photo-primary {
        width: 90%;

        margin-left: auto;
    }

    .contact-photo-primary img {
        height: 265px;
    }


    /* SUBWAY */

    .contact-photo-secondary {
        width: 43%;

        left: 0;

        top: 205px;
    }

    .contact-photo-secondary img {
        height: 205px;
    }


    /* PARTY */

    .contact-photo-tertiary {
        width: 52%;

        left: calc(43% + var(--contact-gap));

        top: calc(265px + var(--contact-gap));
    }

    .contact-photo-tertiary img {
        height: 230px;
    }


    /* FOOTER */

    footer {
        padding-left: 20px;

        padding-right: 20px;

        font-size: 0.7rem;
    }

}