/* Album */

.album-card{
  display:grid;
  grid-template-columns:280px minmax(0, 1fr);
  gap:24px;
  align-items:start;
  padding:22px 24px;
  border-radius:28px;
}

.album-visual{
  width:100%;
  aspect-ratio:1 / 1;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line-soft);
  background:#f6eee6;
}

.album-visual img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.album-visual--cover{
  display:block;
}

.album-visual-link{
  text-decoration:none;
  transition:transform 180ms ease, box-shadow 180ms ease;
}

.album-visual-link:hover,
.album-visual-link:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(84, 48, 34, 0.10);
}

.album-visual--cover-dark{
  background:#120f11;
}

.album-content{
  display:flex;
  flex-direction:column;
  align-self:start;
  min-width:0;
}

.album-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.album-content p{
  margin:0 0 10px 0;
  color:rgba(50,40,34,0.92);
  font-family:"IBM Plex Sans Condensed", "Inter Tight", system-ui, sans-serif;
  font-weight:300;
  font-stretch:condensed;
  font-size:1.18rem;
  line-height:1.78;
  max-width:64ch;
}

.album-content--tea p{
  max-width:62ch;
}

.album-meta{
  margin:0 0 12px 0;
  color:rgba(50,40,34,0.9);
  font-size:1rem;
  line-height:1.55;
}

.album-card--brahms .album-head{
  margin-bottom:8px;
}

.album-card--brahms .album-meta{
  margin-top:14px;
  margin-bottom:16px;
  font-family:"Cormorant Garamond", serif;
  font-size:1.24rem;
  line-height:1.28;
  color:#5f4b43;
}

.album-card--brahms .album-meta-line{
  display:block;
}

.album-card--brahms .album-meta-sep{
  display:none;
}

.album-card--brahms .album-meta-line + .album-meta-line{
  margin-top:4px;
}


.album-card--brahms .album-meta-line:first-child{
  display:block;
}

.album-card--brahms .album-meta-line:first-child .album-meta-item{
  display:block;
}

.album-card--brahms .album-meta-line:first-child .album-meta-item + .album-meta-item{
  margin-top:2px;
}

.album-card--brahms .album-meta-line:first-child .album-meta-sep{
  display:none;
}

.album-meta--split{
  display:flex;
  flex-direction:column;
  gap:2px;
  max-width:68ch;
}

.album-meta-line{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
}

.album-meta-sep{
  display:inline;
  margin:0 0.28em;
  opacity:0.72;
}

.album-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
}

.album-actions--inline{
  gap:18px;
  justify-content:flex-end;
  margin-top:0;
  margin-right:4px;
  flex:0 0 auto;
}

.album-action-inline{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:0.42rem;
  font-family:"Cormorant Garamond", serif;
  font-size:1.18rem;
  line-height:1;
  font-weight:600;
  color:#8b695a;
  text-decoration:none;
  white-space:nowrap;
  transition:color .2s ease;
}

.album-action-inline:hover,
.album-action-inline:focus-visible{
  color:#684d41;
  outline:none;
}

.album-action-inline--listen{
  position:relative;
}

@media (hover:hover) and (pointer:fine){
  .album-action-inline--listen:hover::before,
  .album-action-inline--listen:focus-visible::before{
    content:attr(data-hover-label);
    position:absolute;
    left:50%;
    bottom:calc(100% + 8px);
    transform:translateX(-50%);
    padding:4px 8px;
    border-radius:999px;
    background:rgba(60, 40, 32, 0.92);
    color:#fff8f3;
    font-size:0.78rem;
    font-weight:500;
    line-height:1;
    white-space:nowrap;
    pointer-events:none;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
  }
}

.discography-stack{
  display:grid;
  gap:24px;
}

.discography-card h3{
  margin:0;
  font-family:"Cormorant Garamond", serif;
  font-size:2rem;
}


.album-head--tea h3{
  position:relative;
  top:-2px;
}

@media (max-width:1100px){
  .album-card{
    grid-template-columns:248px minmax(0, 1fr);
    gap:22px;
    padding:20px 22px;
  }

  .album-content p,
  .album-content--tea p,
  .album-meta--split{
    max-width:none;
  }
}

@media (max-width:820px){
  .album-card{
    grid-template-columns:1fr;
    gap:16px;
    padding:18px;
  }

  .album-visual{
    max-width:320px;
    margin-inline:auto;
  }

  .album-head{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .album-actions--inline{
    justify-content:flex-start;
    margin-right:0;
    gap:16px;
  }

  .album-head--tea h3{
    top:0;
  }

  .discography-card h3{
    font-size:1.9rem;
  }

  .album-content p{
    margin-bottom:12px;
  }
}

@media (max-width:520px){
  .album-card{
    padding:16px;
    gap:14px;
  }

  .album-visual{
    max-width:300px;
    border-radius:16px;
  }

  .discography-card h3{
    font-size:1.65rem;
    line-height:1.08;
  }

  .album-meta{
    margin-bottom:10px;
  }

  .album-card--brahms .album-meta{
    margin-top:14px;
    font-family:"Cormorant Garamond", serif;
    font-size:1.14rem;
    line-height:1.26;
  }

  .album-actions{
    gap:14px;
  }

  .album-action-inline{
    font-size:1.02rem;
  }

  .album-meta-line{
    display:block;
  }

  .album-meta-line .album-meta-sep,
  .album-meta-line:first-child .album-meta-sep{
    display:none;
  }

  .album-meta-line:first-child .album-meta-item:first-child,
  .album-meta-line:first-child .album-meta-item:last-child,
  .album-meta-line:last-child .album-meta-item:first-child,
  .album-meta-line:last-child .album-meta-item:last-child{
    display:block;
  }

  .album-content p{
    font-size:0.98rem;
    line-height:1.6;
  }

  .album-actions--inline{
    gap:12px;
  }

  .album-action-inline{
    font-size:0.96rem;
  }

  .album-action-inline--primary{
    padding:7px 11px;
  }
}