/* Butterfly: Listen page.
   Used on: /butterfly/listen/.
   Forum Homini website, editable IIS version v016 20261109 081746. Generated with Claude Opus 5.5. */
.ls[data-c-butterfly-listen-page] {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ls__fig[data-c-butterfly-listen-page] {
  position: relative;
  inline-size: fit-content;
  max-inline-size: 100%;
  margin: 0 auto;
  line-height: 0;
}
/* the whole photo (4:3), as big as fits, its box exactly the picture so the bars sit on its foot */
.ls__img[data-c-butterfly-listen-page] {
  display: block;
  inline-size: min(100vw, 58svh * 4 / 3, 70rem);
  block-size: auto;
  margin: 0 auto;
}
/* the voice bars on the foot of the photo, over a soft dark fade */
.ls__foot[data-c-butterfly-listen-page] {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 20px env(safe-area-inset-bottom);
  text-align: center;
}
.ls__h[data-c-butterfly-listen-page] {
  margin: 0;
  font:
    600 clamp(2.1rem, 1.6rem + 2vw, 3rem) / 1.05 "Cormorant Garamond",
    Georgia,
    serif;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ls__sub[data-c-butterfly-listen-page] {
  margin: -4px 0 4px;
  max-inline-size: 26ch;
  font:
    italic 500 1.2rem / 1.3 "Cormorant Garamond",
    Georgia,
    serif;
  font-variant-numeric: lining-nums;
  color: #f6efe4;
}
/* the player on the photo's foot, over a deep fade so the gold stands out */
.ls__player[data-c-butterfly-listen-page] {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 10px;
  padding: 56px 16px 14px;
  background:
    linear-gradient(
      to bottom,
      transparent,
      rgb(0 0 0 / 0.55) 40%,
      rgb(0 0 0 / 0.85));
  line-height: 1.2;
}
/* the bars from the left edge to the right, tall, in the name's bright gold with a soft glow */
.ls__bars[data-c-butterfly-listen-page] {
  display: flex;
  align-items: center;
  gap: 3px;
  block-size: clamp(56px, 9vw, 84px);
  filter: drop-shadow(0 0 6px rgb(243 215 146 / 0.55));
}
.ls__bars[data-c-butterfly-listen-page] span[data-c-butterfly-listen-page] {
  --h: 0.2;
  flex: 1;
  block-size: 100%;
  border-radius: 3px;
  background:
    linear-gradient(
      180deg,
      #fff6dc,
      #f3d792 45%,
      #e2b65f);
  transform: scaleY(var(--h));
  transition: transform 70ms linear;
}
.ls__row[data-c-butterfly-listen-page] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.ls__play[data-c-butterfly-listen-page] {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(
      180deg,
      #fff3cf,
      #f3d792 40%,
      #c9953f 85%);
  color: #1d1405;
  cursor: pointer;
}
.ls[data-c-butterfly-listen-page]:not([data-playing]) .ls__play[data-c-butterfly-listen-page] {
  animation: ls-pulse 2s ease-out infinite;
}
.ls__name[data-c-butterfly-listen-page] {
  margin: 0;
  font:
    600 0.85rem "Instrument Sans Variable",
    "Instrument Sans",
    -apple-system,
    "Helvetica Neue",
    Arial,
    sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f3d792;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.8);
}

.ls__play[data-c-butterfly-listen-page] svg[data-c-butterfly-listen-page] {
  fill: currentColor;
}
.ls__i-pause[data-c-butterfly-listen-page],
.ls[data-c-butterfly-listen-page][data-playing] .ls__i-play[data-c-butterfly-listen-page] {
  display: none;
}
.ls[data-c-butterfly-listen-page][data-playing] .ls__i-pause[data-c-butterfly-listen-page] {
  display: inline;
}
.ls__by[data-c-butterfly-listen-page] {
  margin: 0;
  font:
    600 0.8rem "Instrument Sans Variable",
    "Instrument Sans",
    -apple-system,
    "Helvetica Neue",
    Arial,
    sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e6c27a;
}
.ls__read[data-c-butterfly-listen-page] {
  margin: 4px 0 0;
}
/* Version 5: the way to the website, small, under Read the story */
.ls__home[data-c-butterfly-listen-page] {
  margin-block-start: 10px;
}
.ls__home[data-c-butterfly-listen-page] a[data-c-butterfly-listen-page],
.ls__home[data-c-butterfly-listen-page] a[data-c-butterfly-listen-page]:visited {
  font-size: 0.9rem;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.ls__read[data-c-butterfly-listen-page] a[data-c-butterfly-listen-page],
.ls__read[data-c-butterfly-listen-page] a[data-c-butterfly-listen-page]:visited {
  color: #f3d792;
  font:
    400 1rem -apple-system,
    "Helvetica Neue",
    Arial,
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ls__play[data-c-butterfly-listen-page]:focus-visible,
.ls__read[data-c-butterfly-listen-page] a[data-c-butterfly-listen-page]:focus-visible {
  outline: 2px solid #f3d792;
  outline-offset: 3px;
}