/* The line typed on the ruler, in the minimal style: a warm white page, black ink, one red for the carriage. A tall
   section keeps the stage still while you scroll; on it a thin ruler with one tick per column, and above it the paper
   with the letters. The script measures the column and places the paper and the ruler; every letter is its own
   element, struck by the timeline. */
:root {
  --carta: #f3f0e8;        /* the warm white of the page */
  --inchiostro: #141414;   /* the letters */
  --tenue: #aaa398;        /* the ruler, its numbers and the small notes */
  --accento: #e2401c;      /* the carriage mark, and the last full stop */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Martian Mono Variable', ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

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

.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-size: 15px;
  font-weight: 620;
  font-stretch: 88%;
  letter-spacing: -0.01em;
}

.piccolo {
  margin: 0;
  color: var(--tenue);
  font-size: 12px;
  font-weight: 420;
  font-stretch: 92%;
}

.invito {
  position: absolute;
  left: clamp(16px, 5vw, 72px);
  bottom: 28px;
}

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

/* the machine: its corner, its width, the column (--cw) and the line (--lh) are written by the script */
.macchina {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
}

/* the paper: one box per line, as tall as the line, stacked upwards from the ruler */
.carta {
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 0;
}

.lettera {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--cw, 40px);
  height: var(--lh, 60px);
  font-size: var(--fs, 60px);
  line-height: var(--lh, 60px);
  text-align: center;
  white-space: pre;
  font-variation-settings: 'wght' var(--wght, 560), 'wdth' var(--wdth, 100);
  transform-origin: 50% 78%;
  will-change: transform;
}

/* the ruler: a hairline as long as the line, with a tick under the middle of every column */
.righello {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 40px;
}

.righello__linea {
  position: absolute;
  left: calc(var(--cw, 40px) * -0.5);
  right: calc(var(--cw, 40px) * -0.5);
  top: 0;
  height: 1px;
  background: var(--inchiostro);
  transform-origin: 0 50%;
}

.tacca {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 7px;
  margin-left: -0.5px;
  transform-origin: 50% 0;
}

/* the tick itself: the outer element grows in on arrival, this one jumps when a letter lands on it */
.tacca i {
  position: absolute;
  inset: 0;
  background: var(--tenue);
  transform-origin: 50% 0;
}

.tacca--lunga {
  height: 12px;
}

.tacca--lunga i {
  background: var(--inchiostro);
}

.cifra {
  position: absolute;
  top: 26px;
  left: 0;
  width: 40px;
  margin-left: -20px;
  color: var(--tenue);
  font-size: 10px;
  font-weight: 420;
  font-stretch: 90%;
  line-height: 1;
  text-align: center;
  font-feature-settings: 'tnum' 1;
}

/* the carriage: an element for GSAP that rides the ruler, and inside it the red mark that hangs from the hairline */
.carrello {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.carrello__segno {
  position: absolute;
  left: -1px;
  top: -5px;
  width: 2px;
  height: 25px;
  background: var(--accento);
  transform-origin: 50% 5px;
}

/* ------------------------------------------------------------ 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-size: clamp(22px, 2.6vw, 38px);
  font-weight: 380;
  font-stretch: 86%;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

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

  .invito {
    bottom: 22px;
  }
}