:root {
  --carta: #f4f1ea;      /* the paper of the index page */
  --inchiostro: #141414; /* the ink of the inner page */
  --accento: #e2452f;    /* the one accent: the stem as it grows */
  --grigio-carta: #8a857c;
  --grigio-inchiostro: #8c8880;
}

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

html, body { height: 100%; }

body {
  background: var(--carta);
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  font-variation-settings: 'wdth' 100;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.sito { position: relative; width: 100%; height: 100vh; overflow: hidden; }

.pagina {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, min(4vw, 5vh), 44px) clamp(16px, 5vw, 56px);
}
.pagina[hidden] { display: none; }

.pagina--carta { background: var(--carta); color: var(--inchiostro); --grigio: var(--grigio-carta); }
.pagina--inchiostro { background: var(--inchiostro); color: var(--carta); --grigio: var(--grigio-inchiostro); }

.testa { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.marchio { font-weight: 650; font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 0.01em; }
.nota { font-size: clamp(11px, 1.3vw, 13px); color: var(--grigio); font-weight: 420; }

.corpo {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, min(2.4vw, 3vh), 26px);
}

.occhiello {
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grigio);
  font-weight: 520;
}

.titolo {
  font-weight: 560;
  font-size: clamp(28px, min(7.4vw, 11vh), 104px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 100;
}
.titolo .lettera { display: inline-block; white-space: pre; will-change: transform; }

.voci { display: flex; gap: clamp(18px, 4vw, 52px); flex-wrap: wrap; margin-top: clamp(4px, 1vh, 12px); }

.voce {
  position: relative;
  color: inherit;
  text-decoration: none;
  font-weight: 480;
  font-size: clamp(22px, min(4vw, 7vh), 52px);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variation-settings: 'wdth' 100;
  transition: font-variation-settings 0.35s cubic-bezier(.3, 1.4, .5, 1);
}
.voce .lettera { display: inline-block; white-space: pre; }
.voce .lettera:first-child { transition: color 0.25s ease; }
.voce:focus-visible { outline: 1px solid var(--accento); outline-offset: 6px; }

@media (hover: hover) {
  .voce:hover { font-variation-settings: 'wdth' 112; }
  .voce:hover .lettera:first-child { color: var(--accento); }
}

.asta, .velo {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background: var(--accento);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.velo { z-index: 4; background: var(--inchiostro); }

@media (max-width: 560px) {
  .pagina--carta .voci { flex-direction: column; gap: 10px; }
  .testa .nota { display: none; }
  .piede .nota { font-size: 11px; }
}