/* The manifesto that trims itself, in the minimal style: a warm white page, black ink, one red for the pen. A tall
   section keeps the stage still while you scroll; on it the manifesto of a made-up studio. Every word is its own
   element on a layer, placed by the script where a hidden copy of the text puts it at each pass of the edit. */
:root {
  --carta: #f3f0ea;        /* the warm white of the page */
  --inchiostro: #161513;   /* the words */
  --tenue: #b3ada3;        /* a struck word, and the small names not yet reached */
  --penna: #e33b1d;        /* the pen: the strike and the last full stop */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Geist Variable', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ the stage */
.racconto {
  position: relative;
  height: 760lvh;
}

.palco {
  position: sticky;
  top: 0;
  height: 100lvh;
  overflow: hidden;
}

.testa {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 26px clamp(16px, 5vw, 72px);
}

.marchio {
  margin: 0;
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: 22px;
  font-weight: 560;
  font-variation-settings: 'opsz' 36;
  letter-spacing: -0.02em;
}

.conto {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 450;
  font-feature-settings: 'tnum' 1;
}

.conto__numero {
  color: var(--inchiostro);
}

/* the sheet: the room the text has. The words are placed inside it by the script */
.foglio {
  position: absolute;
  top: 96px;
  bottom: 92px;
  left: clamp(16px, 5vw, 72px);
  right: clamp(16px, 5vw, 72px);
  max-width: 1120px;
}

/* the text shared by the words and by their hidden copies: same face, same leading, same spacing */
.strato,
.fantasma {
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: clamp(23px, 3.05vw, 46px);
  line-height: 1.16;
  letter-spacing: -0.012em;
}

.strato {
  position: absolute;
  inset: 0;
  font-weight: var(--peso, 330);
  font-variation-settings: 'opsz' var(--opsz, 28);
  pointer-events: none;
}

/* a word: the script gives it its place and its size with a transform, from the top left corner */
.parola {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transform-origin: 0 0;
}

.parola__testo {
  display: inline-block;
  transform-origin: 30% 72%;
}

/* the strike: a hairline across the middle of the small letters, as long as the word and, when the next word goes
   too, the space after it. Its height and place are written by the script */
.tratto {
  position: absolute;
  left: -0.04em;
  top: var(--tratto-y, 0.62em);
  width: calc(100% + 0.08em + var(--oltre, 0px));
  height: var(--tratto, 1.5px);
  margin-top: calc(var(--tratto, 1.5px) / -2);
  background: var(--penna);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* the hidden copies, one per pass: the browser lays out the text, the script reads where every word lands */
.fantasma {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  visibility: hidden;
  pointer-events: none;
}

.fantasma span {
  display: inline-block;
}

.fantasma--fine {
  white-space: nowrap;
}

.fantasma .punto {
  color: var(--penna);
}

/* reduced motion: the copies are the text, and they only cross-fade */
.fantasma--vista {
  visibility: visible;
}

.manifesto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.voci {
  position: absolute;
  left: clamp(16px, 5vw, 72px);
  bottom: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-size: 13px;
  font-weight: 480;
}

.voce {
  color: var(--tenue);
}

/* ------------------------------------------------------------ the end of the page */
.coda {
  display: grid;
  align-content: center;
  gap: 18px;
  min-height: 70vh;
  padding: 80px clamp(16px, 5vw, 72px);
}

.coda__testo {
  margin: 0;
  font-family: 'Newsreader Variable', Georgia, serif;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 330;
  font-variation-settings: 'opsz' 48;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.piccolo {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
}

/* ------------------------------------------------------------ phone: the same, with a tighter sheet */
@media (max-width: 640px) {
  .testa {
    padding-top: 20px;
  }

  .foglio {
    top: 78px;
    bottom: 76px;
  }

  .voci {
    bottom: 24px;
    gap: 8px 20px;
  }
}