@charset "UTF-8";
/* ========================================================= VARIABLES */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  --themeColor: #795285; }

*, *:before, *:after {
  box-sizing: inherit; }

html, body {
  min-height: 100%; }

body {
  overscroll-behavior: none;
  position: relative; }

* {
  transition: all 0.25s ease; }

img {
  /* removes bottom space from img tag */
  vertical-align: top;
  /* can help with extra vertical space */
  line-height: 1; }

/* --------------------------------------------------------- clearfix */
.clearfix::after {
  content: "";
  clear: both;
  display: table; }

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

abbr {
  text-decoration: none; }

/* ========================================================= SITE-WIDE */
/* --------------------------------------------------------- typography */
html {
  color: rgba(0, 0, 0, 0.7);
  font-size: 10px;
  text-decoration-skip-ink: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-display: swap;
  line-height: 2;
  font-size: 1.2rem; }
  @media (min-width: 720px) {
    body {
      font-size: 1.4rem; } }

header {
  font-size: 1.4rem; }

.hyphenate {
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual; }

.bulletList {
  margin-left: 1em;
  list-style-position: inside;
  list-style: disc; }

/* ========================================================= COMPONENTS */
body.body__about {
  background: #EBE6DB;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "main" "siteFooter";
  height: 100vh; }
  body.body__about h2 {
    color: #795285; }
  body.body__about h2, body.body__about h3 {
    margin-top: 1em; }
  body.body__about h2 + h3 {
    margin-top: 0; }
  body.body__about main {
    grid-area: main;
    margin: 1.5em 3em; }
    @media (min-width: 720px) {
      body.body__about main {
        margin: 5.5em auto 1.5em auto;
        max-width: 45em; } }
  body.body__about header {
    margin-bottom: 2em; }
    body.body__about header h1 {
      color: #795285;
      font-size: 3em;
      font-weight: normal;
      line-height: 1.6; }
    body.body__about header p {
      text-transform: uppercase;
      line-height: 1.4; }
  body.body__about .testimonial article {
    margin: 2em 0;
    padding: 2em;
    background: rgba(0, 0, 0, 0.03); }
  body.body__about .testimonial blockquote {
    font-family: "PT Serif", Georgia, serif;
    font-size: 1.2em;
    font-style: italic;
    line-height: 1.5; }
  body.body__about .testimonial cite {
    margin: .5em 0 0 0;
    padding: 0;
    display: block;
    color: var(--themeColor);
    font-style: italic;
    line-height: 1.4; }
    body.body__about .testimonial cite span {
      margin: 0;
      padding: 0;
      font-weight: bold; }
    body.body__about .testimonial cite:before {
      content: '— '; }
  @media (min-width: 720px) {
    body.body__about .testimonial article {
      display: flex;
      flex-direction: column; }
    body.body__about .testimonial article:nth-of-type(even) {
      border-right: 6px solid rgba(121, 82, 133, 0.65);
      text-align: right; }
      body.body__about .testimonial article:nth-of-type(even) blockquote {
        /* cludge for lack of justify-item */
        margin-left: auto; }
    body.body__about .testimonial article:nth-of-type(odd) {
      border-left: 6px solid rgba(121, 82, 133, 0.65); }
    body.body__about .testimonial blockquote {
      width: 80%; } }
  body.body__about .body__about--description p, body.body__about .body__about--description ul {
    margin-bottom: 1.5em; }
  body.body__about .body__about--awards p {
    margin: 0;
    padding: 0;
    font-style: italic;
    line-height: 1.5; }
  body.body__about .body__about--contact {
    font-size: .8em; }
    @media (min-width: 720px) {
      body.body__about .body__about--contact {
        font-size: 1em; } }
  body.body__about .body__about--intro {
    margin: 1.5em 0;
    color: #795285;
    font-family: "PT Serif", Georgia, serif;
    font-size: 1.7em;
    font-style: italic;
    line-height: 1.7; }
    @media (min-width: 720px) {
      body.body__about .body__about--intro {
        font-size: 2em;
        line-height: 1.5; } }
    body.body__about .body__about--intro span {
      font-size: 1.5em; }
  body.body__about .body__about--list {
    margin-left: 1em;
    list-style-position: outside;
    list-style: disc; }

body.workTOC {
  background: #EBE6DB;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  height: 100vh;
  grid-template-areas: "main" "siteFooter"; }
  body.workTOC main {
    grid-area: main;
    margin: 2em; }
    @media (min-width: 720px) {
      body.workTOC main {
        margin: 5.5em 2em 2em 2em; } }
    body.workTOC main h1 {
      color: #005B69;
      font-size: 3em;
      line-height: 1.6; }
    body.workTOC main ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      grid-gap: 10px; }
    body.workTOC main li {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      border-radius: 6px;
      padding: 1em;
      min-height: 15vh; }
      body.workTOC main li.digital {
        background: #795285; }
      body.workTOC main li.traditional {
        background: #402b46; }
      body.workTOC main li:hover {
        background: #005B69; }
      body.workTOC main li a {
        display: inline-block;
        width: 100%;
        height: 100%; }
      body.workTOC main li a:link, body.workTOC main li a:visited {
        color: #d7c7dc; }
      body.workTOC main li a:hover, body.workTOC main li a:active {
        color: #69ebff; }
      body.workTOC main li h2 {
        line-height: 1.2; }
      body.workTOC main li p {
        font-size: .8em;
        letter-spacing: .03em;
        line-height: 1.4;
        text-transform: uppercase; }

.body__work {
  background: #ccc; }
  @media (min-width: 720px) {
    .body__work {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr auto;
      grid-template-areas: "projDesc projPictures" "siteFooter siteFooter"; } }
  .body__work section {
    padding: 4em; }
    @media (min-width: 720px) {
      .body__work section {
        padding: 2em; } }
  .body__work img {
    width: 100%; }
  .body__work summary {
    margin: 1em 0;
    border-radius: 6px;
    padding: 1em;
    background: black;
    color: white; }
    .body__work summary:hover {
      cursor: pointer; }

section.proj__desc {
  grid-area: projDesc;
  background: #f2eef3;
  min-height: 50vh; }
  @media (min-width: 960px) {
    section.proj__desc {
      min-height: 100vh; } }
  section.proj__desc header {
    margin-bottom: 2em;
    color: #005B69;
    line-height: 1; }
    section.proj__desc header h2 {
      margin-bottom: .25em; }
    section.proj__desc header p {
      margin-bottom: .5em; }
  section.proj__desc .proj__desc--nav {
    margin-bottom: 2em; }
    section.proj__desc .proj__desc--nav img {
      margin-right: .5em;
      border: 1px solid #005B69;
      border-radius: 9999px;
      background: #005B69;
      width: 32px; }
      section.proj__desc .proj__desc--nav img:hover {
        border: 1px solid #e1523d;
        background: #e1523d; }
  section.proj__desc .proj__desc--name {
    color: #795285;
    font-size: 5em;
    font-weight: 300;
    letter-spacing: -.03em;
    line-height: 1.1; }
    @media (min-width: 960px) {
      section.proj__desc .proj__desc--name {
        font-size: 6em; } }
  section.proj__desc .proj__desc--client {
    font-size: 1.5em;
    text-transform: uppercase; }
  section.proj__desc .proj__desc--brief p {
    margin-bottom: 2em; }
  section.proj__desc .proj__desc--link {
    margin-top: 3em; }
    section.proj__desc .proj__desc--link a {
      border: 1px solid #005B69;
      border-radius: 6px;
      color: #005B69;
      padding: .5em 2em; }
    section.proj__desc .proj__desc--link a:hover, section.proj__desc .proj__desc--link a:active {
      background: #e1523d;
      border-color: #e1523d;
      color: white; }

section.proj__pictures {
  grid-area: projPictures;
  text-align: center;
  background: #6c6b6c; }
  @media (min-width: 720px) {
    section.proj__pictures {
      padding-top: 7em; } }
  section.proj__pictures figure {
    margin-bottom: 1em; }
  section.proj__pictures img {
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
    width: 100%; }
  section.proj__pictures .video {
    margin-bottom: 2em; }

/* --------------------------------------------------------- hero */
.hero {
  border: none;
  display: flex;
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  background-origin: border-box; }
  .hero__home {
    background-image: url("/images/613602-1200.jpg");
    align-items: center;
    justify-content: flex-end; }
    .hero__home div {
      padding: .5em 0 .5em .5em;
      background: rgba(0, 0, 0, 0.2);
      flex: 0 1 70%;
      color: white;
      font-size: 3em;
      font-weight: 300; }
      @media (min-width: 480px) {
        .hero__home div {
          flex: 0 1 70%; } }
      @media (min-width: 720px) {
        .hero__home div {
          flex: 0 1 50%;
          font-size: 4em; } }
      .hero__home div .name {
        margin: 0;
        padding: 0 0 .3em 0;
        line-height: 1;
        color: #69ebff; }
      .hero__home div .jobTitle {
        margin: 0;
        padding: .25em 0 0 0;
        line-height: 1;
        border-top: 1px solid #c1a7c9;
        color: #c1a7c9;
        font-size: .5em;
        font-weight: 500;
        text-transform: uppercase; }

/* --------------------------------------------------------- home */
@media (min-width: 720px) {
  .homeNav {
    display: flex; } }

.homeCard {
  flex: 0 1 50%;
  display: flex;
  align-items: center;
  height: 50vh;
  color: white;
  background-color: rgba(255, 0, 0, 0.5); }
  .homeCard div {
    margin: 0 auto; }
  .homeCard img {
    width: 80vw; }
    @media (min-width: 720px) {
      .homeCard img {
        width: 40vw; } }
  .homeCard:nth-of-type(even) {
    background-color: #6b4875; }
    .homeCard:nth-of-type(even):hover {
      background-color: #402b46; }
  .homeCard:nth-of-type(odd) {
    background-color: #5c3f65; }
    .homeCard:nth-of-type(odd):hover {
      background-color: #402b46; }

/*
	.work:hover {
	filter: opacity(.5);
}
.about:hover {
	filter: opacity(.5);
}
.contact:hover {
	filter: opacity(.5);
}
*/
/* ========================================================= NAVIGATION */
a {
  color: #005B69;
  text-decoration: none; }

a:link, a:visited {
  color: #005B69; }

a:hover, a:active {
  color: #e1523d; }

.siteNav {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  left: 10%;
  height: 44px;
  width: 80%; }
  @media (min-width: 720px) {
    .siteNav {
      position: absolute;
      margin: 2.5em;
      padding: 0;
      left: auto;
      top: 0;
      right: 0;
      width: auto; } }
  .siteNav ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    border: 1px solid #005B69;
    border: 0;
    border-radius: 6px;
    padding: 0;
    background-color: #005b69; }
    @media (min-width: 720px) {
      .siteNav ul {
        background-color: #005b69; } }
  .siteNav li {
    margin: 0;
    padding: 0;
    height: 100%; }
    .siteNav li:not(:last-child) {
      border-right: 1px solid #005B69; }
    .siteNav li:hover {
      background: #e1523d; }
  .siteNav a {
    margin: 0;
    padding: 0 1em;
    text-decoration: none;
    text-transform: uppercase; }
  .siteNav a:link, .siteNav a:visited {
    color: #69ebff; }
  .siteNav a:hover, .siteNav a:active {
    color: #69ebff; }

/* ========================================================= FOOTER */
.siteFooter {
  grid-area: siteFooter;
  /*
	width: 100vw;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1000;
	overflow: hidden;
*/
  padding: 2em 2em 6em 2em;
  background: #202020;
  color: white;
  text-align: center; }
  @media (min-width: 720px) {
    .siteFooter {
      padding: 2em; } }
  .siteFooter h2 {
    color: #795285;
    font-weight: normal;
    letter-spacing: .5em;
    text-transform: uppercase; }
  .siteFooter .copyright {
    color: #8c8c8c;
    font-size: .8em;
    letter-spacing: .1em;
    text-transform: uppercase; }
  .siteFooter .icons {
    padding: 1em 0 .5em 0; }
  .siteFooter .icons img {
    margin: 10px;
    border: 1px solid #005B69;
    border-radius: 9999px;
    padding: 4px;
    background: #231826;
    width: 50px;
    height: 50px; }
  .siteFooter .icons img:hover {
    border-color: transparent;
    background: #e1523d; }

/* ========================================================= IMPORTS */
@media print {
  #nav-secondary, #content-secondary, header, nav, footer {
    display: none; }
  body, main, div#wrapper-flex, div#content {
    margin: 0;
    padding: 0; }
  main {
    font-size: 1.0rem; }
  main h1, main h2, main h3, main h4, main h5, main h6, main p, main li,
  main a, main a:link, main a:visited, main a:hover, main a:active {
    color: black; }
  ul, img {
    page-break-inside: avoid; } }

/* ==================================== Debug */
main a[href="#"] {
  background: yellow; }

img[alt=""], img:not([alt]) {
  border: 6px dotted #aaf; }

.fix {
  color: red;
  font-weight: bold;
  margin: 1em;
  border: 6px dotted red;
  padding: 1em; }

/*# sourceMappingURL=main.css.map */