/* Normalization by Reboot.css - 07/08/2024 */
  body,code,kbd,pre,samp{font-family:"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif}dl,ol,p,pre,ul{margin-top:0}address,dl,ol,p,pre,ul{margin-bottom:1rem}body,caption{text-align:left}dd,h1,h2,h3,h4,h5,h6,legend{margin-bottom:.5rem}address,legend{line-height:inherit}[role=button],[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled),summary{cursor:pointer}progress,sub,sup{vertical-align:baseline}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:#000}a>code,hr,pre code{color:inherit}hr{margin:1rem 0;border:0;border-top:1px solid;opacity:.25}h1,h2,h3,h4,h5,h6{margin-top:0;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}h2{font-size:calc(1.325rem + .9vw)}h3{font-size:calc(1.3rem + .6vw)}h4{font-size:calc(1.275rem + .3vw)}h5{font-size:1.25rem}h6{font-size:1rem}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{font-style:normal}ol,ul{padding-left:2rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-left:0}blockquote,figure{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.1875em;background-color:#fff3cd}sub,sup{position:relative;font-size:.75em;line-height:0}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-size:1em}code,kbd,pre{font-size:.875em}pre{display:block;overflow:auto}pre code{font-size:inherit;word-break:normal}code{color:#d63384;word-wrap:break-word}kbd{color:#fff;border-radius:.25rem;padding:.1875rem .375rem;background-color:#212529}kbd kbd{padding:0;font-size:1em}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border:0 solid;border-color:inherit}label,output{display:inline-block}button{border-radius:0}fieldset,iframe{border:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0}legend{float:left;width:100%;padding:0;font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}summary{display:list-item}[hidden]{display:none!important}
/* INFO */
/* 7 Layers (z-index depth) */
/* index:  5 = Layer for contact content overlay */
/* index:  4 = Layer for contact overlay */
/* index:  3 = Layer for header, footer and back to top button */
/* index:  2 = Layer for popup info for projects */
/* index:  1 = Layer for 'A multidisciplinary...' text */
/* index:  0 = Layer for projects thumbnails */
/* index: -1 = Layer for background 1 */
/* index: -2 = Layer for background 2 */
/* index: -3 = Layer for background 3 */
/* index: -4 = Layer for overlay default position */
/* index: -5 = Layer for overlay content default position */

/* APP STYLES */
/* GLOBALS */
/* Colors */
:root{
  /* Project Palette */
  --raisin-black: #231f20;
  --glaucous: #6a84c2;
  --medium-aquamarine: #6ac9bd;
  --new-york-pink: #df827b;
  --columbia-blue: #c6e3de;
  --dust-storm: #ebc8c4;
  --light-periwinkle: #bdc6e0;
  --jet: #363636;
  --white: #ffffff;
  /* Introduced Colors */
  --independence: #415075;
}

/* Page Load Fade-In */
/* Only applies when JS is enabled (progressive enhancement) */
html.js body {
  opacity: 0;
}
html.js.loaded body {
  opacity: 1;
  transition: opacity 0.4s ease-out;
}
html.js header.top-bar,
html.js #about {
  opacity: 0;
}

/* Fonts */
body{
  font-family: "Lora", Georgia, Garamond, "Times New Roman", Times, serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: var(--raisin-black);
}
/* Custom Cursor */
html, body, a, [role=button], button, [type=button]:not(:disabled){
  cursor: none;
}
#tko-cursor {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  background-color: #6c6bc2;
  border-radius: 50%;
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%);
  will-change: width, height, transform, border;
  z-index: 99999;
  pointer-events: none;
}
/* Misc */
body{
  position: relative;
  line-height: 2;
}
a{
  text-decoration: none;
  color: var(--glaucous);
}
a:hover{
  color: var(--columbia-blue);
}
address a{
  color: var(--white);
}
/* Transitions */
a{
  transition: all 250ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}
/* Images */
img{
  width: 100%;
  max-width: 100%;
  height: auto;
}
/* Sticky Footer Fix */
section#main-grid, article.post-single{
  min-height: 100vh;
}

/* FULLSCREEN OVERLAY */
#overlay-background{
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -4;
}
#overlay-background svg path {
  fill: #363636fa;
}
#tko-overlay{
  background: #363636fa;
  position: fixed;
  z-index: -5;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-button-wrapper{
  padding: 2em;
  position: absolute;
  top: 0;
  right: 0;
}
#close-overlay{
  outline: none;
  border:none;
  background-image:none;
  background-color:transparent;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  width: 32px;
}
#tko-overlay .contact-info-wrapper{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  color: var(--white);
}
#tko-overlay .contact-info-wrapper a.logo{
  display: block;
  transition: unset;
  width: 185px;
}
#tko-overlay .contact-info-wrapper address.contact-details, #tko-overlay .contact-info-wrapper nav.contact-menu{
  text-align: center;
}
#tko-overlay .contact-info-wrapper address.contact-details{
  padding-top: 3rem;
}
#tko-overlay .contact-info-wrapper span.copyright{
  padding-top: 1.5rem;
}

/* HEADER */
header.top-bar{
  z-index: 3;
  width: 100%;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 2.5em;
  padding-top: 3em;
  filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
  mix-blend-mode: difference;
}
/* Safari Fixes */
/* Safari 5+ Only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  header.top-bar{
    filter: sepia(5) saturate(1) invert(0)  contrast(0) grayscale(0) brightness(2);
  }
}
header.top-bar a.logo, footer.main-footer .footer-wrapper .footer-inner.left a.logo{
  width: 100%;
  max-width: 185px;
}
header.top-bar nav.main-menu ul{
  display: flex;
  list-style: none;
}
header.top-bar nav.main-menu ul li::after{
  content: "/";
  margin: 0 0.5em;
}
header.top-bar nav.main-menu ul li:last-child::after{
  content: "";
}
header.top-bar nav.main-menu ul li a{
  text-decoration: none;
  color: var(--raisin-black);
}

/* HOMEPAGE */
/* Main Text*/
#about{
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  position: sticky;
  top: 10em;
  z-index: 1;
  filter: sepia(5) saturate(100) invert(1) grayscale(1) contrast(9);
  mix-blend-mode: difference;
  pointer-events: none;
  padding-left: 2em;
}
/* Safari Fixes */
/* Safari 5+ Only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  #about{
    filter: sepia(5) saturate(1) invert(0)  contrast(0) grayscale(0) brightness(2);
  }
}
#about h1{
  width: 100%;
  max-width: 615px;
  font-weight: 400;
  font-size: 2.5rem;
}
#about mark{
  font-weight: 700;
  font-style: italic;
  padding: 0;
  background: unset;
}

/* Grid */
#main-grid{
  height: auto;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  margin-top: -10em;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin-bottom: 5%;
}
#main-grid .grid-item:first-child{
  padding-top: 10em;
}
#main-grid .grid-item{
  padding: 2.5%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
} 
#main-grid .grid-item .info{
  position: absolute;
  z-index: 2;
  width: 100%;
  max-width: 60%;
  padding: 1em 1.25em;
  border: 1px solid var(--raisin-black);
  border-radius: 5px;
  background-color: var(--white);
  opacity: 0;
  pointer-events: none;
  top: 2rem;
  left: 2rem;
}
#main-grid .grid-item .info h1{
  font-size: calc(0.8rem + .6vw);
}
#main-grid .grid-item .info .categories, .post-single .meta-data .categories{
  display: flex;
  gap: 0.5em;
}
#main-grid .grid-item .info .categories span.category, .post-single .meta-data .categories span.category{
  text-transform: lowercase;
  font-style: italic;
  font-size: 0.85rem;
  padding: 0em 0.5em 0.1em;
  border-radius: 8px;
  margin-right: 0.25em;
  line-height: 1rem;
  font-weight: 500;
}
#main-grid .grid-item .info .categories span.category:last-child, .post-single .meta-data .categories span.category:last-child{
  margin-right: 0;
}
.categories span.category.graphics{
  background-color: var(--columbia-blue);
}
.categories span.category.motion{
  background-color: var(--light-periwinkle);
}
.categories span.category.audio{
  background-color: var(--dust-storm);
}
#main-grid .grid-item figure{
  margin: 0;
}
#main-grid .grid-item figure img{
  visibility: hidden;
}

/* POST SINGLE */
/* Main Text*/
article.post-single{
  width: 100%;
  margin: 0 auto;
  max-width: calc(1080px + 10%);
  padding: 0 5%;
  padding-top: 2em;
}
article.post-single .top-banner{
  margin-top: 2.5em;
  width: 100%;
  text-align: center;
}
article.post-single .main-content{
  margin-top: 3em;
  margin-bottom: 2.5em;
}
article.post-single .main-content p{
  font-size: 0.95rem;
  margin-bottom: 1.65rem;
}
/* Columns spacing hot fix */
@media (min-width: 782px) {
  article.post-single .main-content .wp-block-column:not(:first-child) {
      margin-left: 2.25em;
  }
}

/* BACK TO TOP BUTTON */
#back-to-top{
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: block;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: flex-end;
  gap: 0.25em;
}
#back-to-top svg{
  width: 16px;
}

/* FOOTER */
footer.main-footer{
  position: relative;
  z-index: 3;
  width: 100%;
  background-color: var(--jet);
  color: var(--white);
  /*padding: 7em 0 5em;*/
  padding: 5em 0 3.125em;
}
footer.main-footer span.copyright{
  display: flex;
  justify-content: center;
  margin-top: 5em;
}
footer.main-footer .footer-wrapper{
  width: 100%;
  max-width: calc(1080px + 10%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 5%;
}
footer.main-footer .footer-wrapper .footer-inner{
  width: 47.50%;
  display: flex;
}
footer.main-footer .footer-wrapper .footer-inner.left{
  flex-direction: column;
}
footer.main-footer .footer-wrapper .footer-inner.left a.logo{
  margin-bottom: 3em;
}
footer.main-footer .footer-wrapper .footer-inner.left address.contact-details a{
  color: var(--white);
}
footer.main-footer .footer-wrapper .footer-inner.left address.contact-details a:hover, #tko-overlay .contact-info-wrapper address.contact-details a:hover{
  color: var(--dust-storm);
}
footer.main-footer .footer-wrapper .footer-inner.right{
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  margin-bottom: 3ch;
}
footer.main-footer .footer-wrapper .footer-inner.right nav.footer-menu ul, #tko-overlay .contact-info-wrapper nav.contact-menu ul{
  list-style: none;
  padding-left: 0;
}
footer.main-footer .footer-wrapper .footer-inner.right nav.footer-menu ul li a, #tko-overlay .contact-info-wrapper nav.contact-menu ul li a{
  text-decoration: none;
}
footer.main-footer .footer-wrapper .footer-inner.right nav.footer-menu ul li:nth-child(3n-2) a, #tko-overlay .contact-info-wrapper nav.contact-menu ul li:nth-child(3n-2) a{
  color: var(--medium-aquamarine);
}
footer.main-footer .footer-wrapper .footer-inner.right nav.footer-menu ul li:nth-child(3n-1) a, #tko-overlay .contact-info-wrapper nav.contact-menu ul li:nth-child(3n-1) a{
  color: var(--glaucous);
}
footer.main-footer .footer-wrapper .footer-inner.right nav.footer-menu ul li:nth-child(3n) a, #tko-overlay .contact-info-wrapper nav.contact-menu ul li:nth-child(3n) a{
    color: var(--white);
}
footer.main-footer .footer-wrapper .footer-inner.right nav.footer-menu ul li a:hover, #tko-overlay .contact-info-wrapper nav.contact-menu ul li a:hover{
  color: var(--dust-storm);
}

/* PARALLAX CANVAS BACKGROUND */
#parallax-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  /* GPU compositing hints for smoother scrolling */
  will-change: contents;
  contain: strict;
}

@media (prefers-reduced-motion: reduce) {
  #parallax-canvas {
    display: none;
  }
}

/* APP ADD-ONS STYLES */
/* SWUPJS */
/* Define a transition duration during page visits */
html.is-changing .transition-fade {
  transition: opacity 0.5s;
  opacity: 1;
}
/* Define the styles for the unloaded pages */
html.is-animating .transition-fade {
  opacity: 0;
}
/* Delay the #about container transition */
html.is-changing #about, html.is-leaving #about{
  transition: opacity 0.75s 0.5s;
  opacity: 1;
}
html.is-animating #about{
  opacity: 0;
}



/* RESPONSIVE */
@media (hover: none) {
  #tko-cursor{
    display: none;
  }
}
@media only screen and (max-width: 768px) {
  header.top-bar{
    padding: 0 1.75em;
    padding-top: 3em;
  }
  header.top-bar nav.main-menu ul li a{
    font-size: 0.75rem;
  }
  header.top-bar nav.main-menu ul li::after{
    font-size: 0.75rem;
  }
  #about{
    padding: 0 1.75em;
    position: static;
    margin-top: 2em;
    filter: unset;
    mix-blend-mode: unset;
  }

  #main-grid{
    height: auto;
    width: 100%;
    max-width: calc(1080px + 10%);
    padding: 0 5%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 5%;
    margin-top: 0;
  }
  #main-grid .grid-item{
    padding: 2.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
  }
  #main-grid .grid-item:first-child{
    padding-top: 1em;
  }
  #main-grid .grid-item .info{
    display: none;
  }
  article.post-single{
    padding: 0 1.75em;
    padding-top: 2em;
  }
  article.post-single .meta-data{
    max-width: 100%;
    padding: 0;
  }
  footer.main-footer .footer-wrapper{
    padding: 0 1.75em;
  }
}
/* Overlay close button fix on iOS devices */
@supports (-webkit-touch-callout: none) {
  #tko-overlay .close-button-wrapper #close-overlay{
    width: 100%;
    max-width: 64px;
  }
  #tko-overlay .close-button-wrapper #close-overlay svg{
    width: 100%;
  }
  #main-grid .grid-item .info{
    display: none;
  }
}
/* Mix-blend mode fix and grid items not showing up when going back to home on iPad devices */
@supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none){  
  @media (min-width: 768px) and (max-width: 1376px){
    header.top-bar{
      filter: unset;
      mix-blend-mode: unset;
      background: var(--white);
    }
    #about{
      filter: unset;
      mix-blend-mode: unset;
    }
    #main-grid .grid-item{
      display: block;
    }
  }
}