/* essay narration ("Listen") styles */
.listen-box{ display:flex; align-items:center; gap:16px; margin:0 0 clamp(34px,5vh,52px);
  padding:16px 18px; background:var(--card,#ece2cb); border:1px solid var(--line,rgba(58,44,24,0.26));
  border-radius:4px; }
.listen-btn{ flex:none; width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:var(--ink,#2b2316); color:var(--paper-lift,#efe7d3); display:grid; place-items:center;
  transition:background .18s, transform .05s; }
.listen-box.is-playing .listen-btn,
.listen-btn:hover{ background:var(--sanguine-2,#7e3a20); }
.listen-btn:active{ transform:scale(0.95); }
.listen-meta{ flex:1; min-width:0; }
.listen-label{ font-family:var(--fell-sc,"IM Fell English SC",Georgia,serif); text-transform:uppercase;
  letter-spacing:0.2em; font-size:12px; color:var(--ink,#2b2316); }
.listen-sub{ font-family:var(--fell,"IM Fell English",Georgia,serif); font-style:italic;
  font-size:13px; color:var(--ink-3,#756443); margin-top:3px; }
.listen-bar{ height:3px; border-radius:3px; background:var(--line-2,rgba(58,44,24,0.13)); margin-top:10px; overflow:hidden; }
.listen-fill{ display:block; height:100%; width:0%; background:var(--sanguine,#9d4a2b); transition:width .35s ease; }
.listen-disabled{ opacity:0.7; }
.essay-wrap p.reading{ background:rgba(157,74,43,0.05); border-radius:4px; transition:background .3s; }
.essay-wrap p .w{ border-radius:3px; transition:background .12s ease, box-shadow .12s ease; }
.essay-wrap p .w.word-on{ background:rgba(157,74,43,0.20); box-shadow:0 0 0 1px rgba(157,74,43,0.12); color:var(--ink,#2b2316); }