/* Carte che si impilano */
:root {
  --fondo: #07201f;
  --inchiostro: #07201f;
  --carta-chiara: #f6f7f3;
  --alto: 12vh;            /* dove si ferma la prima carta */
  --scalino: 16px;         /* quanto sporge ogni carta da quella sotto */
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  font-family: 'Mona Sans Variable', system-ui, sans-serif;
  background: var(--fondo);
  color: var(--carta-chiara);
}
.sopra {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 620;
  color: #86a8a2;
}
.grande {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(26px, 3.4vw, 50px);
  font-weight: 640;
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.apertura,
.coda {
  min-height: 60vh;
  padding: 12vh clamp(18px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.coda {
  justify-content: center;
}

/* la pila: le carte sono sticky, ognuna un po' più in basso della precedente */
.pila {
  padding: 0 clamp(14px, 4vw, 56px);
}
.pila__carte {
  display: flex;
  flex-direction: column;
  gap: 8vh;
}
/* le ancore sono alte zero e stanno prima di ogni carta: i trigger si agganciano a loro,
   perché una carta sticky cambia posizione mentre è ferma */
.ancora {
  display: block;
  height: 0;
}
.carta {
  position: sticky;
  top: calc(var(--alto) + var(--i) * var(--scalino));
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  height: min(72vh, 620px);
  padding: clamp(22px, 4vw, 60px);
  border-radius: 28px;
  color: var(--inchiostro);
  transform-origin: 50% 0%;
  overflow: clip;
  will-change: transform;
}
.c1 { background: #ff8a3d; }
.c2 { background: #86cfc4; }
.c3 { background: var(--carta-chiara); }
.c4 { background: #146662; color: var(--carta-chiara); }
.carta__titolo {
  margin: 0 0 16px;
  font-size: clamp(38px, 6.4vw, 104px);
  font-weight: 860;
  font-stretch: 90%;
  line-height: 0.9;
  letter-spacing: -0.05em;
}
.carta__testo p {
  max-width: 34ch;
  margin: 0 0 20px;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.4;
}
.etichette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etichette li {
  padding: 5px 12px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 620;
}
.disegno {
  width: 100%;
  max-height: 100%;
  overflow: visible;
}
.disegno .tratto {
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.disegno .riempi {
  fill: #ff8a3d;
  fill-opacity: 0;
}
/* il velo scurisce la carta quando le altre le salgono sopra */
.carta__velo {
  position: absolute;
  inset: 0;
  background: #041b1a;
  opacity: 0;
  pointer-events: none;
}
/* dopo l'ultima carta la pila resta ferma un momento, completa */
.pila__coda {
  height: 30vh;
}

@media (max-width: 760px) {
  :root {
    --alto: 9vh;
    --scalino: 10px;
  }
  .carta {
    grid-template-columns: 1fr;
    align-content: start;
    height: auto;
    min-height: 520px;
  }
  .disegno {
    max-height: 190px;
  }
}