body {
  font-family: 'Source Code Pro', Courier, 'Courier New', monospace;
  font-size: 11pt;
  line-height: 1.575em;
  color: var(--default-color);
  margin: 0 6px;
}

article * {
  box-sizing: border-box;
}


@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url('fonts/scp/SourceCodePro-Light.ttf.woff') format('woff');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: normal;
  src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url('fonts/scp/SourceCodePro-Regular.ttf.woff') format('woff');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: italic;
  font-weight: normal;
  src: local('Source Code Pro Italic'), local('SourceCodePro-Italic'), url('fonts/scp/SourceCodePro-It.ttf.woff') format('woff');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 500;
  src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'), url('fonts/scp/SourceCodePro-Medium.ttf.woff') format('woff');
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: italic;
  font-weight: 500;
  src: local('Source Code Pro Medium Italic'), local('SourceCodePro-MediumItalic'), url('fonts/scp/SourceCodePro-MediumIt.ttf.woff') format('woff');
}


@font-face {
  font-family: 'fre';
  src: url('fonts/FreigMacProLig.otf') format('opentype');
}


@font-face {
  font-family: 'felttip';
  src: url('fonts/felttipw.otf') format('opentype');
}

@font-face {
  font-family: 'panton_lightcaps';
  src: url('fonts/Panton-LightCaps.otf');
}

@font-face {
  font-family: 'felttip';
  src: url('fonts/felttipw.otf') format('opentype');
}

p {
  margin-block-end: 1.5em;
}

ul {padding-left: 0; list-style:none; }
ul li:before {
  content: "·";
  color: var(--link-hover-color); /* or whatever color you prefer */
  margin-left: -0.75em;
  width: 0.75em;
  padding: 0;
  margin-right: 0;
  display: inline-block;
  float: left;
}

body.bscateren ol.tracklisting {list-style: lower-alpha;}
body.bscateren ol.tracklisting li:before, ul.tidy li:before {display: none;}

ul.details, ul.tracklisting, ol.tracklisting {
  font-size: 90%;
  margin-bottom: 2em;
}

body.bbio ul.details {font-size: 100%;}


a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

/* panton_lightcaps, veteran,  */
h1, h2, h3, h4, h5, h6, span.roundtag {
  font-weight: 300;
  font-family: 'Source Code Pro', panton_lightcaps, 'HelveticaNeue-Light', Arial, sans-serif;
  color: var(--h-color);
  margin-bottom: 0.5em;
  text-shadow: 1px 1px 5px var(--h-shadow);
  text-transform: uppercase;
}

h1, h2, h3 {
  padding-bottom: 2px;
  border-bottom: 1px dashed var(--h-border-color);
}


#cmd {
  font-family: 'Source Code Pro', panton_lightcaps, 'HelveticaNeue-Light', Arial, sans-serif
}

h1 {font-size: 160%;}
h2 {
  font-size: 140%;
}
h3 {font-size: 117.5%; text-decoration: none; border-bottom: none;}
h4 {font-size: 107.5%; text-decoration: none; border-bottom: none;}
header h2, h2:first-child, h3:first-child {
  margin-top:0;
  padding-top:0;
  line-height: 1.2;
}


h6 {text-transform: none}
h2+p, h2+section, h2+ul {margin-top: 0.35em; }
h3+p, h3+section, h3+ul {margin-top: 0.25em; }
h4+p, h4+section, h4+ul {margin-top: 0.15em; }


article img, p img, div.release img {
  border:8px solid var(--image-smudge-border);      /* ff requires the transparent bit */
  border-image:url(i/smudge.png) 25 15 stretch ;
  filter: var(--image-filter);
  transition: filter 0.1s linear;
}

img:hover, div.release img:hover {
  filter: none;
  -webkit-filter: none;
}

img.nofx {
  border:0;
  border-image: none;
  box-shadow:none;
  -webkit-filter:none;
}



/* blog posts */
div.content img, article img {max-width: 98%;}
body.bmusic article img {max-width: 340px; }

time, figcaption, p.meta {
  font-family: felttip, sans-serif;
  font-size: 12pt;
  color: var(--color-meta);
  font-weight: normal;
}


blockquote time {
  font-family: inherit;
}

figcaption {
  padding-left: 10px; line-height: 1.2em;
}


nav {
  font-family: panton_lightcaps, HelveticaNeue-Light, Helvetica, Arial, sans-serif;
  /*font-size: 87%;*/
  margin-bottom: 10px;
  text-align: center;
  font-size: 105%;
}

/* sticky */

header#top nav {
  font-size: 120%;
  letter-spacing: 0;
  line-height: 165%;
}

nav a {
  text-decoration: none;
  margin-right: 0.5ex;
  line-height: 1.1;
  padding: 1px 2px;
}
nav a:hover, body header#top nav a:hover, nav.subnav ul li a:hover {
  color: var(--nav-color-hover);
  background: var(--nav-background-hover);
  border-radius: 2px;
}



/* logo */
h1 a {
  text-decoration: none;
}
h1#logo {
  margin: 10px auto 2px auto; padding:0;
  text-align: center;
  line-height: 57px;
  height: 57px;
  border: 0;
  background:url('i/esemsig_hd.png') center center no-repeat;
  filter: var(--sig-filter);
  background-size: contain;
}
#logo span {visibility: hidden; display:block; width:102px; height: 57px;}
#logo a  {
  display:inline-block; margin:0; padding:0;  text-decoration: none;
}
#logo a img {border:0;}
#logo a:hover{background: none;}



/* layout */
.clearfix:after, section.sidebyside:after { content: ""; display: table; clear: both; }
body, header {
  margin-top:0;
}
nav {
  margin-top: 10px;
}
body {
  background: var(--body-background) url(i/noise.png);
}



#wrapper {
  width: 97%;
  max-width: 770px;
  letter-spacing: -0.4px;
  margin: 0 auto;
  position: relative; /* else safari selection highlight extends to edges */
}
.bmusic #wrapper {
  max-width: 780px;
}

.bsound #wrapper, .bdev #wrapper {
  max-width: 880px;
}

.c2 .col {width:49%; float:left;}
.c2 .col+.col {margin-left:10px;}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, p:first-child {margin-top:0;}
h2, h3, h4, h5, h6 {margin-top: 2.5em;}
article ul {padding: 0 10px;}
article ul li+li {
  margin-top:0.5em;
}
ul.details li+li, .tracklisting li+li {
  margin-top: 0.25em;
}

article section.prosandcons {
  border: 1px dashed var(--separator-color); padding: 15px;
  border-radius: 5px 5px;
}

blockquote {
  margin: 1.75em 0;
  font-style: normal;
}
.post blockquote {
  font-style: italic;
  letter-spacing: -0.5px;
}

article blockquote {
  padding-left: 20px;
  border-left: 1px solid #666;
}

.reviews blockquote+blockquote:before {
  content: "* * *";
  font-style: normal;
  font-family: 'Source Code Pro', monospace, Courier, "Courier New", monospace;
  font-size: 90%;
  display: block;
  text-align: center;
  margin: 1em 0;
  color: var(--color-meta);
}
article time {
  font-size: 95.5%;
  float:right;
  text-align: right;
}

blockquote cite {
  font-size: 100%;
  display: block;
  text-align: left;
  color: var(--color-meta);
}
blockquote cite a {
  color: var(--color-meta);
  text-decoration: none;
}

blockquote cite:before {
  content:"⋅";
}

blockquote:last-child {margin-bottom: 1em;}

figure {margin:10px 0; padding:10px 0; }


/* bio */

section.sidebyside>div {width:49.5%;}
section.sidebyside>div:first-child {float:left}
section.sidebyside>div:last-child {float:right}

/* listen links */
a.listen:before, a.music:before, a.esem:before, .esem a:before {content: "\266A\ "; }

section+section {margin-top:2.5em;}


/* post */
article.post a.more.bookmark {
  float:right;
  font-size: 78.5%;
  text-decoration: none;
  color: var(--color-meta);
}

#wrapper > header {
  margin-bottom: 25px;
  margin-top:15px;
}
#wrapper > footer {
  margin-top: 50px;
  padding-top:10px;
  border-top: 1px dashed var(--separator-color);
}

article img.center, article img.centre {margin:0 auto; display: block;}
article header {margin-bottom: 20px;}
article iframe {margin: 5px auto; display: block; }	/* safari displays inline. wtf? */
.bmusic article .col iframe {
  margin-left: 0;
  box-shadow: 0 0 15px 10px rgba(245,245,255,0.05);
}

hr {
  height:1px;
  border:0;
  border-bottom:1px dashed var(--separator-color);
}

div.latestpost + section {margin-top:15px;}

/* music */
#releasetitles, #releasetitles * {
  box-sizing: border-box;
}
#releasetitles {margin-bottom: 20px;}
#releasetitles div.release {
  width: 33.3%;
  float:left;
  margin-bottom: 20px;
  position: relative;
  min-height: 270px;
}

div.release h4 {
  margin-bottom: 0;
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 10;
  background: var(--release-grid-title-background);
  padding: 0 3px;
  border-radius: 3px 3px;
  font-size: 80%;
}
div.new.release h4 {
  color: var(--release-grid-newtitle-color);
  background: var(--release-grid-newtitle-background);
}
div.release a {text-decoration: none; display: block;}
div.release a span {display:block; padding-left: 10px;}
div.release a img {width: 100%; max-width: 100%; display: block; }
body.bmusic article img.cover {width: 380px; margin-left: -5px;}
.release p.explain {font-size: 90%;}

/* interviews */
article figure.side, article figure:first-child  { margin-top:-10px; }
article figure.side {display: block; max-width: 50%;}
article figure.side.right { float:right; margin-left: 10px; }
article figure.side.left { float:left; margin-right: 10px; }

/* mailing list */
#mlform {
  border: 2px solid var(--ml-form-border);
  background: var(--ml-form-background);
  padding:5px 10px 5px 20px;
  border-radius: 10px;
  width: 40ex;
}

li>p:only-child {margin-top:0; margin-bottom: 0;}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {		/* @ipad */
  #wrapper {width:97%;}
}


/* everything else */

#delta {
  margin: 10px 0;
  background: var(--delta-thanks-background);
  padding:10px;
  box-shadow: 0 0 20px rgba(32,32,32,0.3);
  border-radius: 3px 3px;
}


span#heart {
  -webkit-transform-origin: 5px 10px;
  color: var(--heart-color);
  display:inline-block;
  width: 1ex;
  height: 20px; line-height:20px;
  overflow:visible;
  -moz-animation: beat 1.2s ease-out infinite;
  -webkit-animation: beat 1.2s ease-out infinite;
  animation: beat 1.2s ease-out infinite;
}

@keyframes beat {
  0% {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    transform: scale(1.4);
  }
  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  70% {
    color: var(--heart-color-beat-lo);
  }
  100% {
    color: var(--heart-color);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

a.rss {
  text-decoration: none;
}
a.rss>span {
  text-decoration: underline;
}
a.rss:before {
  content: "RSS";
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 8.5pt;
  letter-spacing: normal;
  padding: 2px 3px;
  line-height:2em;
  text-shadow:1px 1px 3px var(--rss-text-shadow);
  background: var(--rss-background);
  color:white ! important;
  border-top: 1px solid var(--rss-border-bright);
  border-left: 1px solid var(--rss-border-bright);
  border-bottom: 1px solid var(--rss-border-dark);
  border-right: 1px solid var(--rss-border-dark);
  border-radius: 2px 2px;
}


pre {
  margin: 1.5em 3ex;
  font-size: 87.5%;
  line-height: 1.2em;
}


#footer {
  font-size: 78.5%;
  text-align:center;
  border-top:1px solid var(--separator-color);
  margin-top:50px;
  padding-top:20px;
  margin-bottom:20px;
  color: var(--footer-color);
}
#footer a {color: currentColor ! important; background:none; text-decoration:underline;}

body.bmusic nav a#nmusic,
body.belse nav a#nelse,
body.bml nav a#nml,
body.bbio nav a#nbio {
  border-bottom: 1px solid var(--nav-color-selected);
}

/* sound */
h1 span.dim, h2 span.dim {color: var(--dim-color); font-size: 80%;}
ul.projects li {margin-bottom: 1em; font-size: 91.5%}

p.goback:before {content: "\2190"; margin-right: 0.5ex;}

.blognav li ul {margin-left: 30px;}
.blognav li ul a {text-decoration: none;}
.blognav li ul a:hover {text-decoration: underline;}
.blognav li a small.summary:before {content:"(";}
.blognav li a small.summary:after {content:")";}

body.bsound footer {
  text-align: center; font-size: 87.5%;
  color: var(--footer-color);
}

body.bjournal nav a#njournal,
body.bwork nav a#nwork,
body.bcv nav a#ncv,
body.bcontact nav a#ncontact
{text-decoration: underline;}

span.confidential {
  color: var(--confidential-color);
  background: var(--confidential-background);
  padding: 0 10px;
}


div.workprojectthumb {
  position: relative;
  width: 220px; height: 220px;
}
div.workprojectthumb img {
  z-index: 1;
}
div.workprojectthumb a {
  display: block; position: absolute; top:0; left:0; z-index: 3; width: 100%; height: 100%;
}
div.workprojectthumb h3 {
  position: absolute; bottom: 5px; left:0; z-index: 2;
}

div.workprojectthumb:hover h3 {
  color: var(--project-thumb-color-hover);
}


dl {padding: 10px; font-size: 90%;
  border-top: 1px dashed var(--separator-color);
  border-bottom: 1px dashed var(--separator-color);
}
dl dt {float:left; width: 8.5em; clear:left;}
dl dd {margin-left: 9em;}

h2+dl, h1+dl {border-top:none;}

blockquote span+p {margin-top:0;}	/* admin */

section.randomtestimonial {line-height: 140%; color: var(--dim-color); margin-top: 2em;}
section.randomtestimonial blockquote {font-size: 90%;}
section.randomtestimonial blockquote cite {margin-top: 1ex;}

blockquote.testimonial cite {display: block;}
blockquote.testimonial cite span.roundtag {
  display:block; float:left;
  width: 2.6em;
  height: 2.6em;
  background: var(--testimonial-cite-roundtag-background);
  color: var(--testimonial-cite-roundtag-color);
  text-shadow: 0 0 3px var(--testimonial-cite-roundtag-textshadow);
  text-align: center;
  line-height: 270%;
  margin-right: 0.3em;
  letter-spacing: normal;
  border-radius: 50% 50%;
}
blockquote.testimonial cite span.person {display:block; line-height: 130%;}
blockquote.testimonial cite span.person.name {color: #000;}


blockquote.testimonial {
  font-size: 90.5%;
}

blockquote.testimonial cite:before {
  content:"";
}

.workproject section.tags h5 {margin-bottom: 0;}
.workproject section.tags ul, li.project small.tags ul {margin-left:0; padding-left:0;margin-top:0;}
.workproject section.tags li b {
  line-height: 13.5pt;
  display:inline-block;
  background: var(--tag-background);
  color:var(--tag-color);
  border-radius: 3px 3px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: normal; font-size: 8.5pt; letter-spacing: normal;
  padding: 0 3px;
  margin:0;
}
li.project small.tags li b { color: #666; font-weight: normal; }
li.project small.tags li+li {border-left: 1px dotted #000; padding-left: 3pt;}

.workproject section.tags li,
li.project small.tags li{
  display: inline;
}

.workproject section.tags li+li,
.project small.tags li+li {margin-left: 1pt;}
.workproject section.tags li:before,

nav.subnav li:before, .project small.tags li:before {content:""; display: none;}

nav.subnav li {display: inline;}
li.hasselected a.selected {
  background: var(--li-hasselected-background);
  text-decoration: none; padding: 0 2px;}
li.hasselected a.selected:hover {
  background: var(--li-hasselected-hover-background);
}

/* work projects */
dd a:first-child {margin-left:-2px;}
h1+h4 {margin-top:0;}


header#top nav.sound {
  background: var(--topnav-sound-background);
}
header#top nav.dev {
  background: var(--topnav-sound-background);
}
header#top nav.sound {
  border-bottom: 2px solid var(--sound-active-color);
}
header#top nav.dev {
  border-bottom: 2px solid var(--dev-active-color);
}
body.bdev ul li:before,
body.bdev a:hover {
  color: var(--dev-active-color);
}
body.bsound ul li:before,
body.bsound a:hover {
  color: var(--sound-active-color)
}

header#top nav.sound,
header#top nav.dev {border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
footer#bottom {text-align: center; font-size: 78.5%;}

div.aboutme {margin-top:2em; font-size: 87.5%; max-width: 400px;}
div.aboutme img {width:75px;}

article.workproject h2 {margin-top: 1.1em;}




@media only screen and (device-width: 768px) {
  article img, p img, div.release img {
    filter: none;
    -webkit-filter: none;
  }

  blockquote.testimonial cite span.roundtag {
    line-height: 250%;
    text-shadow: none;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
  }
}

@media screen and (max-device-width: 768px) and (orientation: portrait) {
  body {
    line-height: 115%;
  }
  #wrapper {
    max-width: 740px;
  }
}

.bml .twocol .col:first-of-type {
  width:43%
}
.bml .twocol .col:last-of-type {
  width:55%;
}


@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
  .c2>.col, .twocol>.col {
    float: none !important;
    width: auto !important;
  }
  .col+.col {
    margin-left: 0;
  }
}

@media screen and (max-device-width: 600px) {
  article header {
    position: sticky;
    -webkit-position: sticky;
    top: -1px;
    background: var(--body-background) url(i/noise.png);
    z-index: 10;
    padding-bottom: 0.1ex;
  }
  body {
    line-height:1.5;
    font-size: 17px;
  }

  body, article header {
    background-image: none;
  }

  ul.details, ul.tracklisting, ol.tracklisting {
    letter-spacing: -1px;
  }

}

@media screen and (max-device-width: 640px) and (orientation: landscape) {
  body {
    font-size: 14px;
  }
}

@media screen and (max-device-width: 640px) and (orientation: portrait) {

  p.cta:first-of-type { margin-top: 0.3em; margin-bottom: 0.5em;}
  section.sidebyside>div {width:99.5%;}
  header time { display: block; float: none; }

  div.aboutme {
    margin-top: 3em;
    max-width: 100%;
  }
  div.aboutme h3 {font-size: 180%;}
  div.aboutme p {font-size: 93.5%;}
  div.aboutme img {width:150px;}

  blockquote.testimonial cite span.roundtag {
    text-shadow: none;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
  }

  ul li:before {
    margin-left: -20px; width:20px; padding:0; margin-right: 0;
  }

  dl dt {float:left; width: 5em; clear:left;}
  dl dd {margin-left: 5.5em;}

  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  .bml .twocol .col {
    float: none;
    width: auto !important;
  }
  .bml .twocol .col + .col {
    margin-top:20px;
  }

  footer {
    margin-bottom: 60px;
  }

  #releasetitles div.release {
    width: 95%;
    float: none;
    margin: 0 auto 20px auto;
  }
  #releasetitles div.release span {
    text-align: center;
    display: block;
  }

}

body.bmusic section.buy {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
}
p.cta {
  margin-top:2em;
  text-align: center;
}
p.cta a {
  display: inline-block;
  min-width: 9ex;
  padding: 5px 20px;
  border: 1px solid;
  border-radius: 3px 3px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  word-spacing: -0.1em;
}

p.cta a.long,
p.cta.long a
{
  min-width: 30ex;
}



article.workproject h2+img.imageasset {
  margin: 0 auto;
  display: block;
}


@media print {
  body {

    font-size: 110%;
    line-height: 1.4em;
    background: white ! important;
  }
  p.cta {display:none;}
  nav {display: none;}
  footer {display: none;}
  .noprint {display: none;}
  a {text-decoration: none; padding:0;}
}

article.post p img:only-child {
  display: block;
  margin: 0 auto;
}

/* custom */

sidebyside section {width:49.5%;}
sidebyside section:first-child {float:left}
sidebyside section:last-child {float:right}
sidebyside section+section {margin-top:0;}
sidebyside:after { content: ""; display: table; clear: both; }

thought {
  font-family: felttip, sans-serif; font-size: 12pt;
  color: var(--thought-color);
  font-weight: normal;
}


sig {
  display:block;
  width:100px;
  height:57px;
  line-height: 57px;
  margin: 5px;
  background:url(i/esemsig.png) center center no-repeat;
}
sig:before {content:".";color:transparent;}

article p+p {margin-top:15px;}

article audio {
  width: 100%;
}

article audio::-webkit-media-controls-enclosure {
  background: var(--embedded-audio-bg);
  border-radius: 10px;
  padding: 0;
}