/* Il manifesto che si sbriciola */
:root {
  --fondo: #000;
  --testo: #F3F2EE;
  --tenue: #8E8E8E;
  --margine: clamp(18px, 4.5vw, 64px);
  --schermo: 100vh;
}
@supports (height: 100svh) {
  :root { --schermo: 100svh; }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  color: var(--testo);
  background: var(--fondo);
}

.apertura {
  display: grid;
  align-content: end;
  gap: 20px;
  min-height: var(--schermo);
  padding: var(--margine);
}
.apertura__titolo {
  margin: 0;
  font-size: clamp(3rem, 1rem + 7vw, 8.5rem);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
}
.apertura__testo {
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem);
  line-height: 1.4;
}

/* ------------------------------------------------------------------ il palco fermo */
.manifesto {
  position: relative;
  height: calc(var(--schermo) * 2.6);
}
.manifesto__palco {
  position: sticky;
  top: 0;
  height: var(--schermo);
  overflow: hidden;
}
.blocco {
  position: absolute;
  left: var(--x);
  top: var(--y);
  margin: 0;
  font-size: clamp(1.05rem, 0.6rem + 2.1vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.blocco--rumore {
  color: var(--tenue);
}
/* la frase che si scrive al centro */
.frase {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 13ch);
  margin: 0;
  translate: -50% -50%;
  font-size: clamp(2.4rem, 1rem + 5.4vw, 6.6rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-align: center;
}
/* ogni lettera tiene la sua larghezza anche quando cambia segno (lo script la fissa in em) */
.segno {
  text-align: center;
}

.chiusura {
  display: grid;
  align-content: center;
  min-height: var(--schermo);
  padding: var(--margine);
}
.chiusura p {
  margin: 0;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* telefono: meno frasi, tutte dal margine sinistro */
@media (max-width: 640px) {
  .blocco {
    left: var(--margine);
    top: var(--yt, var(--y));
    font-size: max(14px, 1.05rem);
  }
  .blocco--largo {
    display: none;
  }
  .frase {
    font-size: clamp(2.2rem, 1rem + 7vw, 3.4rem);
  }
}