/* LOCKED IN: album hero, the first section of the homepage.
   Palette taken from the official cover: studio white #fdfdfd / #f7f7f7, ink #121212, soft studio greys,
   with the oxblood of his shoes (#703030) as the single accent. */
.li-panel{--li-paper:#fbfbfa;--li-ink:#121212;--li-grey:#6f6d6b;--li-line:rgba(18,18,18,.14);--li-ox:#703030}
.panel.light.li-panel,.panel.light.li-panel .panel-in{background:radial-gradient(110% 85% at 68% 46%,#ffffff 0%,#f7f7f6 46%,#e8e7e5 100%);color:var(--li-ink)}
.li{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,112px);
  padding:calc(var(--navh,60px) + clamp(24px,5vh,64px)) clamp(20px,5vw,80px) clamp(32px,6vh,72px);max-width:1600px;margin:0 auto;box-sizing:border-box}

/* copy */
.li-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.6vh,28px);min-width:0}
.li-artist{display:flex;align-items:center;gap:14px;margin:0;font-family:var(--display);font-stretch:125%;font-weight:800;font-size:13px;letter-spacing:.42em;text-transform:uppercase;color:var(--li-ink)}
.li-artist span{font-weight:500;letter-spacing:.3em;color:var(--li-grey)}
.li-artist i{display:block;width:clamp(28px,4vw,56px);height:1px;background:var(--li-ink)}
.panel .li-title.big{font-size:clamp(56px,6.6vw,124px);line-height:.84;letter-spacing:-.035em;color:var(--li-ink);margin:0}
.li-status{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--display);font-stretch:125%;font-weight:700;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--li-ink)}
.li-status i{width:8px;height:8px;border-radius:50%;background:var(--li-ox);box-shadow:0 0 0 0 rgba(112,48,48,.45);animation:li-pulse 2.4s ease-out infinite}
@keyframes li-pulse{70%{box-shadow:0 0 0 10px rgba(112,48,48,0)}100%{box-shadow:0 0 0 0 rgba(112,48,48,0)}}
.li-note{margin:0;max-width:34ch;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:#3b3937}
.li-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.li-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 28px;border:1.5px solid var(--li-ink);
  font-family:var(--display);font-stretch:125%;font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
  transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.li-btn svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .25s ease}
.li-btn.primary{background:var(--li-ink);color:#fdfdfd}
.li-btn.primary:hover{background:var(--li-ox);border-color:var(--li-ox)}
.li-btn.ghost{background:transparent;color:var(--li-ink)}
.li-btn.ghost:hover{background:var(--li-ink);color:#fdfdfd}
.li-btn:hover svg{transform:translate(2px,-2px)}
.li-btn:focus-visible{outline:2px solid var(--li-ox);outline-offset:4px}

/* the cover: always the complete, unaltered square artwork */
.li-art{position:relative;width:min(40vw,calc(100vh - var(--navh,60px) - 150px),640px);aspect-ratio:1/1;margin:0}
.li-art a{display:block;width:100%;height:100%;outline-offset:6px}
.li-float{position:relative;width:100%;height:100%}
.li-art img{display:block;width:100%;height:100%;object-fit:contain;background:#fdfdfd;
  box-shadow:0 0 0 1px rgba(18,18,18,.06),0 60px 90px -40px rgba(18,18,18,.38),0 18px 36px -24px rgba(18,18,18,.3)}
.li-floor{position:absolute;left:12%;right:12%;bottom:-7%;height:9%;border-radius:50%;background:radial-gradient(closest-side,rgba(18,18,18,.22),rgba(18,18,18,0));z-index:-1}

/* restrained motion: the cover drifts gently (echoing the levitation on the artwork); copy rises in when the section is shown */
.li-float{animation:li-drift 7s ease-in-out infinite alternate}
.li-floor{animation:li-floor 7s ease-in-out infinite alternate}
@keyframes li-drift{from{transform:translateY(0)}to{transform:translateY(-12px)}}
@keyframes li-floor{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.9);opacity:.7}}
.li-artist,.li-status,.li-note,.li-btns,.li-art{transition:opacity .9s ease,transform 1.1s var(--ease)}
.li-panel:not(.is-active) .li-artist,.li-panel:not(.is-active) .li-status,.li-panel:not(.is-active) .li-note,.li-panel:not(.is-active) .li-btns,
html.is-loading .li-artist,html.is-loading .li-status,html.is-loading .li-note,html.is-loading .li-btns{opacity:0;transform:translateY(24px)}
.li-panel:not(.is-active) .li-art,html.is-loading .li-art{opacity:0;transform:translateY(30px) scale(.97)}
.li-art{transition-delay:.15s}.li-artist{transition-delay:.25s}.li-status{transition-delay:.55s}.li-note{transition-delay:.65s}.li-btns{transition-delay:.75s}

/* tablet and phone: artwork first, then the title and buttons */
@media (max-width:900px){
  .li{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(24px,4vh,40px);
    padding:calc(var(--navh,60px) + clamp(20px,4vh,40px)) 20px clamp(32px,6vh,56px)}
  .li-art{order:-1;width:min(66vw,38vh,460px)}
  .li-copy{align-items:center}
  .li-note{max-width:30ch}
  .li-btns{justify-content:center}
  .panel .li-title.big{font-size:clamp(44px,12.5vw,96px)}
}
@media (max-width:520px){
  .li-btns{flex-direction:column;align-self:stretch}
  .li-btn{width:100%}
  .li{gap:22px}
  .li-copy{gap:14px}
  .li-art{width:min(70vw,36vh)}
  .li-btn{min-height:48px}
  .li-artist{font-size:12px;letter-spacing:.34em}
  .li-status{font-size:12px}
}
/* phones on their side and other short screens: back to two columns */
@media (max-height:560px) and (orientation:landscape){
  .li{grid-template-columns:minmax(0,1fr) auto;text-align:left;justify-items:stretch;gap:32px;padding-top:calc(var(--navh,60px) + 16px);padding-bottom:20px}
  .li-art{order:0;width:min(40vw,calc(100vh - var(--navh,60px) - 96px))}
  .li-copy{align-items:flex-start;gap:12px}
  .li-btns{justify-content:flex-start;flex-direction:row}
  .li-btn{width:auto;min-height:44px;padding:0 18px}
  .li-note{display:none}
  .panel .li-title.big{font-size:min(7vw,15vh)}
  .li-artist,.li-status{font-size:11px}
  .li-btn{font-size:11px;padding:0 14px;min-height:40px}
}
@media (prefers-reduced-motion:reduce){
  .li-float,.li-floor,.li-status i{animation:none}
  .li-artist,.li-status,.li-note,.li-btns,.li-art{transition:none}
}

/* release day: three listen buttons with platform icons */
.li-btn{padding:0 22px}
.li-btn svg.ico{width:18px;height:18px;fill:currentColor;stroke:none;margin-left:-2px}
.li-btn:hover svg.ico{transform:none}