/* La frase che si ricompone */
:root {
  --carta: #eef3ef;
  --inchiostro: #07201f;
  --tenue: #5b706d;
  --accento: #d9602a;
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--inchiostro);
  background: var(--carta);
  overflow-x: clip;
}
.sopra {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 620;
  color: var(--tenue);
}
.grande {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.apertura,
.coda {
  min-height: 70vh;
  padding: 12vh clamp(18px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.coda {
  justify-content: center;
}

.corsa {
  height: 280vh;
}
.palco {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  padding: 0 clamp(18px, 6vw, 96px);
  overflow: clip;
}
.frase {
  margin: 0;
  max-width: 17ch;
  font-size: clamp(34px, 6.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-align: center;
}
/* ogni parola ha i suoi assi: larghezza e peso del carattere variabile */
.parola {
  display: inline-block;
  --w: 100;
  --g: 640;
  font-variation-settings: 'wdth' var(--w), 'wght' var(--g);
  will-change: transform;
}