:root {
    box-sizing: border-box;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -.006em
}

.inline {
    display: inline-block
}

a {
    color: inherit
}

@media (min-width:639px) {
    .main-menu {
        justify-content: space-around;
        display: flex;
    }
}

.main-menu {
    background: black; 
    overflow-x: scroll; 
    overflow-y: hidden; 
}
    .menu {
        display: flex;
        padding: 0 10px;
    }


.nav-item {
    font-size:1.5em;
    letter-spacing: -0.017em; 
    font-weight: 100; 
    text-decoration: none;
    padding: 0.5em 1em;}
    .nav-item.gray span { color: hsla(240,4%,46%,100%);}
    .nav-item.gray.active span, 
    .nav-item.gray.active span::before, 
    .nav-item.gray.active span::after { 
        color:inherit; background:hsla(240,5%,64%,1); }
    .nav-item.orange span { color: hsla(25,95%,53%,100%);}
    .nav-item.orange.active span, 
    .nav-item.orange.active span::before, 
    .nav-item.orange.active span::after { 
        color:inherit; background:hsla(27,95%,60%,1); }
    .nav-item.green span { color: hsla(84,81%,44%,100%);    }
    .nav-item.green.active span, 
    .nav-item.green.active span::before, 
    .nav-item.green.active span::after { 
        color:inherit; background:    hsla(84,69%,58%,1); }
    .nav-item.purple span { color: hsla(271,91%,65%,100%);}
    .nav-item.purple.active span, 
    .nav-item.purple.active span::before, 
    .nav-item.purple.active span::after { 
        color:inherit; background:hsla(270,95%,75%,1); }
    .nav-item.blue span { color: hsla(199,89%,48%,100%);}
    .nav-item.blue.active span, 
    .nav-item.blue.active span::before, 
    .nav-item.blue.active span::after { 
        color:inherit; background:hsla(198,93%,59%,1); }
    .nav-item.active span {
        display: inline-block;
        border-radius:0;
        position: relative; 
        color: inherit;}
        .nav-item.active span::before {
            content:" "; 
            white-space:pre;
            display:inline-block;
            position:absolute; 
            left:0; 
            top:0;
            width:1em;
            border-radius:50% 0 0 50%;
            transform:translate(-100%); 
        }
        .nav-item.active span::after {
            content:" "; 
            white-space:pre;
            display:inline-block;
            position:absolute; 
            right:0; 
            top:0 ;
            width:1em;
            border-radius:0 50% 50% 0;
            transform:translate(100%); 
        }

figure {
    width: 100%;
    margin: 0rem
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0rem;
    padding: 0rem;
    background-color: #fff;
    overflow-x: hidden;
    box-sizing: border-box;
}

h1,
h2,
h3 {
    font-family: var(--font-Phenomena, Phenomena)
}

h1 {
    font-weight: 900;
    font-size: 3em;
    margin-bottom: 1rem
}

h2 {
    font-weight: 200;
    font-size: 2em;
    margin-bottom: 1rem
}

h3 {
    font-weight: 600;
    font-size: 1.25em;
    margin-bottom: .5rem;
    margin-top: 1.5rem;
    letter-spacing: .02em
}

strong {
    font-weight: 700
}

aside {
    background-color: #eee;
    padding: 1em .75em;
    border-radius: 5px
}

video {
    max-width: 100%
}

ul,
ol {
    padding-left: 1em
}

li {
    margin-top: .5em
}

li>ul>li {
    font-size: .9em;
    margin-top: .25em
}

.home,
.musings {
    display: block;
    margin: 0rem auto;
    box-sizing: border-box;
    padding: 0 10px;
}

@media (min-width: 640px) {

    .home,
    .musings {
        width: 80%
    }
}

.pdfobject-container {
    border: 1rem solid rgba(0, 0, 0, .1)
}

@media (min-width: 768px) {
    .pdfobject-container {
        height: 30rem
    }
}

@media (max-width: 767px) {
    .pdfobject-container {
        height: 14rem
    }
}

@media (min-width: 768px) {
    .pdfobject.vertical .pdfobject-container {
        height: 60rem
    }
}

@media (max-width: 767px) {
    .pdfobject.vertical .pdfobject-container {
        height: 20rem
    }
}

/* CASE STUDY STYLES ------------------------------------ */

@media (max-width: 1023px) {
    .project {
        padding: 0 2vw;
    }
    .project .gutter {
        display: none;
    }
}

.tiles-list {}

@media (max-width: 639px) {
    .tiles-list {
        column-count: 1
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .tiles-list {
        column-count: 2
    }
}

@media (min-width: 1024px) {
    .tiles-list {
        column-count: 3
    }
}

.tiles-list .tile {
    font-size: .9em;
    padding: 1em;
    margin: .5em;
    background-color: #f4f4f5;
    display: inline-block
}

.tiles-list.blue .tile {
    background-color: #e0f2fe
}

.tiles-list.green .tile {
    background-color: #dcfce7
}

.tiles-list.purple .tile {
    background-color: #f3e8ff
}

.tiles-list.orange .tile {
    background-color: #ffedd5
}

.milestones__group__label-horizontal,
.milestones__group__label-vertical {
    font-family: var(--font-Inter, Inter)
}

.blockquote.letter {
    font-size: .8em;
    font-weight: 200
}

.blockquote.letter strong {
    font-weight: 600
}

section.titled-section {
    display: flex;
    margin: 1em 0rem
}

@media (max-width: 639px) {
    section.titled-section {
        flex-direction: column
    }
}

section.titled-section>h2,
section.titled-section>h3,
section.titled-section>h4,
section.titled-section>h5,
section.titled-section>h6 {
    margin: 0rem;
    padding: 0rem;
    position: relative;
    font-weight: 600;
    margin-right: 20px;
    font-size: 1.1rem;
    flex: 2;
    text-align: center
}

section.titled-section>h2 a,
section.titled-section>h3 a,
section.titled-section>h4 a,
section.titled-section>h5 a,
section.titled-section>h6 a {
    top: 0rem
}

section.titled-section .content {
    flex: 5
}

section.titled-section .content>*:first-child {
    margin-top: 0rem
}

@media (max-width: 639px) {
    section.titled-section>h3 {
        text-align: left
    }
}

section.titled-section>h4 {
    font-size: .9em;
    font-weight: 150
}

@media (max-width: 639px) {
    section.titled-section>h4 {
        font-size: 1.2em
    }
}

@media (max-width: 639px) {
    section.titled-section>h4 {
        margin-bottom: .5em
    }
}

@media (max-width: 639px) {
    section.titled-section>h4 {
        text-align: left
    }
}

section.titled-section.h2 {
    margin-top: 4em
}

section.content-section {
    display: flex;
    margin: 1em 0rem
}

@media (max-width: 639px) {
    section.content-section {
        flex-direction: column
    }
}

section.content-section::before {
    content: " ";
    margin-right: 20px;
    flex: 2
}

section.content-section .content {
    flex: 5
}

section.content-section .content *:first-child {
    margin-top: 0rem
}

.icon-header {
    display: flex;
    flex-direction: column;
    position: relative
}

h2 .icon-header {
    display: flex;
    flex-direction: column;
}

@media (max-width: 639px) {
    h2 .icon-header {
        margin-bottom: 1em
    }
}

h2 .icon-header .title {
    letter-spacing: .01em;
    font-size: 1.5em;
    font-weight: 100;
    order: 0;
    position: relative;
    top: -.2em
}

h2 .icon-header img {
    max-width: 64px;
    display: inline-block;
    margin: 0rem auto;
    order: 1
}

@media (max-width: 639px) {
    h3 .icon-header {
        margin-bottom: .5em;
        display: inline-block;
        text-align: left;
        width: 100%;
    }
}

h3 .icon-header .title {
    font-weight: 700;
    font-family: var(--font-Phenomena, Phenomena);
    letter-spacing: .01em
}

@media (max-width: 639px) {
    h3 .icon-header .title {
        display: inline;
        margin-left: .25em;
        font-size: 24px
    }
}

h3 .icon-header img {
    display: inline-block;
    margin: 0rem auto
}

@media (max-width: 639px) {
    h3 .icon-header img {
        max-width: 24px
    }
}

@media (min-width: 640px) {
    h3 .icon-header img {
        max-width: 48px
    }
}

@media (min-width: 1024px) {
    .annotation-container::before {
        content: "*"
    }
}

@media (min-width: 1024px) {

    aside,
    figcaption,
    .annotation-container .annotation {
        position: absolute;
        right: 0rem;
        left: 100%;

        font-size: .8em;
    }
}

@media (min-width: 1024px) {

    aside,
    figcaption,
    .annotation-container .annotation {
        text-align: justify;
    }
}

@media (max-width: 1023px) {

    aside,
    figcaption,
    .annotation-container .annotation {
        display: none;
    }
}

@media (min-width: 1024px) {

    .project aside,
    .project figcaption,
    .project .annotation-container .annotation {
        margin-left: calc(1em + 1vw);
    }
}

@media (min-width: 1024px) {

    .project aside,
    .project figcaption,
    .project .annotation-container .annotation {
        width: 18vw;
        line-height: 1.15em;
    }
}

@media (min-width: 1024px) {

    .blurb aside,
    .blurb figcaption,
    .blurb .annotation-container .annotation {
        width: 15vw
    }
}

@media (min-width: 1024px) {

    .blurb aside,
    .blurb figcaption,
    .blurb .annotation-container .annotation {
        margin-left: 1em
    }
}

@media (max-width: 1023px) {
    .slideshow--caption figcaption {
        display: block;
        font-size: .8em
    }
}

.matrix.text-table>div:nth-child(2n),
.matrix.text-table tr:nth-child(2n) {
    background: #eee;
    margin: .5em 0rem
}

.matrix.text-table>div,
.matrix.text-table tr>* {
    padding: .5em
}

.matrix.text-table.matrix-flex {
    overflow-x: hidden
}

.matrix.text-table.matrix-table {
    display: block;
    max-width: fit-content;
    overflow-x: scroll
}

/*  HOME PAGE STYLES ---------------------------------------- */

.home {
    padding-bottom: 4rem
}

.home>div {
    text-align: center
}

.home .title {
    display: block;
    text-align: center;
}

.home .name {
    font-family: var(--font-Phenomena, Phenomena);
    font-weight: 900;
    font-size: 5em;
    display: inline-block;
    margin-top: 3rem;
    line-height: 1em;
    --u_lh: 1em;
}

.home > p:nth-child(1),
.home > p:nth-child(2),
.home > p:nth-child(3) 
{
    text-align: center;
}

.home .profession {
    font-family: var(--font-Phenomena, Phenomena);
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: .02em;
    padding: 0rem 1rem .5rem 1rem;
    border-bottom: 1px solid hsla(0, 0%, 0%, 100%);
    display: inline-block;
}

.home .statement {
    font-size: 2em;
    font-weight: 100;
    letter-spacing: -.02em;
    display: inline-block;
    margin-top: 1.5em;
    margin-bottom: .5em;
}

.home .statement .aliveness {
    font-weight: 800;
    font-size: 2.5rem;
    letter-spacing: .05em
}

.home .project-tiles div {
    display: flex
}

@media (max-width: 767px) {
    .home .project-tiles div {
        flex-direction: column
    }
}

@media (min-width: 768px) {
    .home .project-tiles div span {
        display: flex
    }
}

@media (max-width: 639px) {
    .home .role-icons {
        flex-direction: column
    }
}

.home .role-icons span {
    font-size: 1.5em
}

.home section {
    text-align: left;
    margin-top: 3rem
}

.home .header {
    display: block;
    text-align: left;
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-family: var(--font-Phenomena, Phenomena);
    font-weight: 300
}

.home .tiles span, .home .tiles span > a {
    display: flex;
    width: 100%;
}

.home .tiles img {
    object-fit: cover;
    height: 100%;
    flex: 1;
}

/* PROJECT PAGE STYLES  */

.project {
    display: flex;
    margin-top: 2em;
}
.project .project-title {
    margin: 0; 
    line-height: 1em;
}
@media (min-width: 768px) {
    .project .project-title {
        font-size: 4em;
    }
}

.project .project-subtitle {
    font-family: Phenomena, fantasy;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.project .context {
    text-align: left;
    width:20vw;
}

.project .tags {
    margin: 0.5em; 
}

.project .tags .tag {
    display: inline-block; 
    margin: 0.25em; 
    padding:0.5em 1em; 
    background-color: #eee;
    border-radius: 10px;
}


/* BLURB STYLES */

.blurb article.content {
    position: relative; 
}
.blurb .blurb-title {
    margin: 0; 
    line-height: 1em;
}
@media (min-width: 768px) {
    .blurb .blurb-title {
        font-size: 4em;
    }
}


.blurb .blurb-subtitle {
    font-family: Phenomena, fantasy;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: 300;
    letter-spacing: 0.02em;
}


@media (min-width:1024px) {
    .blurb article.content {
        max-width:65vw;
        margin:0 auto;
        margin-top:3em;
    }
}


/* Project Image Styles */

.project-image{
    position:relative;
    background-color:#000;
}

@media (max-width: 767px) {
    .project-image {
        margin: -2.5px 0;
    }
}

@media (min-width: 768px){
    .project-image {
        margin:-4px -2.5px    
    }
    .project-image .name{
        visibility:hidden
    }
    .project-image:hover .name{
        visibility:visible
    }
}
.project-image .name{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color: #000;
    color:#fff;
    margin:0rem;
    font-family:var(--font-Akrobat,Akrobat);
    font-size:2rem;
    padding:10px;
    font-weight:600
}

.project-image img{
    object-fit:cover;
    display:block;
    width:100%
}


/* PROJECT PAGE STYLES */

.project-page {
    display: flex; 
    flex-direction: column;
    flex-wrap: wrap;
    max-width: 1024px; 
    margin: 0 auto; 
    justify-content: center;
}
.project-page > h1 {
    text-align: center;
}

.project-page .projects {
    text-align: center;
}

.projects .project-image{
    padding: 5px;
    display: inline-block;
    box-sizing: border-box;
}

.projects img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow:hidden;
}


@media (max-width: 767px) {
    .projects .project-image {
        width: 100%;
        height: 50vw;
    }
}


@media (min-width: 768px) {
    .projects {
        padding: 0 20px;
    }
    .projects .project-image {
        width: 30vw;
        height: 30vw;
    }
}

@media (min-width: 1024px) {
    .projects .project-image {
        width: 20vw;
        height: 20vw;
    }
}

.home .projects {
    display: flex; 
}
.home .projects .project-image {
    flex: 1;
}

@media (max-width: 767px) {
    .home .projects {
        flex-direction: column;
    }
}

/*  UTIL COMPONENT STYLES _------------------------------------ */

.instructions.iframe-container {
    position: relative;
    padding-bottom: 62.5%;
    border: 5px solid #eee; 
    border-radius: 2px; 
    box-sizing: border-box;
}

.instructions.iframe-container iframe {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
    border: none;
}