/* Titoli che vengono a fuoco */
:root {
  --fondo: #f6f7f3;
  --inchiostro: #07201f;
  --tenue: #5b706d;
}

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

/* ogni capitolo è alto uno schermo e mezzo: il titolo ha il tempo di mettere a fuoco e salire */
.capitolo {
  min-height: 150vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 0 clamp(18px, 5vw, 72px);
  text-align: center;
}
.titolo {
  margin: 0;
  font-size: clamp(56px, 11vw, 190px);
  font-weight: 820;
  font-stretch: 75%;
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  will-change: transform, filter, opacity;
}
.sottotitolo {
  max-width: 32ch;
  margin: 0;
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.45;
  color: var(--tenue);
  will-change: transform;
}
.citazione {
  min-height: 110vh;
  display: grid;
  place-items: center;
  padding: 0 clamp(18px, 8vw, 140px);
}
blockquote {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(28px, 4vw, 60px);
  font-weight: 300;
  font-stretch: 118%;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  will-change: filter, opacity;
}