/* Mercury Text font-weights: grades 1–4; 1 is thinner and 4 is thicker */

/*
400: roman
600: semibold (not-used)
700: bold (not-used)
*/

/* Sentinel font-weights */

/*
300: light (not-used)
400: book (not-used)
500: medium (not-used)
600: semibold (not-used)
700: bold (not-used)
800: black
*/



:root {
    --font-family: "Mercury Text G4 A", "Mercury Text G4 B", "Helvetica Neue", Helvetica, Arial, sans-serif;

    /* HSL colors are a great way to easily darken or lighten an accent color without the color becoming muddy and desaturated.
    Just increase or decrease the "L" value for lightness. It is the third value in an HSL attribute. */

    --accent-color-h: 190;
    --accent-color-s: 100%;
    --accent-color-l: 23%;

    --accent-color-hsl: var(--accent-color-h), var(--accent-color-s), var(--accent-color-l);
    --accent-color-hsl-function: hsl(var(--accent-color-hsl)); 

    --accent-color-light: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 10%));
    --accent-color-lighter: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 16%));
    --accent-color-very-light: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 68%));

    --accent-color-dark: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 12%));

    --accent-color-translucent: hsla(var(--accent-color-hsl), 0.35);

	--danger-color: #d53d25;
    --danger-color-dark: #a02e1c;
    --danger-color-translucent: rgba(234, 78, 61, 0.06);

	--create-color: #19ab24;

    --warning-color: #fcb312;
    
	--translucent-light: rgba(255, 255, 255, 0.8);
    --translucent-light-barely: rgba(255, 255, 255, 0.10);

    --translucent-darker: rgba(0, 0, 0, 0.25);
    --translucent-dark: rgba(0, 0, 0, 0.12);
    --translucent-dark-barely: rgba(0, 0, 0, 0.06);
    
	--white-white: #ffffff;
    --black-black: #000000;
    --black-black-transparent: rgba(0, 0, 0, 0.0);

    --lighter-pearl: #f9f9f9;
    --light-pearl: #ececec;
    --medium-pearl: #dddddd;
    --dark-pearl: #cdcdcd;
    --darker-pearl: #bcbcbc;

    --light-gray: #a2a2a2;
    --medium-gray:  #909090;
    --dark-gray: #777777;
    --darker-gray: #555555;

    --slate-black: #222222;
    --slate-black-transparent: rgba(34, 34, 34, 0.0);
    --slate-black-translucent: rgba(0, 0, 0, 0.86);

    --focus-box-shadow-start: 30px;

    --container-width: 87.5%;
    --container-width-max: 540px;
    --container-side-padding: 6.25%;
    --header-side-padding: 0.75em;
}


a {
    /* color: var(--accent-color-hsl-function); */
    /* color: #009dff; */
    /* color: rgb(0,122,255); */
    color: #007aff;
}




body {
    font-family: var(--font-family);
    font-style: normal;
    font-weight: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--slate-black);
    background-color: var(--white-white);
}
 /* On touch experiences, detect when user has touched the screen and append a class to the body HTML element. */
/* body.user-is-touching {
    padding-bottom: 20px;
    background-color: red;
} */



/* HEADER START */

header {
    background-color: var(--white-white);
    /* position: relative; */
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 30px var(--translucent-dark-barely);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1740px;
    margin-right: auto;
    margin-left: auto;
    /* width: var(--container-width); */
	padding-right: var(--container-side-padding);
	padding-left: var(--container-side-padding);
}

header h1,
header p,
header p a {
    font-family: "Sentinel A", "Sentinel B", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.08;
    text-decoration: none;
    color: var(--slate-black);
}
header h1,
header h1 span {
    text-align: left;
    font-weight: 800;
}
header h1 span {
    margin-left: calc(0em - var(--header-side-padding)); /* Units must be included on the zero for the calculation to be valid. */
    letter-spacing: 0.005em;
    word-spacing: 0.00em;
    /* background-color: rgba(0, 255, 255, 0.5); */
}
header p,
header p a {
    text-align: right;
    font-weight: 500;
}
header p a {
    margin-right: calc(0em - var(--header-side-padding)); /* Units must be included on the zero for the calculation to be valid. */
    letter-spacing: 0.035em;
    word-spacing: 0.02em;
    /* background-color: rgba(0,255,0,0.5); */
}
header h1 span,
header p a {
    display: block;
    padding-left: var(--header-side-padding);
    padding-right: var(--header-side-padding);
    padding-bottom: 0.55em;
}
header h1 span {
    padding-top: 0.45em;
}
header p a {
    padding-top: 0.55em;
}


header p a {
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 0.14em;
    word-spacing: -0.02em;
}
header p a .email-long {
    display: none;
}


/* HEADER END */




/* HERO SECTION START */

.section {
    position: relative;
}

.section-hero {
    /* overflow-x: hidden; */
    /* width: 100%; */
    /* width: 736px; */
    background-color: var(--black-black);
    background-repeat: no-repeat;
    background-position: center top;
    background-image: linear-gradient(to top, var(--black-black) 0%, var(--black-black-transparent) 220px), url("../images/hero/hero-portrait-small_2x.jpg");
    background-size: 736px 370px;
}



.section-hero-text {
    position: relative;
    margin-right: auto;
    margin-left: auto;
	width: var(--container-width);
	/* padding-right: var(--container-side-padding);
	padding-left: var(--container-side-padding); */
    max-width: var(--container-width-max);
    padding-top: 250px;
    padding-bottom: 60px;
}

.section-hero-text h1,
.section-project-text h1,
.section-footer h1 {
    color: var(--white-white);
    font-family: "Sentinel A", "Sentinel B", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /* font-family: "Vitesse A", "Vitesse B", "Helvetica Neue", Helvetica, Arial, sans-serif; */
    font-style: normal;
    font-weight: normal;
    font-weight: 800;
    font-size: 34px;
    line-height: 1.08;
    letter-spacing: -0.005em;
    word-spacing: 0.03em;
    margin-bottom: 0.55em;
}
.section-hero-text h1,
.section-footer h1 {
    color: var(--white-white);
}
.section-hero-text h1 {
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

.section-hero-text p,
.section-project-text p {
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: 0.01em;
}
.section-hero-text p {
    /* color: var(--white-white); */
    color: var(--light-pearl);
    /* color: var(--medium-pearl); */
}
.section-project-text h1,
.section-project-text p {
    /* color: var(--black-black); */
    /* color: var(--slate-black); */
    color: var(--slate-black-translucent);
}
.section-project-purple .section-project-text h1 {
    color: #001260;
}
.section-project-reversed .section-project-text h1 {
    color: var(--white-white);
}
.section-project-reversed .section-project-text p {
    color: var(--light-pearl);
}



.section-hero-text p + p,
.section-project-text p + p {
    margin-top: 0.75em;
}

header p a,
.section-hero-text p a,
body.user-is-touching .section-hero-text p a:hover, /* On touch experiences, prevent :hover and :focus states from displaying. */
body.user-is-touching .section-hero-text p a:focus {
    color: inherit;
    white-space: nowrap;
    position: relative;
    z-index: 5;
    text-decoration: none;
    transition: color 0.15s ease-out;
}
header p a:focus,
.section-hero-text p a:focus {
    outline: none;
}
header p a::before,
body.user-is-touching header p a:hover::before,  /* On touch experiences, prevent :hover and :focus states from displaying. */
body.user-is-touching header p a:focus::before,
.section-hero-text p a::before,
body.user-is-touching .section-hero-text p a:hover::before, /* On touch experiences, prevent :hover and :focus states from displaying. */
body.user-is-touching .section-hero-text p a:focus::before {
    content: '';
    width: 100%;
    height: 3px;
    /* background-color: rgba(0, 122, 255); */
    /* background-color: hsl(211, 100%, 50%); */
    background-color: hsl(211, 100%, 35%);
    position: absolute;
    left: 0;
    bottom: -3px;
    z-index: -1;
    border-radius: 2px;
    /* transform: rotate(-1deg); */
    transition: all 0.15s ease-out;
}
/* The header email link has unique properties. */
header p a::before,
body.user-is-touching header p a:hover::before,
body.user-is-touching header p a:focus::before {
    height: 0;
    left: -4px;
    bottom: 4px;
    width: calc(100% + 8px);
    border-radius: 3px;
    /* background-color: rgb(144,217,255); */
    /* background-color: hsl(201, 100%, 78%); */
    /* background-color: hsl(201, 100%, 80%); */
    background-color: hsl(201, 100%, 88%);
}
header p a:hover,
header p a:focus {
    color: var(--black-black);
}
.section-hero-text p a:hover,
.section-hero-text p a:focus {
    color: var(--white-white);
}
header p a:hover::before,
header p a:focus::before,
.section-hero-text p a:hover::before,
.section-hero-text p a:focus::before {
    /* height: 100%; */
    height: calc(100% + 4px);
    left: -4px;
    width: calc(100% + 8px);
}
header p a:hover::before,
header p a:focus::before {
    height: calc(100% - 12px);
}


/* HERO SECTION END */








/* PROJECT SECTION START */


.section-project {
    position: relative;
    /* background-color: var(--white-white); */
    background-color: var(--lighter-pearl);
}

.section-project-container {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    max-width: 1740px;
    background-color: var(--light-pearl);
}

.section-project-images,
.section-project-text {
    position: relative;
}

.section-project-images {
    overflow: hidden;
    width: 100%;
    height: auto;
    /* padding-bottom: 100%; */
    /* This enforces a square aspect ratio of 1:1 that scales based on the width of the viewport. */
    background-position-x: center;
    background-size: cover;
    /* background-color: rgba(0,0,255,0.5); */
}

.section-project-text {
    background: transparent;
}
.section-project-purple .section-project-text {
    background-color: #e6eaf9;
}
.section-project-reversed-navy .section-project-text {
    background-color: #063864;
}
.section-project-reversed-gray .section-project-text {
    background-color: #55524a;
}
.section-project-yellow .section-project-text {
    background-color: #fdedbf;
}


.section-project-text-inner {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    margin-top: -1px;
	width: var(--container-width);
	/* padding-right: var(--container-side-padding);
	padding-left: var(--container-side-padding); */
	max-width: var(--container-width-max);
    padding-top: 35px;
	padding-bottom: 120px;
}


/* PROJECT SECTION END */






/* FOOTER START */

footer {
    position: relative;
	/* width: var(--container-width); */
	padding-right: var(--container-side-padding);
	padding-left: var(--container-side-padding);
    padding-top: 50px;
    padding-bottom: 65px;
    background-color: var(--black-black);
}


.section-footer {
    text-align: center;
}


.section-footer ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-right: auto;
    margin-left: auto;
    max-width: 300px;
    padding-top: 6px;
}

.section-footer ul li {
    text-align: center;
}

.section-footer ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    padding: 19px;
    border-radius: 8px;
    transition: background-color 0.15s ease-out;
}
.section-footer ul li.footer-link-email a {
    padding: 15px;
}
.section-footer ul li a,
body.user-is-touching .section-footer ul li a:hover {
    background-color: transparent;
}

.section-footer ul li a:hover,
body.user-is-tabbing .section-footer ul li a:focus {
    background-color: var(--translucent-light-barely);
}
.section-footer ul li a:focus {
    outline: none;
}


.section-footer ul li a svg {
    width: 100%;
}
.section-footer ul li a svg path,
body.user-is-touching .section-footer ul li a:hover svg path {
    fill: var(--white-white);
    transition: fill 0.15s ease-out;
}
.section-footer ul li a:hover svg path,
body.user-is-tabbing .section-footer ul li a:focus svg path {
    /* fill: rgb(144,217,255); */
    /* fill: hsl(201, 100%, 78%); */
    fill: hsl(201, 100%, 80%);
}


.section-footer p {
    color: var(--medium-gray);
    text-transform: uppercase;
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: 0.09em;
    word-spacing: 0.08em;
    padding-top: 90px;
}


/* FOOTER END */








@media only screen and (min-width: 735px) {
    header p a .email-short {
        display: none;
    }
    header p a .email-long {
        display: inline;
    }
    
    
    .section-hero {
        /* background-color: var(--white-white); */
        background-color: var(--lighter-pearl);
        background-image: linear-gradient(to top, var(--translucent-dark-barely) 0%, var(--black-black-transparent) 140px), url("../images/hero/hero-portrait-medium_2x.jpg");
        background-size: 1070px 530px;
        height: 530px;
        display: flex;
    }

    .section-hero-text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 6%;
        padding-left: 50%;
        margin-right: 0;
        margin-left: -90px;
        width: calc(100% + 90px);
        max-width: calc(100% + 90px);
    }

    .section-hero-text h1,
    .section-project-text h1,
    .section-footer h1 {
        font-size: 38px;
        line-height: 1.05;
    }
    .section-hero-text h1 {
        text-shadow: none;
        color: var(--slate-black);
    }
    .section-project-text h1 {
        font-size: 36px;
        line-height: 1.0;
    }

    .section-hero-text p,
    .section-project-text p {
        font-size: 20px;
        line-height: 1.35;
    }
    .section-hero-text p {
        /* color: var(--slate-black); */
        color: var(--slate-black-translucent);
    }
    .section-project-text p.supplemental {
        display: none;
        /* background-color: rgba(255, 0, 0, 0.25); */
    }

    .section-hero-text p + p,
    .section-project-text p + p {
        margin-top: 0.65em;
    }

    .section-hero-text p a:hover,
    .section-hero-text p a:focus {
        color: var(--black-black);
    }

    .section-hero-text p a::before,
    body.user-is-touching .section-hero-text p a:hover::before, /* On touch experiences, prevent :hover and :focus states from displaying. */
    body.user-is-touching .section-hero-text p a:focus::before {
        height: 4px;
        bottom: -3px;
        border-radius: 4px;
        /* background-color: rgb(144,217,255); */
        /* background-color: hsl(201, 100%, 78%); */
        /* background-color: hsl(201, 100%, 80%); */
        background-color: #7ac2f8;
    }

    .section-hero-text p a:hover::before,
    .section-hero-text p a:focus::before {
        /* background-color: hsl(201, 100%, 88%); */
        background-color: #90cefa;
    }



    .section-project-container {
        display: flex; /* This makes the project image div and project text div display side-by-side. */
        flex-direction: row;
    }
    .section-project-alternate .section-project-container {
        flex-direction: row-reverse;  /* This makes the project text div display to the left of the project image div so that the sequence alternates for each project. */
    }

    .section-project-images,
    .section-project-text {
        width: 100%;
        height: 368px; /* This fixed height allows the image to bleed off the left and right edges of the viewport. */
        padding: 0;
    }

    .section-project-text-inner {
        position: absolute;
        bottom: 0; /* This makes the text position anchored to the bottom of the project text div instead of displaying at the top of the project text div. */
        width: auto;
        max-width: 595px;
        padding: 0 35px 30px 35px;
        margin-top: 0;
    }
    .section-project-alternate .section-project-text-inner {
        right: 0; /* This makes the text position anchored to the right of the project text div, which is closer to the middle of the page, instead of displaying at the left of the project text div. */
    }
}


@media only screen and (min-width: 1069px) {
    header h1,
    header p,
    header p a {
        font-size: 22px;
    }
    header h1 span,
    header p a {
        padding-bottom: 0.65em;
    }
    header h1 span {
        padding-top: 0.55em;
    }
    header p a {
        padding-top: 0.65em;
        font-size: 16px;
    }
    

    .section-hero {
        background-image: linear-gradient(to top, var(--translucent-dark-barely) 0%, var(--black-black-transparent) 200px), url("../images/hero/hero-portrait-large_2x.jpg");
        background-size: 1740px 590px;
        height: 590px;
    }

    .section-hero-text {
        margin-right: auto;
        margin-left: auto;
        padding: 0;
        padding-left: 280px;
        max-width: 900px;
    }

    .section-hero-text h1,
    .section-project-text h1,
    .section-footer h1 {
        font-size: 52px;
        line-height: 1.05;
    }

    .section-hero-text p,
    .section-project-text p {
        font-size: 23px;
        line-height: 1.4;
    }
    .section-project-text p.supplemental {
        display: block;
    }


    .section-project-images,
    .section-project-text {
        height: 600px;
    }

    .section-project-text-inner {
        position: absolute;
        bottom: 0;
        width: auto;
        max-width: 595px;
        padding: 0 70px 60px 70px;
    }
}