/*** CSS STYLES FOR CALEB B PAYNE PORTFOLIO ***/
/***** COPYRIGHT 2025 ALL RIGHTS RESERVED *****/

/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/


/** GENERAL !@#$ **/
/**********************************************/

:root {
    
    /* rem size */
    font-size: 3px;
    
    /* colors */
    --ground: #060d0d;
}

* { 
    
    box-sizing: border-box;
    outline-offset: -0.5px;
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    &:visited {
        color: inherit;
    }
}

/** BIG LAYOUT !@#$ **/
/**********************************************/

html {

    display: block;
    position: absolute;
    
    width: 100%;
    height: 100%;

    background-color: #111312; /* debug */
    
    color: beige;
}

body {
    
    display: block;
    position: absolute;
    
    top: 0px;   right: 0px;
    left: 0px;  bottom: 0px;
    
    width: 100%;
    height: 100%;
    
    padding: 3rem 2rem;
    
    overflow-y: scroll;

    font-size: 7rem;
}

.page_membrane {
    
    display: block;
    
    width: 100%;
    max-width: 960px;
    
    position: relative;
    
    margin: 0 auto;
    padding: 12rem 2rem;
    
    border-radius: 1rem;
    
    background-color: #060D0D;
}

.page_section {
    
    display: block;
    width: 100%;
    height: auto;
    min-height: 100px;
    margin: 0 auto;
    margin-bottom: calc(24rem + min(1vh, 10rem));
/*    outline: 1px solid red;*/
}

header {
    
    padding-top: 24rem;
}

.meatpad {
    
    padding: 7rem 13rem;
}

.content-box {
    
    display: block;
    width: 100%;
    min-height: 120px;
    
    margin: 1rem auto 2rem auto;
}

footer {
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    
    height: 30vh;
    
    & .txt_sub-statement {
        
        color: darkslategrey;
        font-style: normal;
    }
}

#navigation {
    
    display: block;
    position: fixed;
    left: 0; top: 0;
    padding: 0rem;
    z-index: 9000;
    
    & ul {
        
        display: flex;
        flex-flow: row nowrap;
        background-color: rgba(10,10,10,0.8);
        padding: 3rem;
        border-radius: 1rem;
    }
    
    & ul li {
        
        display: block;
        padding: 0rem;
        font-family: monospace;
        font-size: 0.75em;
        margin: 2rem;
        
        & a {
            padding: 3rem 5rem;
            
            &:hover {
            
                background-color: darkslategray;
            }
        }
        
        &.nav--current {
            
/*            outline: 1px solid blue;*/
        }
        
        
    }
}


/**  !@#$ **/
/**********************************************/

#list-of-featured-work {
    
    display: flex;
    flex-flow: column;
    width: 100%;
}

.featured-work-item {
    
    display: block;
    position: relative;
    width: 100%;
    height: calc(calc(22vh + 2vw) + 3rem);
    
    margin-bottom: 3rem;
    
    font-size: min(calc(5rem + 0.9vw), 15rem);
    
    outline: 1px solid #222;
}

.worklist_anchor {
    
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    
    position: relative;
    
    width: 100%;
    height: 100%;
    
    background-color: #03110a;
    
    &:hover {
        
        background-color: #102015;

    }
}

.featured-work-title {
    
    width: 100%;
}

.worklist_header {
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    position: relative;
    padding: 3rem 0;
    
    width: 100%;
    height: 10%:
}

.worklist_client-name {
    
    padding: 1rem 0;
    padding-left: 0.5rem;
    
    font-family: "argent-cf", serif;
    font-weight: 100;
    font-size: 1em;
    letter-spacing: 0.01em;
    
    color: #e1C097;
}

.worklist_project-name {
    
    padding: 2rem 0;
    
    font-family: "articulat-cf", sans-serif;
    font-weight: 500;
    font-size: 1.1em;
    color: #DCD1C8;
}

.wheelhouse-list {
    
    & li {
        
        margin-bottom: 5rem;
    }
}

.sandwich-list {
    
    font-family: "argent-cf", serif;
    font-weight: 200;
    font-size: min(calc(4rem + 0.5vw), 9rem);
    letter-spacing: 0.03em;
    color: #e1C097;
    
    & li {
        width: 100%;
        margin-bottom: 2rem;
        text-align: right;
    }
}

.wheelhouse-exhibit {
    
    display: block;
    width: 100%;
    height: min(360px, 60vw);
    
    background-color: #111;
}


/** TYPOGRAPHY !@#$ **/
/**********************************************/

.txt_section-heading {
    
    width: 100%;
    
    padding: 1em;
    margin: 2rem 0;
    
    font-family: "articulat-cf", sans-serif;
    font-weight: 700;
    font-size: min(calc(4rem + 1vw), 9rem);
    letter-spacing: 0.03em;
    color: #d93902;
    
    text-transform: uppercase;
    text-align: center;
    
    border-bottom: 1px solid #111;
}

.txt_callout-display {
    
    position: relative;
    
    padding: 1em 0;
    margin: 1rem 0;
    
    font-family: "articulat-cf", sans-serif;
    font-weight: 700;
    font-size: min(calc(1rem + 5vw), 19rem);
    letter-spacing: -0.01em;
    line-height: calc(calc(100% + 0.4vh) + min(1vw, 4rem));
    color: #DCD1C8;
    
    text-transform: uppercase;
    text-align: center;
    
    & .callout_textbox {
        
        padding: 0 1em;
        width: calc(65% + 0.5vw);
        margin: auto;
        text-align: justify;
    }
}

.callout_quotes {
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-content: center;
    
    position: absolute;
    width: 100%;
    height: 50%;
    
    top: 28%;
    
    padding: 0 calc(0.5em + 2.5vw);
    
/*    outline: 1px solid yellow;*/
    
    color: #9C3A3A;
    
    & em {
        height: auto;
        display: block;
        padding: 2rem;
        font-family: "argent-cf", serif;
        font-size: 2.5em;
/*        outline: 1px solid blue;*/
    }
}

.txt_sub-statement {
    
    display: block;
    padding: 1em;
    margin: 1rem 0;
    
    font-family: "articulat-cf", sans-serif;
    font-weight: 700;
    font-style: oblique;
    font-size: calc(4rem + 0.2vw);
    letter-spacing: 0.02em;
    line-height: 160%;
    color: #e1C097;
    
    text-transform: uppercase;
    text-align: center;
}

.txt_topic-heading {
    
    padding: 0;
    margin-bottom: 1rem;
    
    font-family: "articulat-cf", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 6rem;
    letter-spacing: 0em;
    line-height: 160%;
    color: #d7c5aF;
    color: #e1C097;
    
    text-transform: uppercase;
    text-align: center;
}

.txt_main-project-title {
    
    font-size: 9rem;
    margin-top: 1.5em;
    
    & .client-name {
        
        padding: 1rem 0;
        padding-left: 0.05em;
        font-family: "argent-cf", serif;
        font-weight: 100;
        line-height: 150%;
        letter-spacing: 0.01em;
        color: #e1C097;
    }
    
    & .project-name {
        
        font-family: "articulat-cf", sans-serif;
        font-size: calc(1.2em + 1.5vw);
        font-weight: 500;
        color: #DCD1C8;
    }
}

.txt_body-text {
    
    max-width: 25em;
    margin: 1.5em auto;
    
    font-family: "articulat-cf", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: min(calc(5rem + 0.6vw), 8rem);
    letter-spacing: 0em;
    line-height: 160%;
    text-align: justify;
    color: #a7b5b5;
}

cite {
    
    font-style: italic;
    font-style: oblique;
}


/** VISUALS !@#$ **/
/**********************************************/
.visual-box {
    
    width: 100%;
    margin-bottom: 6rem;
    
    & > img {
        
        display: block;
        width: 100%;
        margin-bottom: 2rem;
        outline: 1px solid rgba(100,100,100,0.5);
    }
    
    & > video {
        
        display: block;
        width: 100%;
        margin-bottom: 2rem;
        outline: 1px solid rgba(100,100,100,0.5);
    }
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#main-hero-imagery {
    
    width: 100%;
}

/** UTILITY !@#$ **/
/**********************************************/

.clearfix::after {
    /* via @w3schools */
    content: "";
    clear: both;
    display: table;
}

.no-select {
    
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**********************************************/
/**************/



/**********************************************/