.about-control {
  position: fixed;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font: 400 19px Arial, sans-serif;
  letter-spacing: .1em;
  z-index: 60;
}
#about-open { font-size: 40px; color: rgb(255 255 255 / 80%); }
.about-control:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
html.about-active, html.about-active body { overflow: hidden; overscroll-behavior: none; }
.about-active .a-nav, .about-active .navdots { visibility: hidden !important; }

#about {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  overflow: hidden;
  touch-action: none;
  background: #222 url('assets/about.jpg') left bottom / cover no-repeat;
  color: #fff;
}
#about::backdrop { background: transparent; }
#about-close { display: grid; place-items: center; }
#about-close svg { opacity: .2784313725490196; }
#about .composition { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#about .phrase { opacity: 0; }
#about.about-playing .phrase {
  animation: about-emerge 2000ms cubic-bezier(.42, 0, .58, 1) var(--delay) 1 both;
}
@keyframes about-emerge {
  from { opacity: 0; }
  to { opacity: var(--final-opacity); }
}
.about-mobile { display: none; }

@media (max-width: 720px) {
  #about-close svg { opacity: .92; }
  #about {
    /* Inquadratura provvisoria da approvare. */
    --about-mobile-crop: 42% 50%;
    background-position: var(--about-mobile-crop);
  }
  #about .composition { display: none; }
  #about .about-mobile {
    position: absolute;
    inset: max(24px, 6%) 20px max(72px, 12%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font: 400 clamp(14px, min(4.5vw, 3.8svh), 25px)/1.12 Arial, sans-serif;
  }
  #about .about-mobile .phrase { --final-opacity: .92; }
  #about .about-mobile .phrase:nth-child(4n + 2) { align-self: flex-end; }
  #about .about-mobile .phrase:nth-child(4n + 3) { margin-left: 8%; }
}