/* Listen to this article: the button in the essay title area and a player docked at the bottom, in the journal's paper style. */
.listen-btn { margin-top: var(--s-4, 16px); display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 7px; border-radius: 999px; border: 1.5px solid #171717;
  background: #FBF6EA; color: #171717; font: 700 1rem/1 "Inter", system-ui, sans-serif; cursor: pointer; box-shadow: 0 2px 0 rgba(23, 23, 23, .12); transition: transform .2s cubic-bezier(.22, .61, .36, 1); }
.listen-btn[hidden] { display: none; }
.listen-btn:hover { transform: translateY(-1px); }
.listen-btn:focus-visible { outline: 3px solid #214EAD; outline-offset: 3px; }
.listen-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #F04B2F; color: #171717; }
.listen-ic svg { width: 14px; height: 14px; margin-left: 2px; }
.listen-len { font-weight: 400; color: #3a3a3a; }

.listen-bar { position: fixed; z-index: 69; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); width: min(400px, calc(100vw - 36px)); padding: 12px 14px 10px; border-radius: 6px;
  background: #FBF6EA; color: #171717; border: 1.5px solid #171717; box-shadow: 0 2px 3px rgba(23, 23, 23, .12), 0 24px 50px -22px rgba(12, 22, 44, .55);
  font-family: "Inter", system-ui, sans-serif; opacity: 0; transform: translateY(16px); transition: opacity .3s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1); }
.listen-bar[hidden] { display: none; }
.listen-bar.on { opacity: 1; transform: none; }
.listen-top { display: flex; align-items: center; gap: 12px; }
.listen-top img { width: 64px; height: 36px; border-radius: 3px; object-fit: cover; flex: none; }
.listen-meta { min-width: 0; flex: 1; }
.listen-k { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 12px/1 "Inter", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #B02E18; }
.listen-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F04B2F; animation: lnPulse 1.6s ease-in-out infinite; }
.listen-bar.paused .listen-k::before { animation: none; opacity: .5; }
@keyframes lnPulse { 50% { opacity: .35; } }
.listen-t { margin: 5px 0 0; font: 900 16px/1.25 "Fraunces", Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.listen-x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(23, 23, 23, .3); background: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.listen-track { position: relative; margin: 12px 0 8px; height: 6px; border-radius: 999px; background: rgba(23, 23, 23, .12); cursor: pointer; }
.listen-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #F04B2F; transition: width .4s; }
.listen-ctl { display: flex; align-items: center; gap: 6px; }
.listen-time { flex: 1; font: 600 13px/1 "Inter", system-ui, sans-serif; color: #3a3a3a; font-variant-numeric: tabular-nums; }
.listen-b { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #171717; display: grid; place-items: center; cursor: pointer; }
.listen-b svg { width: 18px; height: 18px; }
.listen-play { width: 44px; height: 44px; background: #F04B2F; color: #171717; }
.listen-play .i-play, .listen-bar.paused .listen-play .i-pause { display: none; }
.listen-bar.paused .listen-play .i-play { display: inline; }
.listen-rate { min-width: 48px; height: 36px; padding: 0 8px; border-radius: 999px; border: 1.5px solid rgba(23, 23, 23, .3); background: transparent; color: #171717; font: 700 14px/1 "Inter", system-ui, sans-serif; cursor: pointer; }
.listen-bar button:focus-visible, .listen-track:focus-visible { outline: 3px solid #214EAD; outline-offset: 2px; }
.listen-note { margin: 6px 0 0; font-size: 12px; color: #5a5a5a; }
/* The paragraph being read gets a soft highlight, only while listening */
.listen-now { background: rgba(237, 183, 45, .22); box-shadow: 0 0 0 8px rgba(237, 183, 45, .22); border-radius: 3px; transition: background .4s, box-shadow .4s; }
@media (max-width: 560px) { .listen-bar { left: 12px; right: 12px; width: auto; bottom: max(12px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .listen-bar, .listen-btn, .listen-fill { transition: none; } .listen-k::before { animation: none; } }
@media print { .listen-btn, .listen-bar { display: none !important; } }