/* The masthead tint dissolves into the paper under the record. */
header{border-bottom:0;box-shadow:none}
body::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:calc(var(--header-height,110px) + 210px);background:linear-gradient(to bottom,transparent 28%,var(--paper) 100%),linear-gradient(112deg,#ff9999,#ffb4a0 55%,#f8e9a2)}
body{isolation:isolate}
header::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(112deg,#ff9999,#ffb4a0 55%,#f8e9a2);mask-image:linear-gradient(black,transparent);pointer-events:none}
body[data-mode=browse] .intro{display:none}
body:not(.has-player) #listening{display:none}
#expand-mini{display:none}
#listen-current,.inline-preview [data-discover]{border-radius:30px;min-height:46px;background:#21191d;color:white;padding:10px 22px;border:1px solid #21191d;font-weight:650}
#listen-current:hover,.inline-preview [data-discover]:hover{background:#4f3040}
.listen-row{display:flex;align-items:center;gap:16px;margin:16px 0}
.curator-label,.preview-cue{font:600 10px/1.4 Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.curator-label{display:block;color:#783d53;margin-top:16px}
.inspector #note{display:block;margin:5px 0 18px;color:#5d4c51;font:15px/1.5 Georgia,serif;max-width:44ch}
#near-heart gems-heart{display:inline-flex;align-items:center}
#near-heart .reaction-pill{min-height:44px}
.keep-primary,.keep-primary:hover{background:transparent;border:1px solid #cdb5af;color:#322329;font-weight:500;min-width:0}
.keep-primary[aria-pressed=true]{background:#f5eb9a}
#collection{padding-top:24px!important}
#collection .section-line{align-items:center}
#collection-note{margin:6px 0}
#search-form{margin:12px 0 0}
#search-form label{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.browse-tools{margin:8px 0 14px}
.card-copy .preview-cue{margin-top:6px;text-transform:none;font-weight:600;color:#693751}
.card-discover{height:auto}
.card-actions{margin-top:auto}
.sample-open{border-color:#9a687b}
.inline-preview{padding:16px 18px;border-top:1px solid #e6d3cc;background:#fff4e9}
.inline-preview p{margin:7px 0 14px;font:16px/1.45 Georgia,serif}
#dismiss-preview{margin-left:8px;border:0;background:none;font-size:11px;min-height:44px}
.media-cover{position:relative;isolation:isolate;overflow:hidden;display:grid;place-content:center;justify-items:center;gap:8px;width:100%;min-height:190px;border:0;border-radius:8px;background:#32272e;color:white;padding:20px;text-align:center}
.media-cover::before{content:"";position:absolute;inset:-15px;background:var(--art) center/cover;filter:blur(12px);opacity:.6;z-index:-2}
.media-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#160e19bf,#160e1938);z-index:-1}
.media-icon{display:grid;place-items:center;padding-left:4px;width:50px;height:50px;border-radius:50%;background:#f5e880;color:#261c24}
.media-cover strong{font:600 19px/1.2 Arial,sans-serif}
.media-cover small{font:12px/1.4 Arial,sans-serif}
.post-source .source-placeholder{margin:0;padding:0;background:none;border:0}
.other-destinations summary{cursor:pointer;padding:12px 0 0;font-size:12px;color:#674b57}
.post-source .source-heading{margin-bottom:10px}
.provider-message{position:relative;background:#342932;color:white;padding:12px;font-size:13px}
.provider-message button,.provider-message a{margin:4px 6px;color:white;border:1px solid #ba9caa;background:transparent;padding:6px 10px;border-radius:20px}
.provider-message[hidden]{display:none}
.blog-post.video-only #provider-player.screen-mounted,.post-source #provider-player.screen-mounted{display:block;position:absolute;z-index:4;background:#20181e;border-radius:8px;overflow:hidden}
.post-source #provider-player.screen-away{display:none}
.has-player[data-provider=YouTube] .post-source #provider-player iframe{height:var(--inline-video-height,200px);border-radius:0}
#object-stage.video-screen .case-position{visibility:hidden}
.sample-screen.video-screen{height:clamp(200px,30vw,380px);margin-bottom:10px}
.source-slot:has(.screen-mounted)>.source-placeholder[hidden],.source-slot:has(.screen-away)>.source-placeholder[hidden]{display:block!important}
body:has(.screen-mounted) .source-slot:has(.screen-mounted) .media-cover strong{font-size:0}
body:has(.screen-mounted) .source-slot:has(.screen-mounted) .media-cover strong::after{content:'Show video here';font-size:18px}
@media(max-width:620px){
 #collection{padding-top:16px!important}
 #collection .section-line{display:flex;gap:7px}
 #collection-title{font-size:29px}
 #collection-note{font-size:12px}
 #close-collection{max-width:82px;margin:0;text-align:right;font-size:10px}
 .browse-tools{align-items:center;gap:6px}
 #browse-count{font-size:9px}
 .collection-grid.sleeve-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;align-items:start}
 .sleeve-grid .browse-card{border-radius:8px}
 .sleeve-grid .card-discover>.release-art{width:100%;aspect-ratio:1;height:auto}
 .sleeve-grid .card-copy{padding:10px 9px;gap:3px}
 .sleeve-grid .card-copy strong{font-size:19px;margin:0}
 .sleeve-grid .card-copy>small{font-size:9px}
 .sleeve-grid .card-actions{padding:0 6px 6px;gap:3px;flex-wrap:wrap}
 .sleeve-grid .card-actions button{padding:5px 8px;font-size:11px;min-height:40px}
 .sleeve-grid .sample-open{grid-column:1/-1}
 .sample-open .card-discover{flex-direction:row;align-items:center}
 .sleeve-grid .sample-open .release-art{width:85px;flex:none}
 .list-layout .sample-open .inline-preview{width:100%}
 .listen-row{justify-content:center;margin:9px 0 5px}
 .inspector #note{margin:5px auto 12px}
 .inspector .artist{margin-bottom:8px}
 .inspector .meta,.inspector .tags{display:none}
 .has-player #listening:not(.expanded){display:grid;grid-template-columns:minmax(0,1fr) 44px 44px;gap:4px;padding:6px 8px;align-items:center}
 #expand-mini{display:block;grid-area:1/3;border:0;background:transparent;min-width:44px;min-height:44px}
 .expanded #expand-mini{grid-area:3/2;justify-self:end}
 #listening:not(.expanded) .transport{grid-area:1/2}
 #listening:not(.expanded) :is(.source-connection,.seek-line,#previous-discovery,#next-discovery){display:none}
 #listening:not(.expanded) .active-meta .eyebrow{font-size:7px}
 #listening:not(.expanded) .active-meta #playback-status{font-size:9px;margin:1px 0}
 #listening:not(.expanded) #return-playing{min-height:15px}
 .object-stage,.has-player .object-stage{height:240px}
 .object-panel .art-note{display:none}
 .inspector{padding-top:12px}
}
.blog-post.video-only .source-slot>.source-placeholder[hidden]{display:none!important}
.object-panel:has(.video-screen) :is(.motion-details,.gesture-hint){visibility:hidden}
@media(max-width:620px){
 .object-stage,.has-player .object-stage{height:216px}
 .has-player .inspector .curator-label{margin-top:8px}
 .has-player .inspector #note{font-size:14px;line-height:1.4;margin-bottom:8px}
 .inspector #listen-current,.inspector #near-heart{flex:none}
}
@media(min-width:621px){
 .sleeve-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));align-items:start}
 .sleeve-grid .card-discover>.release-art{height:clamp(160px,20vw,250px);width:100%;aspect-ratio:auto;background:#f3ebe2}
 .sleeve-grid .card-copy{padding:14px}
 .sleeve-grid .card-copy strong{font-size:22px}
 .list-layout .sample-open{flex-wrap:wrap}
 .list-layout .inline-preview{width:100%}
}
@media(max-width:360px){
 #collection .section-line{gap:4px}
 #collection-title{font-size:26px}
 #collection-note{max-width:18em}
 #browse-count{display:none}
 .sleeve-grid .card-discover>.release-art{height:112px;aspect-ratio:auto;background:#f2e6da}
 .sleeve-grid .card-copy>.preview-cue{margin-top:0}
 .sleeve-grid .card-copy{gap:2px;padding-block:7px}
}
@media(min-width:621px){.sleeve-grid .sample-open{grid-column:span 2}}
@media(min-width:901px){
 .collection-grid.sleeve-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .sleeve-grid:not(:has(.sample-open)){align-items:stretch}
}
.provider-message p{margin:0 0 7px;line-height:1.45}
.provider-message :is(button,a){display:inline-flex;align-items:center;min-height:40px;margin:3px 6px 0 0;white-space:nowrap}
#unavailable{max-width:720px;margin:clamp(40px,10vh,110px) auto;padding:22px}
#unavailable h1{font:clamp(32px,5vw,56px)/1.1 Georgia,serif;margin:12px 0}
#unavailable p{color:#654f58}
#unavailable button{background:#241c20;color:white;padding:12px 20px;border-radius:25px;min-height:44px}
body[data-mode=missing] :is(.intro,.entry-pair){display:none}
@media(max-width:620px),(max-width:1000px) and (max-height:500px){
 body,body.has-player{display:flex;flex-direction:column;height:100dvh;overflow:hidden;padding:0!important}
 #page{flex:1 1 auto;min-height:0;position:relative;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;scroll-padding-top:var(--header-height,105px);scroll-padding-bottom:12px}
 body.has-player #listening,body.has-player #listening.expanded{
  position:relative;inset:auto;flex:none;align-self:stretch;display:grid;margin:0;
  padding:5px max(8px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  max-width:none;width:100%;border-radius:0;border-width:1px 0 0;
  grid-template-columns:minmax(0,1fr) auto 44px;grid-auto-rows:min-content;align-items:center;gap:0 4px
 }
 #listening .dock-top{grid-area:1/1;align-items:center}
 #listening .active-meta{min-width:0}
 #listening .active-meta .eyebrow{display:none}
 #listening #active-art{width:30px;min-width:30px;height:30px}
 #listening .transport{display:contents}
 #listening .player-tools{display:flex;grid-area:1/2;width:auto;gap:0;align-items:center}
 #listening .player-tools button{display:block;min-width:44px;min-height:44px}
 #listening .player-tools button[hidden]{display:none!important}
 #listening:not(.expanded) #next-discovery,#listening:not(.expanded) #previous-discovery{display:block}
 #listening #expand-mini{display:block;grid-area:1/3;justify-self:end;font-weight:bold;min-width:44px}
 #listening.expanded .seek-line{display:flex;grid-area:2/1/3/-1;align-items:center;gap:8px;width:100%;margin:0;min-height:30px;flex-wrap:nowrap}
 #listening.expanded #seek{flex:1;min-width:0;height:26px}
 #listening.expanded .source-connection{grid-area:3/1/4/-1;display:flex;align-items:center;justify-content:flex-start;gap:12px}
 #listening.expanded #show-source,#listening.expanded #stop-audio,#listening.expanded #source-credit{display:inline-flex;align-items:center;justify-content:center;min-height:40px;font-size:12px}
 #listening.expanded #stop-audio{margin-left:auto;min-width:44px;font-size:20px}
 #listening.expanded #mini-keep{display:none}
 #listening:not(.expanded) .seek-line,#listening:not(.expanded) .source-connection{display:none}
 .has-player button,.has-player a{scroll-margin-bottom:8px}
 .inspector .cd-navigation{margin:10px auto;max-width:360px}
 .has-player .gesture-hint{display:none}
 body.has-player .inspector{padding-top:7px}
 .object-panel .art-note{display:none}
 #listening #return-playing{min-height:18px}
 #listening #active-artist{font-size:10px}
}
@media(max-width:360px){#listening #active-art{display:none}}
@media(max-height:500px) and (max-width:1000px) and (min-width:621px){
 .review-strip{display:none}
 header{grid-template-columns:auto minmax(0,1fr) auto;gap:6px;padding:4px 12px}
 header nav{grid-area:1/2;justify-content:center;gap:3px}
 header nav button{font-size:11px;padding-inline:5px}
 header .brand-gem{width:25px;height:25px}
 header .brand-wordmark{width:116px}
 header .search-button{grid-area:1/3}
 body[data-mode=record] .breadcrumb{padding:0;min-height:32px}
 .breadcrumb button{min-height:34px}
 .discovery-grid{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1fr);gap:18px;align-items:start}
 .object-stage,.has-player .object-stage{height:202px}
 .jewel,.has-player .jewel{scale:.75}
 .jewel.open,.has-player .jewel.open{scale:.65}
 .object-panel{padding:0}
 .inspector{padding:8px 0;text-align:left}
 .inspector h1{font-size:32px;margin:0}
 .inspector .artist{margin:4px 0}
 .inspector :is(.meta,.tags),.gesture-hint,.art-note{display:none}
 .listen-row{margin:5px 0}
 .inspector .cd-navigation{margin:6px 0}
}
@media(max-width:620px),(max-width:1000px) and (max-height:500px){
 body.has-player #listening:is(.expanded,:not(.expanded)){grid-template-columns:minmax(0,1fr) 132px 44px}
 #listening .player-tools button{flex:0 0 44px;padding:0}
 #listening .player-tools{gap:0}
}
@media(max-width:620px) and (max-height:740px){
 .review-strip{display:none}
 body[data-mode=record] .breadcrumb{padding-top:0}
 .object-stage,.has-player .object-stage{height:204px}
}
@media(max-width:620px) and (max-height:650px){
 .object-stage,.has-player .object-stage{height:200px}
 .has-player .inspector .find-kicker{display:none}
 body.has-player .inspector{padding-top:3px}
 .inspector .artist{margin:3px 0}
 .listen-row{margin:5px 0}
 .breadcrumb button{min-height:36px}
 .has-player .inspector h1{font-size:30px}
}
@media(min-width:621px) and (max-width:1000px) and (max-height:500px){
 #listening.expanded .source-connection{grid-area:2/2/3/-1;gap:6px}
 #listening.expanded .seek-line{grid-area:2/1/3/2;padding-right:12px}
 #listening.expanded #source-credit{font-size:11px}
}
#queue-context{display:none}
#listening.expanded #queue-context{display:block;font:10px/1.2 Arial,sans-serif;color:#644b55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:621px) and (max-width:1000px) and (max-height:500px){
 body[data-mode=record] .discovery{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,1fr);column-gap:18px;align-items:start;grid-template-areas:"stage breadcrumb" "stage identity"}
 .discovery>.discovery-grid{display:contents}
 .discovery>.breadcrumb{grid-area:breadcrumb}
 .discovery .object-panel{grid-area:stage}
 .discovery .inspector{grid-area:identity}
}
@media(min-width:621px) and (max-width:1000px) and (max-height:500px){
 #listening.expanded .source-connection{width:215px;justify-self:end;flex-wrap:nowrap}
 #listening.expanded .seek-line{padding-right:48px}
}
/* The post-owned video and its fallback share the same rectangle on the CD. */
.post-source #provider-player.screen-mounted{height:var(--inline-video-height,200px);overflow:hidden}
.post-source #provider-player.screen-mounted:has(iframe)>.provider-message{display:none}
.post-source #provider-player.screen-mounted>.provider-message:not([hidden]){
 height:100%;overflow:auto;align-content:center;padding:16px;box-sizing:border-box
}