/* La cupola di foto: un bianco caldo come la carta di un archivio, le stampe in toni di carta e d'inchiostro, un solo
   accento ruggine su poche di loro. Il marchio è in Fraunces, che ha gli assi del peso e della morbidezza. */
:root {
  --carta: #f4f1ea;                       /* il fondo */
  --inchiostro: #161412;                  /* il marchio e le scritte */
  --accento: #c4512f;                     /* la ruggine di poche stampe */
  --tenue: #8b857a;                       /* le scritte piccole */
}

* {
  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, 4vw, 56px);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
  height: 100svh;
  padding: clamp(14px, 2.6vw, 30px) var(--margine);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}

.tela {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.tela.is-presa {
  cursor: grabbing;
}

.testa {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  pointer-events: none;
}

.testa__voce {
  margin: 0;
  font-size: clamp(10px, 1.1vw, 13px);
  font-variation-settings: 'opsz' 9, 'wght' 420, 'SOFT' 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.piede {
  grid-row: 3;
  display: grid;
  justify-items: center;
  gap: clamp(2px, 0.6vh, 8px);
  pointer-events: none;
}

.marchio {
  margin: 0;
  font-size: min(15vw, 13vh, 150px);
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'wght' var(--peso, 300), 'SOFT' 100;
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.didascalia {
  margin: 0;
  font-size: clamp(11px, 1.2vw, 14px);
  font-variation-settings: 'opsz' 9, 'wght' 460, 'SOFT' 0;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tenue);
}

/* la finestra della didascalia: il nome della stampa davanti scivola su o giù quando cambia */
.didascalia__finestra {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.1em;
}

.didascalia__finestra > span {
  display: inline-block;
}

.avviso {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-size: 14px;
  color: var(--tenue);
}