.song-detail-main{width:min(1100px,92vw);margin:12px auto 48px}.song-detail header{padding:16px 4vw;border-bottom:0}.back-to-listen{font-size:13px;background:rgba(255,250,240,.95);padding:12px 18px;border-radius:3px}.song-detail .song{position:relative;margin:0}.song-detail .song h1{font:400 clamp(36px,5vw,64px)/1.15 Cait,sans-serif;color:#460e4d;margin:0 0 16px}.song-detail .song-control-row{margin-bottom:20px}.song-detail .song-play{margin:8px 0}
.sticky-credits{position:absolute;right:0;top:34px;width:350px;height:350px;z-index:4;transform:rotate(15deg);isolation:isolate;color:#413342}.sticky-paper{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}.sticky-ink{position:relative;padding:28px 30px;font:15px/1.45 'Courier New',monospace}.song-detail .sticky-credits h2{font:400 27px/1.1 Cait,sans-serif;color:#460e4d;margin:0 0 9px}.sticky-credits p{margin:0 0 12px}.sticky-credits dl{margin:0}.sticky-credits dt{font-weight:bold;margin-top:9px}.sticky-credits dd{margin:2px 0 0}.song-detail .song-player{padding-right:345px}.song-detail .song h1{font-size:clamp(36px,4.2vw,54px);white-space:nowrap}
@media(max-width:1050px) and (min-width:761px){.sticky-credits{width:300px;height:300px;top:55px;right:-5px}.sticky-ink{padding:20px;font-size:12.5px}.song-detail .song-player{padding-right:290px}.song-detail .song h1{font-size:clamp(28px,4vw,42px)}}
@media(max-width:760px){.song-detail-main{width:90vw;margin-top:0}.song-detail header{padding:12px 4vw}.song-detail .song-player{padding-right:0}.song-detail .song h1{font-size:clamp(28px,7vw,44px);white-space:normal}.sticky-credits{position:relative;top:auto;right:auto;width:300px;height:300px;max-width:90%;margin:28px 8px -36px auto;transform:rotate(15deg)}.sticky-ink{padding:20px;font-size:12.5px}.song-detail .sticky-credits h2{font-size:25px}.sticky-credits dt{margin-top:8px}}

.song-story{max-width:800px;margin:44px auto 12px;padding-top:28px;border-top:1px solid #67536a33}.song-detail .song-story h2{font:400 clamp(28px,4vw,38px)/1.2 Cait,sans-serif;color:#460e4d;margin:0 0 22px}.song-story p{font:17px/1.85 Georgia,serif;margin:0 0 20px;color:#403347}.song-story p:last-child{margin-bottom:0}@media(max-width:760px){.song-story{margin-top:30px;padding-top:24px}.song-story p{font-size:16px;line-height:1.8}}

/* Sidewalk flowers at the foot of each dedicated song page. Keep the concrete at 8% opacity. */
.song-detail .song{padding-bottom:160px}
.song-detail .song::before,.song-detail .song::after{content:"";position:absolute;bottom:-8px;width:clamp(140px,16vw,210px);aspect-ratio:568 / 600;background-position:center bottom;background-size:contain;background-repeat:no-repeat;pointer-events:none;user-select:none;z-index:1}
.song-detail .song::before{left:-20px;background-image:url('assets/wildflower-09.webp');-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.08) 88%,rgba(0,0,0,.08) 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 76%,rgba(0,0,0,.08) 88%,rgba(0,0,0,.08) 100%)}
.song-detail .song::after{right:-20px;background-image:url('assets/wildflower-10.webp');-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 73%,rgba(0,0,0,.08) 84%,rgba(0,0,0,.08) 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 73%,rgba(0,0,0,.08) 84%,rgba(0,0,0,.08) 100%)}
@media(max-width:760px){.song-detail .song{padding-bottom:150px}.song-detail .song::before,.song-detail .song::after{width:140px;max-width:42%;bottom:-5px}.song-detail .song::before{left:-12px}.song-detail .song::after{right:-12px}}

/* Each song keeps its own ink, paper color and pair of sidewalk flowers. */
.song-detail .song h1{white-space:normal;overflow-wrap:break-word;color:var(--song-ink,#460e4d)}
.song-detail .song-story h2{color:var(--song-ink,#460e4d)}
.song-detail .song::before{background-image:var(--flower-left,url('assets/wildflower-09.webp'));transform:scale(var(--flower-left-scale,1));transform-origin:left bottom}
.song-detail .song::after{background-image:var(--flower-right,url('assets/wildflower-10.webp'));transform:scale(var(--flower-right-scale,1));transform-origin:right bottom}
.song-story-space{min-height:200px}
/* Let the tilted paper sit over the lyric sheet, like the original song page. */
.blank-note{right:25px}
.song-detail .song:has(.blank-note) .song-player{padding-right:370px}
@media(max-width:1050px) and (min-width:761px){.song-detail .song:has(.blank-note) .song-player{padding-right:340px}}
@media(max-width:760px){.blank-note{right:auto;width:min(300px,80%);height:auto;aspect-ratio:1;margin:28px 6% -70px auto}.song-story-space{min-height:180px}.song-detail .song:has(.blank-note) .song-player{padding-right:0}}

/* Scale longer credit lists with the paper while retaining the original fonts. */
.full-note{width:420px;height:auto;aspect-ratio:1;container-type:inline-size}
.full-note .sticky-ink{padding:6.67cqw 7.14cqw;font-size:3.57cqw;line-height:1.35}
.song-detail .full-note h2{font-size:6.43cqw;margin-bottom:2.14cqw}
.full-note p{margin-bottom:1.9cqw}.full-note dt{margin-top:.95cqw}.full-note dd{margin-top:.48cqw}
.song-detail .song:has(.full-note) .song-player{padding-right:415px}
@media(max-width:1050px) and (min-width:761px){.full-note{width:350px}.song-detail .song:has(.full-note) .song-player{padding-right:340px}}
@media(max-width:760px){.full-note{width:350px;max-width:90%;margin:28px 5% -70px auto}.song-detail .song:has(.full-note) .song-player{padding-right:0}}

/* A larger sheet keeps Lucky One's full session credits legible. */
.lucky-credits{width:480px;min-height:540px;aspect-ratio:auto;right:12px}
.lucky-credits .sticky-ink{padding:34px 36px 48px;font-size:15px;line-height:1.35}
.song-detail .lucky-credits h2{font-size:29px;margin-bottom:10px}
.lucky-credits p{margin-bottom:8px}.lucky-credits dt{margin-top:5px}.lucky-credits dd{margin-top:2px}
.song-detail .song:has(.lucky-credits) .song-player{padding-right:485px}
@media(max-width:1050px) and (min-width:761px){
 .lucky-credits{width:390px;min-height:490px;right:15px;transform:rotate(10deg)}
 .lucky-credits .sticky-ink{padding:28px 28px 42px;font-size:13px}
 .song-detail .lucky-credits h2{font-size:27px}
 .song-detail .song:has(.lucky-credits) .song-player{padding-right:400px}
}
@media(max-width:760px){
 .lucky-credits{width:360px;max-width:92%;min-height:0;right:auto;margin:32px 4% -70px auto;transform:rotate(8deg)}
 .lucky-credits .sticky-ink{padding:26px 24px 42px;font-size:13px}
 .song-detail .lucky-credits h2{font-size:27px}
 .song-detail .song:has(.lucky-credits) .song-player{padding-right:0}
}