:root {
  --fondo: #0b0b0c;
  --linea: #ece8e1;
  --testo: #ece8e1;
  --tenue: #8a8781;
  --accento: #ff5a36;
}

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

html, body { height: 100%; }

body {
  background: var(--fondo);
  color: var(--testo);
  font-family: 'Hanken Grotesk Variable', system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  touch-action: none;
}

.testa, .piede {
  position: absolute;
  left: clamp(16px, 3vw, 36px);
  right: clamp(16px, 3vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  font-size: clamp(10px, 1.6vmin, 13px);
  letter-spacing: 0.04em;
}

.testa { top: clamp(14px, 3vh, 30px); }
.piede { bottom: clamp(14px, 3vh, 30px); }

.marchio { font-weight: 620; letter-spacing: 0.02em; }
.testa__nota, .nota, .stato { color: var(--tenue); }
.stato span { color: var(--testo); font-weight: 560; }

.quadro {
  position: relative;
  width: min(62vw, 54vh);
  aspect-ratio: 4 / 5;
  display: grid;
}

.tela {
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
}

.didascalia {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + clamp(8px, 1.6vh, 14px));
  text-align: center;
  font-size: clamp(10px, 1.5vmin, 12px);
  color: var(--tenue);
  font-style: italic;
  letter-spacing: 0.02em;
}

@media (max-width: 560px) {
  .quadro { width: min(68vw, 52vh); }
  .testa__nota { display: none; }
}