/* =====================
    FONTS
=====================*/
@font-face {
  font-family: "ibmsc";
  src: url("../fonts/IBMPlexSansCond-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "frm";
  src: url("../fonts/Formata-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
}



/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}td:not([align]),th:not([align]){text-align:left}

/* =====================
  GENERAL
=====================*/

:root {
  --base: 15.6px;
  --lineheight: calc(var(--base) * 1.45);
  --sml: 0.875em;
  --color: #313B3E;
  --pagebg: #ffffff;
  --grey: #b3b3b3;
  --hover: #cd5b45;
  --padd: calc(var(--lineheight) * .7);
  --grid-columns: 12;
  --grid-column-gap: 1em;
  --grid-row-gap: 1em;
  --active: #88989b;
  --border: #6F7E7A;
}

@media screen and (min-width: 420px) {
  :root {
    --base: calc(12px * 1.2);
  }
}

@media only screen and (min-width: 768px) {
  :root {
    --padd: 1.65rem;
  }
}

@media screen and (min-width: 992px) {
  :root {
    --base: calc(12px * 1.4);
    --padd: 2.1em;
  }
}
@media screen and (min-width: 1200px) {
  :root {
    --base: calc(12px * 1.5);
    --padd: 2.4em;
  }
}

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

* {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;
  -webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

html {
}

body {
  font-size: var(--base);
  line-height: var(--lineheight);
  color: var(--color);
  font-family: "frm", Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: none;
  background: white;
  overflow-x: hidden;
  min-width: 1vw;
  min-height: 100%;
}

h1,h2,h3,h4,h5,h6 {
  font-size: 1em;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color);
  text-decoration: none;
  transition: opacity 0.1s;
}
a:hover {
  color: var(--hover);
}

.btop {
  border-top: 1px solid;
}

main {
  width: 100%;
}

ul,ol,li {
  margin: 0;
  padding: 0;
}

h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
  text-decoration: none;
}

em,b,strong,i {
  font-weight: normal;
  font-style: normal;
}

b,strong {
  font-family: "frm";
  color: var(--border);
}

p {
  margin-bottom: var(--lineheight);
}

p:last-of-type {
  margin-bottom: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.text-justify {
  text-align: justify;
}

main {
  padding-top: var(--padd);
  padding-bottom: var(--padd);
}

.bg2 {
  --color: #D4DCDA;
  --pagebg: #47585C;
  --pagebg: #2f4f4f;
  background-color: #88989b;
  background-color: var(--pagebg);
  color: var(--color);
}
.sActv, .dim {
 color: var(--active);
}
.sml {
  font-size: .8em;
}
.dim {
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: .1em;
}

.g18 {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: var(--lineheight) var(--grid-column-gap);
  padding-left: var(--padd);
  padding-right: var(--padd);
}

.hed {
  position: fixed;
  width: 100%;
  border-bottom: 1px solid var(--active);
  background: var(--pagebg);
  top: 0;
  left: 0;
  padding: var(--padd);
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: var(--lineheight) var(--grid-column-gap);
}
.hname {
  grid-column: span 9;
  align-content: baseline;
}
.nom {
  font-size: 1.175em;
}
.hdmenu {
  grid-column: span 9;
  text-align: right;
}
.hdmenu ul {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  align-content: baseline;
}
.hdmenu ul li {
  grid-column: span 3;
  font-size: .875em;
  letter-spacing: .075em;
}
.hdBlank {
  grid-column: span 14;
}

.pgEnd {
  margin-top: calc(var(--lineheight) * 6);
  margin-bottom: var(--padd);
}
.ftInner {
  grid-column: span 18;
  color: var(--active);
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: .1em;
}

.bioC {
  grid-column: 1 / span 18;
}
.bioSec {
  margin-top: 0;
  padding-top: 0; 
}
.mBuff {
  margin-top: calc(var(--lineheight) * 8); 
}
.mTtle {
  color: var(--active);
  grid-column: span 18;
  font-size: 1.175em;
}


@media only screen and (min-width: 576px) {
  .hed {
    position: fixed;
    width: calc(22.2222222% - (var(--padd) * 2));
    padding: 0;
    border-bottom: none;
    top: var(--padd);
    left: var(--padd);
    display: block;
  }
  .nom {
    font-size: 1.175em;
    height: calc(var(--lineheight) * 3);
  }
  .hname {
    grid-column: span 4;
  }
  .mBuff {
    margin-top: 0;
  }
  .mTtle {
    display: none;
  }
  .bioC {
    grid-column: 5 / span 10;
    margin-top: calc(var(--lineheight) * 3);
  }
  .ftInner {
    grid-column: 5 / span 14;
  }
}

/* sidenav */
.snav {
  position: fixed;
  top: 0;
  left: 0;
  padding: var(--padd) 0;
  background-color: #223636;
  color: #D4DCDA;
  transform: translateY(-2%);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow-y: scroll;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: transform .7s, opacity .3s;
  transition-timing-function: cubic-bezier(.28,.37,.22,1);
}
.snav * {
color: white;
}
.snav.snav-open {
  pointer-events: all;
  transform: translateY(0);
  opacity: 1;
}
.sMsvg:hover {
  fill: var(--hover);
  align-self: baseline;
}
.sNom {
  font-size: 1.175em;
}
.sNh1 {
  grid-column: span 12;
}
.sNh2 {
  grid-column: span 6;
  text-align: right;
}
.snavMenu {
  grid-column: span 18;
  display: flex;
  flex-direction: column;
  font-size: 2em;
  margin-top: calc(var(--lineheight) * 6);
}
.snavMenu a {
  display: block;
  /*border-top: 1px solid var(--border);*/
  padding-top: calc(var(--lineheight) * .35);
  padding-bottom: calc(var(--lineheight) * .65);
}
.snavMenu a:hover {
  border-top-color: var(--hover);
}
.snavMenu a.sActv {
  color: var(--active);
}

@media only screen and (min-width: 576px) {
.snav.snav-open {
  pointer-events: none;
  transform: translateY(-2%);
  opacity: 0;
}
}


/* PROJECT ENTRIES LIST */
:root {
  --pLstGrid: 18;
}
 
.pLst, .pHead, .pGal, .pGlrs, .galr {
  width: 100%;
  grid-column: 1 / span var(--pLstGrid);
}
.pGrd {
  display: grid;
  grid-template-columns: repeat(var(--pLstGrid), 1fr);
  gap: var(--lineheight) var(--grid-column-gap);
}
.pLitem {
  display: block;
  padding-bottom: calc(var(--lineheight) * 2);
  padding-top: calc(var(--lineheight) * .5);
  border-top: 1px solid var(--border);
}
.pLitem:hover {
  border-top-color: var(--hover);
}
.pLtitle {
  font-size: 1.175em;
  margin-bottom: calc(var(--lineheight) * .35);
  width: 80%;
  max-width: 600px;
}
.pMtitle {
  font-size: 1.75em;
  line-height: calc(var(--lineheight) * 1.5);
}
.pLdat {
  font-size: .875em;
  color: var(--active);
}
.pBlurb {
  color: var(--active);
  width: 70%;
  max-width: 360px;
  margin-top: calc(var(--lineheight) * 2);
}
.pGgrdItem {
  display: block;
  grid-column: span var(--pLstGrid);
}
.pGgrdItem:first-of-type {
  grid-column: 1 / span var(--pLstGrid);
}
.pGal, .pGlrs {
  margin-bottom: calc(var(--lineheight) * 4);
}
.pGthumb { 
  position: relative;
}
.pGthumb img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.pGlink {
  margin-top: calc(var(--lineheight) * .35);
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
}
.pGlinkT {
  width: 75%;
}
.pGlinkI {
  width: 25%;
  text-align: right;
}
.pGalIcon {
  height: .97em;
  fill: var(--active);
  overflow: visible;
}
.pGal:hover svg.pGalIcon, .pGgrdItem:hover svg.pGalIcon, .pLink:hover .pLinner2 svg.pGalIcon {
  fill: var(--hover);
}

@media only screen and (min-width: 576px) {
  .pLst, .pHead, .pGal, .pGlrs, .galr {
    --pLstGrid: 14;
    grid-column-start: 5;
  }
  .pMtitle {
    font-size: 1.175em;
      --lineheight: var(--lineheight);
  }
  .pLitem:first-of-type {
    padding-top: 0;
    border-top: none;
  }
  .pGgrdItem {
    display: block;
    grid-column: span 7;
  }
  .pGgrdItem:first-of-type {
    grid-column: 1 / span 7;
  }
  /*.pGthumb img {
    filter: grayscale(100%) contrast(1.4);
  }
  .pGthumb:after {
    display: block;
    pointer-events: none;
    content: " ";
    mix-blend-mode: screen;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background-color: #2f4f4f;
  }
  .pGal:hover div.pGthumb img, .pGgrdItem:hover div.pGthumb img  {
    filter: grayscale(0) contrast(1);
  }
  .pGal:hover .pGthumb:after, .pGgrdItem:hover .pGthumb:after {
    display: none;
  }*/
}
@media only screen and (min-width: 992px) {
  .pLst, .pHead {
    --pLstGrid: 14;
  }
  .pGgrdItem {
    display: block;
    grid-column: span 6;
  }
  .pGgrdItem:first-of-type {
    grid-column: 1 / span 7;
  }
}


/* PROJECT PAGE */
.pHead {
  margin-bottom: calc(var(--lineheight) * 4);
  margin-top: calc(var(--lineheight) * 8);
}
.pTxBl {
  grid-column: 1 / span var(--pLstGrid);
  margin-bottom: calc(var(--lineheight) * 3);
}

.pTxTtl, .pTxBl :is(h1,h2,h3,h4) {
  font-size: 1.175em;
  color: var(--active);
  margin-bottom: var(--lineheight);
  margin-top: calc(var(--lineheight) * 2);
}
.pTxBl :is(h5,h6) {
  color: var(--active);
  margin-bottom: var(--lineheight);
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.pTxBl :is(h1,h2,h3,h4):first-of-type {
  margin-top: 0;
}
.pGlrs {
  row-gap: calc(var(--lineheight) * 3);
}
.pLink {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  border-top: 1px solid #e6e8e8;
  padding-top: calc(var(--lineheight) 
  * .5);
  padding-bottom: calc(var(--lineheight) 
  * 1.5);
}
.pLink:hover {
  border-top-color: var(--hover);
}
.pLinner1 {
  width: 75%;
}
.pLinner2 {
  width: 25%;
  text-align: right;
}
.pLtype {
  margin-top: calc(var(--lineheight) * .5);
  color: var(--active);
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .1em;
}

@media only screen and (min-width: 576px) {
  .pHead {
    margin-top: 0;
  }
  .pTxBl {
    --pLstGrid: 12;
    grid-column: 5 / span var(--pLstGrid);
  }
}

@media only screen and (min-width: 992px) {
  .pTxBl {
    --pLstGrid: 10;
    grid-column: 5 / span var(--pLstGrid);
  }
  .pGal {
    --pLstGrid: 12;
    grid-column: 5 / span var(--pLstGrid);
  }
  .pGlrs {
    --pLstGrid: 13;
    grid-column: 5 / span var(--pLstGrid);
  }
}

@media only screen and (min-width: 1400px) {
  .pTxBl {
    --pLstGrid: 9;
    grid-column: 5 / span var(--pLstGrid);
  }
  .pGal {
    --pLstGrid: 10;
    grid-column: 5 / span var(--pLstGrid);
  }
  .pGlrs {
    --pLstGrid: 12;
    grid-column: 5 / span var(--pLstGrid);
  }
}

/* GALLERY SAMPLE */
.vh100 {
  height: 100vh;
  height: 100dvh;
}
.galr {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.gTop {
  height: calc(var(--lineheight) * 3);
  padding-bottom: calc(var(--lineheight) * .55);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: calc(var(--lineheight) * 3);
}
.gEnd {
  height: calc(var(--lineheight) * 4);
  padding-top: calc(var(--lineheight) * .75);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.gMain {
  height: calc(100% - calc(var(--lineheight) * 11));
}
.slide, .slick-list, .slick-track, .slick-slide {
  height: 100%;
}
.slick-slide {
  display: flex;
}
.slick-slide img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.prev,.next {
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .1em;
}
:is(.prev,.next):hover {
  color: var(--hover);
  cursor: pointer;
}
.gCred {
  max-width: 500px;
  color: var(--active);
  font-size: .8em;
  margin-top: calc(var(--lineheight) * .55);
}
.gInd {
  padding-left: 5.5555555vw;
}
.current {
  padding-left: 5.5555555vw;
}

@media only screen and (min-width: 576px) {
  .gTop {
    margin-top: 0;
  }

  .gMain {
    height: calc(100% - calc(var(--lineheight) * 7));
  }
}
 
/* VIDEO */
.vid-holder {
  width: 90vw;
  height: 50.625vw;
  max-width: 568px;
  max-height: 320px;
  margin: auto;
}

.vweb {
  background: #b3b3b3;
  border-radius: .4em;
  box-shadow: 0px 5px 2rem -.5rem rgba(0, 0, 0, 0.25);
}
.if-vid {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
}

.if-vid-vert {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 9 / 16;
  pointer-events: none;
}

.iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100.5%;
  height: 100.5%;
  border: none;
  pointer-events: none;
}

/*=== MEDIA QUERIES ===*/

@media only screen and (min-width: 576px) {
}

@media only screen and (min-width: 768px) {
}

@media only screen and (min-width: 992px) {
}

@media only screen and (min-width: 1200px) {
}

@media only screen and (min-width: 1400px) {
}