/* I caratteri strappati */
:root {
  --carta: #EEEBE3;
  --inchiostro: #15140F;
  --ciano: #1D48A5;
  --tenue: #57534A;
  --margine: clamp(18px, 3.4vw, 48px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  background: var(--carta);
}
body {
  color: var(--inchiostro);
  font-family: 'Archivo Variable', system-ui, sans-serif;
}

/* ---------------------------------------------------------------- il palco: una schermata sola */
.palco {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: space-between;
  height: var(--alto);
  min-height: 460px;
  padding: var(--margine);
  overflow: hidden;
  /* sul telefono il dito disegna invece di scorrere: la pagina è alta una schermata */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.campo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.testa,
.piede {
  position: relative;
}

.maschera {
  display: block;
  overflow: hidden;
}
.maschera > span {
  display: block;
}

/* ---------------------------------------------------------------- in alto */
.testa {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.testa__riga {
  margin: 0;
  font-size: clamp(0.84rem, 0.78rem + 0.22vw, 1rem);
  font-weight: 620;
  font-stretch: 88%;
  line-height: 1.25;
}
.testa__riga--destra {
  text-align: right;
}

/* ---------------------------------------------------------------- in basso: il titolo e il lato */
.piede {
  align-self: end;
  display: grid;
  grid-template-columns: auto minmax(0, 25rem);
  justify-content: space-between;
  align-items: end;
  gap: clamp(18px, 3vw, 48px);
}
.titolo {
  margin: 0 0 -0.08em -0.04em;
  font-size: clamp(7rem, 2rem + 24vw, 27rem);
  font-weight: 820;
  font-stretch: 62%;
  line-height: 0.8;
  letter-spacing: -0.012em;
}
.titolo .maschera {
  /* le lettere salgono da sotto: la maschera tiene anche le discendenti e gli accenti */
  padding: 0.04em 0.02em 0.06em;
  margin: -0.04em -0.02em -0.06em;
}
.piede__lato {
  display: grid;
  gap: 18px;
  padding-bottom: 0.6em;
}
.sottotitolo {
  margin: 0;
  font-size: clamp(1.05rem, 0.9rem + 0.55vw, 1.45rem);
  font-weight: 560;
  font-stretch: 92%;
  line-height: 1.22;
  text-wrap: pretty;
}
.nota {
  margin: 0;
  max-width: 36ch;
  color: var(--tenue);
  font-size: clamp(0.84rem, 0.8rem + 0.16vw, 0.95rem);
  line-height: 1.4;
}

@media (max-width: 760px) {
  .piede {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .titolo {
    order: 2;
    margin-bottom: 0;
    font-size: clamp(6rem, 37vw, 12rem);
  }
  .piede__lato {
    order: 1;
    padding-bottom: 0;
  }
  .testa {
    flex-direction: column;
    gap: 0.35rem;
  }
  .testa__riga--destra {
    text-align: left;
  }
}