/* ---------- variables ---------- */

:root {
  --spacing_sm: 8px; /* spacing_sm */
  --spacing_md: 16px; /* spacing_md */
  --spacing_lg: 24px; /* spacing_lg */
  --spacing_xl: 48px; /* spacing_xl */

  --backColor: #ade0ae;
  --textColor: #070807;

  --mainFont: "Averia Libre";
}

  /* ----------- structure -------------- */

html {
  font-family: var(--mainFont);
  font-weight: lighter;
  font-size: 22px;
  line-height: 33px;
}

body {
  background: var(--backColor);
  color: var(--textColor);
  margin: 0;
}

.wrap {
  max-width: 666px;
  margin: 60px auto;
  padding: 0 24px;
}

.content {
  padding: 24px 0;
}

.columns {
  columns: 2;
  column-gap: 24px;
}

.center {
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
  mix-blend-mode: darken;
}

.details img {
  mix-blend-mode: normal;
}

/* ---------- typography ----------- */

@font-face {
  font-family: "Black Night";
  src: url("./webfonts/BlackNight.woff2") format("woff2"),
    url("./webfonts/BlackNight.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averia Libre";
  src: url("./webfonts/AveriaLibre-Bold.woff2") format("woff2"),
    url("./webfonts/AveriaLibre-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averia Libre";
  src: url("./webfonts/AveriaLibre-Regular.woff2") format("woff2"),
    url("./webfonts/AveriaLibre-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Averia Libre";
  src: url("./webfonts/AveriaLibre-BoldItalic.woff2") format("woff2"),
    url("./webfonts/AveriaLibre-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Averia Libre";
  src: url("./webfonts/AveriaLibre-Italic.woff2") format("woff2"),
    url("./webfonts/AveriaLibre-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "GothBallCrap";
  src: url("./webfonts/GothBallCrap-Bold.woff2") format("woff2"),
    url("./webfonts/GothBallCrap-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

h1 {
  font-family: "GothBallCrap";
  text-align: center;
}

h2 {
  font-family: "GothBallCrap";
}

small {
  font-size: 14px;
  line-height: 14px;
}

a {
  color: var(--textColor);
}

em {
  font-size:1.2em;
}

/* -------------- utils ------------- */

.display-none, .hidden {
  display: none!important;
}

.mobile {
  display: none;
}

.desktop {
  display: block;
}

figure {
  margin-right: 0;
  margin-left: 0;
}

figcaption {
  font-size: 14px;
  line-height: 14px;
  font-weight: normal;
  opacity: 0.4;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* border_radius */
  overflow: hidden;
  line-height: 0;
}

.last-mod {
  padding-top: 16px; /* spacing_md */
  margin-top: 16px; /* spacing_md */
  border-top: 2px solid;
}

.checklist ul {
  padding: 0;
  margin-top:0;
  margin-right:0;
  margin-bottom: 24px; /* spacing_lg */
  margin-left:0;
  list-style: none;
}

.checklist input {
  margin-top: 8px; /* spacing_sm */
}

.checklist input::before {
  font-family: "Distro Bats";
  content: "~";
  font-size: 25px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: block;
  position: relative;
  top: -2px;
  color: #9b3313; /* textColorAccent */
  background: #fff0b7; /* darkBackColor */
}

.checklist input:checked::before {
  content: "|";
}

.table-of-contents {
  max-width:600px;
  padding-left: 16px; /* spacing_md */
  border-left:2px solid;
}

/* ----------- content -------------- */

.left-border {
  position:absolute;
  left:0;
  top:0;
  width:800px;
  height:800px;
  pointer-events: none;
}

.right-border {
  text-align:right;
  position:absolute;
  right:0;
  top:0;
  width:400px;
  height:800px;
  pointer-events: none;
}

.left-border img,
.right-border img {
  width:auto;
  height:100%;
}

.logo {
  margin: 100px auto 0 auto;
  display: block;
  text-align: center;
}

.logo h1 {
  margin-bottom:0;
}

.skull {
  text-align: center;
  margin-top: -150px;
}

.note {
  display: inline-block;
  margin-top: 24px;
}

.branch {
  text-align: center;
}

.big-separator img {
  width:100%;
}

.desc {
  text-align: center;
  line-height: 18px;
  font-size: 18px;
}

.upcoming {
  text-align: center;
  line-height: 18px;
  font-size: 18px;
}

.menu {
  padding: 16px 0;
  text-align: center;
}

.menu span {
  font-size: 10px;
  position: relative;
  top: -2px;
}

.menu a {
  font-weight: bold;
  font-size: 18px;
  color: var(--lightTextColor);
  padding: 0 8px;
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
}

.menu a.active {
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.menu a:hover {
  border-top: 2px solid var(--lightTextColor);
  border-bottom: 2px solid var(--lightTextColor);
}

table {
  border-collapse: collapse;
}

thead td {
  font-weight: bold;
  font-size: 16px;
}

td {
  padding: 24px 24px 0 0;
}

.newsletter-form input {
  border:2px solid;
  margin:0;
  line-height:1rem;
  background:transparent;
  border-radius:3px;
  font-family: var(--mainFont);
  font-weight:bold;
}

.newsletter-form input[type="submit"] {
  cursor:pointer;
}

.newsletter-form input[type="submit"]:hover {
  background:var(--textColor);
  color:var(--backColor);
  border-color:var(--textColor);
}

.issue {
  text-decoration:none;
}

.issue h2 {
  font-family:var(--mainFont);
  text-align:center;
  margin-bottom:8px;
}

.issue h2 span {
  font-size:18px;
}

.product {
  text-align:center;
  padding-top:16px;
}

.product .price {
  line-height:46px;
  padding: 0 16px;
}

.product .download {
  margin-top:8px;
}

.product .row {
  justify-content:center;
}

.preorder-warning {
  line-height:1em;
  margin-top:32px;
  margin-bottom:32px;
  padding:8px;
  background:#7ec380;
  border-radius:4px;
}

.snipcart-add-item {
  line-height:40px;
  width: 200px;
  font-weight: bold;
  font-size: 18px;
  border:2px solid;
  border-radius:4px;
  background:var(--backColor);
  cursor:pointer;
  border-color:var(--textColor);
  font-family: var(--mainFont);
}

.snipcart-add-item:hover {
  background:var(--textColor);
  color:var(--backColor);
}

.single-issue h1 {
  font-family:var(--mainFont);
  text-align:center;
  margin-bottom:24px;
  margin-top:8px;
  font-size:30px;
}

.single-issue h1 span {
  font-size:20px;
}

.mixtape {
  text-align:center;
}

.social {
  text-align:center;
  padding-top: 16px;
}

.artist {
  line-height:1.2em;
  margin-bottom:16px;
}

.mastodon {
  display:none;
}

.submission-button {
  position:relative;
  margin-top:32px;
}

.submission-button span {
  left: 0;
  position: absolute;
  width: 100%;
  top: 38%;
  font-size:24px;
}

.colors {
  display:flex;
  flex-direction:row;
}

.color {
  flex:1;
  padding: 8px;
  text-align:center;
}

.color-sample {
  height:150px;
  width: 100%;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-image: url(/img/color-sample.png);
  -webkit-mask-image: url(/img/color-sample.png);
}

.deadline {
  text-align:center;
}

/* -------- FLEX ---------*/

.flex-row {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}

.flex-1 {
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.flex-2 {
  -webkit-flex: 2;
  -ms-flex: 2;
  flex: 2;
}

.flex-3 {
  -webkit-flex: 3;
  -ms-flex: 3;
  flex: 3;
}

.flex-4 {
  -webkit-flex: 4;
  -ms-flex: 4;
  flex: 4;
}

.flex-5 {
  -webkit-flex: 5;
  -ms-flex: 5;
  flex: 5;
}

.flex-6 {
  -webkit-flex: 6;
  -ms-flex: 6;
  flex: 6;
}

.columns-2 {
  -webkit-column-width: 400px;
  -moz-column-width: 400px;
  column-width: 400px;
}

.columns p {
  margin: 0;
}

.row {
  display:flex;
  flex-direction:row;
  margin: 0 -8px; /* spacing_sm */
}

.half {
  flex:1;
  line-height:0;
  padding-top:0;
  padding-right: 8px; /* spacing_sm */
  padding-bottom:0;
  padding-left: 8px; /* spacing_sm */
}

.half p {
  margin-top:0;
  margin-right:0;
  margin-bottom:16px; /* spacing_md */
  margin-left:0;
}

/* -------- PADDING ---------*/

.no-padding-left {
  padding-left: 0;
}

.no-padding-bottom {
  padding-bottom: 0 !important;
}

.small-padding {
  padding: 15px;
}

.small-padding-left {
  padding-left: 15px;
}

.small-padding-right {
  padding-right: 15px;
}

.small-padding-top {
  padding-top: 15px;
}

.small-padding-bottom {
  padding-bottom: 15px;
}

.medium-padding {
  padding: 30px;
}

.medium-padding-top {
  padding-top: 30px;
}

.medium-padding-bottom {
  padding-bottom: 30px;
}

.medium-padding-right {
  padding-right: 30px;
}

.medium-padding-left {
  padding-left: 30px;
}

.big-padding {
  padding: 60px;
}

.big-padding-top {
  padding-top: 60px;
}

.big-padding-bottom {
  padding-bottom: 60px;
}

.big-padding-left {
  padding-left: 60px;
}

.big-padding-right {
  padding-right: 60px;
}

/* -------- MARGINS ---------*/

.small-margin-top {
  margin-top: 15px;
}

.small-margin-left {
  margin-left: 15px;
}

.small-margin-right {
  margin-right: 15px;
}

.small-margin-bottom {
  margin-bottom: 15px;
}

.medium-margin-top {
  margin-top: 30px;
}

.medium-margin-bottom {
  margin-bottom: 30px;
}

.no-margin {
  margin: 0;
}

.no-margin-bottom {
  margin-bottom: 0 !important;
}

@media screen and (max-width:1000px) {
  .left-border,.right-border {
    display:none;
  }
  .submission-button span {
    position:static;
  }
  .colors {
    flex-direction: column;
  }
  .color {
    text-align: left;
  }
}