.about-story-finale {
  position: fixed;
  z-index: 4;
  inset: auto 0 clamp(62px, calc(12svh - 18px), 102px);
  height: 208px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-sizing: content-box;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 100%, 0);
  transition: opacity 220ms ease, transform 420ms cubic-bezier(.22, 1, .36, 1), visibility 0s 420ms;
}
.about-story-finale.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: opacity 400ms ease, transform 720ms cubic-bezier(.22, 1, .36, 1), visibility 0s;
}
.about-story-finale > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.about-finale-ribbon { fill: #ffab32; stroke: none; }
.about-finale-text { fill: #17120b; font-family: inherit; font-size: 32px; font-weight: 500; letter-spacing: -.025em; }
.about-finale-measure { visibility: hidden; }
.about-finale-still { display: none; }
@media (max-width: 767px) {
  .about-story-finale {
    height: 128px;
    bottom: clamp(18px, calc(24svh - 138px), 78px);
  }
  .about-finale-text { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-story-finale,
  .about-story-finale.is-visible { transform: none; transition: none; }
  .about-story-finale > svg { display: none; }
  .about-finale-still {
    display: grid;
    place-content: center;
    height: 100%;
    margin: 0;
    padding: 16px 32px;
    box-sizing: border-box;
    color: var(--heading);
    font-size: 20px;
    line-height: 1.4;
    text-align: center;
  }
}