/* Josh W Comeau's CSS Reset, condensed joshwcomeau.com */
*, *::before, *::after {box-sizing: border-box;}
* {margin: 0;padding: 0;}
body {line-height: 1.5;text-align: center;text-rendering: optimizeLegibility;}
img, picture, video, canvas, svg {display: block;max-width: 100%;}
input, button, textarea, select {font: inherit;}
p, h1, h2, h3, h4, h5, h6 {overflow-wrap: break-word;}
#root, #__next {isolation: isolate;}

/* Sebastiano Guerriero Typography System */
:root {
    --font-primary: "Chronicle SSm A", "Chronicle SSm B", georgia, times, serif;
    --font-secondary: 'Gotham SSm A', 'Gotham SSm B', helvetica, arial, sans-serif;

    /* set base values */
    --text-base-size: 1em;
    --text-scale-ratio: 1.2;

    /* type scale */
    --text-xs: calc(1em / (var(--text-scale-ratio) * var(--text-scale-ratio)));
    --text-sm: calc(1em / var(--text-scale-ratio));
    --text-md: calc(1em * var(--text-scale-ratio));
    --text-lg: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
    --text-xxxl: calc(1em * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));

    /* line-height */
    --heading-line-height: 1.5;
    --body-line-height: 1.5;
}
@include breakpoint(md) {
    :root {
        --text-base-size: 1em;
        --text-scale-ratio: 1.25;
    }
}
body {
    font-size: var(--text-base-size);
    font-family: var(--font-primary);
    color: var(--color-text);
}
h1, h2, h3, h4, form legend {
    color: var(--color-text-heading);
    margin-bottom: var(--space-xxs);
    line-height: var(--heading-line-height);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}
/* text size */
.text--xxxl {
    font-size: var(--text-xxxl);
}
h2, .text--xl {
    font-size: var(--text-xl);
}
h3, .text--lg {
    font-size: var(--text-lg);
    font-family: var(--font-secondary);
}
p span, p a, main li a {
    font-family: var(--font-secondary);
    font-size: .7em;
    text-transform: uppercase;
    font-weight: 700;
}
h4, .text--md {
    font-size: var(--text-md);
    font-family: var(--font-secondary);
}
.text--sm, small {
    font-size: var(--text-sm);
}
.text--xs {
    font-size: var(--text-xs);
}
p {
    line-height: var(--body-line-height);
}
b, strong {
    font-weight: bold;
}
.text-container {
    h2, h3, h4 {
        margin-top: var(--space-sm);
    }
    
    ul, ol, p {
        margin-bottom: var(--space-md);
    }

    ul, ol {
        list-style-position: outside;
        padding-left: 24px;
    }

    ul {
        list-style-type: disc;
    }

    ol {
        list-style-type: decimal;
    }

    ul li, ol li {
        line-height: var(--body-line-height);
    }
    
    em {
        font-style: italic;
    }

    u {
        text-decoration: underline;
    }
}
/* utility classes */
.truncate {
    // truncate text if it exceeds parent
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}



/* Grid Nav Bar */
nav {
    max-width: 960px;
    text-align: left;
    margin: 0px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 33px 1fr;
    justify-items: end;
    align-items: center;
    height: 63px;
}
nav ul {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    
}
nav li {
    list-style: none;
    display: inline-block;
    width: auto;
    justify-self: center;
    align-self: center;
}
nav li a {
    display: block;
    }
h1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}



/* Grid Body */
article {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5em 1.5em 1.5em;
    text-align: left;
    display: grid;
    grid-template-columns: repeat(12, [col-start] 1fr, minmax(min-content, 300px));
    grid-template-rows: auto;
    column-gap: 1.5em;
    row-gap: 1em;
    justify-content: center;
    justify-items: baseline;
    align-items: start;
}
.pieces {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 1em;
    justify-content: center;
    justify-items: center;
    align-items: end;
}
.portdeets {
    grid-column-start: 8;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
}
.portdesc {
    grid-column-start: 1;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end: 2;
}
.intro {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row-start: 1;
    grid-row-end: 2;
    padding-top: 0.75em;
    font-family: "Chronicle SSm A", "Chronicle SSm B", georgia;
    font-weight: 400;
    font-size: 3em;
}
.tagline {
    grid-column-start: 5;
    grid-column-end: 13;
    grid-row-start: 2;
    grid-row-end: 3;
    font-size: 1em;
}
.img {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: span 4;
    margin-top: 2.5em;
    height: 100%;
}
img {
    height: auto;
}
.bio {
    grid-column-start: 5;
    grid-column-end: 13;

}
.title {
    grid-column-start: 1;
    grid-column-end: 4;
    margin: 0 0 0 auto;
    width: 100%;
}
.highlights {
    grid-column-start: 5;
    grid-column-end: 13;
    border-bottom: 1px solid #dfdfdf;
    padding: 0.5em 0 1.2em 0;
}
.highlights li {
    padding-bottom: 0.25em;
}


/* Nav Bar Design */
header {
    height: 3.875em;
    width: 100%;
    background: #424e57;
    border-bottom: 1px solid #414547;
    box-shadow: 0px 1px 3px rgba(0,0,0,.4);
    background-color: #424e57;
    display: block;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;
}
h1 {position: relative;left: .25em;}
h1 a {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    opacity: .35;
    height: 33px;
    width: 33px;
    display: block;
    text-decoration: none;
    background: transparent url(images/logo.svg) no-repeat left bottom;
}
h1 a:hover {opacity: .75;}
h1 a:active {opacity: 1;}
header li a {
    padding: 0.7em 1.05em;
    text-decoration: none;
    color: #97b6bc;
    display: inline-block;
    font-weight: 400;
    font: normal 0.88em/1 'Gotham SSm A', 'Gotham SSm B', helvetica, arial, sans-serif;
}
header li a:hover {
    background-color: rgba(0,0,0,.08);
    border-radius: 5em;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,.5);
    color: white;
}
#current a {
    border-radius: 5em;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,.7);
    color: white;
    background-color: rgba(0,0,0,.3);
}
header li a:active {
    box-shadow: inset 0px 5px 8px rgba(0,0,0,.6);
    color: #a9a9a9;
    text-shadow: none;
    background: rgba(0,0,0,.14) linear-gradient(top, rgba(0,0,0,.2) 100%, transparent 0%);
}



/* Body Design */
body {font-weight: 400;}
main {background: #f4f4f4;padding-top: 5.5em;}
h2 {font-family: "Gotham SSm A", "Gotham SSm B", helvetica, arial, sans-serif;font-weight: 700;letter-spacing: -0.05em;font-size: 2em;}
h3, h4 {text-transform: uppercase;font-weight: 700;}
.title {text-align: right;}
.img img {box-shadow: 0px 1px 4px rgba(0,0,0,.3);}
dl {border-bottom: 1px solid #dfdfdf;padding-top: 1em;}
dt {font-family: var(--font-secondary);font-style: normal;font-weight: 700;font-size: 0.75em;text-transform: uppercase;padding: 0 0.5em 0.5em 0.5em;}
dd {font-family: var(--font-secondary);border-top: 1px solid #dfdfdf;color: #999;font-style: normal;font-weight: 400;}
dd a {display: block;text-decoration: none;color: #999;padding: 5px;}
dd a:hover {background-color: #ccc;color: white;}
p {padding-bottom: 1em;}
p a, main li a {color: black;text-decoration: underline;}
p a:hover, main li a:hover {color: #424e57;text-decoration: none;}
.fullwidth {background-color: white;padding-top: 2em;}
.title {font-size: var(--text-sm);padding-top: 1em;line-height: 1.5}
.cvh {font-size: var(--text-sm);padding: 1em 0 0 0;width: 100%;border-top: 1px dotted rgba(0, 0, 0, 0.1);}
p.cvv {padding: 0;margin: 0;}
ul.cvv {padding: 0 0 0 1em;}
.history {column-count: 3;column-gap: 1em;column-fill: balance;padding-bottom: 1em;}
.history p {padding-bottom: 0}
.history p:nth-of-type(n + 2) {text-indent: 1.5em;}
.history p:first-child:first-letter {float: left;font-size: 5em;line-height: 1em;padding: 0px .15em 0 0;}

footer {display: block;clear: both;background-color: white;border-top: 1px solid #f6f6f6;}
footer p {font-weight: 400;color: #bcc8d1;padding: 1.5em 0;font-size: 0.75em;}


/**** Portfolio ****/
.pieces {}
.pieces li {list-style-type: none;box-shadow: 0px 0px 5px rgba(0,0,0,.4);height: auto;overflow: hidden;border-radius: 4px;position: relative;z-index: 10;}
.pieces img {padding: 0;margin: 0;}
.pieces a {color: white;text-decoration: none;border-radius: 4px;display: block;width: 100%;height: 100%;overflow: hidden;}
.pieces div {display: none;background-color: rgba(0,0,0,.8);position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;border-radius: 4px;}
.pieces a:hover {}
.pieces a:hover div {display: block}
.pieces h4 {color: white;padding: 3em 1em 0.5em 1em;text-shadow: 0px 0px 3px black;}
.pieces p {color: white;padding: 0 1em 1em 1em;text-shadow: 0px 0px 3px black;font-size: 0.85em;}
.pieces strong {text-transform: uppercase;opacity: .5;font-weight: normal;}

/**** Slides ****/
/*** Must move to proper grid ***/
.slideh {padding-top: 1em;}
#gallery {text-align: center;margin: 1.5em auto 0 auto;width:960px;overflow:hidden;z-index: 800;mask-box-image: url(images/mask.png) 100 stretch;background: transparent;}
#slides {height:643px;width:960px;overflow:hidden;}
.slide {float:left;}
#menu {margin: 0px auto;position: relative;bottom: 2em;}
#gallery ul {margin: 0;padding: 0;}
#gallery li {background-color: transparent;display:inline-block;list-style:none;overflow:hidden;}
#gallery li.act, #gallery li.act:hover, #gallery li a:hover {color: black;background-color: transparent;opacity: 1;}
#gallery li.act a {cursor:default;opacity: 1;}
#gallery li a {display:block;opacity: .2;padding: 0 7px;}
.portdeets {border-top: 1px solid #dfdfdf}
.portdeets h3 {padding: 0.75em 0.25em 0.25em 0.25em;color: #506f88;}
.portdeets h5 {padding: 0 0.25em 0.25em 0.25em;font-weight: 400;font-family: var(--font-secondary);}
.portdeets h5 strong {color: #999;font-size: 0.8em;text-transform: uppercase;}
.portdeets dl {}
.portdeets dt {text-transform: uppercase;padding: 0 0.25em 0.25em 0.25em;}
.portdeets dd {padding: 0.25em;}


@media only screen and (max-width: 768px) {
    .intro {font-size: 2.5em;}
    .tagline {font-size: 1.2em;}
    .history {column-count: 1;}
    .title, .cvh {padding: 1.5em 0 0 0;margin: 0.5em 1em 0 auto;}
    .highlights. cvv {padding: 0 1.5em;}
    .portdeets {padding-bottom: 2em;}
    .pieces {grid-template-columns: repeat(3, 1fr);}
    /* Must modernize to grid */
    #gallery, #slides {width: 768px;}
    #gallery {position: relative;right: 14px;}
    .slide img {max-width: 740px;height: 496px;}
}

@media only screen and (max-width: 650px) {
    article {display: block;}
    .intro {padding: 0.5em 0;font-size: 2.5em;}
    .tagline {font-size: 1em;}
    .title {text-align: left;}
    .img {padding: 1em 0;margin: 0;}
    .pieces {grid-template-columns: repeat(2, 1fr);}
    /* Must modernize to grid */
    #gallery, #slides {width: 320px;}
    .slide img {max-width: 320px;height: 214px;}
    #slides {width: 320px;height:264px;}
}