/* "Play me": a full-width night band of big type, driven by the voice. No pictures, no rounded frame. Nothing plays by itself.
   Everything in the controls has a fixed size, so nothing moves while the numbers change. */
.pm-play { margin: 0; padding: 0; }
.pm-stage {
  --pad: clamp(22px, 5.2vw, 84px);
  --p: 0;
  position: relative; isolation: isolate; overflow: hidden; width: 100%;
  min-height: clamp(620px, 92vh, 880px);
  color: #F7F2EA; background: #0A2421;
}
.pm-stage button, .pm-stage input { font: inherit; }

/* only colour moves in the background: three washes that cross-fade with the hour of the story */
.pm-sky { position: absolute; inset: 0; z-index: 0; }
.pm-sky i { position: absolute; inset: 0; opacity: 0; transition: opacity 2.6s ease; }
.pm-sky .pm-sky-night { opacity: 1; background: radial-gradient(60% 80% at 92% 6%, rgba(255, 233, 199, .09), transparent 62%), linear-gradient(170deg, #0A2421 0%, #0D332F 100%); }
.pm-sky .pm-sky-morning { background: radial-gradient(70% 80% at 6% 0%, rgba(255, 233, 199, .26), transparent 62%), linear-gradient(170deg, #12433D 0%, #246A5D 100%); }
.pm-sky .pm-sky-afternoon { background: radial-gradient(70% 80% at 96% 100%, rgba(242, 153, 74, .24), transparent 62%), linear-gradient(170deg, #153B34 0%, #3E5638 100%); }
.pm-stage[data-phase="morning"] .pm-sky-morning, .pm-stage[data-phase="afternoon"] .pm-sky-afternoon { opacity: 1; }

/* the big words: one phrase at a time, each word rising into place as it is spoken */
.pm-copy { position: absolute; z-index: 3; left: var(--pad); right: var(--pad); top: clamp(48px, 8vh, 84px); bottom: clamp(120px, 18vh, 160px); }
.pm-beat { position: absolute; left: 0; top: 50%; max-width: 100%; margin: 0; transform: translateY(-46%); opacity: 0; pointer-events: none;
  font-family: "Fraunces", "Fraunces fallback", Georgia, serif; font-weight: 560; line-height: .98; letter-spacing: -.028em; text-wrap: balance;
  transition: opacity .4s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.pm-s1 { font-size: clamp(4.2rem, 13vw, 12rem); }
.pm-s2 { font-size: clamp(3.3rem, 9.6vw, 9rem); }
.pm-s3 { font-size: clamp(2.6rem, 7.3vw, 6.8rem); }
.pm-beat.pm-on { opacity: 1; transform: translateY(-50%); transition-delay: .14s, 0s; }
.pm-beat.pm-past { transform: translateY(-60%); transition-duration: .2s, .5s; }
.pm-beat .pm-w { display: inline-block; opacity: 0; transform: translateY(.4em); transition: opacity .5s ease-out, transform .85s cubic-bezier(.2, .7, .2, 1); }
.pm-beat.pm-on .pm-w { opacity: 1; transform: none; }
.pm-beat .pm-w:nth-child(2) { transition-delay: .07s; } .pm-beat .pm-w:nth-child(3) { transition-delay: .14s; } .pm-beat .pm-w:nth-child(4) { transition-delay: .21s; }
.pm-beat .pm-w:nth-child(5) { transition-delay: .28s; } .pm-beat .pm-w:nth-child(6) { transition-delay: .35s; } .pm-beat .pm-w:nth-child(7) { transition-delay: .42s; }
.pm-beat .pm-w:nth-child(n+8) { transition-delay: .49s; }
.pm-beat em { font-style: italic; font-weight: 480; color: #F2994A; }

/* the first look: a huge title and the button */
.pm-idle { position: absolute; z-index: 4; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-52%); transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.pm-stage:not([data-state="idle"]) .pm-idle { opacity: 0; transform: translateY(-58%); pointer-events: none; visibility: hidden; transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1), visibility 0s .9s; }
.pm-eyebrow { margin: 0 0 clamp(14px, 2.4vh, 26px); color: #F2994A; font-size: .9rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.pm-idle h2 { margin: 0 0 clamp(28px, 5vh, 52px); max-width: 11ch; color: #F7F2EA; font-family: "Fraunces", "Fraunces fallback", Georgia, serif; font-weight: 560; font-size: clamp(3.6rem, 11.5vw, 10.5rem); line-height: .96; letter-spacing: -.03em; text-wrap: balance; }
.pm-idle h2 em { font-style: italic; font-weight: 480; color: #F2994A; }
.pm-playbtn { display: none; align-items: center; gap: 1.1rem; padding: 0; border: 0; background: none; color: #F7F2EA; cursor: pointer; text-align: left; }
.pm-ready .pm-playbtn { display: inline-flex; }
.pm-tri { display: grid; place-items: center; flex: none; width: clamp(68px, 8vw, 92px); height: clamp(68px, 8vw, 92px); border-radius: 50%; background: #F2994A; transition: transform .3s cubic-bezier(.2, .7, .2, 1); animation: pm-pulse 3.6s ease-in-out infinite; }
.pm-tri svg { width: 34%; height: 34%; margin-left: 6%; fill: #0A2421; }
.pm-label { font-family: "Fraunces", "Fraunces fallback", Georgia, serif; font-weight: 560; font-size: clamp(2rem, 4.4vw, 3.4rem); letter-spacing: -.02em; line-height: 1; }
.pm-len { display: block; margin-top: .5rem; font: 500 1rem/1 system-ui, sans-serif; letter-spacing: .04em; color: #9DB4AE; font-variant-numeric: tabular-nums; }
.pm-playbtn:hover .pm-tri { transform: scale(1.07); }
@keyframes pm-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 153, 74, .5); } 55% { box-shadow: 0 0 0 20px rgba(242, 153, 74, 0); } }
.pm-note { margin: clamp(18px, 3vh, 30px) 0 0; color: #7F9892; font-size: 1rem; }
.pm-play:not(.pm-ready) .pm-note::before { content: "Turn on scripts to see the words. "; }

/* the controls: fixed sizes, nothing here ever changes width */
.pm-deck { position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: clamp(24px, 5vh, 46px); display: flex; align-items: center; gap: 1.4rem; height: 56px; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.pm-stage:not([data-state="idle"]):not([data-state="ended"]):not([data-state="error"]) .pm-deck { opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
/* while it plays, the controls hide; they show when the mouse is over the band, a key has focus, or (on a phone) after a tap */
.pm-stage[data-state="playing"]:not(:hover):not(:focus-within):not(.pm-active) .pm-deck { opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.pm-stage[data-state="playing"] .pm-deck { transition: opacity .35s ease; }
.pm-round { position: relative; flex: none; width: 56px; height: 56px; padding: 0; border: 1.5px solid rgba(247, 242, 234, .5); border-radius: 50%; background: transparent; color: #F7F2EA; cursor: pointer; transition: background .2s ease; }
.pm-round:hover { background: rgba(247, 242, 234, .14); }
.pm-round svg { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; fill: currentColor; }
.pm-round .pm-i-play { display: none; margin-left: -7px; }
.pm-stage[data-state="paused"] .pm-round .pm-i-play { display: block; } .pm-stage[data-state="paused"] .pm-round .pm-i-pause { display: none; }
.pm-time { flex: none; width: 9.5ch; font-size: 1rem; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: #9DB4AE; white-space: nowrap; }
.pm-time b { display: inline-block; width: 4ch; text-align: right; color: #F7F2EA; font-weight: 600; }
.pm-seek { -webkit-appearance: none; appearance: none; flex: 1 1 auto; min-width: 80px; height: 28px; margin: 0; background: transparent; cursor: pointer; }
.pm-seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #F2994A 0, #F2994A calc(var(--p) * 100%), rgba(247, 242, 234, .22) calc(var(--p) * 100%)); }
.pm-seek::-moz-range-track { height: 3px; background: rgba(247, 242, 234, .22); }
.pm-seek::-moz-range-progress { height: 3px; background: #F2994A; }
.pm-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border: 0; border-radius: 50%; background: #F7F2EA; }
.pm-seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #F7F2EA; }
.pm-playbtn:focus-visible, .pm-round:focus-visible, .pm-seek:focus-visible, .pm-again:focus-visible { outline: 3px solid #F2994A; outline-offset: 4px; }

/* the end, and the error */
.pm-end, .pm-err { position: absolute; z-index: 5; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-46%); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .8s ease .3s, transform 1s cubic-bezier(.2, .7, .2, 1) .3s, visibility 0s 1.2s; }
.pm-stage[data-state="ended"] .pm-end, .pm-stage[data-state="error"] .pm-err { opacity: 1; pointer-events: auto; visibility: visible; transform: translateY(-50%); transition-delay: .3s, .3s, 0s; }
.pm-stage[data-state="ended"] .pm-copy { opacity: 0; transition: opacity .6s ease; }
.pm-end h3 { margin: 0 0 clamp(24px, 4vh, 44px); max-width: 12ch; font-family: "Fraunces", "Fraunces fallback", Georgia, serif; font-weight: 560; font-size: clamp(3.4rem, 10vw, 9rem); line-height: .96; letter-spacing: -.03em; color: #F7F2EA; }
.pm-end h3 em { font-style: italic; font-weight: 480; color: #F2994A; }
.pm-end .actions { margin: 0; }
.pm-end .button.quiet { background: transparent; color: #F7F2EA; border: 1px solid rgba(247, 242, 234, .5); box-shadow: none; }
.pm-end .button.quiet:hover { background: rgba(247, 242, 234, .12); }
.pm-again { margin-top: 1.4rem; padding: .5rem 0; border: 0; background: none; color: #C9D8D3; font-size: 1.05rem; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
.pm-err { color: #EAF1EE; font-size: 1.4rem; }

/* below the band: only the plain audio player for visitors without scripts */
.pm-noaudio { max-width: 1120px; margin: 1rem auto 0; }
.pm-noaudio audio { width: 100%; }
.pm-below { padding: 0 22px 1rem; }

/* phones: the words stay huge, the controls take two rows */
@media (max-width: 760px) {
  .pm-stage { min-height: 700px; }
  .pm-copy { top: 40px; bottom: 130px; }
  .pm-deck { flex-wrap: wrap; height: auto; row-gap: .3rem; bottom: 22px; }
  .pm-round { width: 52px; height: 52px; }
  .pm-time { width: 9ch; font-size: .95rem; }
  .pm-idle h2 { max-width: 9ch; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-play *, .pm-play *::before, .pm-play *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .pm-beat, .pm-beat.pm-on, .pm-beat.pm-past, .pm-beat .pm-w { transform: none !important; }
}