:root {
  --carta: #f3f0e8;       /* il fondo, bianco caldo */
  --inchiostro: #161514;  /* le lettere e le righe */
  --grigio: #8d877c;      /* le scritte piccole */
  --foglio: #e7e2d6;      /* i fogli sotto, quando la lettera si apre */
  --accento: #d8432b;     /* il vermiglio del dorso che si apre */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  position: relative;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 3.4vh, 34px) clamp(16px, 4vw, 44px);
}

.testa, .piede {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(11px, 1.6vh, 14px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.marchio { font-weight: 700; letter-spacing: 0.14em; }
.nota, .piede { color: var(--grigio); }
.piede { justify-content: center; }

.palco {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(8px, 2.2vh, 22px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.parola {
  display: flex;
  align-items: flex-end;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 300;
  font-size: min(21vw, 30vh);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ogni lettera è un piccolo blocco di fogli rilegati sul lato sinistro */
.lettera {
  position: relative;
  display: inline-block;
  perspective: 900px;
  perspective-origin: 0% 50%;
}

.lettera__misura {
  visibility: hidden;
  display: inline-block;
}

.foglio {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 0% 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.foglio--sotto { color: var(--foglio); }

.dorso {
  position: absolute;
  left: -0.02em;
  top: 18%;
  bottom: 8%;
  width: 1px;
  background: var(--accento);
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.riga {
  position: relative;
  display: flex;
  align-items: center;
  width: min(86vw, 120vh);
  height: 9px;
}

.filo {
  flex: 1;
  height: 1px;
  background: var(--inchiostro);
  transform-origin: 50% 50%;
}

.tacca {
  width: 1px;
  height: 9px;
  background: var(--inchiostro);
}

.conta {
  font-size: clamp(11px, 1.6vh, 13px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grigio);
}

.conta b {
  display: inline-block;
  min-width: 2ch;
  color: var(--inchiostro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-height: 520px) {
  .parola { font-size: min(21vw, 26vh); }
}