/* La parola di cera che si scioglie: un bianco caldo, una parola grande di cera avorio e un solo accento ambra, la
   fiamma. Tutto in Fraunces, che ha l'asse della morbidezza (SOFT): vicino alla fiamma le lettere si ammorbidiscono. */
:root {
  --carta: #f4f0e7;                       /* il fondo */
  --cera: #efe5d0;                        /* la cera fredda */
  --cera-calda: #f6d9a6;                  /* la cera vicino alla fiamma */
  --inchiostro: #1c1a17;                  /* le scritte piccole e la mensola */
  --tenue: #8d8579;                       /* le scritte secondarie */
  --accento: #e07a2c;                     /* l'ambra della fiamma e della cera che cola */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  --margine: clamp(16px, 4.4vw, 60px);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100svh;
  min-height: 320px;
  max-height: 100vh;
  padding: clamp(14px, 3vw, 34px) var(--margine);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: none;
}

/* la parola vera, per chi legge con un lettore di schermo: si vede solo di cera */
.parola {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.scena {
  align-self: center;
  justify-self: center;
  display: block;
  width: min(92vw, calc((100svh - 120px) * 1.6667));
  height: auto;
  overflow: visible;
}

.mensola {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.32;
  vector-effect: non-scaling-stroke;
}

.fiamma {
  pointer-events: none;
}

.fiamma__cuore {
  fill: #fffaf0;
  opacity: 0.85;
}

.testa,
.piede {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.piede {
  align-self: end;
}

.marchio,
.stato,
.nota {
  margin: 0;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.01em;
  font-variation-settings: 'SOFT' 50, 'opsz' 14;
}

.marchio {
  font-weight: 600;
  font-size: clamp(14px, 1.3vw, 18px);
  letter-spacing: -0.01em;
}

.stato__nome,
.nota {
  color: var(--tenue);
}

.stato__valore {
  display: inline-block;
  min-width: 6.2em;
  color: var(--inchiostro);
  font-style: italic;
  transition: color 0.4s ease;
}

.stato__valore.is-caldo {
  color: var(--accento);
}

.nota--destra {
  text-align: right;
}

@media (max-width: 560px) {
  .nota--destra {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .pagina {
    cursor: auto;
  }
}