/* Otturatore a colonne */
:root {
  --colonna: #0b3b39;          /* colore delle colonne */
  --pagina-uno: #eef3ef;
  --pagina-due: #ff8a3d;
  --testo: #07201f;
}

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

.testata {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 5vw;
}
.marchio {
  font-weight: 760;
  font-stretch: 116%;
  font-size: 20px;
  letter-spacing: -0.04em;
}
.voci {
  display: flex;
  gap: 8px;
}
.voce {
  font: inherit;
  font-weight: 600;
  font-stretch: 106%;
  font-size: 15px;
  color: inherit;
  background: none;
  border: 0;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px rgba(7, 32, 31, 0.25);
  transition: background-color 0.3s, color 0.3s, transform 0.16s;
}
.voce:active {
  transform: scale(0.96);
}
.voce[aria-current='page'] {
  background: var(--testo);
  color: #f6f7f3;
  box-shadow: none;
}

.pagina {
  position: fixed;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 18px;
  padding: 0 5vw 9vh;
}
.pagina[hidden] {
  display: none;
}
.pagina--studio {
  background: var(--pagina-due);
}
.sopra {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  opacity: 0.65;
}
.titolo {
  margin: 0;
  font-size: clamp(56px, 12vw, 190px);
  font-weight: 700;
  font-stretch: 114%;
  letter-spacing: -0.05em;
  line-height: 0.88;
}
.titolo .riga {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
}
.titolo .riga span {
  display: block;
}
.testo {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.45;
}

.otturatore {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  pointer-events: none;
}
.otturatore span {
  flex: var(--f, 1);
  background: var(--colonna);
  transform: scaleY(1);         /* chiuso all'inizio: la pagina si apre al caricamento */
  box-shadow: inset 1px 0 0 rgba(246, 247, 243, 0.08);
}