.listen{z-index:3;padding:clamp(70px,8vw,130px) 0;margin-top:-1px;overflow:hidden}
.listen-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,7vw,110px);align-items:center}
.listen-sleeve{position:relative;max-width:490px;justify-self:center;width:90%;padding:12px 12px 22px;background:var(--paper);color:var(--ink);transform:rotate(-5deg);box-shadow:12px 18px 0 #0003;animation:sleeve-sway 3s ease-in-out infinite alternate;animation-play-state:paused}
.listen-sleeve img{width:100%;height:auto}
.listen-sleeve-note{display:block;font-size:clamp(14px,1.4vw,20px);text-align:center;margin-top:18px}
.listen-stamp{position:absolute;right:-28px;top:-24px;z-index:1;padding:14px 18px;background:var(--brick);color:var(--paper);font-size:16px;line-height:1.3;transform:rotate(13deg);box-shadow:3px 4px 0 #0002}
.listen-copy{min-width:0}.listen-copy .eyebrow{font-size:14px}.listen h2{font-size:clamp(40px,4.8vw,76px);line-height:1.05}.listen-intro{font-size:clamp(17px,1.6vw,22px);margin:24px 0 32px}
.snippet-card{background:var(--paper);color:var(--ink);padding:clamp(20px,2.5vw,36px);box-shadow:7px 7px 0 #0003}
.snippet-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.snippet-kicker{font-size:14px;display:block;line-height:1.5}.snippet-heading h3{font-size:36px;margin:6px 0 0}.snippet-length{font-size:14px;white-space:nowrap;border-bottom:1px solid currentColor;padding-bottom:3px}
.snippet-wave{height:72px;margin-top:20px}.snippet-wave canvas{width:100%;height:100%;display:block}
.snippet-seek{display:block;width:100%;height:26px;margin:0;accent-color:var(--brick);cursor:ew-resize}.snippet-seek:focus-visible{outline:3px solid var(--brick);outline-offset:4px}
.snippet-time{display:flex;justify-content:space-between;font-size:14px;font-variant-numeric:tabular-nums}
.snippet-actions{display:flex;justify-content:space-between;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.snippet-actions button{min-height:48px;border:1px solid var(--ink);padding:12px 16px;font-size:16px;line-height:1.3;background:transparent}
#snippet-play{display:inline-flex;gap:14px;align-items:center;background:var(--ink);color:var(--paper)}
#snippet-play-icon{width:20px;text-align:center}#snippet-repeat[aria-pressed="true"]{background:var(--brick);border-color:var(--brick);color:var(--paper)}
.snippet-actions button:hover{box-shadow:3px 3px 0 #182a2433;transform:translateY(-1px)}
#snippet-status{font-size:14px;line-height:1.5;margin-top:16px;min-height:21px}
.listen-ticket{display:inline-block;font-size:16px;line-height:1.6;margin-top:26px;border-bottom:1px solid #eddbc477;padding-bottom:4px}
#snippet-audio{width:100%;margin-top:20px}.listen.is-playing .listen-sleeve{animation-play-state:running}
@keyframes sleeve-sway{from{transform:rotate(-5deg) translateY(0)}to{transform:rotate(-2deg) translateY(-6px)}}
.motion-paused .listen-sleeve{animation:none}
@media(prefers-reduced-motion:reduce){.listen-sleeve{animation:none}.snippet-actions button:hover{transform:none}}
@media(max-width:850px){.listen-layout{grid-template-columns:1fr;gap:50px}.listen-sleeve{max-width:330px;width:78%}.listen-copy{max-width:600px;width:100%;justify-self:center}.listen h2{font-size:clamp(38px,8vw,64px)}.listen-stamp{right:-18px;font-size:14px}.snippet-actions button{font-size:15px}.listen{padding-block:70px}.listen .eyebrow{font-size:14px}}
@media(max-width:380px){.snippet-length{display:none}.snippet-actions{align-items:stretch}.snippet-actions button{flex:1;padding-inline:10px}.snippet-card{padding:18px}.snippet-kicker{font-size:13px}}