@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

:root {
  --aqua-bg: #46817c;
  --condensed: 'Source Sans Pro', 'Avenir Next Condensed';
  --display: dapifer, 'Source Serif Pro', Baskerville,  Didot, 'Times New Roman';
  --marker: neue-haas-grotesk-display;
}


* { box-sizing:border-box }
body, ul, ol, form, h2, h3, h4, h5, h6, figure, blockquote { margin:0; }
body[data-status='offline']  header {border-color:#fb6868;}
body[data-status='offline']  header:after {
  content: 'Your browser is currently offline';
  text-align:center;
  font-size:1.75em;
  width:100%;
  padding:1em;
  display:block;
  color:#fb6868;
  letter-spacing:0.075em;
}

img:not([src]), a:not(.show):not([href]), nav[data-pages='1'], small:empty, aside:empty {display:none}
img {
  max-width:100%;
  transition: opacity 1s;
}
img.proxy {height:1px;width:1px;opacity:0;display:block;}
img[data-src] {
  opacity: 0;
  min-height: 1px;
  min-width:  1px;
  display:inline-block;
}

a:focus {
  text-decoration:underline;
  outline:none;
}

button:focus, input:focus {
  outline:none;
  border-color: #5b9b98 !important;
}

body {
  font: normal normal 400 62.5%/1.35  'IBM Plex Sans', 'Source Sans Pro', 'Franklin Gothic Book', Verdana, sans-serif;
  background: url(//tciaf-media.s3.amazonaws.com/image/_assets/birds-background-B.png) repeat-y 100% 100% fixed, url(//tciaf-media.s3.amazonaws.com/image/_assets/birds-background-A.png) repeat-y fixed;
  background-size:100%, 100%;
  background-position:100% 100%, 100% 100%;
  will-change: background-size, background-position;
  transition:background-position 2s, background-size 1.5s;
  color: #333;
}

.brown { color:#77635c; }
.white-bg, body, .gallery img, button { background-color:#fff }
.gray {color: #979797;}
.gray-bg {background-color: rgba(0,0,0,0.05);color: #706F73;}
.brown-bg { color:#EEE; background-color:rgb(119, 99, 92) }
.brown-bg a {color: #EEE;}
.orange, .display strong, a:focus {color:#FC6202;}

a {color:#444;text-decoration:none;}
a > *:not(button) {pointer-events: none;}
a > img {pointer-events:all}
a > img:hover {opacity:0.9}
a:hover {color:#5a9a98;}
.selected, .selected:hover{text-decoration:none;cursor:default;}
.selected, .selected:hover, .path li a:hover {color:#555;border-color: #5b9b98 !important;}
p a {text-decoration:underline;}
p, .p {max-width:55em;font-weight:400;}
h1, h2 {max-width: 75vw;font-weight:400;}
h1, .h1 {font-size: calc(1.25em + 1.35vmax);line-height:1.25;margin:0;}
h2, .h2 {font-size: calc(1.25em + 1vmax);line-height: 1.25;}
h3, .h3 {font-size: 200%;line-height: 1.2;margin: 0.5em 0;font-weight: 400;}
h4, .h4, .markdown h3, article nav  ul.plain li > a, summary  {font-size: calc(1.25em + 0.25vmax);font-weight:300;}
h5, .h5, p, .p, li, label, input {font-size: calc(1.075em + 0.35vmax);line-height: 1.4;}
h5 {font-weight:400; font-family: var(--condensed);}
h6, .h6, form button, form .button {font-size:calc(1.125em + 0.35vw); font-weight: 600;}

article.text h2 {margin:1em 0 0.5em;}
details[open] summary {color:#FC6202;}
details p {border-left: 1px solid #eee;padding-left:1em;margin-left:0.75em;}
summary h6 { display:inline;font-size:100%;}
summary {cursor: pointer;outline:none;padding:0.5em;}
.plain    {list-style:none;padding:0;}
.plain li {font-size:100%; line-height:1.125;}

.t, .markdown h2 {margin: calc(0.5em + 1vmax) 0 0.25em;}
.tt,hr, .hr {margin-top: calc(0.5em + 1.5vmax);}
.b   {margin-bottom: calc(0.25em + 0.25vmax);}
.bb, hr, .hr {margin-bottom: calc(0.5em + 1.5vmax);}
.l  {margin-left:1vw}
.ll, .controls h1, .controls h2 {margin-left:2vw}
.r {margin-right:1vw;}
.rr {margin-right: 2vw;}
.pad   {padding: 1.5vmax;}
.pad-h {padding: 0 2.5vmin;}
.pad-v {padding: 2vmin 0;}
.m, p {margin: 0.75em 0;}

.markdown > h3 {margin: 2vmax 0 0;}
.markdown strong em {
  font-style: normal;
  font-weight:normal;
  color: #FC6202;
}
.markdown h4:not(:first-of-type) {margin: 2vmax 0 0;}
.container:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.capitalize {text-transform: capitalize;}
.caps-lock {text-transform:uppercase;letter-spacing: 0.125ch;}
.fade {opacity:0;}
.inline:not(ul), .inline li, .inline dd, ul.divide li, label  {display:inline-block;}
.rag-right {text-align:left;}
.rag-left {text-align:right;}
.center, .gallery {text-align:center;}
.middle {margin: 0 auto}
.justify {text-align: justify;}
.clear {clear:both;}
.close {height:2em;width:2em;line-height:0;padding:0.5em;}

address { font-style: normal; }
strong, .strong, .selected {font-weight:600;}
input, select {font-size: inherit }
em, .em, blockquote {font-style:italic }
ul { list-style-type: square; }
ul, ol { padding:0 0 0 2rem; margin: 0.75em 0;}

.tracked {letter-spacing: -0.025em;}
.display  strong {display:block;font-size:0.5em;text-transform:uppercase;margin:0.5em 0;font-weight:200;}


.banner, .listing, .search, .search ul li, article > header {position:relative;}
.banner {
  min-height: calc(85vw / 3);
  margin: -2vmax -1.5vmax 2vmax -5vmax;
  padding: 2.5vw 30vw 2.5vw 5vw;
}
.banner a {
  /* color: #fff; */
}
.banner.banner-bg { background-size:cover }
.banner-bg *      { color:#FFF;text-shadow: 0 0 0.125em rgba(0,0,0,0.5) }
.banner-bg        {
  background-color:#665851;
  background-repeat: no-repeat;
  background-position: 75% 50%;
  background-size: cover;
}



hr, .hr, .ruled {
  border: none;
  clear: both;
  border-bottom: 2px solid #eaeaea;
  margin-left:-1vmax;
}

a:hover .bio > span { box-shadow:inset 0 0 0 0.125em rgba(0,0,0,0.25) }
.card {min-height:14vmin}
.bio.head {width:15%; display:inline-block;}
.bio figcaption {line-height: 1.125;margin-top:0.5em;}
.bio > span:not([style]) { opacity: 0 }
.bio > span[style] {
  margin-top: 2em;
  transition: opacity 1s;
  background-size:cover;
  background-position:top center;
  background-repeat:no-repeat;
  width: 15vmin;
  height: 18vmin;
  border-radius:50%;
  box-shadow:0 0 0 0.125em rgba(200,200,200,0.75);
  display: inline-block;
  color:transparent;
  overflow: hidden;
}

.bio > span:not([style]) + figcaption {
  padding: 1em 1em 1em 0;
  border-right: 1px solid rgba(0,0,0,0.1);
  font-weight: 600;
}

.gallery img {
  padding:calc(2.5em - 1vw);
  max-width: 100%;
  box-shadow: 0 0 0.125em 0 rgba(0,0,0,0.1);
}

header > img {
  display: block;
  margin:1em 2em 0 0;
  float:left;
  width:20vmin;
  height:20vmin;
  object-fit: cover;
  box-shadow: -0.125em 0.125em 0.25em rgba(0,0,0,0.1);
  object-position:50% 50%;
}

header > img.landscape {
  height: 12vmin;
}


.path li a {
  padding: 0 0.25em;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  line-height: 2;
  transition: border-color 0.25s;
}
.lead {font-size: calc(2em + 2vw);line-height:1;}

.spot {padding:1.5em;margin:0 0 1.5em;}
.spot ul {
  column-count: 2;
}
.controls, .path, .triptych > * {display: inline-flex;}
.controls {
  opacity: 1;
  padding: 2.5%;
  flex-flow:row;
  align-items: center;
  flex-grow: 1;
  transition: background-color 1s, opacity 1s;
  position: relative;
}
.path {flex-wrap:wrap;justify-content: flex-start;}
.markdown h2 {font-family: var(--marker); font-weight: 300;line-height: 1;}
.display, aside > p > strong:only-of-type {font-family: var(--marker);font-weight: 600; line-height: 1;}

.panel, .triptych {display:flex;}
.sink {flex: 1 0 10vw;}
.sink li {
  margin: 0.25em 0;
}
.fill { width: 100%; }
#browse article.panel, #browse section.panel, .panel.wrap {flex-wrap:wrap;}

body > header {
  position: absolute;
  top: 0;
  z-index: 3;
  background-color: #fff;
  width: 100%;
}


#media {
  transition: padding-top 0.75s;
  z-index: 0;
  background-color:#fcfcfc;
}


button.menu-trigger {
  position: fixed;
  top:0.5em;
  right: 0.5em;
  z-index: 3;
  width: 4em;
  height: 4em;
  padding: 0.75em;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  color: rgba(0,0,0,0);
  border: none;
  transition: border-radius 0.5s;
}

body:not([data-position^='0']):not(.menu) button.menu-trigger {
  border-radius: 50%;
  box-shadow: 0 0 0.75em -0.125em rgba(0,0,0,0.125);
}

button.menu-trigger svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}


body.menu button.menu-trigger path {
  stroke: #f3a026;
}

body.menu button.menu-trigger svg path:first-of-type {
  display:none;
}

body:not(.menu) button.menu-trigger svg path:last-of-type {
  display:none;
}


#browse {
  position: relative;
  z-index:1;
  margin-top: 6em;
}

.triptych {justify-content:space-between;flex-wrap:wrap;}
.triptych > * {
  background-color: #fff;
  flex-flow: column;
  flex-wrap:wrap;
  justify-content:space-between;
  padding: 1.25em;
  flex-grow: 1;
  margin: 0.5em 0;
}

#browse > main {
  transition:opacity 0.75s, background-color 1.5s 0.125s;
  background-color:#f1f1f1;
  padding: 1.5vmax;
}

.transition #browse > main {opacity:0;background-color:rgba(248, 248, 248, 0);}

nav a.logo, li.special a {
  margin: 0 1em;
  color: rgba(0,0,0,0);
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 50%;
  height: 5em;
  width: calc(6em * 2.75);
}


header nav[role] > ul li.special a {
  background-image: url('/images/donate-now.png');
  padding: 1em 2.5em;
  margin: 0;
  width: 8em;
  background-color: transparent;
}




nav[role] > ul {
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  flex-grow: 1;
  padding: 1px;
  max-width: 80em;
}

nav[role] > ul > li {
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
header nav[role] > ul a {
  padding: 0.5em;

}
aside.extra {
  border-bottom: 1px solid #eee;
  margin: 0 0 2em;
}

.sidebar li:only-of-type {
  list-style:none;
  margin-left: -2rem;
}
.sidebar li:only-of-type a {
  font-size:150%;
  padding:1em 0.25em;
  display:block;
  text-align:center;
  text-decoration:none;
  color:#fff;
  text-transform:uppercase;
  background-image: linear-gradient(30deg, #3b6d7c, var(--aqua-bg), #3b6d7c), url(/images/texture.jpg);
  border-radius: 0.25em;
  background-blend-mode: multiply;
  line-height:1;
}

aside.extra li a:hover {
  background-color:#665851;
}

a.jump {
  display:block;
  text-transform:lowercase;
  font-variant: small-caps;
}
a.jump:before {
  content: '▴ ';
}

nav.jump {
  position: sticky;
  top: 4rem;
  margin: 4em 0 0;
  padding-bottom: 1em;
  box-shadow: 0 -1em 1em #ffffff;
  background-image: linear-gradient(#fff 80%, rgb(255 255 255 / 80%));
  background-color: transparent;
}

.image-tab {
  box-shadow: 0 0 0.125em 0.075em rgba(0,0,0,0.05);
  opacity: 0;
  background-repeat: repeat-y;
  background-position: 50% 0, 50% -50%;
  background-size:100% 100%, 100% auto;
  padding-top: 6.5em;
  transition: opacity 0.5s 0.25s, background-position 1.125s;
}

.image-tab.loaded{
  opacity: 1;
  background-position: 50% 0, 50% 0;
}

.image-tab .overleaf {
  background-color:rgba(255,255,255,0.75);
  margin:0 -1.25em 0;
  padding:1.25em;
}

ul.conjunct a {
  padding:0;
  text-transform: uppercase;
  color: #888;
  line-height:1;
}
ul.conjunct li {
  display:inline;
}
ul.conjunct li:nth-child(n + 2):before {
  content: ', ';
  color:#CCC;
  margin: 0 0.5ch 0 -0.25ch;
}

ul.conjunct li:last-child:not(:first-child):before {
  content: ' & ';
  margin: 0 0.5ch;
}

.finder input {
  margin: 0;
  padding: 1.25em 0 1.25em 3.5em;
  background-size: auto 35%;
  border:none;
  font-size: 1.25em;
  background-repeat: no-repeat;
  background-position: 1em 50%;
  line-height:1;
}


.insist {
  border: none;
  padding: 1.5em 2em;
  background-color:rgba(255,255,255,0.5);
  border-radius: 0.125em;
}

.insist:hover {
  color:#000;
  box-shadow: inset 0 0 0.25em rgba(0,0,0,0.2);
}

button[type='submit'] {
  border-color: rgba(0,0,0,0.25);
  padding: 0.5em;
  text-transform: uppercase;
  color: #556
}

/* components  */
.award > *, address span  { display:block }
.award {
  padding: 0 0 0 2.5em;
  min-height: 4em;
  background-repeat: no-repeat;
  background-position: 0 15%;
  background-size: auto 50%;
  display: block;
}
.search ul {
  position: absolute;
  left:0;
  width: 100%;
  z-index: 3;
  font-size:1.5em;
  background-color: rgba(255,255,255,0.95);
}
.search ul:not(:empty) { box-shadow:0 0.25em 0.125em rgba(0,0,0,0.1) }
.search ul li {
  padding:0.5em;
  cursor:pointer;
  color:#323031;
}
/* The #5B9B98 background has the luminosity adjust to provide better contrast.*/
.search li:hover, .search li.highlight, .aqua-bg { background-color:#46817c; color:#FFF; }

button, .button, .playlist li:not(.current) {text-decoration:none;border-radius:0;cursor:pointer;}

button:hover,.button:hover,input[type=checkbox]:hover{box-shadow:0 0 0.25em 0 rgba(0,0,0,0.05);}
button[disabled],button[disabled]:hover{opacity:0.5;box-shadow:none;color:#888;}




.pulled, .pulled-left, .pulled-right {padding:2.5vw;}
.pulled-left, .pulled {margin-left:-2vw}
.pulled-right, .pulled {margin-right:-2vw}

div[data-award] {
  background-size: auto 7.5em;
  background-repeat: no-repeat;
  background-position: calc(100% + 1.5vw) 0;
}
.bg:not([style]) {
  opacity: 0;
}
.bg {
  transition: opacity 1s;
  background-size: cover;
  background-position: 50% 25%;
  width: calc(100% + 4vmax);
  box-shadow: inset 0 -0.25em 0.5em rgba(0,0,0,0.05);
  margin: -1.5vmax -1.5vmax 2em;
  padding: 10vmax 1em 1em;
}

form[method="GET"] select {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><path stroke="%23333" stroke-width="2" stroke-linejoin="miter" fill="none" d="M1,0L50,45L99,0"/></svg>') no-repeat 95% 50%;
    background-size: auto 33%;
  width: 100%;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,0.25);
  padding: 1em;
  margin: 1em 0;
  border-radius: 0;
  font-size:1.25em;
  color: rgba(0,0,0,0.65);
}

.one-third {
  width: 100%;
}

input:focus::--webkit-input-placeholder { opacity:0.2;}
::--webkit-input-placeholder {
  transition: opacity 0.25s;
  font-weight:100;
  text-align:left;
  font-style: italic;
  color:#CCC;
  font-size: 1.25em;
}
#Player button.toggle {display: none;}
.feature article.panel.listing header { width:100% }


/* Mobile only */
@media screen and (max-width: 50em) {
  body.menu {
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
  }

  body > header {
    position: fixed;
    z-index: 1;
    height: 6em;
    transition: height 0.125s;
  }
    
  body.menu > header {
    z-index: 2;
    flex-direction: column;
    justify-content: space-between;
  }
  

  
  body.menu nav a.logo {
    width: 20%;
    background-size: auto 100%;
    background-position: 100% 50%;
    margin: 20% 10%;
  }

  #browse { border-top: 1px dashed #eee; }
  
  body:not(.menu) > header > form, body:not(.menu) > header > nav > ul {
    display: none;
  }
  
  body:not(.menu) #media {
    background-color: #fff;
  }
  
  article.listing {background-color: rgba(255,255,255,0.85);margin:1em 0;}
  
  /* this is necessary for touch screens */
  html, body {min-height:100%} 
  .hide {display:none !important;}
  .banner {margin-left:-2.5vmax;padding-right:5vw;}
  h1, h2 { max-width: 100%;}
  h5 a, h2 a, .sink a, h3 a {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.125) 75%, transparent) repeat-x 0 1em;
    background-size: 5px 1px;
    padding: 0 0.125em;
  }
  nav[role] > ul > li:nth-last-child(n+3) {border-bottom: 1px dashed #eee;}
  .panel > .two-thirds, .panel > .half {flex: 1 0 100%;min-width: 100%;padding: 0 2vw;}
  .gallery {width:100%;}
  .gallery img {width:100%;padding: 5%;}
  .bio.read {display:flex;align-items:center}
  .bio.read span {margin: 0 1em 0 0;}
  .bio.read figcaption {font-size:150%;}
  .bio > span:not([style]) + figcaption { border: none;}
  
  body:not([data-position^='0']) #browse {
    box-shadow: 0 -0.25em 1em rgba(0,0,0,0.075);
  }
  
  .finder input {
    border-bottom: 1px dashed #eee;
    padding: 1.5em 0 1.5em 5em;
  }
  
  nav[role] > ul > li {flex-basis:25%;}

  .panel header.ll {margin-left:5%;width:70%;}
  .panel .ll {margin-left:0;}

  ul.sink {
    min-width: 100%;
    display:block;
  }
  ul.sink li:nth-child(3) {clear:left}
  ul.sink li {float:left;margin: 0 0.35em 0 0;}
  .reorder section:nth-child(2) { order: 3;}
  
  nav[role] > ul { align-items:stretch; padding: 1em; }
  nav[role] li { padding: 0.75em }
  form[method="GET"] select, textarea:focus, input:focus {
    font-size: 16px;
  }
  
  
  div#Player {
    flex-direction: row-reverse;
    max-height: 30vh;
  }
  
  body:not(.menu) #Player .controls {
    padding: 0;
  }
  body:not(.menu) div#Player {
    width: 6em;
    margin: 0 2em;
  }
  body.menu .playlist {
    max-height: 30vh;
    width:100%;
  }
  
  body:not(.menu) .playlist {
/*    display: none;*/
  }
  
  #Player .controls {
    max-height: calc(50vw - 1em);
  }
  
}


/* Hack for tablet to deal with images in playlist/lib*/
@media screen and (min-width:40em) {
  .bg {width:25%;border:0.5em solid #fff}
  article.panel.listing header {width:70%;padding:0 2.5%;}
  .triptych > * {
    flex: 0 0 calc(33.3% - 0.5em);
    margin: 0 0 1.5em;
  }

}

/* Tablet */
@media screen and (min-width: 50em) {
  h3, .h3 {
    font-size: 250%;
  }
  #browse {
    transition: box-shadow 0.25s;
  }
  
  #browse > main {
    background-color: #fff;
    padding: 2vmax 1.5vmax 2vmax 5vmax;
  }
  
  body > header {
    flex-direction: row-reverse;
    position: fixed;
    /* border-bottom: 1px dashed #EEE; */
  }
  #browse, body > header > nav {
    width: 85vw;
  }
  body > header > form {z-index: 1;}
  body > header > form, #media {
    width: 15vw;
  }
  
  #media, body > header > form {
    border-left: 1px dashed #eee;
  }
  #media {
    height: 100vh;
    right: 0;
    top: 6.5em;
    position: fixed;
  }

  button.menu-trigger { display: none;}
  
  body[data-position^='0'] #media {
    /* padding-top: 7.5em; */
    /* top: 0.5em; */
  }
  
  section.listing div.markdown :first-child {
    margin-top:0;
  }
    

  body > section[id] {width:100vw;}
  #Player[data-position] .intro {display:none}
  .finder input {
    padding: 2em 0 2em 3.5em;
    border:none;
  }
  
  .flip {flex-direction:row-reverse;justify-content: flex-end;}
  .card p {flex: 1 0 50%;align-self: center;max-width: 60ch;}
  .bio.read {width: 15em;margin-right:1vmin;}
  .listing:not(:first-of-type), .search li:not(:first-of-type) { border-top:2px solid #EEE;}
  button, .button {border:1px solid #5b9b98; color: #5b9b98;}
  .columns {column-gap:0.25em;}
  .columns.three{column-count:3;}
  .columns.four{column-count:3;}
  
  nav a.logo {
    margin: 0.25em 2em 0 2em;
   }

  .column { flex-direction: column }

  .half          {width:50%   }
  .one-third     {width:30%;}
  .one-third.l   {width: calc(30% - 1vw)}
  .one-third.ll  {width: calc(30% - 2vw);}
  .conference .one-third.ll {background-color:#fafafa;}
  .two-thirds    {width:70%;}
  .two-thirds.r  {width:calc(70% - 1vw);}
  .two-thirds.rr {width:calc(70% - 2vw);}
  nav[role].panel {
    justify-content: space-between;
  }
  nav[role] > ul {display: flex;}
  nav[role] > ul > li {background-color:#fff }
  
  .feature article.panel.listing header, .competition article.panel.listing header, .conference article.panel.listing header { width:50% }
  .feature article.panel.listing ul { width:25% }
  .bg { 
    width:20%;
    margin:0;
    align-self: flex-start;
    background-color: rgba(214, 214, 214, 0.5);
  }
  
  .markdown img:last-of-type {
    width: 25%;
  }

}

/* Desktop*/
@media screen and (min-width: 80em){
  .columns.four { column-count:4 }
  nav[role] > ul { margin:0 0 0 10% }
  .seven > li { max-width: calc(25% - 1em) }
}


@keyframes spin { from { transform:rotate(0deg) } to { transform:rotate(360deg); } }

.search li[class]      { border-left: 2px solid #EEE;}
.search li.feature     { border-left-color: rgba(115, 50, 158, 0.35) }
.search li.person      { border-left-color: rgba(159, 037, 033, 0.32) }
.search li.happening   { border-left-color: rgba(106, 172, 179, 0.28) }
.search li.competition { border-left-color: rgba(075, 245, 024, 0.26) }
.search li.article     { border-left-color: rgba(212, 217, 154, 0.46) }

input, textarea, fieldset { width:100%; padding:0;border: 1px solid #ccc; }



div.filter > h6 {
  padding: 1em 2vmin;
  flex:1 0 7.5vw;
  text-align:right;
}
div.filter > ul                      { flex: 1 0 70vw }
div.filter.panel                     { align-items: center }
div.filter.panel:not(:first-of-type) {
  font-size:0.65em;
  margin:calc(2vmax - 1vmin) 0;
}

article[data-type='show'] ul li:nth-child(n + 6) { display:none}


pre.console {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 20vh;
  width: 100vw;
  z-index: 10;
  background-color: #eee;
  color: red;
  padding: 2em;
  overflow: auto;
  font-size: 1.5em;
}


.listen:hover, .listen:focus, .bg .listen:hover {background-color:rgba(255,255,255,1);}
.listen {
  background-size: 125% auto;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><g fill="%235b9c99"><path d="M39 135h10v25H39zM51 135h10v25H51z"/></g><path style="stroke-alignment:inner" fill="%235b9c99" stroke="%23447371" stroke-width="2" stroke-opacity=".3" d="M40 35v30l25-15z"/></svg>');
  background-position: 50% 7%;
  background-repeat: no-repeat;
  color: rgba(0,0,0,0);
  letter-spacing: 0.075em;
  transition: color 0.25s, background-size 0.25s, background-color 0.25s, background-position 0.25s;
  background-color: rgba(255,255,255,0.65);
}

button.listen {
  border: 2px solid #5b9c99;
  overflow: hidden;
  height: calc(1.5em + 2vmax);
  width: calc(1.5em + 2vmax);
  border-radius: 50%;
  color: transparent;
}

.bg button.listen { box-shadow: 0 0 2.5em rgba(0,0,0,0.1); }

.playlist {max-height: 72.5vh;overflow-y:scroll;--webkit-overflow-scrolling: touch;font-family: var(--condensed);}
.playlist li {
  padding: 0 0.25em 0.25em;
  border-top: 1px solid rgba(0,0,0,0.05);
  line-height: 0.75;
  color: #555;
  font-weight: 400;
  text-transform: lowercase;
  font-variant: all-small-caps;
  text-indent: -0.5em;
}
.playlist li:first-of-type {
  border:none;
}
.playlist.plain li { padding: 0.15em 0.75em 0.35em; }
.playlist li.current:before { content: '\25B6\FE0E'; margin-right:0.5em; }
.playlist li.current {
  border-left-color: #88746a;
  color: #88746a;
}

.playlist li > span {pointer-events:none;}
li.played {color:#BBB;border-left-color: rgb(230, 230, 230);}

li span.ins {
  display: none;
}

#Player .controls button {
  border: none;
  padding: 0;
  background-color: rgba(255,255,255,1);
  border-radius: 50%;
  width: 40%;
  height: 40%;
  left: 30%;
  position: absolute;
  z-index: 2;
  top: 30%;
}
#Player .controls button svg {
  width: 60%;
  height: 60%;
}

audio {display:none;}

#Player .controls {
  display: block;
  z-index: 1;
  background-image: radial-gradient(#fff, rgba(255,255,255,0));
}

#Player:not([data-position]) .controls, audio  {opacity:0;}

#Player svg {
  width: 100%;
  height: 100%;
  position: relative;
}

#Player button svg {
  fill: #5b9b98;
  stroke: #5b9b98;
  stroke-width: 3;
}

.progress svg {
  fill: none;
  margin: 0;
  stroke: #333;
  stroke-width: 2;
}
.progress text {
  font-size: 1.125em;
  text-anchor: middle;
  stroke: none;
  fill: #85746b;
  font-family: 'Courier New', monospace;
  pointer-events: none;
}
.progress text:last-of-type {
  fill: #ab9589;
}


#Player {
  display: flex;
  flex-direction: column;
}
#Player .progress path {
  stroke: #5b9b98;
  stroke-linecap: round;
}

#Player .progress .handle {
  stroke: none;
  fill: #5b9b98;
  transition: fill-opacity 0.5s;
}

#Player .progress:hover .handle, #Player .progress.hover .handle {
  fill-opacity:0.25;
}

.progress circle {
  stroke-width: 1;
  pointer-events: none;
  stroke: rgba(94, 165, 160, 0.25);
  stroke-dasharray: 20 1;
}

.desktop .progress:hover { cursor: pointer }
.desktop .progress:hover .handle, .touch .progress.hover .handle { stroke-opacity: 1 }

.touch .progress.hover .grab {
  fill-opacity:1;
  stroke-opacity:1;
}

.progress circle.grab {
  fill: #88746a;
  stroke:#fff;
  stroke-dashArray:0;
}

.progress .handle, .progress span, .progress .grab {
  stroke-opacity: 0;
  fill-opacity:0;
  transition: stroke-opacity 0.5s 0.125s;
  pointer-events: none;
}


#Player .progress span {
  top: 50%;
  transform: translateY(-50%);
  color: #9d9d9d;
  font-size: 1.25vmax;
  transition:opacity 0.5s 0.25s;
  font-weight:200;
  font-family: 'Courier New';
  line-height: 1.25;
  letter-spacing: -0.185ch;
}

#Player .progress span time {
  display: block;
}
#Player .progress span time:first-child {
  color: #5b9c99;
}

#Player .progress span time:last-child {
  color: #ddd;
}

.progress span {
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  text-align: center;
}


button.error { background-color: #ED1C24 }

.progress {
  position: relative;
  min-width: 50%;
}

.progress.spin svg, .progress[data-state='waiting'] svg circle {animation: spin 5s 0.125s infinite linear; transform-origin: 50% 50%;}

.progress[data-state='playing'] span {
  opacity:1 !important;
}

.progress[data-state='waiting'] svg circle:not(.grab) {
  stroke-opacity: 1;
  stroke-dashArray: 5 5;
  stroke:#444;
  transition: stroke 2s;
}

.progress[data-state='waiting'] svg path {
  stroke-width:1 !important;
  stroke-opacity: 0
}



.target, :target {
  background-color: #fdd1b2;
  box-shadow: 0 0 0 0.5em #fdd1b2;
  animation: fade 1.5s ease 3s 1 normal forwards;
}



@keyframes fade {
  from {
    box-shadow: 0 0 0 0.5em #fdd1b2;
    background-color: #fdd1b2;
  }

  to {
    box-shadow: 0 0 0 0 transparent;
    background-color: #fff;
  }
}



/* images encoded w/ https://jakearchibald.github.io/svgomg/ */
div[data-award], .award { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path fill="%23333;" d="M200.9 193.17l46.13 66.44L433.46 0 304.7.3"/><path fill="%23444" d="M304.75 178.87L247.5 259.6 64.23 0 193 .3"/><path fill="%23DED7B8" d="M321.7 423.58l9.4 29.04-29.15-9.02-.04 30.5-24.93-17.58-9.47 29-18.28-24.42-17.97 24.66-9.84-28.9-24.7 17.92-.43-30.52-29.03 9.4 9.02-29.16-30.52-.04 17.6-24.94-29.02-9.47 24.44-18.28-24.67-17.97 28.88-9.84-17.9-24.7 30.52-.44-9.4-29.03 29.16 9 .04-30.5 24.94 17.6 9.47-29.02 18.3 24.43 17.96-24.65 9.83 28.9 24.7-17.92.43 30.52 29.04-9.4-9.02 29.16 30.5.05-17.58 24.94 29 9.46-24.43 18.28 24.67 17.97-28.88 9.85 17.9 24.7"/></svg>');}
.finder input { background-image: url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="61" cy="38" r="25" fill="none" stroke="%2377635c" stroke-width="2"/><path fill="%2377635c" d="M17.4 90l-6.8-6.6L38 59l3.8 3.8"/></svg>') }
.social a { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 300"><path fill="%23000" d="M74.6 19.6c-1.8.8-3.7 1.4-5.8 1.6 2-1.2 3.7-3.2 4.5-5.6-2 1.2-4 2-6.4 2.5-2-2-4.6-3-7.5-3-5.6 0-10 4.4-10 10v2.3C41.3 27 34 22.8 29 16.7c-1 1.5-1.4 3.3-1.4 5 0 3.6 1.8 6.7 4.5 8.5-1.7 0-3.3-.5-4.7-1.2 0 5 3.5 9 8.2 10-1 .2-1.8.4-2.7.4-.7 0-1.3 0-2-.2 1.4 4 5 7 9.5 7-3.4 2.7-7.8 4.3-12.5 4.3h-2.4c4.4 2.8 9.8 4.4 15.5 4.4C59.4 55 69.5 39.4 69.5 26V25c2-1.6 3.7-3.3 5-5.4zM60.2 134h-7.7v-5c0-1.8 1.3-2.2 2.2-2.2H60v-8.3h-7.4c-8.2 0-10 6.2-10 10v5.6h-5v8.7h5v24h10v-24h6.7l1-8.6zM40.7 255H29v-1.4V277c0 6.5 6.4 6.5 6.4 6.5h30.4s6.5 0 6.5-6.4v-23.4H59.6c-2-2.7-5.3-4.4-9-4.4s-7 1.7-9 4.4H29v-7c0-4 2.5-5.5 4.4-6v8.6H35v-9H65.7s6.5 0 6.5 6.5v8.4H60.5c.8 1.7 1.3 3.5 1.3 5.4 0 6.2-5 11.2-11.2 11.2-6.2 0-11.2-5-11.2-11.2 0-2 .5-3.7 1.3-5.3zm23.7-11.8c-1.4 0-2.6 1.2-2.6 2.6v2.3c0 1.5 1.2 2.7 2.6 2.7h2.3c1.4 0 2.6-1.2 2.6-2.6V246c0-1.5-1.2-2.6-2.6-2.6h-2.3zm-25-3v9H41v-9h-1.6zm-3 0v9H38v-9h-1.6zm14.2 29c5 0 9-4 9-8.8 0-5-4-9-9-9s-9 4-9 9 4 9 9 9zm0-2.8c3.3 0 6-2.7 6-6s-2.7-6-6-6-6 2.7-6 6 2.7 6 6 6z"/></svg>') }
nav a.logo {background-image: url('/images/we-need-tc-stamp.png');}




/*2022 adjustments*/

aside hr {
  border-width: 1px;
  margin: 0;
  border-color: #000;

}

aside.topic {
  /* background-image: linear-gradient(135deg, #f99faa, #fdd1b2), url(/images/texture.jpg); */
  /* background-blend-mode: multiply; */
  background-image: url(/images/yellow-background.jpg);
  background-size: cover;
  margin: 0 0 2em;
  padding: 1.5em;
  text-shadow: 1px 1px 1px rgb(255 255 255 / 30%);
  border-radius: 0.25em;
}

.topic p:first-child a:only-child {
  display: block;
  /* margin: -2em -1.25em 0; */
}



.topic p a:only-child img {
  width: 100%;
  background-color: #fff;
  display: block;
}
.category header.gradient {
  border-radius: 0.25em;
  margin: 0 0 2.5em;
  background-color:#fff;
  padding: 4em;
  color: #fff;
  background-image: linear-gradient(#4e4f8b, #356291), url(/images/texture.jpg);
  background-blend-mode: multiply;
}