/*
 * Digital Sleeve Lab — direction 03
 * Sleeve is a cover, a pulled inner sheet and a B-side — not an indie UI kit.
 */

.composition--sleeve {
  --sleeve-ink: #171a19;
  --sleeve-stone: #b7bcb8;
  --sleeve-paper: #ebe7dd;
  --sleeve-paper-deep: #d8d2c6;
  --sleeve-rust: #874b3f;
  background: var(--sleeve-stone);
  color: var(--sleeve-ink);
}

.composition--sleeve .sleeve-stage {
  min-height: calc(100svh - 70px);
  grid-template-columns: minmax(420px, 1.08fr) minmax(360px, .92fr);
  gap: clamp(70px, 9vw, 160px);
  padding: clamp(64px, 7vw, 118px) clamp(44px, 7vw, 120px);
  overflow: hidden;
  background: var(--sleeve-stone);
}

.composition--sleeve .sleeve-stage::before {
  display: none;
}

.composition--sleeve .sleeve-object {
  width: min(100%, 700px);
  padding: 0 7% 7% 0;
}

.composition--sleeve .sleeve-object::before,
.composition--sleeve .sleeve-object::after {
  display: none;
}

.composition--sleeve .sleeve-object .vinyl {
  position: absolute;
  z-index: 0;
  display: block;
  width: calc(100% - 7%);
  height: calc(100% - 7%);
  aspect-ratio: auto;
  inset: 7% 0 0 7%;
  border: 0;
  border-radius: 0;
  background: var(--sleeve-paper);
  box-shadow: 0 22px 45px rgba(29, 34, 31, .16);
}

.composition--sleeve .sleeve-object .vinyl::before {
  content: "GLASS HARBOR  /  MARA RIERA VOSS";
  position: absolute;
  top: 24px;
  right: 18px;
  color: var(--sleeve-rust);
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
  writing-mode: vertical-rl;
}

.composition--sleeve .sleeve-object .vinyl::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 0;
  background: transparent;
  border-top: 1px solid rgba(23, 26, 25, .28);
  border-right: 1px solid rgba(23, 26, 25, .16);
}

.composition--sleeve .sleeve-object .vinyl span {
  position: absolute;
  right: 38px;
  bottom: 26px;
  color: rgba(23, 26, 25, .62);
  font: 500 9px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.composition--sleeve .sleeve-cover {
  position: relative;
  z-index: 1;
  width: 100%;
  box-shadow: 0 28px 65px rgba(29, 34, 31, .2);
}

.composition--sleeve .sleeve-cover::after {
  content: "";
  display: none;
}

.composition--sleeve .sleeve-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(23, 26, 25, .55);
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.composition--sleeve .sleeve-label p {
  margin: 0;
}

.composition--sleeve .sleeve-label .catalogue {
  padding: 0;
  border: 0;
}

.composition--sleeve .sleeve-meta h1 {
  max-width: 760px;
  margin: clamp(38px, 5vw, 74px) 0 12px;
  font: 600 clamp(68px, 8.2vw, 132px)/.85 var(--serif);
  letter-spacing: -.062em;
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.copy-long {
  display: none;
}

body[data-copy="long"] .copy-default {
  display: none;
}

body[data-copy="long"] .copy-long {
  display: inline;
}

body[data-copy="long"] .composition--sleeve .sleeve-meta h1 {
  font-size: clamp(52px, 6.4vw, 102px);
  line-height: .91;
  letter-spacing: -.052em;
}

body[data-copy="long"] .composition--sleeve .sleeve-meta .artist {
  max-width: 520px;
  line-height: 1.35;
}

.composition--sleeve .sleeve-meta .artist {
  margin: 24px 0 0;
  font: 500 clamp(17px, 1.8vw, 25px)/1.2 var(--sans);
}

.composition--sleeve .sleeve-play {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 16px;
  width: min(100%, 520px);
  margin-top: clamp(56px, 7vw, 92px);
  padding: 18px 0;
  border-top: 1px solid var(--sleeve-ink);
  border-bottom: 1px solid var(--sleeve-ink);
  color: var(--sleeve-ink);
  text-decoration: none;
}

.composition--sleeve .sleeve-play b,
.composition--sleeve .sleeve-play i {
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
}

.composition--sleeve .sleeve-play i {
  font-style: normal;
}

.composition--sleeve .sleeve-play span {
  font: 500 16px/1 var(--sans);
}

.composition--sleeve .tracklist {
  position: relative;
  width: min(100%, 520px);
  margin-top: 44px;
  padding-top: 28px;
  border-top: 0;
}

.composition--sleeve .tracklist::before {
  content: "LISTEN ON";
  position: absolute;
  top: 0;
  left: 0;
  font: 500 9px/1 var(--mono);
  letter-spacing: .15em;
}

.composition--sleeve .tracklist a {
  grid-template-columns: 1fr 20px;
  min-height: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(23, 26, 25, .28);
  font: 500 11px/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.composition--sleeve .tracklist a:first-child {
  border-top: 1px solid rgba(23, 26, 25, .28);
}

.composition--sleeve .liner-notes {
  position: relative;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: clamp(44px, 7vw, 110px);
  min-height: 0;
  margin: clamp(34px, 5vw, 82px);
  padding: clamp(76px, 9vw, 145px) clamp(38px, 8vw, 130px);
  overflow: hidden;
  background: var(--sleeve-paper);
  box-shadow: 0 32px 76px rgba(29, 34, 31, .18);
}

.composition--sleeve .liner-notes::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 49.5%;
  width: 1px;
  background: linear-gradient(transparent, rgba(23,26,25,.13) 12%, rgba(23,26,25,.13) 88%, transparent);
}

.composition--sleeve .liner-notes::after {
  display: none;
}

.composition--sleeve .vertical-label {
  color: var(--sleeve-rust);
}

.composition--sleeve .liner-body {
  display: grid;
  grid-template-columns: minmax(300px, .9fr) minmax(320px, 1.1fr);
  column-gap: clamp(70px, 9vw, 150px);
  align-items: start;
}

.composition--sleeve .liner-body > .kicker,
.composition--sleeve .liner-body > h2 {
  grid-column: 1;
}

.composition--sleeve .liner-body > .liner-intro {
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: 580px;
  margin: 0;
  font: 400 clamp(19px, 1.55vw, 23px)/1.65 var(--sans);
}

body[data-density="stress"] .composition--sleeve .liner-notes .liner-body > .liner-intro {
  max-width: 580px;
  margin: 0;
}

.composition--sleeve .liner-notes h2 {
  margin: 30px 0 0;
  font: 600 clamp(50px, 6.2vw, 94px)/.95 var(--serif);
  letter-spacing: -.05em;
}

.composition--sleeve .sleeve-pullquote {
  grid-column: 1 / -1;
  max-width: 1050px;
  margin: clamp(90px, 12vw, 180px) 0 clamp(64px, 8vw, 120px);
  padding: 32px 0;
  border-top: 1px solid var(--sleeve-rust);
  border-bottom: 1px solid var(--sleeve-rust);
  color: var(--sleeve-rust);
  font: italic 500 clamp(34px, 4.5vw, 70px)/1.08 var(--serif);
  letter-spacing: -.035em;
}

.composition--sleeve .sleeve-transition {
  display: none;
  grid-column: 1 / -1;
  max-width: 800px;
  margin: clamp(90px, 12vw, 180px) 0 clamp(64px, 8vw, 120px);
  padding-top: 30px;
  border-top: 1px solid var(--sleeve-rust);
  color: var(--sleeve-rust);
  font: 600 clamp(36px, 4.5vw, 68px)/1.02 var(--serif);
  letter-spacing: -.035em;
}

body[data-density="stress"][data-quote="none"] .composition--sleeve .sleeve-pullquote {
  display: none;
}

body[data-density="stress"][data-quote="none"] .composition--sleeve .sleeve-transition {
  display: block;
}

body[data-density="stress"] .composition--sleeve .liner-notes .long-copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(50px, 8vw, 120px);
  max-width: none;
  margin: 0;
}

body[data-density="stress"] .composition--sleeve .liner-notes .long-copy p {
  max-width: 520px;
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

body[data-density="stress"] .composition--sleeve .liner-notes .long-copy p:first-child {
  grid-column: auto;
  font-size: 16px;
}

.composition--sleeve .sleeve-press {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(390px, .72fr);
  min-height: 92svh;
  background: var(--sleeve-ink);
}

.composition--sleeve .sleeve-press-image {
  position: relative;
  min-width: 0;
  min-height: 92svh;
  margin: 0;
  overflow: hidden;
}

.composition--sleeve .sleeve-press img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 92svh;
  object-position: center 42%;
  filter: grayscale(1) contrast(1.04);
}

.composition--sleeve .sleeve-press-image figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 11px 15px;
  color: var(--sleeve-ink);
  background: var(--sleeve-paper);
  font: 500 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.composition--sleeve .sleeve-press > div {
  padding: clamp(72px, 8vw, 130px) clamp(42px, 6vw, 92px);
}

.composition--sleeve .sleeve-press h2 {
  margin: 32px 0 46px;
  font: 600 clamp(46px, 5vw, 80px)/.96 var(--serif);
  letter-spacing: -.045em;
}

.composition--sleeve .sleeve-press > div > p:not(.kicker) {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.75;
}

.composition--sleeve .sleeve-download {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: min(100%, 520px);
  margin-top: 54px;
  padding: 17px 0;
  border-top: 1px solid rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(255,255,255,.62);
  color: #fff;
  font: 500 14px/1 var(--sans);
  text-decoration: none;
}

.composition--sleeve .sleeve-download span {
  font: 500 9px/1.4 var(--mono);
  letter-spacing: .08em;
}

@media (min-width: 761px) {
  body[data-density="stress"] .composition--sleeve .sleeve-press {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press > .sleeve-press-image {
    width: 100%;
    height: min(68vh, 740px);
    min-height: 500px;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press > .sleeve-press-image img {
    min-height: 0;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press > div {
    position: relative;
    grid-template-columns: minmax(340px, .84fr) minmax(500px, 1.16fr);
    grid-template-rows: auto auto 1fr auto;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press > div::before {
    content: "";
    position: absolute;
    top: clamp(80px, 9vw, 145px);
    bottom: clamp(80px, 9vw, 145px);
    left: calc(clamp(50px, 9vw, 150px) + 41.5%);
    width: 1px;
    background: rgba(255,255,255,.16);
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press .long-copy {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 761px) and (max-height: 800px) {
  .composition--sleeve .sleeve-stage {
    min-height: calc(100svh - 70px);
    padding-top: 34px;
    padding-bottom: 34px;
  }

  .composition--sleeve .sleeve-object {
    width: min(100%, calc(100svh - 150px));
    justify-self: center;
  }

  .composition--sleeve .sleeve-meta h1 {
    margin-top: 28px;
    font-size: clamp(58px, 7.2vw, 104px);
  }

  body[data-copy="long"] .composition--sleeve .sleeve-meta h1 {
    font-size: clamp(46px, 5.6vw, 78px);
  }

  .composition--sleeve .sleeve-meta .artist {
    margin-top: 16px;
  }

  .composition--sleeve .sleeve-play {
    margin-top: 34px;
    padding: 14px 0;
  }

  .composition--sleeve .tracklist {
    margin-top: 26px;
  }

  .composition--sleeve .tracklist a {
    padding: 8px 0;
  }
}

.composition--sleeve .release-footer--paper {
  display: grid;
  grid-template-columns: 1.4fr auto auto 1fr;
  gap: 30px;
  align-items: center;
  padding: 34px clamp(24px, 5vw, 76px);
  color: var(--sleeve-paper);
  border: 0;
  background: var(--sleeve-rust);
}

.composition--sleeve .release-footer--paper span:last-child {
  text-align: right;
}

@media (max-width: 760px) {
  .composition--sleeve .sleeve-stage {
    padding: 46px 20px 78px;
  }

  .composition--sleeve .sleeve-object {
    width: calc(100% - 16px);
    margin: 0 0 66px;
    padding: 0 9% 9% 0;
  }

  .composition--sleeve .sleeve-object .vinyl {
    width: calc(100% - 9%);
    height: calc(100% - 9%);
    inset: 9% 0 0 9%;
  }

  .composition--sleeve .sleeve-label {
    align-items: flex-start;
  }

  .composition--sleeve .sleeve-meta h1 {
    margin-top: 38px;
    font-size: clamp(58px, 18vw, 76px);
    line-height: .88;
  }

  body[data-copy="long"] .composition--sleeve .sleeve-meta h1 {
    font-size: clamp(44px, 13.6vw, 58px);
    line-height: .96;
  }

  body[data-copy="long"] .composition--sleeve .sleeve-meta .artist {
    font-size: 17px;
  }

  .composition--sleeve .sleeve-play {
    width: 100%;
    margin-top: 54px;
  }

  .composition--sleeve .tracklist {
    width: 100%;
  }

  .composition--sleeve .liner-notes {
    grid-template-columns: 1fr;
    gap: 30px;
    margin: 18px 12px;
    padding: 68px 24px 82px;
  }

  .composition--sleeve .liner-notes::before {
    display: none;
  }

  .composition--sleeve .vertical-label {
    writing-mode: horizontal-tb;
  }

  .composition--sleeve .liner-body {
    grid-template-columns: 1fr;
  }

  .composition--sleeve .liner-body > .kicker,
  .composition--sleeve .liner-body > h2,
  .composition--sleeve .liner-body > .liner-intro {
    grid-column: 1;
    grid-row: auto;
  }

  .composition--sleeve .liner-notes h2 {
    margin: 24px 0 46px;
    font-size: clamp(42px, 13vw, 58px);
  }

  .composition--sleeve .liner-body > .liner-intro {
    font-size: 18px;
    line-height: 1.7;
  }

  .composition--sleeve .sleeve-pullquote {
    margin: 70px 0 54px;
    padding: 24px 0;
    font-size: clamp(32px, 10vw, 43px);
  }

  .composition--sleeve .sleeve-transition {
    margin: 70px 0 54px;
    padding-top: 24px;
    font-size: clamp(32px, 10vw, 43px);
  }

  body[data-density="stress"] .composition--sleeve .liner-notes .long-copy {
    grid-template-columns: 1fr;
    gap: 0;
  }

  body[data-density="stress"] .composition--sleeve .liner-notes .long-copy p {
    padding: 0;
    border-top: 0;
    font-size: 16px;
    line-height: 1.75;
  }

  body[data-density="stress"] .composition--sleeve .liner-notes .long-copy p:nth-child(2),
  body[data-density="stress"] .composition--sleeve .liner-notes .long-copy p:nth-child(4) {
    margin-top: 22px;
  }

  body[data-density="stress"] .composition--sleeve .liner-notes .long-copy p:nth-child(3) {
    margin-top: 54px;
    padding-top: 34px;
    border-top: 1px solid rgba(23,26,25,.22);
  }

  .composition--sleeve .sleeve-press {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .composition--sleeve .sleeve-press-image {
    min-height: 0;
  }

  .composition--sleeve .sleeve-press img {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .composition--sleeve .sleeve-press > div {
    padding: 72px 24px 88px;
  }

  .composition--sleeve .sleeve-press h2 {
    font-size: 48px;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press .long-copy {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    margin: 42px 0 0;
    padding: 0;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press .long-copy p {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border-top: 0;
    font-size: 16px;
    line-height: 1.75;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press .long-copy p:nth-child(2) {
    margin-top: 22px;
  }

  body[data-density="stress"] .composition--sleeve .sleeve-press .long-copy p:nth-child(3) {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.22);
  }

  .composition--sleeve .release-footer--paper {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 34px 20px;
  }

  .composition--sleeve .release-footer--paper span:last-child {
    margin-top: 20px;
    text-align: left;
  }
}