/* La luce radente */
:root {
  --gesso: #EFECE6;
  --testo: #6F6A62;
  --margine: clamp(18px, 4vw, 56px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  background: var(--gesso);
  overflow: hidden;
}

.muro {
  position: relative;
  height: var(--alto);
  overflow: hidden;
  background: var(--gesso);
  perspective: 1200px;
  /* fuori da un iframe il dito dipinge la luce; dentro, lo script lascia alla pagina lo scorrimento in verticale */
  touch-action: none;
}
.muro--dentro {
  touch-action: pan-y;
}
.tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
.nota {
  position: absolute;
  z-index: 2;
  left: var(--margine);
  bottom: var(--margine);
  max-width: 32ch;
  margin: 0;
  color: var(--testo);
  font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.15rem);
  font-weight: 520;
  line-height: 1.35;
  pointer-events: none;
}