/* ––––––––––  V A R  –––––––––– */

:root {
  --fs: 16px;
  --lh: 20px;
}

/* ––––––––––  B A S I C  –––––––––– */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-weight: normal;
  text-decoration: none;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  scroll-behavior: smooth;
  font-family: "helvetica", "arial", sans-serif;
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: 0.2px;
  word-spacing: -1px;
  color: black;
  padding: 16px 20px 16px 20px;
}
em {
  font-style: italic, oblique;
}
::-moz-selection {
  color: blue;
  background:inherit;
}
::selection {
  color: blue;
  background:inherit;
}

/* ––––––––––  C O N T E N T  –––––––––– */

.bg {
  background-color: whitesmoke;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1000;
}
.header {
  float: left;
  position: fixed;
  margin-top: 44px;
  z-index: 10000;
  color: black;
  text-decoration: none;
}
.header a {
  text-decoration: none;
}
.header:hover a {
  text-decoration: none;
}
.main {
  float: right;
  width: 75%;
  margin-top: 44px;
}
.footer {
  clear: both;
  float: right;
  left: 25%;
  width: 75%;
  margin-top: 100px;
  padding-bottom: 20px;
}
.footer a {
  text-decoration: none;
}
.footer:hover a {
  text-decoration: none;
}
/* ––––––––––  L I S T S  –––––––––– */

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column-gap: 20px;
}
.colophon {
  grid-template-columns: 1fr 1fr;
}
.solo,
.group,
.feat {
  display: grid;
  grid-template-columns: minmax(48px, 13%) 1fr;
  grid-auto-rows: min-content;
}

.solo .year,
.group .year,
.feat .year {
  visibility: hidden;
}

.solo  > :first-child,
.group  > :first-child,
.feat  > :first-child {
  visibility: visible;
}


.cat {
  position: sticky;
  top: 60px;
  grid-column: col-start col-start col-start;
  white-space: nowrap;
  color: black;
}
.info {
  padding-left: 20px;
  text-indent: -20px;
}
.info:last-child {
  padding-bottom: 20px;
}
.cat:first-child {
  padding-bottom: 20px;
}

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: inherit;
  -webkit-text-decoration-color: inherit;
  -moz-text-decoration-color: inherit;
  text-underline-offset: 2px;
}
a:hover {
  text-decoration: underline;
  text-decoration-color: transparent;
  -webkit-text-decoration-color: transparent;
  -moz-text-decoration-color: transparent;
  transition: 0.15s;
}
a:visited {
  color: inherit;
}



@media screen and (max-width: 1300px) {
  .header {
    float: left;
    width: 100%;
    margin-top: 24px;
    width: calc(100% - 40px);
  }
  .main {
    float: right;
    width: 100%;
    margin-top: 64px;
  }
  .footer {
    width: 100%;
  }
  .cat {
    top: 80px;
  }
}



@media screen and (max-width: 800px) {
  body {
    padding: 16px 10px 16px 10px;
  }
  .solo,
  .group,
  .feat {
    display: grid;
    grid-template-columns: minmax(48px, 10%) 1fr;
    grid-auto-rows: min-content;
  }
  .solo {
    order: 1;
  }
  .group {
    order: 2;
  }
  .feat {
    order: 3;
  }
  .container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
  }
  .info:last-child {
    padding-bottom: 0px;
  }
  .main {
    top: 0px;
    margin-top: 64px;
  }
  .header {
    margin-top: 24px;
    text-align: center;
    width: calc(100% - 20px);
  }
  .cat {
    margin: 0px auto 0px auto;
  }
  .cat {
    padding-bottom: 20px;
  }
  .group.cat,
  .feat.cat {
    margin-top: 40px;
  }
  .footer {
    clear: both;
    float: left;
    left: 0;
    width: 100%;
    margin-top: 100px;
    padding-bottom: 20px;
    text-align: center;
  }
}



@media print {
  body {
    padding: 16px 10px 16px 10px;
    color: black;
  }
  .header {
    float: left;
    width: 100%;
    position: absolute;
    left: 0;
    margin-top: 44px;
    text-decoration: none;
    text-align: center;
  }
  .main,
  .footer {
    clear: both;
    float: left;
    width: 100%;
    left: 0;
    top: 0px;
    margin-top: 64px;
    text-align: center;
  }
  .solo,
  .group,
  .feat {
    display: grid;
    grid-template-columns: minmax(48px, 10%) 1fr;
    grid-auto-rows: min-content;
  }
  .solo {
    order: 1;
  }
  .group {
    order: 2;
  }
  .feat {
    order: 3;
  }
  .container {
    text-align: left;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
  }
  .info:last-child {
    padding-bottom: 0px;
  }
  .cat {
    margin: 0px auto 0px auto;
    padding-bottom: 20px;
  }
  .group.cat,
  .feat.cat {
    margin-top: 40px;
  }
}