/* ===================================== RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  min-height: 100dvh;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
}

html,
body {
  overscroll-behavior: none;
}

p, h1, h2, h3, h4 {
  margin: 0;
  font-weight: normal;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font: inherit;
  border: none;
  background: none;
  outline: none;
}

ul, ol {
  list-style-position: inside;
}

ul {
  list-style: none;
}

/* =============================================================================== FONTS */


@font-face {
  font-family: 'Soehne';
  src: url('/assets/fonts/soehne-buch.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Soehne';
  src: url('/assets/fonts/soehne-buch-kursiv.woff2') format('woff2');
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'SoehneBreit';
  src: url('/assets/fonts/soehne-breit-fett.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SoehneMono';
  src: url('/assets/fonts/soehne-mono-halbfett.woff2') format('woff2');
  font-style: normal;
  font-display: swap;
}


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


:root {
  --container: 1rem;
  --header-height: 4rem;
  --gap: 1rem;

  --bg: #181818;
  --text: #e7e7e7;
  --link-hover: #917F72;
  --border-color: #736357;
  --hr: #736357;
  --white: #ffffff;
  --grey: #917F72;

  --lt-blue: #c4dbe0;
  --blue: #2c96bc;
  --dk-grey: #38312d;
  --ink: #232121;
  --accent: #ff635f;
  --input-bg: #2a2624;
  --input-color: #cccccc;

  --z-gutter: 0;
  --z-main: 0;
  --z-footer: 10;
  --z-controls: 20;
  --z-overlay: 30;
  --z-header: 40;
}

/* desktop */ @media (min-width: 1000px) {

  :root { 
    --container: 1.5rem; 
    --header-height: 4.5rem;
    --gap: 0.5rem;
  }
}


body {
  width: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: 'Soehne';
  font-size: clamp(0.95rem, 0.2078vw + 0.9006rem, 1.25rem);
  line-height: 1.4;
  color: var(--text);
  background-color: var(--bg);
  animation: fadeIn 1.2s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  cursor: url('/assets/icons/dot-cursor.svg') 6 6, auto;
}

main {
  flex: 1 0 auto;
  z-index: var(--z-main);
}

header,
footer {
  flex-shrink: 0;
}

/* ===================================== FONT STYLES */


h1, h2, h3 {
  font-family: 'SoehneBreit';
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

h4 { font-family: 'Soehne';}

.mono,
.big-mono {
  font-family: 'SoehneMono';
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.italic {
  font-style: italic;
}

.arrow {
  font-size: inherit;
  color: inherit;
}

.grey { color: var(--grey); }


/* ===================================== FONT SIZES */


h1 { font-size: clamp(1.25rem, 0.2222vw + 1.1833rem, 1.50rem); }
h2 { font-size: clamp(1.25rem, 0.2222vw + 1.1833rem, 1.50rem); }
h3 { font-size: clamp(1.20rem, 0.5333vw + 1.0733rem, 1.50rem); }
h4 { font-size: clamp(0.90rem, 0.3604vw + 0.8144rem, 1.40rem); }

.mono       { font-size: 0.8rem; }
.big-mono   { font-size: 1rem; }

/* desktop */ @media (min-width: 1000px) {

  .mono { font-size: 0.9rem; }
}

/* ===================================== LINKS, LINES, BUTTONS */


a {
  color: var(--text);
  transition: color 0.3s ease;
  text-decoration: none;
}

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

hr {
  margin: 1rem 0;
  border: none;
  border-top: 1.5px solid var(--dk-grey);
}

.button {
  font-family: 'SoehneMono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  font-size: 0.8rem;
  border: 1px solid var(--grey);
  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
  border-radius: 5px;
  outline: none;
  color: var(--grey);
  background-color: var(--bg);
  opacity: 1;
  transition: opacity 0.3s ease;
} 

.button:hover,
.button:focus {
  opacity: 0.8;
  cursor: pointer;
}

/* desktop */ @media (min-width: 1000px) {

  .button {
    font-size: 0.9rem;
  }
}

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


header {
  z-index: var(--z-header);
  position: fixed;
  top: 0;
  width: 100%;
  height: var(--header-height);
  padding: 0 var(--container);
  transition: transform 0.5s ease;
}

header.hidden {
  transform: translateY(-100%);
}

.difference-header {
  background-color: transparent;
  mix-blend-mode: difference;
}

.solid-header {
  background-color: var(--bg);
}

.header.viewport-bottom {
  background: var(--bg);
  mix-blend-mode: normal;
}

.header::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: 14rem;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(26, 25, 27, 1),
    rgba(26, 25, 27, 0)
  );
  opacity: 0;
  transition: opacity 0.2s ease;
}

.header.viewport-bottom::after {
  opacity: 1;
}

.header.nav-open::after {
  opacity: 0;
}

/* ===================================== DESKTOP */


.grid-nav {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  column-gap: var(--gap);
  padding: 2rem 0 0;
}

.site-title {
  grid-column: 1 / 3;
  text-transform: uppercase;
  font-family: 'SoehneBreit';
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}

.news   { grid-column: 3 / 4; }

.tour   { grid-column: 4 / 5; }

.media  { grid-column: 5 / 6; }

.press  { grid-column: 6 / 7; }

.discog { grid-column: 7 / 8; }

.grid-nav a {
  color: #ffffff;
}

.grid-nav a.active {
  pointer-events: none;
  text-decoration: underline;
  text-underline-offset: 0.75rem;
  text-decoration-thickness: 1.2px;
}

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


.mobile-header {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  gap: var(--gap);
}

.mobile-title {
  color: white;
  font-family: 'SoehneBreit';
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.25rem, 0.2222vw + 1.1833rem, 1.50rem);
}

.hamburger {
  justify-self: end;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  width: 40px;
  height: 3rem;
}

.hamburger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background-color: white;
  border-radius: 2px;
  transition: all 0.3s ease;
}

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


.section--overlay-content {
  height: 100%;
}

.overlay {
  position: fixed;
  inset: 0;
  width: 0;
  overflow-x: hidden;
  z-index: var(--z-overlay);
  background-color: var(--bg);
  opacity: 0.95;
  transition: width 0.7s;
  border-right: none;
}

.overlay.is-open {
  width: 75%;
  border-right: 1px solid var(--dk-grey);
}

@media (prefers-reduced-motion: reduce) {
  .overlay {
    transition: none;
  }
}

.overlay-nav {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mobile-nav {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
  padding-bottom: 1rem;
}

.section--overlay-content a {
  display: flex;
  align-items: center;
  padding: 0 var(--container);
  text-decoration: none;
  font-family: 'SoehneBreit';
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--text);
  transition: color 0.3s;
}

.section--overlay-content a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

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


/* mobile */ @media (max-width: 999px) {

  .desktop-only {
    display:none;
  }

  header {
    justify-content: center;
    height: 3rem;
  }
}

/* desktop */ @media (min-width: 1000px) {

  .mobile-only { display:none; }  
}

/* =============================================================================== LAYOUT */


section {
  width: 100%;
}

/* do i use this still? */
.container {
  padding: 0 var(--container);
}

.section--page-header {
  margin-top: var(--header-height); 
  padding: 4rem var(--container) 2rem;
}

.section--page-section {
  padding: 2rem 0;
}

.section--grid-header {
  margin-top: var(--header-height); 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
  column-gap: var(--gap);
  row-gap: var(--gap);
  padding: 4rem var(--container);
}

.section--grid-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-start;
  column-gap: var(--gap);
  row-gap: var(--gap);
  padding: 0 var(--container);
}

.section--sr-header {
  margin-top: var(--header-height);
  padding-top: 6rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sticky-title {
  grid-column: 1 / 3;
}


/* desktop */ @media (min-width: 1000px) {

  .sticky-title {
    max-width: 20vw;
    position: sticky;
    top: 10rem;
  }

  .section--page-header {
    padding: 4rem 0 4rem;
  }

  .section--page-section {
    padding: 4rem 0;
  }

  .section--grid-header {
    grid-template-columns: repeat(7, 1fr);
    padding: 6rem var(--container);
  }

  .section--grid-section {
    grid-template-columns: repeat(7, 1fr);
  }

  .section--sr-header {
    padding-top: 10rem;
  }
}

/* =============================================================================== ABOUT (HOME) */


.hero-image {
  color: transparent;
}

.column-border {
  grid-column: 1 / 3;
  padding: 2rem 0 4rem;
  border-right: 1px solid var(--dk-grey);
  margin-right: 1rem;
  height:100%;
}

.bio {
  grid-column: 1 / 3;
  padding: 3rem 0 2rem;
  font-family: 'Soehne';
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.bio p {
  padding-bottom: 1rem;
}

.portrait {
  grid-column: 1 / 3;
}

.releases {
  padding: 4rem var(--container);
  row-gap: 3rem;
  background-color: #04CCFF;
}

.recent-title {
  color: var(--white);
}

.recent-button {
  display: block;
  width: 100%;
  font-family: 'SoehneMono', monospace;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  border: 1px solid var(--white);
  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
  border-radius: 5px;
  outline: none;
  color: var(--white);
  transition: opacity 0.3s ease;
}

.recent-button:hover {
  opacity: 0.8;
}

.recent img {
  margin-bottom: 1rem;
}

.recent-one   { grid-column: 1; }

.recent-two   { grid-column: 2; }

.recent-three { grid-column: 1; }

.recent-four  { grid-column: 2; }

.recent-five  { grid-column: 1; }

.recent-six   { grid-column: 2; }

.outro-image { color: transparent; }


/* desktop */ @media (min-width: 1000px) {

  .bio-title {
    padding-top: 1rem;
  }

  .bio {
    grid-column: 3 / 8;
    font-size: 1.75rem;
    padding: 3rem 7rem 3rem 0;
  }

  .portrait {
    grid-column: 1 / 8;
  }

  .section--recent-releases {
    grid-template-columns: repeat(7, 1fr);
    column-gap: 3px;
    row-gap: 4rem;
    padding: 6rem var(--container);
  }

  .recent-title {
    position: sticky;
    top: 10rem;
  }

  .recent-one   { grid-column: 3; }

  .recent-two   { grid-column: 5; }

  .recent-three { grid-column: 7; }

  .recent-four  { grid-column: 3; }

  .recent-five  { grid-column: 5; }

  .recent-six   { grid-column: 7; }
}

/* =============================================================================== NEWS */


.news-section {
  padding: 0 var(--container) 3rem;
}

.news-item {
  grid-column: 1 / 3;
}

.mobile-news {
  padding: 3rem 0 2rem;
}

.news-text {
  font-family: 'Soehne';
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  padding-bottom: 2rem;
}

.news-text p {
  padding-bottom: 1rem;
}

.news-albums {
  padding-bottom: 3rem;
}

.buy-listen {
  grid-column: 1 / 3;
  display: flex;
  flex-direction: column;
  padding: 0 0 2rem 0
}

.buttons-title {
  width: 100%;
  padding-bottom: 1.5rem;
  text-align: center;
}

.news-buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--gap);
  row-gap: var(--gap);
}

.happy-video {
  grid-column: 1 / 4;
  margin-bottom: 1rem;
}

.video-link {
  grid-column: 1 / 3;
}


/* desktop */ @media (min-width: 1000px) {

  .news-section {
    padding: 0 var(--container);
  }

  .news-item {
    grid-column: 3 / 8;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: 5rem;
  }

  .news-text {
    grid-column: 1 / 6;
    font-size: 1.75rem;
    line-height: 1.2;
    padding: 4rem 7rem 2rem 0;
  }

  .news-albums {
    grid-column: 1 / 4;
  }

  .video-link {
    grid-column: 1;
  }

  .buy-listen {
    grid-column: 1 / 6;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding-bottom: 4rem;
  }

  .last {
    padding-bottom: 0;
  }

  .buttons-title {
    grid-column: 1 / 6;
    text-align: left;
  }

  .news-buttons {
    grid-column: 1 / 6;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 0.5rem;
  }  

  .news-button {
    justify-self: start;
  }
}

/* =============================================================================== TOUR */


.tour-section {
  border-top: 1px solid var(--dk-grey);
  border-bottom: 1px solid var(--dk-grey);
}

.bands-in-town {
  grid-column: 1 / 3;
  padding: 2rem 0 4rem;
}

.tour-date {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 2rem 0;
  border-bottom: 1px solid var(--dk-grey);
}

.tour-date:first-of-type {
  padding-top: 0;
}

.tour-date:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.tour-date__date {
  grid-column: 1;
  grid-row: 1;
  font-family: 'SoehneBreit';
  padding-bottom: 1rem;
}

.tour-date__tickets {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-family: 'SoehneBreit';
  padding-bottom: 1rem;
}

.tour-date__location {
  grid-column: 1 / 3;
  grid-row: 2;
  font-size: 1.5rem;
}

.tour-date__venue {
  grid-column: 1 / 3;
  grid-row: 3;
  font-size: 1.5rem;
}


/* desktop */ @media (min-width: 1000px) {

  .bands-in-town {
    grid-column: 3 / 8;
  }

  .tour-date {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--gap);
    padding: 2rem 0;
    border-bottom: 1px solid var(--dk-grey);
  }

  .tour-date__date {
    grid-column: 1;
    grid-row: 1;
    font-family: 'SoehneMono';
    font-size: 1rem;
    padding-bottom: 1rem;
  }

  .tour-date__tickets {
    grid-column: 5;
    grid-row: 1;
    justify-self: start;
    font-family: 'SoehneMono';
    font-size: 1rem;
    padding-bottom: 1rem;
  }

  .tour-date__location {
    grid-column: 1 / 5;
    grid-row: 2;
    font-size: 1.5rem;
  }
  
  .tour-date__venue {
    grid-column: 1 / 5;
    grid-row: 3;
    font-size: 1.5rem;
  }
}

/* =============================================================================== MEDIA - GRID SECTION */


.media-section {
  border-top: 1px solid var(--dk-grey);
}

.media-section:last-of-type {
  border-bottom: 1px solid var(--grey);
}

.media-items {
  grid-column: 1 / 3;
  padding: 1rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.item {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.media-meta {
  color: var(--grey);
  padding-bottom: 1rem;
}

.mobile-media {
  padding-bottom: 1.5rem;
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

details::details-content {
  opacity: 0;
  transition: opacity 1s ease;
}

details[open]::details-content {
  opacity: 1;
}

.details-icon {
  transform: rotate(90deg);
}

details[open] .details-icon {
  transform: rotate(270deg);
}

.media-blocks {
  margin: 1.5rem 0.5rem 0;
}

.media-blocks p {
  padding-bottom: 1rem;
  color: var(--text);
  font-family: 'Soehne';
  font-size: 1rem;
  text-transform: none;
  line-height: 1.6;
}

.player {
  grid-column: 1 / 3;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
  border: 1px solid var(--grey);
  border-radius: 5px;
  outline: none;
  transition: opacity 0.3s ease;
}

.play-btn {
  color: var(--grey);
  font-family: 'SoehneMono', monospace;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 1ch;
}

.player:hover { opacity: 0.8; }
.player:active { opacity: 0.8; }

.progress {
  width: 100%;
  height: 1.5px;
  background: var(--dk-grey);
}

.progress-fill {
  height: 100%;
  width: 0px;
  background: var(--blue);
  transition: width 0.1s linear;
}

.watch-listen {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--gap);
}


/* desktop */ @media (min-width: 1000px) {

  .media-items {
    grid-column: 3 / 8;
    row-gap: var(--gap);
    padding: 2.5rem 0 4rem;
  }

  .item {
    gap: 1rem;
  }

  .media-text {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
  }

  .media-meta {
    grid-column: 1 / 6;
  }

  .details {
    grid-column: 1 / 4;
    margin-bottom: var(--gap);
  }

  .player {
    width: 60%;
    margin-bottom: var(--gap);
  }

  .watch-listen {
    width: 60%;
  }

  .play-btn {
    font-size: 0.9rem;
  }
}

/* =============================================================================== PRESS - GRID SECTION */


.press-section {
  border-top: 1px solid var(--dk-grey);
}

.press-items {
  grid-column: 1 / 3;
  padding: 1rem 0 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.press-section:last-of-type {
  border-bottom: 1px solid var(--grey);
}

.press-image {
  margin-bottom: 1.5rem;
}

.pub-date {
  color: var(--grey);
}

.press-item .mobile-only {
  padding-top: 1rem;
}

.press-title {
  padding-top: 0.75rem;
  font-family: 'Soehne';
  font-size: 1.4rem;
  text-transform: none;
  color: var(--grey);
  transition: color 0.3s ease;
}

.press-title:hover {
  color: var(--text);
}

/* desktop */ @media (min-width: 1000px) {

  .press-items {
    grid-column: 3 / 8;
    padding: 2.5rem 0 4rem;
  }
  
  .press-title {
    color: var(--text);
    font-size: 1.6rem;
  }

  .press-title:hover {
    color: var(--grey);
  }
}


/* =============================================================================== IMAGE DISCOGRAPHY */


.section--back-to-top {
  width: 100%;
}



/* ===================================== GUTTERS */


/* mobile */ @media (max-width:999px) {
  .gutter { display: none; }
}

/* desktop */ @media (min-width:1000px) {

  .gutter {
    z-index: var(--z-modal);
    position: fixed;
    top: 0;
    width: var(--container);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    font-family: 'SoehneMono';
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
    color: var(--grey);
    transition: color 0.3s ease;
  }

  .gutter-left {
    left: 0;
    transform: rotate(180deg);
    letter-spacing: 0.3em;
  }

  .gutter-right {
    right: 0;
  }

  .gutter:hover {
    color: var(--text);
  }
}
/* ===================================== FILTERS */


.section--discography {
  margin-top: var(--header-height);
  padding-top: 3rem;
}

.controls {
  padding: var(--container);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

/* mobile */ @media (max-width:999px) {

  .controls {
    position: fixed;
    bottom: 0;
    width:100%;
    background-color: var(--bg);
    z-index: var(--z-overlay);
  }
}

.view-toggle {
  display: flex;
  gap: 1.5rem;
}

.view-option {
  display: flex;
  align-items: center;
  gap: 8px;
}

.view-circle {
  width: 12px;
  height: 12px;
  border: 1px solid var(--text);
  border-radius: 50%;
}

.view-option.active .view-circle {
  background: var(--text);
}

.view-option:hover .view-circle {
  background: white;
}

.view-text {
  color: var(--text)!important;
}


/* ===================================== IMAGE GRID */


.albums-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

.album-card {
  position: relative;
  overflow: hidden;
  cursor: none;
}

.album-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}


/* desktop */ @media (min-width: 1000px) {

  .section--discography {
    padding-top: 7rem;
  }

  .albums-grid {
    border-top: 1px solid var(--dk-grey);
    padding: 1.5rem var(--container) 0;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 3px;
    row-gap: 12rem;
  }

  .col-1 { grid-column: 1; }
  .col-3 { grid-column: 3; }
  .col-5 { grid-column: 5; }
  .col-7 { grid-column: 7; }

  .album-cursor {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: #2c96bc;
    border-radius: 50%;
    z-index: 999;
    will-change: transform, width, height;
    width: 0;
    height: 0;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    transition: width 0.3s ease-in-out, height 0.4s ease-in-out,
                opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  }

  .album-cursor.is-active {
    width: 180px;
    height: 180px;
    padding: 0.5rem;
    opacity: 1;
    visibility: visible;
  }

  .cursor {
    font-size: 0.8rem;
  }

  .album-cursor p {
    margin: 0;
    line-height: 1.2;
    max-width: 100%;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  .album-cursor.is-active p {
    opacity: 1;
    transition-delay: 0.15s; /* let it expand first, then fade text in */
  }
}

/* mobile */ @media (max-width: 999px) {

  .album-cursor p {
    display:none;
  }
}

/* =============================================================================== TEXT DISCOGRAPHY */

/* Desktop First */

.albums-list {
  padding: 0rem var(--container) 4rem;
  width: 100%;
  font-family: 'Soehne';
  font-size: 1rem;
}

.album-entry {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  padding: 0.75rem 0;
  border-top: 1.5px solid var(--dk-grey);
}

.album-entry:last-child {
  border-bottom: 1.5px solid var(--dk-grey);
}

.album-entry .year {
  grid-column: 1;
  grid-row: 1;
}

.album-entry .artist {
  grid-column: 3 / 5;
  grid-row: 1;
}

.album-entry .title {
  grid-column: 5 / 7;
  grid-row: 1;
}

.album-entry .tags {
  grid-column: 7;
  grid-row: 1;
  color: var(--grey);
  text-transform: capitalize;
}

.discog-bottom {
  padding-bottom: 0;
}


@media (max-width: 999px) {

  .albums-list {
    padding: 0 var(--container) 2rem;
  }

  .album-entry {
    display: grid;
    grid-template-columns: 1fr auto;
  }

   .album-entry .year {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .album-entry .title {
    font-style: italic;
    padding-top: 0.5rem;
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .album-entry .artist {
    grid-column: 1;
    grid-row: 1;
  }
}

/* =============================================================================== POLICY PAGES */


.section--policy-header {
  margin-top: var(--header-height);
  padding: 4rem 0 2rem;
  border-bottom: 1px solid var(--dk-grey);
}

.mobile-policy {
  padding: 0 var(--container);
}

.policy-section {
  border-bottom: 1px solid var(--dk-grey);
}

.policy-text {
  grid-column: 1 / 3;
  padding: 1.75rem 0;
}

.policy-text h2 {
  font-family: 'Soehne';
  text-transform: capitalize;
  font-size: 1rem;
  padding: 0.25rem 0 1rem;
}

.policy-text p {
  font-size: 1rem;
  padding-bottom: 2rem;
}


/* desktop */ @media (min-width: 1000px) {

  .section--policy-header {
    padding: 4rem 0 0
  }

  .policy-text {
    grid-column: 3 / 6;
    padding: 2rem 0 4rem;
  }

  .policy-text p:last-of-type {
    padding-bottom: 0;
  }
}

/* =============================================================================== CONTACT */


.section--contact-header {
  margin-top: var(--header-height);
  padding-top: 6rem;
}

.section--contact-page {
  display: flex;
  flex-direction: column;
  padding: 0 var(--container) 4rem;
}

.management {
  border-top: 1px solid var(--dk-grey);
  padding: 2rem 0;
}

.mgmt {
  padding-top: 1.5rem;
  font-size: 1.2rem;
}

.bfbc {
  padding-top: 0.25rem;
}

.email {
  padding-top: 1rem;
  padding-bottom: .5rem;
}

.email a {

  font-size: 0.75rem;
  color: var(--grey);
}

.email a:hover {
  color: var(--text);
}

.contact-form {
  border-top: 1px solid var(--dk-grey);
  padding-top: 2rem;
}

form {
  width: 100%;
  margin: 0 auto;
  padding-top: 2.5rem;
}

.field {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text);
}

abbr[title="required"] {
  color: var(--text);
  text-decoration: none;
  margin-left: 0.25em;
}

input[type="text"],
input[type="email"],
input[type="url"],
textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--grey);
  border-radius: 5px;
  font-size: 1rem;
  color: var(--input-color);
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus {
  border-color: var(--text);
  outline: none;
}

textarea {
  min-height: 6rem;
  resize: vertical;
}

.alert {
  padding: 0.5rem 0;
  margin-bottom: 1.5rem;
  border-radius: 99px;
  font-size: 1rem;
  color: red;
}

.alert.success {
  color: var(--white);
  font-family: 'Soehne';
  font-size: 1.5rem;
}

.alert.error {
  background: color-mix(in srgb, #c4fe6f 15%, white);
  border: 1px solid #c4fe6f;
  color: #060606;
  display: block;
  margin-top: 0.25rem;
}

.honeypot {
  position: absolute;
  left: -9999px;
}

input[type="submit"] {
  display: inline-block;
  font-family: 'SoehneMono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  border: 1px solid var(--grey);
  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
  border-radius: 5px;
  outline: none;
  color: var(--grey);
  background-color: var(--bg);
  opacity: 1;
  transition: opacity 0.3s ease;
}

input[type="submit"]:hover {
  opacity: 0.8;
}

input[type="submit"]:active {
  transform: scale(0.98);
}

/* ===================================== RESPONSIVE CONTACT */


/* desktop */ @media (min-width: 1000px) {

  .section--contact-header {
    padding-top: 6rem;
  }

  .section--contact-page {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0;
    border-bottom: 1px solid var(--dk-grey);
  }

  .management {
    grid-column: 1 / 3;
    padding: 2rem var(--container);
    border-right: 1px solid var(--dk-grey);
  }

  .emails {
    padding-top: 1rem;
  }

  .contact-form {
    grid-column: 3 / 8;
    padding: 2rem 6rem 4rem 1.5rem;
  }
}

/* =============================================================================== FOOTER */


footer {
  z-index: var(--z-footer);
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: 3rem var(--container) 0;
}

footer a {
  text-decoration: none;
  transition: color 0.3s ease;
}

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

.top-footer,
.bottom-footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 2rem;
}

.top-footer {
  padding-bottom: 2rem;
}

.top-footer h4 {
  padding-bottom: 1.5rem;
}

.top-footer li {
  padding-bottom: 1.5rem;
}

.bottom-footer {
  padding-bottom: var(--container);
}

.credits a,
.policies a,
.accessibility a {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--grey);
  transition: color 0.3s ease;
}

.policies a:hover,
.accessibility a:hover,
.policies a:focus,
.accessibility a:focus {
  color: var(--text);
}


/* ===================================== RESPONSIVE FOOTER */


/* mobile */ @media (max-width: 999px) {

  footer.desktop-only {
    display:none;
  }
}

/* desktop */ @media (min-width: 1000px) {

  .top-footer,
  .bottom-footer {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    column-gap: 3px;
    row-gap: 0;
  }

  .top-footer {
    padding-bottom: 3rem;
  }

  .top-footer h4 {
    font-size: 0.9rem;
  }

  .top-footer li a {
    font-size: 0.9rem;
  }
  
  .listen   { grid-column: 1 / 3; }

  .labels   { grid-column: 3 / 5; }

  .socials  { grid-column: 5 / 7; }

  .contact  { grid-column: 7; }


  .bottom-footer { 
    padding-bottom: 1rem;
  }

  .credits        { grid-column: 1 / 2; }

  .policies       { grid-column: 3 / 5; }

  .accessibility  { grid-column: 5 / 7; }
}

.credits-link {
  position: relative;
  color: var(--grey);
}

.credits-link span,
.credits-link::after {
  transition: opacity 0.15s ease;
}

.credits-link::after {
  content: attr(data-hover-text);
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  white-space: nowrap;
}

.credits-link:hover {
  color: transparent;
}

.credits-link:hover::after {
  opacity: 1;
  color: var(--text);
}


 /* ===================================== Produce enough concrete material that the design can begin reacting to itself */