/* Lettere che saltano */
:root {
  --fondo: #07201f;
  --lettere: #f6f7f3;
  --tenue: #86a8a2;
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--lettere);
  overflow: hidden;
}
.palco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(20px, 6vw, 88px);
}
.sopra {
  margin: 0 0 clamp(14px, 3vh, 28px);
  font-size: 14px;
  font-weight: 620;
  color: var(--tenue);
}
.titolo {
  margin: 0;
  font-size: clamp(54px, 12.5vw, 210px);
  font-weight: 900;
  font-stretch: 112%;
  line-height: 0.92;
  letter-spacing: -0.04em;
  /* il dito può strisciare di lato sul titolo: la pagina scorre solo in verticale */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.riga {
  display: block;
}
/* le lettere saltano fuori dalla riga: niente maschere */
.lettera {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform;
}
.sotto {
  max-width: 40ch;
  margin: clamp(18px, 4vh, 36px) 0 0;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.45;
  color: #c9dcd8;
}