/* Universal */
body, html {
    font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000;
}

body {
  line-height: 1.5svw;
  font-size: 1.25svw;
  background: #fff;
  transition: all 0.1s ease;
  text-wrap:balance;
  display:flex;
}
img {
    background: url(../img/img.bg.png)
}
.highlight {
    background-color: #f8f5eb;
    padding: 0.7svw 1svw ;
    margin: -0.7svw -1svw;
    z-index: -9999;
    position:relative;
}

div.highlight {
        padding: 1.3svw 1svw ;
    margin: -1.3svw -1svw;
      z-index: 1;
}
.hide {
    display:none !important;
}

/* Layout */

section#introduction {
    width:25svw;
    padding: 2svw;
    position:absolute;
}
section#content {
    width:67svw;
    padding: 2svw 0 2svw 31svw;
    display:flex;
    flex-direction: column;
    gap: 4svw;
}
div.workpiece {
    display:flex;
}
div.primary {
    width:25svw;
    padding-right:2svw;
}
.secondary div {
    width:47svw;
    height:26.4375svw;
    background: url(../img/img.bg.png);
    position:relative;
}

/* Text */

h1, h3, h4, p, ul {
    padding-bottom:1.5svw;
}

#introduction h3 {
    padding-top:1.5svw;
}

h1, h3, h4 {
   text-transform: uppercase;
}

h2 {
   font-family: "new-spirit", monospace;
    font-style: normal;
    font-weight: 500;
    font-size: 2svw;
    line-height: 2.2svw;
    margin: 0 -0.7svw 1svw !important;
}

em {
    font-style: italic;
}
h3 em {
    text-transform: none;
}
h5 {
       background: url('../img/headshot.jpg') no-repeat;
    background-size: auto 100%;
    background-position:center;
    width:12svw;
    height:12svw;
    text-indent: -9999px; 
}
a {
    color:#000;
}
a:hover {
    color:#f89000;
}


/* Mobile */

@media only screen and (orientation:portrait) {
    
    body, div.workpiece {
          line-height: 3.5svw;
  font-size: 3svw;
  display:block;
}
   section#introduction, section#content  {
    width:95svw;
    padding: 2svw 0 0 2svw;
    position:relative;
} 
    div.primary, .secondary div {
        width:95svw;
        height:auto;
        padding-right:0;
    }
    .secondary div {
        min-height:53.43svw;
    }
    div.workpiece {
    padding-bottom:6svw;
}

    h2 {
        font-size:5svw;
        line-height:5.5svw;
    }
    #introduction h3, h3 {
        padding-top:3svw;
    }
}

/* Lightbox */

#workcontent a {
	display: flex;
	position: fixed;
	z-index: -999;
	width: 100svw;
	height: 100svh;
	top: 0;
	left: 0;
	align-items: center;
  justify-content: center;
	opacity:0;
	background: rgba(248,241,226,0.8) url("../img/close.svg") no-repeat;
	background-size: 3svh;
    background-position:3svh 3svh;
}

#workcontent a img {
	max-width: 90svw;
	max-height: 90svh;
}

#workcontent a:target {
	/** Remove default browser outline */
	outline: none;
	/** Unhide lightbox **/
	z-index: 999;
	opacity:1;

}