/* Demo continuous listening and the approved editorial CTA. */
@font-face { font-family: "S13 Listening"; src: url("fonts/mona-sans-variable.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
.s13-listening-host { --s13-dock-height: calc(85px + env(safe-area-inset-bottom,0px)); --s13-widget-height: 60px; --s13-ease: cubic-bezier(.16,1,.3,1); }
.s13-listening-dock,.s13-listening-dock * { box-sizing: border-box; }
.s13-listening-host.s13-is-listening:not(.s13-listening-reading-active) { padding-bottom: var(--s13-listening-obstruction,0px); }
html:has(body.s13-listening-host.s13-is-listening) { scroll-padding-bottom: calc(var(--s13-listening-obstruction,0px) + 1rem); }
.s13-listening-journal { position: fixed; inset: 0; z-index: 2147483001; }
.s13-listening-journal[data-loading] { visibility: hidden; }
.s13-listening-journal[data-staging] { visibility: hidden; pointer-events: none; }
.s13-listening-background { display: none !important; }
body.s13-listening-reading-active { overflow: hidden; }
body.s13-listening-reading-active > :not(.s13-listening-journal):not(.s13-listening-dock):not([data-s13-privacy-banner]):not([data-s13-privacy-dialog]):not(script):not(style):not(link) { display: none !important; }
html:has(body.s13-listening-frame-active) { scroll-padding-bottom: calc(var(--s13-listening-obstruction,0px) + 1rem); }
body.s13-listening-frame-active { padding-bottom: var(--s13-listening-obstruction,0px); }
#s13-listening-page,.s13-listening-page { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.s13-listening-dock[hidden] { display: none; }
.s13-listening-dock { position: fixed; inset: auto 0 0; z-index: 2147483002; display: grid; grid-template-columns: fit-content(30%) minmax(320px,1fr) 44px 80px 44px; grid-template-areas: "identity widget volume next stop"; align-items: center; gap: clamp(8px,1.4vw,20px); min-height: var(--s13-dock-height); padding: 12px var(--s13-gutter,clamp(20px,4vw,80px)) calc(12px + env(safe-area-inset-bottom,0px)); background: var(--s13-surface); color: var(--s13-ink); font: 14px/1.4 "S13 Listening",Arial,sans-serif; border-top: 1px solid var(--s13-media-border); transform: translate3d(0,100%,0); opacity: 0; transition: transform .42s var(--s13-ease),opacity .32s ease; }
/* Keep the iframe laid out and paintable during its first media startup.
   The dock's existing opacity/translation conceal it without hiding the provider. */
.s13-listening-dock[data-preparing] { pointer-events: none; }
.s13-listening-dock[data-preparing] .s13-listening-widget iframe { transition: none; }
.s13-listening-dock[data-visible="true"] { transform: translate3d(0,0,0); opacity: 1; }
.s13-listening-identity { grid-area: identity; min-width: 0; max-width: 22rem; display: flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.s13-listening-art { flex: none; width: calc(var(--s13-widget-height) * 16 / 9); height: var(--s13-widget-height); object-fit: cover; border: 1px solid var(--s13-media-border); }
.s13-listening-art[hidden] { display: none; }
.s13-listening-copy { display: grid; min-width: 0; gap: 3px; }
.s13-listening-issue { color: var(--s13-muted); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.s13-listening-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.25; text-transform: uppercase; }
.s13-listening-widget { grid-area: widget; position: relative; min-width: 0; height: var(--s13-widget-height); }
.s13-listening-widget::before { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; height: 1px; background: var(--s13-field-line); opacity: .5; transition: opacity .22s ease; }
.s13-listening-widget[data-ready="true"]::before,.s13-listening-widget[data-error="true"]::before { opacity: 0; }
.s13-listening-widget iframe { position: relative; display: block; width: 100%; height: var(--s13-widget-height); border: 0; opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.s13-listening-widget[data-ready="true"] iframe { opacity: 1; pointer-events: auto; }
.s13-listening-stop { grid-area: stop; align-self: center; height: var(--s13-widget-height); }
.s13-listening-volume { position: relative; grid-area: volume; }
.s13-listening-volume[hidden] { display: block; visibility: hidden; }
.s13-listening-volume-panel[hidden] { display: none; }
.s13-listening-volume-toggle { display: grid; place-items: center; width: 44px; height: var(--s13-widget-height); padding: 0; border: 0; background: transparent; color: var(--s13-secondary); cursor: pointer; }
.s13-listening-volume-toggle:is(:hover,:focus-visible) { color: var(--s13-accent); }
.s13-listening-volume-toggle:focus-visible { outline: 1px solid var(--s13-support); outline-offset: 0; }
.s13-volume-muted { display: none; }
.s13-listening-volume[data-muted="true"] .s13-volume-waves { display: none; }
.s13-listening-volume[data-muted="true"] .s13-volume-muted { display: block; }
.s13-listening-volume-panel { position: absolute; bottom: calc(100% + 12px); right: -10px; display: flex; align-items: center; width: 160px; height: 44px; padding: 0 16px; border: 1px solid var(--s13-media-border); background: var(--s13-surface); }
.s13-listening-volume-panel input { appearance: none; -webkit-appearance: none; width: 100%; height: 24px; margin: 0; border: 0; outline: none; background: transparent; cursor: pointer; }
.s13-listening-volume-panel input:focus-visible { outline: 1px solid var(--s13-field-line); outline-offset: 3px; }
.s13-listening-volume-panel input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(to right,var(--s13-ink) 0 var(--s13-volume,100%),var(--s13-media-border) var(--s13-volume,100%) 100%); }
.s13-listening-volume-panel input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 10px; height: 10px; margin-top: -4px; border: 1px solid var(--s13-support); border-radius: 50%; background: var(--s13-ink); }
.s13-listening-volume-panel input::-moz-range-track { height: 2px; background: var(--s13-media-border); }
.s13-listening-volume-panel input::-moz-range-progress { height: 2px; background: var(--s13-ink); }
.s13-listening-volume-panel input::-moz-range-thumb { width: 10px; height: 10px; border: 1px solid var(--s13-support); border-radius: 50%; background: var(--s13-ink); }
.s13-listening-next { grid-area: next; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; min-height: 60px; padding: 0; border: 0; background: transparent; color: var(--s13-secondary); font: 600 10px/1.4 "S13 Listening",Arial,sans-serif; text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; cursor: pointer; }
.s13-listening-next[hidden] { display: flex; visibility: hidden; }
.s13-listening-next:disabled { opacity: .35; cursor: wait; }
.s13-listening-next:is(:hover,:focus-visible) { color: var(--s13-accent); }
.s13-listening-next:focus-visible { outline: 1px solid var(--s13-support); outline-offset: 3px; }
.s13-listening-next-glyph { position: relative; width: 15px; height: 14px; transition: transform .24s var(--s13-ease); }
.s13-listening-next-glyph::before { content: ""; position: absolute; top: 2px; left: 1px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.s13-listening-next-glyph::after { content: ""; position: absolute; top: 2px; right: 2px; width: 1px; height: 10px; background: currentColor; }
.s13-listening-next:hover .s13-listening-next-glyph { transform: translateX(2px); }
.s13-listening-status { position: absolute; bottom: calc(1px + env(safe-area-inset-bottom,0px)); left: var(--s13-gutter,clamp(20px,4vw,80px)); right: 60px; margin: 0; color: var(--s13-support); font-size: 10px; }
.s13-listening-identity:focus-visible { outline: 1px solid var(--s13-ink); outline-offset: 3px; }
/* Pointer clicks must not inherit keyboard rings after crossing documents.
   Tab navigation retains the existing visible, high-contrast focus treatment. */
html[data-s13-input="pointer"] :is(.s13-listen-trial-play,.s13-listening-identity,.s13-listening-next,.s13-listening-volume-toggle,.s13-listening-volume-panel input):focus-visible { outline: none; }
/* Index transport: the label is centred against one static cut-corner plate.
   Only two clipped overlays animate, once per deliberate interaction. */
.s13-mix-feature .s13-listening-entry { container: s13-listening-cta / inline-size; display: block; width: 100%; max-width: 540px; margin-top: 32px; }
.s13-mix-feature .s13-listening-main { display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: center; column-gap: 28px; row-gap: 18px; min-width: 0; }
.s13-mix-feature button.og-hero-listen.s13-listen-trial-play { --s13-control: 80px; display: inline-flex; align-items: center; justify-content: flex-start; gap: 20px; min-height: var(--s13-control); margin: 0; padding: 0; border: 0; background: transparent; color: var(--s13-ink,#f1f1f1); font: 650 22px/1.2 var(--s13-body); letter-spacing: .06em; text-align: left; text-transform: uppercase; cursor: pointer; }
.s13-mix-feature button.s13-listen-trial-play span { font: inherit; transform: none; transition: none; }
.s13-mix-feature button.s13-listen-trial-play .s13-play-label { min-width: 6.15em; padding: 0; white-space: nowrap; }
.s13-mix-feature button.s13-listen-trial-play:is(:hover,:focus-visible) { color: var(--s13-accent); }
.s13-mix-feature button.s13-listen-trial-play:focus-visible { outline: 1px solid var(--s13-ink); outline-offset: 6px; }
html[data-s13-input="pointer"] .s13-mix-feature button.s13-listen-trial-play:focus-visible { outline: none; }
.s13-mix-feature button.s13-listen-trial-play:disabled { cursor: wait; }
/* Optical alignment for the SVG's inset plate; keep the label and facts in place. */
.s13-mix-feature .s13-play-visual { position: relative; left: -2px; display: block; flex: none; width: var(--s13-control); height: var(--s13-control); }
.s13-mix-feature .s13-play-surface { position: absolute; inset: 0; display: block; pointer-events: none; }
.s13-mix-feature .s13-play-art { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.s13-mix-feature .s13-play-plate { fill: currentColor; }
.s13-mix-feature :is(.s13-transport-play,.s13-transport-pause) { fill: #000; transform: translate(20px,20px) scale(.5); }
.s13-mix-feature .s13-transport-pause { display: none; }
.s13-mix-feature button.s13-listen-trial-play[aria-pressed="true"] .s13-transport-play { display: none; }
.s13-mix-feature button.s13-listen-trial-play[aria-pressed="true"] .s13-transport-pause { display: block; }
.s13-mix-feature .s13-play-glitch { background: #000; opacity: 0; }
.s13-mix-feature .s13-play-glitch--first { clip-path: inset(28% 0 65%); }
.s13-mix-feature .s13-play-glitch--second { clip-path: inset(65% 0 28%); }
.s13-mix-feature ul.s13-listening-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; min-width: 0; margin: 0; padding: 0 0 0 20px; border-left: 1px solid var(--s13-line,#292929); list-style: none; color: var(--s13-secondary,#b8b8b8); font: 400 12px/1.5 var(--s13-body); letter-spacing: 0; text-transform: none; }
.s13-mix-feature .s13-listening-facts > li { min-width: 0; max-width: 100%; margin: 0; padding: 0; overflow-wrap: anywhere; }
.s13-mix-feature .s13-fact-value { font-variant-numeric: tabular-nums; }
.s13-mix-feature :is(.s13-fact-label,.s13-fact-detail) { display: none; }
.s13-mix-feature [data-fact="tracks"] .s13-fact-label { display: inline; margin-left: 3px; color: inherit; text-transform: lowercase; }
.s13-mix-feature .s13-listening-facts > :is([data-fact="years"],[data-fact="context"],[data-fact="cities"]) { flex-basis: 100%; color: var(--s13-muted,#888); font-size: 11px; line-height: 1.6; }
.s13-mix-feature .s13-listening-facts > li:first-child { color: var(--s13-secondary,#b8b8b8); font-size: 12px; }
.s13-mix-feature [data-fact="cities"] :is(.s13-fact-value,.s13-fact-label) { display: none; }
.s13-mix-feature [data-fact="cities"] .s13-fact-detail { display: inline; }
.s13-mix-feature .s13-listening-entry p.s13-listening-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5em; max-width: 100%; margin: 10px 0 0; color: var(--s13-muted,#888); font: 400 13px/1.5 var(--s13-body); letter-spacing: 0; text-transform: none; }
.s13-mix-feature .s13-listening-platforms a.s13-listen-trial-channel { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; border: 0; color: var(--s13-secondary,#b8b8b8); text-decoration: none; }
.s13-mix-feature .s13-platform-name { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--s13-link-line); text-underline-offset: .3em; }
.s13-mix-feature .s13-listening-platforms a.s13-listen-trial-channel:hover { color: var(--s13-accent); }
.s13-mix-feature .s13-listen-trial-channel:hover .s13-platform-name { text-decoration-color: var(--s13-support); }
.s13-mix-feature .s13-listening-arrow { display: block; flex: none; width: 12.8px; height: 12.8px; margin: 0; fill: none; stroke-width: 1.5; }
@container s13-listening-cta (max-width: 440px) {
  .s13-mix-feature button.og-hero-listen.s13-listen-trial-play { --s13-control: 72px; gap: 16px; font-size: 20px; }
  .s13-mix-feature .s13-listening-main { column-gap: 20px; }
  .s13-mix-feature ul.s13-listening-facts { column-gap: 10px; padding-left: 14px; font-size: 11px; }
  .s13-mix-feature .s13-listening-entry p.s13-listening-platforms { font-size: 12px; }
}
@container s13-listening-cta (max-width: 380px) {
  .s13-mix-feature button.og-hero-listen.s13-listen-trial-play { --s13-control: 64px; }
  .s13-mix-feature .s13-listening-main { column-gap: 18px; }
  .s13-mix-feature ul.s13-listening-facts { column-gap: 8px; padding-left: 12px; }
}
/* Give short editorial cues the full width before the side rail becomes cramped. */
@container s13-listening-cta (max-width: 500px) {
  .s13-mix-feature .s13-listening-main { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .s13-mix-feature ul.s13-listening-facts { column-gap: 20px; padding-left: 0; border-left: 0; font-size: 12px; }
  .s13-mix-feature .s13-listening-facts > [data-fact="years"] { flex-basis: auto; font-size: 12px; }
}
.s13-mix-feature.s13-listening-editorial .og-layout { margin-top: clamp(2.75rem,4.5vw,4.5rem); }
.s13-mix-feature .s13-listening-entry a.s13-listening-distant-tracks { justify-content: flex-start; gap: .7rem; width: auto; min-height: 44px; margin: 0; padding: 0; color: var(--s13-support); }
.s13-mix-feature .s13-listening-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem 1rem; max-width: 42ch; margin: .3rem 0 0; color: var(--s13-secondary,#b8b8b8); font: 400 .75rem/1.5 var(--s13-body); }
.s13-listening-retry { display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: .35rem 0; border: 0; background: transparent; color: var(--s13-ink); font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; text-decoration-color: var(--s13-link-line); cursor: pointer; }
.s13-listening-retry:hover { text-decoration-color: var(--s13-ink); }
.s13-listening-widget-retry { height: 100%; }
.s13-listening-widget-retry:focus-visible { outline: 1px solid var(--s13-ink); outline-offset: 3px; }
.s13-listening-navigation-status { position: fixed; z-index: 2147483001; right: var(--s13-gutter,20px); bottom: calc(var(--s13-listening-obstruction,0px) + 1rem); left: var(--s13-gutter,20px); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; width: fit-content; max-width: calc(100% - 2 * var(--s13-gutter,20px)); margin: 0; padding: .35rem 1rem; border: 1px solid var(--s13-line,#292929); background: var(--s13-surface); color: var(--s13-secondary); font: 400 .75rem/1.5 var(--s13-body,"S13 Listening",Arial,sans-serif); }
.s13-listening-navigation-status a { display: inline-flex; align-items: center; min-height: 44px; color: var(--s13-ink); text-decoration: underline; text-decoration-color: var(--s13-link-line); text-underline-offset: .25em; }
.s13-listening-navigation-status a:hover { text-decoration-color: var(--s13-ink); }
@media (max-width: 620px) {
  .s13-mix-feature .s13-listening-entry { max-width: none; margin-top: 24px; }
  .s13-mix-feature .s13-listening-entry p.s13-listening-platforms { margin-top: 12px; }
  .s13-mix-feature .s13-listening-entry p.s13-listening-platforms { font-size: 12px; }
}
/* Switch before the mini widget becomes too narrow, rather than waiting for
   the phone breakpoint. Rows retain their height throughout provider loading. */
@media (max-width: 1000px) {
  .s13-listening-host { --s13-dock-height: calc(154px + env(safe-area-inset-bottom,0px)); }
  .s13-listening-dock { grid-template-columns: minmax(0,1fr) 44px 44px; grid-template-rows: repeat(2,var(--s13-widget-height)); grid-template-areas: "identity next stop" "widget widget volume"; gap: 8px; padding-block: 10px calc(14px + env(safe-area-inset-bottom,0px)); }
  .s13-listening-identity { gap: 10px; }
  .s13-listening-copy { gap: 1px; }
  .s13-listening-title { font-size: 12px; }
  .s13-listening-widget { width: 100%; }
  .s13-listening-next > span { display: none; }
  .s13-listening-status { bottom: env(safe-area-inset-bottom,0px); right: var(--s13-gutter,20px); }
}
@media (max-width: 600px) {
  .s13-listening-volume,.s13-listening-volume[hidden] { display: none; }
  .s13-listening-dock { grid-template-areas: "identity next stop" "widget widget widget"; }
}
@media (max-width: 480px) {
  /* At phone widths the duplicate thumbnail leaves long artist names too
     little room beside two 44px controls. Keep the full linked identity. */
  .s13-listening-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .s13-listening-dock,.s13-listening-widget::before,.s13-listening-widget iframe,.s13-listening-next-glyph { transition: none; }
  .s13-mix-feature .s13-play-glitch { display: none; }
  .s13-listening-next:hover .s13-listening-next-glyph { transform: none; }
}