/* La lente tipografica sulla pagina: una pagina di un libro inventato (The Slow Reader) su carta bianco caldo, in
   Roboto Flex, che ha gli assi del peso, della larghezza, della grandezza ottica e del grado. Le righe sono composte
   giustificate; lo script le gonfia lettera per lettera sotto una lente invisibile. */
:root {
  --carta: #f3efe6;      /* la pagina */
  --inchiostro: #191714; /* il testo */
  --tenue: #8d877c;      /* la testatina e il numero di pagina */
  --filo: #d6d0c4;       /* il filetto sotto la testatina */
  --accento: #d8431b;    /* la parola sotto il centro della lente */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  overflow: hidden;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Roboto Flex Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: none;
}

/* la pagina: una colonna da libro al centro, la misura la sceglie lo script (--col) */
.pagina {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--corpo, 24px) * 1.6);
  padding: 24px 16px;
}

.testa,
.folio {
  width: var(--col, 600px);
  color: var(--tenue);
  font-size: 12px;
  font-variation-settings: 'wght' 520, 'wdth' 112, 'opsz' 12;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.testa {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--filo);
}

.folio {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- il testo */
.testo {
  position: relative;
  width: var(--col, 600px);
  font-size: var(--corpo, 24px);
  line-height: 1.5;
}

/* la riga: le parole distribuite sulla giustezza come in una composizione giustificata; quando le lettere si
   gonfiano consumano prima gli spazi, poi la riga si allarga intorno alla lente (lo script la sposta) */
.riga {
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  will-change: transform;
}

.riga--ultima {
  justify-content: flex-start;
  gap: var(--spazio, 0.25em);
}

.parola {
  flex: none;
  transition: color 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.parola.is-sotto {
  color: var(--accento);
}

/* il testo intero per chi usa un lettore di schermo (le righe spezzate in lettere sono nascoste) */
.per-chi-legge {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* la misura iniziale: le parole scorrono come testo normale per sapere dove vanno a capo */
.misura {
  position: absolute;
  visibility: hidden;
  width: var(--col, 600px);
  font-size: var(--corpo, 24px);
  line-height: 1.5;
}