/* ---------- Listen: Amal Lana reads the Water Teaches (one listening card, used site-wide) ---------- */
.ls-chip{position:absolute;z-index:4;right:6%;top:50%;display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.05rem .55rem .55rem;border-radius:999px;border:0;
  background:rgba(251,247,238,.94);color:var(--navy);font-family:var(--ui);font-weight:600;font-size:.98rem;box-shadow:0 2px 6px rgba(12,38,68,.12),0 12px 30px rgba(12,38,68,.22);backdrop-filter:blur(6px)}
.ls-chip small{font-weight:500;color:var(--ink-3)}
.ls-chip:hover{background:#fff}
.ls-dot{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none;position:relative}
.ls-chip .ls-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(18,53,91,.35);animation:lsPulse 2.8s ease-out infinite}
@keyframes lsPulse{0%{transform:scale(.85);opacity:1}100%{transform:scale(1.45);opacity:0}}
@media(max-width:860px){.ls-chip{right:auto;left:50%;transform:translateX(-50%);top:calc(min(82vw,480px) - 68px);white-space:nowrap}}
.ls-link{display:inline-flex;align-items:center;gap:.45rem;border:0;background:none;padding:.35rem 0;min-height:40px;font-family:var(--ui);font-weight:600;font-size:.92rem;color:var(--teal-d)}
.ls-link .ls-dot{width:26px;height:26px}
.ls-link small{font-weight:500;color:var(--ink-3)}
.ls-link:hover span:not(.ls-dot){text-decoration:underline;text-underline-offset:3px}
.tw-teach .ls-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;margin-bottom:.2rem}
.tw-teach .ls-head .lab{margin:0}
.ls-after-line{text-align:center;margin-top:1.4rem}
/* the listening card */
.ls-modal{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:1.2rem;background:rgba(12,38,68,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.ls-modal.open{opacity:1}
.ls-card{position:relative;width:min(720px,100%);max-height:calc(100vh - 2.4rem);overflow:auto;background:var(--paper) url(/assets/brand/paper-tile.webp);border-radius:18px;
  box-shadow:0 30px 80px rgba(12,38,68,.35);padding:1.6rem 1.8rem 1.8rem;transform:translateY(14px);transition:transform .3s}
.ls-modal.open .ls-card{transform:none}
.ls-x{position:absolute;top:.7rem;right:.7rem;width:44px;height:44px;border-radius:50%;border:0;background:rgba(18,53,91,.07);color:var(--navy);font-size:1.4rem;line-height:1}
.ls-x:hover{background:rgba(18,53,91,.13)}
.ls-card .eyebrow{margin-bottom:.35rem;padding-right:3rem}
.ls-card h2{font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,3.4vw,1.9rem);line-height:1.15;margin:0 3rem .9rem 0;color:var(--navy)}
.ls-frame{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:8px;overflow:hidden;background:#0c2644;margin:6px;
  box-shadow:0 0 0 6px #fff,0 2px 4px rgba(18,53,91,.08),0 18px 44px rgba(18,53,91,.18)}
.ls-frame>*{position:absolute;inset:0;width:100%;height:100%;border:0}
.ls-frame img{object-fit:cover;transform-origin:72% 45%;transition:transform 30s linear}
.ls-frame.playing img{transform:scale(1.07)}
.ls-big{display:grid;place-items:center;background:transparent;border:0}
.ls-big span{width:78px;height:78px;border-radius:50%;background:rgba(251,247,238,.94);display:grid;place-items:center;box-shadow:0 8px 26px rgba(12,38,68,.3)}
.ls-frame.playing .ls-big{display:none}
.ls-ctrl{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0 .9rem;font-family:var(--ui);font-size:.9rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.ls-pp{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none;border:0}
.ls-bar{flex:1;min-width:0;height:6px;border-radius:3px;background:rgba(18,53,91,.14);position:relative;cursor:pointer}
.ls-bar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:var(--teal)}
.ls-words{font-family:var(--display);font-style:italic;font-size:1.22rem;line-height:1.6;color:var(--navy);margin:0;background:var(--gold-bg);border-radius:var(--r-sm);padding:1rem 1.2rem}
.ls-words .ls-l{color:rgba(18,53,91,.42);transition:color .4s,box-shadow .4s}
.ls-words .ls-l.on{color:var(--navy);box-shadow:inset 0 -.42em 0 rgba(200,148,45,.24)}
.ls-words .ls-l.done{color:var(--navy)}
.ls-end{display:none;text-align:center;margin-top:1rem}
.ls-end.show{display:block}
.ls-end .divider{margin:.3rem auto .8rem}
.ls-end p{font-family:var(--body);font-style:italic;color:var(--ink-2);font-size:1.05rem;margin:0 0 .9rem}
.ls-end .ls-acts{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.ls-end .ls-acts .pill{margin:0}
@media(max-width:600px){
  .ls-modal{place-items:end stretch;padding:0}
  .ls-card{width:100%;max-height:94vh;border-radius:18px 18px 0 0;padding:1.3rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom,0px));transform:translateY(40px)}
  .ls-end .ls-acts .pill{flex:1 1 100%;max-width:none}
}
@media(prefers-reduced-motion:reduce){.ls-modal,.ls-card,.ls-frame img{transition:none}.ls-frame.playing img{transform:none}.ls-chip .ls-dot::after{animation:none}}
/* ---------- the Listen page (/listen) ---------- */
.lp-player{max-width:820px;margin:0 auto 2.6rem;background:rgba(255,255,255,.94);border-radius:var(--r);box-shadow:var(--shadow-lift);padding:1.4rem 1.5rem 1.6rem}
.lp-player .ls-frame{margin:6px 6px 0}
.lp-now{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap;margin:1.3rem 0 .2rem}
.lp-now .pn{font-family:var(--ui);font-weight:600;font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-ink)}
.lp-now h2{font-family:var(--display);font-weight:700;font-size:1.45rem;line-height:1.2;margin:0;color:var(--navy);flex-basis:100%}
.lp-now .lp-count{font-family:var(--ui);font-size:.88rem;color:var(--ink-3)}
.lp-ctrl{display:flex;align-items:center;gap:.7rem;margin:1rem 0;font-family:var(--ui);font-size:.9rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lp-skip{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--navy);display:grid;place-items:center;flex:none}
.lp-skip:hover{border-color:var(--navy)}
.lp-opts{display:flex;justify-content:space-between;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;margin-top:1rem;font-family:var(--ui);font-size:.92rem;color:var(--ink-2)}
.lp-loop{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;min-height:44px}
.lp-loop input{width:20px;height:20px;accent-color:var(--navy)}
.lp-opts small{color:var(--ink-3)}
.lp-start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;background:linear-gradient(0deg,rgba(12,38,68,.55),rgba(12,38,68,.15));border:0;color:#fff;font-family:var(--ui);font-weight:600;font-size:1.05rem}
.lp-start span{width:84px;height:84px;border-radius:50%;background:rgba(251,247,238,.95);display:grid;place-items:center;box-shadow:0 8px 26px rgba(12,38,68,.3)}
.river .tw.lp-item .tw-head{position:relative}
.river .tw.lp-item .meta .tog{display:inline-flex;align-items:center;gap:.4rem}
.river .tw.lp-item .ls-dot{width:26px;height:26px}
.river .tw.lp-item .ep{font-style:italic}
.river .tw.lp-cur .tw-card{box-shadow:0 0 0 2px var(--navy),var(--shadow-lift)}
.river .tw.lp-cur .tw-n{background:var(--navy);border-color:var(--navy);color:#fff}
.river .tw.lp-done .tw-n{background:var(--mist);border-color:var(--teal-l)}
.lp-end{display:none;max-width:820px;margin:0 auto 2rem;text-align:center}
.lp-end.show{display:block}