/* ADOBE FONTS IMPORT LINK */
@import url("https://use.typekit.net/yld5yrj.css");


/* GENERAL STYLES */
html, body {
    margin: 0;
    padding: 0;
    background-color: hsl(0, 0%, 100%)
}

/* BEGIN - NAV BAR STYLING */
li, a {
    text-decoration: none;
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #2C2B22;
}

.logo {
    text-decoration: none;
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #2C2B22;
    align-items: center;
    display: flex;
    margin-right: auto;
    line-height: 1;
    width: 28px;
    height: auto;
}


header {
    position: sticky;
    top: 0%;
    z-index: 1000;
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 6%;
    border-bottom: #EBEAE6 1px solid;
    background: #ffffff;
}

.nav_links li {
    display: inline-block;
    padding: 0px 15px;
    position: relative;
}

.nav_links li a {
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #2C2B22;
}
 
.nav_links li a::after {
    content: '';
    height: 1px;
    width: 100%;
    background: #2C2B22;
    position: absolute;
    left: 0;
    bottom: -6px;
    opacity: 0;
}

.nav_links li a:hover::after {
    opacity: 1;
}

.email_icon img {
    width: 18px;
    height: auto;
    vertical-align: baseline;
}
/* END - NAV BAR STYLING */


/* BEGIN - INDEX HEADER STYLING */
.header_grid_wrapper {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 410px;
    padding: 101px 8%;
}

#index_grid_wrapper {
    background-color: #5CAEE1;

}

.header_grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 40px;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

#index_grid {
    background-color: #5CAEE1;

}

.header_grid-left {
    display: flex;
    justify-content: center;
    align-items: center;
}

#index_portrait {
    width: 75%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: #2C2B22 4px solid;
    object-fit: cover;
}

.header_grid-right {
    display: grid;
    grid-template-rows: auto auto;
    gap: 20px;
    justify-items: center;
}

#index_interest_tags {
    width: 75%;
    height: auto;
    display: block;
}

#index_text_block {
    display: block;

    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 45px;
    color: #2C2B22;
    max-width: 36rem;
}

#index_text_block h1 {
    margin: 6px;
}

.holden_text_underline {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 15px;   
}

#index_polka_dots {
    width: 75%;
    height: auto;
    display: block;
}

/* INDEX HEADER | DESKTOP -> TABLET - TEXT SHRINK */
@media (max-width: 1200px) {
    #index_text_block {
        font-size: 36px;
    }
}

/* INDEX HEADER | TABLET - SCREEN SIZE BREAKPOINT */
@media (max-width: 1024px) {
    #index_grid_wrapper {
        padding: 124px 7%;
        min-height: 380px;
    }

    .header_grid {
        gap: 32px;
    }

    #index_portrait {
        width: 70%;
        aspect-ratio: 4 / 6;
    }

    #index_intrest_tags, #index_polka_dots {
        width: 70%;
    }

    #index_text_block {
        font-size: 30px;
    }
}

/* INDEX HEADER | TABLET -> MOBILE - TEXT SHRINK */
@media (max-width: 820px) {
    #index_text_block {
        font-size: 24px;
    }
}

/* INDEX HEADER | MOBILE - SCREEN SIZE BREAKPOINT */
@media (max-width: 640px) {
    #index_grid_wrapper {
        padding: 56px 6%;
        min-height: auto;
        align-items: flex-start;
    }

    .header_grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #index_interest_tags {
        order: 1;
        justify-self: center;
        width: 60%;
    }
    
    #index_text_block {
        order: 2;
        font-size: 24;
        text-align: center;
    }
    
    #index_polka_dots {
        order: 3;
        justify-self: center;
        width: 60%;
    }

    .header_grid-left {
        order: 4;
        justify-content: center;
    }

    #index_portrait {
        width: 60%;
    }
}
/* END - INDEX HEADER STYLING */


/* BEGIN - SCROLLING TEXT MARQUEE STYLING */
.marquee {
    padding: 1%;
    background-color: #EBEAE6;
    display: flex;
    --gap: 80px;
    gap: var(--gap);
    overflow: hidden;
    user-select: none;
}

.marquee ul { 
    list-style: none;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap);
    margin: 0;
    padding: 0;
    will-change: transform;
    animation: scroll 22s linear infinite;
}

#index_marquee {
    --gap: 80px;
}

#projects_marquee {
    --gap: 20px;
}

#project_page_marquee {
    --gap: 40px;
}

#about_marquee {
    --gap: 50px;
}


@keyframes scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(calc(-100% - var(--gap)), 0, 0);
    }
}
/* END - SCROLLING TEXT MARQUEE STYLING */


/* BEGIN - PROJECTS HEADER STYLING */
#projects_grid_wrapper {
    background-color: #5CAEE1;

}

#projects_grid {
    background-color: #5CAEE1;

}

#projects_portrait {
    width: 75%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: #2C2B22 4px solid;
    object-fit: cover;
}

#projects_polka_dots {
    width: 75%;
    height: auto;
    display: block;
}

#projects_text_block {
    display: block;
    justify-self: start;
    padding-left: 98px;
    text-align: left;
    color: #2C2B22;

    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 45px;
    max-width: 36rem;

    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 15px;   
}

#projects_text_block h1 {
    align-items: flex-start;
    margin: 6px;
}

#projects_tagline_graphic {
    width: 75%;
    height: auto;
    display: block;
}

/* PROJECTS HEADER | DESKTOP -> TABLET - TEXT SHRINK */
@media (max-width: 1200px) {
    #projects_text_block {
        padding-left: 76px;
        font-size: 36px;
    }
}

/* PROJECTS HEADER | TABLET - SCREEN SIZE BREAKPOINT */
@media (max-width: 1024px) {
    #projects_grid_wrapper {
        padding: 124px 7%;
        min-height: 380px;
    }

    .header_grid {
        gap: 32px;
    }

    #projects_portrait {
        width: 70%;
        aspect-ratio: 4 / 6;
    }

    #projects_polka_dots, #projects_tagline_graphic {
        width: 70%;
    }

    #projects_text_block {
        font-size: 30px;
    }
}

/* PROJECTS HEADER | TABLET -> MOBILE - TEXT SHRINK */
@media (max-width: 820px) {
    #projects_text_block {
        padding-left: 60px;
        font-size: 24px;
    }
}

/* PROJECTS HEADER | MOBILE - SCREEN SIZE BREAKPOINT */
@media (max-width: 640px) {
    #projects_grid_wrapper {
        padding: 56px 6%;
        min-height: auto;
        align-items: flex-start;
    }

    .header_grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #projects_polka_dots {
        order: 1;
        justify-self: center;
        width: 60%;
    }
    
    #projects_text_block {
        order: 2;
        font-size: 24;
        padding-left: 107px;
        text-align: center;
    }
    
    #projects_tagline_graphic {
        order: 3;
        justify-self: center;
        width: 60%;
    }

    .header_grid-left {
        order: 4;
        justify-content: center;
    }

    #projects_portrait {
        width: 60%;
    }
}
/* END - PROJECTS HEADER STYLING */


/* BEGIN - PROJECTS BUTTON STYLING */
.collapsible_project_button {
    width: calc(100% - 18%);
    margin-top: 6%;
    margin-left: 9%;
    margin-right: 9%;
    border-radius: 18px;

    display: flex;
    align-items: center;

    cursor: pointer;
    padding: 50px 50px 50px 50px;
    border: #E9E6E3;
    box-sizing: border-box;
    text-align: left;
    position: relative;
}

.collapsible_button_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
    padding: 0px 50px 50px 50px;
}

.collapsible_project_button.active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.collapsible_button_title {
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 700;
    font-size: 16px;
    padding-left: 3%;
}

.collapsible_button_text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.project_thumbnail {
    width: 75%;
    height: auto;
    border-radius: 18px;
    object-fit: cover;
}

.collapsible_button_dropdown_icon {
    margin-left: auto;
    width: 30px;
    height: auto;
}

#collapsible_button_title_01 {
    color: #E7FCFF;
}

#collapsible_button_title_02 {
    color: #1B1F2A;
}

#collapsible_button_title_03 {
    color: #FCEAFF;
}

#collapsible_project_button_01 {
    background-color: #C1272D;
}

#collapsible_project_button_02 {
    background-color: #FFE5EF;
}

#collapsible_project_button_03 {
    background-color: #806B28;
}

#collapsible_button_grid_01 {
    background-color: #C1272D;
}

#collapsible_button_grid_02 {
    background-color: #FFE5EF;
}

#collapsible_button_grid_03 {
    background-color: #806B28;
}


#project_01_thumbnail {
    border: #E7FCFF 2.4px solid;
}

#project_02_thumbnail {
    border: #1B1F2A 2.4px solid;
}

#project_03_thumbnail {
    border: #FCEAFF 2.4px solid;
}

.collapsible_button_content {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    margin-top: 0%;
    margin-left: 9%;
    margin-right: 9%;

    font-family: "helvetica-lt-pro", sans-serif;
    font-weight: 400;

    display: none;
    overflow: hidden;
    box-sizing: border-box;
    text-align: justify;
}

#collapsible_button_content_01 {
    color: #E7F9FF;
}

#collapsible_button_content_02 {
    color: #1B1F2A;
}

#collapsible_button_content_03 {
    color: #FCEAFF;
}

.project_thumbnail_button {
    width: 200px;
    height: 40px;
    border-radius: 18px;
    border: #E9E6E3;  
}

#project_01_thumbnail_button {
    background-color: #E7FCFF;
}

#project_01_thumbnail_button a {
    font-family: "helvetica-lt-pro", sans-serif;
    font-weight: 400;
    color: #C1272D;
}

#project_02_thumbnail_button {
    background-color: #1B1F2A;
}

#project_02_thumbnail_button a {
    font-family: "helvetica-lt-pro", sans-serif;
    font-weight: 400;
    color: #FFE5EF;
}

#project_03_thumbnail_button {
    background-color: #FCEAFF;
}

#project_03_thumbnail_button a {
    font-family: "helvetica-lt-pro", sans-serif;
    font-weight: 400;
    color: #806B28;
}

.project_01_button_icon {
    width: 45px;
    height: auto;
    vertical-align: middle;

}

.project_02_button_icon {
    width: 45px;
    height: auto;
    vertical-align: middle;
}

.project_03_button_icon {
    width: 45px;
    height: auto;
    vertical-align: middle;

}

/* PROJECT BUTTON TITLE | MOBILE - SCREEN SIZE BREAKPOINT */
@media (max-width: 640px) {
    .project_01_button_icon {
    width: 38px;
    height: auto;
    vertical-align: middle;
}

    .project_02_button_icon {
    width: 38px;
    height: auto;
    vertical-align: middle;
}

    .project_03_button_icon {
    width: 38px;
    height: auto;
    vertical-align: middle;
}

    .collapsible_button_dropdown_icon {
    margin-left: auto;
    width: 28px;
    height: auto;
}

.collapsible_button_title {
    font-size: 15px;
    padding-left: 4%;
}

}

/* PROJECT BUTTONS | TABLET - SCREEN SIZE BREAKPOINT */
@media (max-width: 1024px) {
    .collapsible_button_content {
        font-size: 12px;
}
}

/* PROJECT BUTTONS | TABLET -> MOBILE - TEXT SHRINK */
@media (max-width: 820px) {
    .collapsible_button_content {
        font-size: 10px;
    }

    .project_thumbnail_button {
       width: 150px;
       height: 35px; 
    }
}

@media (max-width: 640px) {
    .collapsible_button_grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 40px 40px 40px;
    }

    .project_thumbnail {
        width: 100%;
        max-width: 100%;
}
}

.white_box {
    margin-top: 7%;
    width: 100%;
    height: 10%;
    background-color: white;
}
/* END - PROJECTS BUTTON STYLING */


/* BEGIN - ABOUT HEADER STYLING */
#about_grid_wrapper {
    background-color: #5CAEE1;

}

#about_grid {
    background-color: #5CAEE1;

}

#about_portrait {
    width: 75%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: #2C2B22 4px solid;
    object-fit: cover;
}

#about_polka_dots {
    width: 75%;
    height: auto;
    display: block;
}

#about_text_block {
    display: block;
    justify-self: start;
    padding-left: 98px;
    text-align: left;
    color: #2C2B22;

    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 45px;
    max-width: 36rem;

    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 15px;   
}

#about_text_block h1 {
    align-items: flex-start;
    margin: 6px;
}

#about_tagline_graphic {
    width: 75%;
    height: auto;
    display: block;
}

/* ABOUT HEADER | DESKTOP -> TABLET - TEXT SHRINK */
@media (max-width: 1200px) {
    #about_text_block {
        padding-left: 76px;
        font-size: 36px;
    }
}

/* ABOUT HEADER | TABLET - SCREEN SIZE BREAKPOINT */
@media (max-width: 1024px) {
    #about_grid_wrapper {
        padding: 124px 7%;
        min-height: 380px;
    }

    .header_grid {
        gap: 32px;
    }

    #about_portrait {
        width: 70%;
        aspect-ratio: 4 / 6;
    }

    #about_polka_dots, #about_tagline_graphic {
        width: 70%;
    }

    #about_text_block {
        font-size: 30px;
    }
}

/* ABOUT HEADER | TABLET -> MOBILE - TEXT SHRINK */
@media (max-width: 820px) {
    #about_text_block {
        padding-left: 60px;
        font-size: 24px;
    }
}

/* ABOUT HEADER | MOBILE - SCREEN SIZE BREAKPOINT */
@media (max-width: 640px) {
    #about_grid_wrapper {
        padding: 56px 6%;
        min-height: auto;
        align-items: flex-start;
    }

    .header_grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }

    #about_polka_dots {
        order: 1;
        justify-self: center;
        width: 60%;
    }
    
    #about_text_block {
        order: 2;
        font-size: 24;
        padding-left: 107px;
        text-align: center;
    }
    
    #about_tagline_graphic {
        order: 3;
        justify-self: center;
        width: 60%;
    }

    .header_grid-left {
        order: 4;
        justify-content: center;
    }

    #about_portrait {
        width: 60%;
    }
}
/* END - ABOUT HEADER STYLING */


/* BEGIN - PROJECT HEADERS STYLING */
#project_01_grid_wrapper {
    background-color: #C1272D;
    padding: 96.5px;
}

#project_02_grid_wrapper {
    background-color: #1B1F2A;
    padding: 96.5px;
}

#project_03_grid_wrapper {
    background-color: #806B28;
    padding: 96.5px;
}

#project_01_grid {
    background-color: #C1272D;
}

#project_02_grid {
    background-color: #1B1F2A;
}

#project_03_grid {
    background-color: #806B28;
}

#project_01_portrait {
    width: 75%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: #E7FCFF 4px solid;
    object-fit: cover;
}

#project_02_portrait {
    width: 75%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: #FFE5EF 4px solid;
    object-fit: cover;
}

#project_03_portrait {
    width: 75%;
    height: auto;
    display: block;
    border-radius: 18px;
    border: #FCEAFF 4px solid;
    object-fit: cover;
}

#project_tags {
    width: 75%;
    height: auto;
    display: block;
}

#project_01_text_block {
    display: block;
    justify-self: start;
    padding-left: 98px;
    text-align: left;
    color: #E7FCFF;

    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 35px;
    max-width: 36rem;
}

#project_02_text_block {
    display: block;
    justify-self: start;
    padding-left: 98px;
    text-align: left;
    color: #FFE5EF;

    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
    max-width: 36rem;
}

#project_03_text_block {
    display: block;
    justify-self: start;
    padding-left: 98px;
    text-align: left;
    color: #FCEAFF;

    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-style: italic;
    font-size: 35px;
    max-width: 36rem;
}

#project_01_text_block h1 {
    align-items: flex-start;
    margin: 6px;
}

#project_02_text_block h1 {
    align-items: flex-start;
    margin: 6px;
}

#project_03_text_block h1 {
    align-items: flex-start;
    margin: 6px;
}

.project_text_underline {
    text-decoration: underline;
    text-decoration-thickness: 4px;
    text-underline-offset: 20px;   
}

#project_tagline_graphic {
    width: 75%;
    height: auto;
    display: block;
}

/* PROJECT HEADERS | DESKTOP -> TABLET - TEXT SHRINK */
@media (max-width: 1200px) {
    #project_01_text_block {
        padding-left: 76px;
        font-size: 28px;
    }

    #project_02_text_block {
        padding-left: 76px;
        font-size: 23px;
    }

    #project_03_text_block {
        padding-left: 76px;
        font-size: 28px;
    }
}

/* PROJECT HEADERS | TABLET - SCREEN SIZE BREAKPOINT */
@media (max-width: 1024px) {
    #project_01_grid_wrapper {
        padding: 124px 7%;
        min-height: 380px;
    }

    #project_02_grid_wrapper {
        padding: 124px 7%;
        min-height: 380px;
    }

    #project_03_grid_wrapper {
        padding: 124px 7%;
        min-height: 380px;
    }

    .header_grid {
        gap: 32px;
    }

    #project_01_portrait {
        width: 70%;
        aspect-ratio: 4 / 6;
    }

    #project_02_portrait {
        width: 70%;
        aspect-ratio: 4 / 6;
    }

    #project_03_portrait {
        width: 70%;
        aspect-ratio: 4 / 6;
    }

    #project_tags, #project_tagline_graphic {
        width: 70%;
    }

   #project_01_text_block {
        font-size: 24px;
    }

    #project_02_text_block {
        font-size: 18px;
    }

    #project_03_text_block {
        font-size: 24px;
    }
}

/* PROJECT HEADERS | TABLET -> MOBILE - TEXT SHRINK */
@media (max-width: 820px) {
    #project_01_text_block {
        font-size: 16px;
    }

    #project_02_text_block {
        font-size: 14px;
    }

    #project_03_text_block {
        font-size: 16px;
    }
}

/* PROJECT HEADERS | MOBILE - SCREEN SIZE BREAKPOINT */
@media (max-width: 640px) {
    #project_01_grid_wrapper {
        padding: 56px 6%;
        min-height: auto;
        align-items: flex-start;
    }

     #project_02_grid_wrapper {
        padding: 56px 6%;
        min-height: auto;
        align-items: flex-start;
    }

     #project_03_grid_wrapper {
        padding: 56px 6%;
        min-height: auto;
        align-items: flex-start;
    }

    .header_grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    #project_01_text_block {
    padding-left: 95px;
    }

    #project_02_text_block {
    padding-left: 90px;
    }

    #project_03_text_block {
    padding-left: 95px;
    }

    #project_tags, #project_tagline_graphic {
        width: 60%;
    }

    #project_01_portrait {
        width: 60%;
    }

    #project_02_portrait {
        width: 60%;
    }

    #project_03_portrait {
        width: 60%;
    }
}

.project_image_grid_wrapper {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 101px 8%;
}

.project_image_grid {
    display: grid;
    gap: 40px;
}

#img_large {
    width: 100%;
    height: auto;
    border-radius: 18px;
    object-fit: cover;
}

.project_image_row {
    display: grid;
    gap: 40px;
}

#project_01_image_row {
    grid-template-columns: repeat(3, 1fr);
}

#project_02_image_row {
    grid-template-columns: repeat(2, 1fr);
}

#project_03_image_row {
    grid-template-columns: repeat(2, 1fr);
}

#img_small {
    width: 100%;
    height: auto;
    border-radius: 18px;
    object-fit: cover;
}
/* END - PROJECT HEADERS STYLING */


/* BEGIN - FOOTER STYLING */
footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 6%;
    padding-top: 80px;
    box-sizing: border-box;
}

#index_footer {
    background-color: #E7F6FF;
}

#projects_footer {
    background-color: #E7F6FF;
}

#about_footer {
    background-color: #E7F6FF;
}

#project_01_footer {
    background-color: #E7F9FF;
}

#project_02_footer {
    background-color: #FFE5EF;
}

#project_03_footer {
    background-color: #FCEAFF;
}

.footer_left {
    margin: 0;
    font-family: "hanken-grotesk", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #2C2B22;
}

.footer_links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer_links li {
    display: inline-block;
    padding: 0 10px;
    position: relative;
}

.footer_icon img {
    width: 18px;
    height: auto;
    vertical-align: baseline;
}

.footer_links li a {
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.footer_links li a::after {
    content: '';
    height: 1px;
    width: 100%;
    background: #2C2B22;
    position: absolute;
    left: 0;
    bottom: -6px;
    opacity: 0;
}

.footer_links li a:hover::after {
    opacity: 1;
}
/* END - FOOTER STYLING */