/* The line that bends into a chart: the year of a made-up ceramics studio, in the minimal style. A warm white page,
   black ink, one electric blue for the last month. In a tall section a stage stays still while you scroll: one thin
   line, the ticks and names of the months under it and three figures above their peaks. Every position is written by
   the script from the numbers of the year. */
:root {
  --carta: #f3f0e8;        /* the warm white of the page */
  --inchiostro: #141414;   /* the ink of the line and the figures */
  --tenue: #8f8a80;        /* the small text and the month names */
  --sottile: #d5d0c4;      /* the trace the line leaves on the baseline */
  --accento: #2b44ff;      /* the last point, its segment and its figure */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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

/* ------------------------------------------------------------ the opening and the end */
.apertura {
  display: grid;
  align-content: center;
  gap: 22px;
  min-height: 92vh;
  padding: 80px clamp(16px, 5vw, 72px);
}

.apertura--fine {
  min-height: 70vh;
}

.piccolo {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

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

.titolo {
  margin: 0;
  font-size: clamp(46px, 8.2vw, 122px);
  font-weight: 300;
  font-stretch: 84%;
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.titolo--medio {
  font-size: clamp(40px, 6vw, 88px);
}

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

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

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

.marchio {
  margin: 0;
  font-size: 17px;
  font-weight: 680;
  font-stretch: 112%;
  letter-spacing: -0.02em;
}

.scena {
  position: absolute;
  inset: 0;
}

/* the drawing: the script sizes it to the stage, one unit is one pixel */
.tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tela path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tela__base {
  stroke: var(--sottile);
  stroke-width: 1;
}

.tela__riga {
  stroke: var(--inchiostro);
  stroke-width: 1.5;
}

.tela__accento {
  stroke: var(--accento);
  stroke-width: 2;
}

.tela__tacca {
  stroke: var(--inchiostro);
  stroke-width: 1;
}

.tela__punto {
  fill: var(--accento);
}

/* the month names under the ticks */
.mesi {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mese {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tenue);
  font-size: 12px;
  font-weight: 480;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
}

/* ------------------------------------------------------------ the three figures above their peaks */
.cima {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* the short hairline from the peak up to the figure */
.cima__quota {
  position: absolute;
  left: -0.5px;
  bottom: 7px;
  width: 1px;
  height: 12px;
  background: var(--inchiostro);
  transform: scaleY(0);
  transform-origin: 50% 100%;
}

.cima__corpo {
  position: absolute;
  left: 0;
  bottom: 24px;
  display: grid;
  justify-items: center;
  gap: 2px;
  transform: translateX(calc(-50% + var(--sposta, 0px)));
}

.cima__dida {
  display: block;
  overflow: hidden;
  color: var(--tenue);
  font-size: 12px;
  font-weight: 480;
  letter-spacing: 0.02em;
  line-height: 1.3;
  white-space: nowrap;
}

.cima__dida > span {
  display: block;
}

/* the figure: tabular digits, each in a window it rises through. Weight and width are two variables the script
   moves: thin and narrow as it rises, heavy and wide when it lands */
.cima__numero {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 60px);
  font-weight: var(--wg, 640);
  font-variation-settings: 'wdth' var(--wd, 100);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.cifra {
  display: inline-block;
  overflow: hidden;
  padding: 0.06em 0.01em 0.04em;
  margin: -0.06em -0.01em -0.04em;
  vertical-align: top;
}

.cifra > span {
  display: inline-block;
}

/* ------------------------------------------------------------ phone: the same story, smaller figures */
@media (max-width: 640px) {
  .cima__corpo {
    bottom: 20px;
  }

  .cima__quota {
    height: 9px;
  }

  .cima__dida {
    font-size: 10px;
  }

  .mese {
    font-size: 11px;
  }
}