/* Original copper album identity, with independent cover, disc and lettering. */
.album { isolation: isolate; background: #160a08; color: #ffe3bf; --album-entry: 1; }
.album__camera { position: absolute; z-index: -3; inset: -3%; transform: translateY(calc(var(--album-entry) * -18dvh)) scale(calc(1.02 + var(--album-entry) * .12)); opacity: calc(1 - var(--album-entry) * .6); }
.album__camera img { width: 100%; height: 100%; object-fit: cover; animation: album-atmosphere 18s ease-in-out infinite alternate; }
.album::after { content: ''; position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at 30% 48%, #c05b241a, transparent 58%), linear-gradient(0deg, #100705b3, transparent 65%); pointer-events: none; }
.album__layout { position: relative; width: min(1280px, 87vw); height: 100%; margin: auto; padding: max(32px, 5dvh) 0; display: grid; grid-template-columns: 1.05fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 6vw; row-gap: 18px; align-items: center; }
.album__eyebrow { grid-column: 1 / -1; margin: 0; display: flex; align-items: center; gap: 18px; color: #e5bba2; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.album__eyebrow span { color: #ffdec0; border: 1px solid #cb83525c; padding: 8px 11px; letter-spacing: .14em; }
.album__art-wrap { grid-column: 1; grid-row: 2 / 4; min-width: 0; transform: translate3d(calc(var(--album-entry) * -100px), calc(var(--album-entry) * 80px), 0) rotate(calc(var(--album-entry) * -8deg)); opacity: calc(1 - var(--album-entry)); }
.album__art { position: relative; width: min(100%, 66dvh); aspect-ratio: 1; animation: album-sleeve-float 9s ease-in-out infinite; }
.album__cover { position: relative; z-index: 2; width: 100%; height: 100%; display: block; border: 1px solid #eab99140; box-shadow: -14px 22px 45px #0008, 0 0 60px #be652118; rotate: -4deg; }
.album__disc { position: absolute; width: 92%; height: 92%; top: 4%; left: 19%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 2px, #fff1 3px, transparent 4px 7px), conic-gradient(from 30deg, #26140e, #ddac79 22deg, #592c18 45deg, #160d0a 96deg, #c68b57 155deg, #352016 190deg, #aa754b 245deg, #1c110c 285deg, #d9a273 325deg, #26140e); border: 1px solid #cc9b6b70; box-shadow: 8px 12px 30px #0008; animation: album-disc-turn 34s linear infinite; }
.album__disc::after { content: ''; position: absolute; width: 9%; height: 9%; left: 45.5%; top: 45.5%; border-radius: 50%; background: #1c0e09; box-shadow: 0 0 0 7px #e7c4a833, 0 0 0 8px #cc957c99; }
.album__disc > span { position: absolute; inset: 34%; display: grid; place-content: center; gap: 20px; border-radius: 50%; background: #6d2d16; border: 1px solid #e0a16b88; text-align: center; font: 700 19px Georgia, serif; color: #f2c59c; }
.album__disc small { font: 10px Arial, sans-serif; }
.album__details { grid-column: 2; grid-row: 2 / 4; height: 100%; min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.album__identity { width: min(82%, 420px, 52dvh); min-width: 0; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; transform: translate3d(calc(var(--album-entry) * 80px), calc(var(--album-entry) * 30px), 0); opacity: calc(1 - var(--album-entry)); }
.album__signature { display: block; width: 48%; height: auto; object-fit: contain; margin: 0 auto -8%; filter: sepia(1) saturate(2) hue-rotate(342deg); }
.album__lettering { display: block; width: 100%; height: auto; object-fit: contain; animation: album-title-glow 7s ease-in-out infinite; }
.album__listen { width: 100%; transform: translateY(calc(var(--album-entry) * 90px)); opacity: calc(1 - var(--album-entry)); }
.album__listen-title { margin: 0 0 6px; text-align: center; font-size: 23px; font-weight: 800; color: #ffe3bf; }
.album__intro { margin: 0 0 16px; text-align: center; font-size: 13px; color: #d0ab92; line-height: 1.4; }
.album__services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; max-width: 500px; margin: auto; }
.album__services a { min-width: 0; min-height: 48px; padding: 10px 14px; display: grid; grid-template-columns: 24px minmax(0, 1fr) 12px; align-items: center; gap: 12px; border: 1px solid #ffe7ce36; border-top-color: #fff2e557; border-radius: 10px; color: #fff0df; background: linear-gradient(125deg, #ffeadb21, #ffe5cf0b); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: inset 0 1px 0 #fff8f00d, 0 4px 14px #0000001f; text-decoration: none; font-size: 13px; line-height: 1.2; font-weight: 600; transition: background .2s, border-color .2s, box-shadow .2s, translate .2s; }
.album__services a span { white-space: nowrap; }
.album__services a::after { content: ''; width: 14px; height: 14px; background: #e8c6ab99; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 18 18 6M6 6h12v12' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.album__services svg { width: 24px; height: 24px; }
.album__services a[href*="spotify.com"] svg { color: #75dfa3; }
.album__services a[href*="spotify.com"] svg path { stroke: #183126; }
.album__services a[href*="amazon.com"] svg { color: #9bdae9; }
.album__services a[href*="apple.com"] svg { color: #f7a8bd; }
.album__services a[href*="deezer.com"] svg { color: #cbb1f5; }
.album__services a[href*="soundcloud.com"] svg { color: #ffb78b; }
.album__services a:hover { translate: 0 -2px; background: #ffe5cf26; border-color: #ffe7ce73; box-shadow: inset 0 1px 0 #fff8f026, 0 7px 20px #0003; }
.album__services a:focus-visible { outline: 3px solid #ffe3bf; outline-offset: 3px; }
.album__embers { position: absolute; z-index: -1; inset: 0; pointer-events: none; overflow: hidden; }
.album__embers i { --ember-x: 9%; position: absolute; width: 2px; height: 7px; left: var(--ember-x); bottom: -10px; border-radius: 2px; background: #ef9f50; box-shadow: 0 0 10px #ff843a; animation: album-ember-rise 12s linear infinite; }
.album__embers i:nth-child(2) { --ember-x: 23%; animation-delay: -8s; }
.album__embers i:nth-child(3) { --ember-x: 39%; animation-delay: -3s; }
.album__embers i:nth-child(4) { --ember-x: 50%; animation-delay: -11s; }
.album__embers i:nth-child(5) { --ember-x: 63%; animation-delay: -5s; }
.album__embers i:nth-child(6) { --ember-x: 74%; animation-delay: -9s; }
.album__embers i:nth-child(7) { --ember-x: 85%; animation-delay: -1s; }
.album__embers i:nth-child(8) { --ember-x: 95%; animation-delay: -6s; }
.album .album__back { left: auto; right: 24px; top: 24px; bottom: auto; width: 40px; height: 40px; transform: none; }
.album .album__motion { right: 24px; top: 76px; bottom: auto; background: #2d160dc9; }
.biography { filter: brightness(calc(1 - var(--bio-exit, 0) * .65)); }
.biography__layout { translate: 0 calc(var(--bio-exit, 0) * -5dvh); }
.biography__portrait-wrap { translate: calc(var(--bio-exit, 0) * 60px) calc(var(--bio-exit, 0) * -80px); }
.biography__content { translate: calc(var(--bio-exit, 0) * -70px) 0; }
.biography__camera { opacity: calc(1 - var(--bio-entry) * .35 - var(--bio-exit, 0) * .65); }
body[data-active-section="3"] .section-nav span { background: #efb77f; }
.motion-paused .album *, .album:not(.is-current) * { animation-play-state: paused; }
@keyframes album-atmosphere { from { transform: scale(1) translateX(-1%); } to { transform: scale(1.06) translateX(1%); } }
@keyframes album-sleeve-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes album-disc-turn { to { rotate: 360deg; } }
@keyframes album-title-glow { 0%, 100% { filter: drop-shadow(0 0 2px #f78b2020); } 50% { filter: drop-shadow(0 0 13px #f78b2045); } }
@keyframes album-ember-rise { 0% { opacity: 0; transform: translate(0, 0) rotate(-15deg); } 15%, 65% { opacity: .6; } 100% { opacity: 0; transform: translate(35px, -100dvh) rotate(20deg); } }

@media (max-width: 1000px) and (orientation: portrait) {
  .album__layout { width: 100%; padding: max(20px, env(safe-area-inset-top)) 22px max(20px, env(safe-area-inset-bottom)); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(10px, 2dvh, 18px); }
  .album__eyebrow { grid-column: 1; grid-row: 1; font-size: 9px; gap: 12px; padding-right: 30px; letter-spacing: .14em; }
  .album__eyebrow span { padding: 6px 8px; white-space: nowrap; }
  .album__art-wrap { grid-column: 1; grid-row: 2; height: 100%; min-height: 0; display: grid; place-items: center; container-type: size; }
  .album__art { width: min(76cqw, 72cqh, 310px); height: auto; max-width: none; aspect-ratio: 1; margin-left: -6%; }
  .album__details { display: contents; }
  .album__identity { display: none; }
  .album__listen { grid-column: 1; grid-row: 3; padding: 0; }
  .album__listen-title { font-size: 20px; }
  .album__intro { margin-bottom: 16px; font-size: 12px; }
  .album__services { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .album__services a { grid-template-columns: 22px minmax(0, 1fr); min-height: 50px; font-size: 12px; padding: 11px 13px; gap: 10px; border-radius: 9px; }
  .album__services a::after { content: none; }
  .album__services svg { width: 22px; height: 22px; }
  .album .album__motion { top: max(14px, env(safe-area-inset-top)); right: 14px; width: 34px; height: 34px; }
}
@media (max-width: 1000px) and (max-height: 700px) and (orientation: portrait) {
  .album__layout { padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); gap: 10px; }
  .album__intro { font-size: 12px; margin-bottom: 12px; }
  .album__listen-title { font-size: 19px; margin-bottom: 6px; }
  .album__services { gap: 10px 12px; }
  .album__services a { min-height: 46px; padding: 9px 11px; gap: 8px; font-size: 12px; }
  .album__services svg { width: 21px; height: 21px; }
}
@media (max-height: 620px) and (orientation: landscape) {
  .album__layout { width: 86%; padding: 18px 0; grid-template-columns: 1fr 1fr; grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 7vw; row-gap: 8px; }
  .album__eyebrow { font-size: 9px; }
  .album__eyebrow span { padding: 5px 8px; }
  .album__art { width: min(100%, 70dvh); }
  .album__details { gap: 12px; }
  .album__identity { width: min(100%, 41dvh); margin: 0 auto; display: block; }
  .album__lettering { width: 100%; height: auto; }
  .album__signature { display: none; }
  .album__listen { padding: 0; }
  .album__intro { font-size: 11px; margin-bottom: 10px; }
  .album__listen-title { font-size: 18px; margin-bottom: 4px; }
  .album__services { gap: 10px 12px; }
  .album__services a { grid-template-columns: 20px minmax(0, 1fr); min-height: 44px; padding: 9px 12px; gap: 9px; font-size: 11px; }
  .album__services a::after { content: none; }
  .album__services svg { width: 20px; height: 20px; }
  .album .album__motion { top: 14px; right: 14px; width: 34px; height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .album *, .album *::after { animation: none !important; transition: none !important; } }
/* Keep the last platform clear of the fixed mobile contact. Artwork shrinks
   within its existing grid row, retaining one viewport and readable buttons. */
@media (max-width: 1000px) and (orientation: portrait) {
  .album__layout { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
}

@media (max-width: 1000px) and (orientation: landscape) {
  .album__identity { display: none; }
}

