/* =========================
   BASE
   ========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: #000;
  color: #fff;
  font-family: "Courier Prime", monospace;
  font-size: 16px;
}


/* =========================
   LINKS
   ========================= */

a {
  color: #fff;
}


/* =========================
   HOME BUTTON
   ========================= */

.home-btn {
  position: fixed;
  top: 20px;
  left: 20px;

  color: #fff;
  text-decoration: none;

  font-family: "Courier Prime", monospace;
  font-size: 16px;

  z-index: 100;
}

.home-btn:hover {
  text-decoration: underline;
}


/* =========================
   PAGE
   ========================= */

.page-wrapper {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 40px 100px;
}


/* =========================
   HEADER
   ========================= */

.sounds-header {
  margin-bottom: 50px;
}


/* PAGE TITLE */

.page-title {
  margin: 0;

  font-family: "Silkscreen", sans-serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}


/* LATHER! SUBTITLE */

.page-subtitle {
  margin: 10px 0 0;

  font-family: "Silkscreen", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}


/* MAKE LATHER! CLICKABLE
   WITHOUT CHANGING ITS SIZE */

.page-subtitle a {
  color: inherit;

  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;

  text-decoration: none;
}

.page-subtitle a:hover {
  text-decoration: underline;
}


/* =========================
   MUSIC LINKS
   ========================= */

.music-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;

  margin-bottom: 70px;
}

.music-links a {
  color: #fff;

  font-family: "Courier Prime", monospace;
  font-size: 16px;
  font-weight: 400;

  text-decoration: none;
}

.music-links a:hover {
  text-decoration: underline;
}


/* =========================
   UPCOMING RELEASE
   ========================= */

.upcoming-section {
  width: 100%;
}

.section-label {
  margin: 0 0 25px;

  font-family: "Courier Prime", monospace;
  font-size: 16px;
  font-weight: 700;
}


/* =========================
   RELEASE CARD
   ========================= */

.upcoming-card {
  display: flex;
  align-items: flex-start;
  gap: 40px;
}


/* COVER */

.release-art-wrapper {
  flex-shrink: 0;
}

.release-art {
  display: block;

  width: 400px;
  max-width: 100%;
  height: auto;
}


/* RELEASE TEXT */

.release-info {
  max-width: 500px;
}

.release-title {
  margin: 0 0 15px;

  font-family: "Courier Prime", monospace;
  font-size: 24px;
  font-weight: 700;
}

.release-date {
  margin: 0 0 20px;

  font-family: "Courier Prime", monospace;
  font-size: 16px;
  font-weight: 400;
}

.release-blurb {
  margin: 0;

  font-family: "Courier Prime", monospace;
  font-size: 16px;
  line-height: 1.6;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 700px) {

  .page-wrapper {
    padding: 70px 20px 60px;
  }

  .home-btn {
    top: 15px;
    left: 15px;
  }

  .page-title {
    font-size: 26px;
  }

  .page-subtitle {
    font-size: 16px;
  }

  .music-links {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 50px;
  }

  .upcoming-card {
    flex-direction: column;
    gap: 25px;
  }

  .release-art {
    width: 100%;
    max-width: 400px;
  }

  .release-title {
    font-size: 20px;
  }
}