/* ---------- 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}

.ls-series{display:inline-block;margin:-.4rem 0 1rem;font-family:var(--ui);font-size:.92rem;color:var(--ink-3)}
.ls-series span{font-weight:600;color:var(--teal-d);text-decoration:underline;text-underline-offset:3px}
.ls-welcome{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1.5px solid transparent;
  border-image:linear-gradient(to right,transparent,var(--gold) 20%,var(--gold) 80%,transparent) 1}
.ls-welcome .ls-btn{gap:.6rem;padding-left:.5rem;margin:0}
.ls-welcome .ls-btn .ls-dot{background:rgba(255,255,255,.18)}
.ls-welcome .ls-btn small{color:rgba(255,255,255,.8);font-weight:500}
.ls-wnote{font-family:var(--body);font-style:italic;font-size:.98rem;color:var(--ink-2)}
.ls-wy{margin-left:.5rem}
.ls-springs{text-align:center;padding-bottom:0!important}
.ls-springs .lede{margin:0 auto 1rem;max-width:560px}
.ls-springs [data-listen]{gap:.6rem}
[data-listen][hidden],.ls-wy[hidden]{display:none!important}
/* home page: a Listen link in the hero, beside "Read the first passage" */
.hf-links{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;align-self:flex-start}
.hf-listen::before{content:"";display:inline-block;width:0;height:0;border-left:7px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-right:.4rem;vertical-align:1px}
@media(max-width:860px){.hf-links{justify-content:center;align-self:center}}
/* home page: the Listen section */
.home-listen .sec-head{text-align:center;max-width:680px;margin:0 auto}
.home-listen .lede{margin-top:.8rem}
.hl-list{list-style:none;max-width:980px;margin:2.2rem auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem}
@media(max-width:760px){.hl-list{grid-template-columns:1fr}}
.hl-list li{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.92);border-radius:var(--r-sm);box-shadow:var(--shadow);padding:.55rem .7rem .55rem .6rem;min-width:0}
.hl-t{flex:1;min-width:0;display:flex;align-items:center;gap:.8rem;min-height:44px}
.hl-n{width:34px;height:34px;border-radius:50%;border:2px solid var(--teal-l);background:#fff;display:grid;place-items:center;font-family:var(--ui);font-weight:600;font-size:.85rem;color:var(--teal-d);flex:none}
.hl-tx{display:flex;flex-direction:column;min-width:0;font-family:var(--display);font-style:italic;font-size:1.08rem;line-height:1.25;color:var(--navy)}
.hl-tx small{font-family:var(--ui);font-style:normal;font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:.1rem}
.hl-t:hover .hl-tx{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.hl-play{display:inline-flex;align-items:center;gap:.45rem;border:0;background:var(--gold-bg);border-radius:999px;padding:.35rem .8rem .35rem .4rem;min-height:42px;font-family:var(--ui);font-weight:600;font-size:.88rem;color:var(--navy);flex:none;font-variant-numeric:tabular-nums}
.hl-play:hover{background:#efe2c8}
.hl-play .ls-dot{width:28px;height:28px}
.hl-ctas{justify-content:center;margin-top:1.8rem}