/* The year on a drum: the programme of a made-up music festival, in the minimal style. A warm white page, black ink
   and a single vermilion for the dates. In a tall section a stage stays still while you scroll: twelve months on a
   drum that turns in 3D, a window of two hairlines across the page and, beside it, one line for the month in the
   window. The script places every month on the curve and sets its width and weight (Anybody, a variable typeface). */
:root {
  --carta: #f3f0e8;        /* the warm white of the page */
  --inchiostro: #141414;   /* the months and the words */
  --tenue: #948f85;        /* the small text */
  --sottile: #d4cfc4;      /* the hairlines of the window */
  --accento: #ff4520;      /* the dates and the small index on the window */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

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

.piccolo {
  margin: 0;
  color: var(--tenue);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.01em;
}

/* ------------------------------------------------------------ the stage */
.anno {
  position: relative;
  height: 820lvh;
}

.palco {
  --margine: clamp(16px, 5vw, 72px);
  --centro: 50%;                       /* where the window sits, from the top of the stage */
  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 var(--margine);
}

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

/* ------------------------------------------------------------ the window */
/* the two hairlines are placed by the script, half a month above and below the centre */
.finestra {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.filo {
  position: absolute;
  left: var(--margine);
  right: var(--margine);
  top: 0;
  height: 1px;
  background: var(--sottile);
  transform-origin: 0 50%;
}

/* a short vermilion stroke at the left end of the window, between the hairlines */
.indice {
  position: absolute;
  left: var(--margine);
  top: 0;
  width: 2px;
  height: 0;
  margin-left: -10px;
  background: var(--accento);
  transform-origin: 50% 50%;
}

/* ------------------------------------------------------------ the drum */
/* the list of the months has the perspective; every month sits on the centre line and the script turns it onto
   the curve with translateZ, rotateX, translateZ */
.tamburo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--margine);
  width: 58%;
}

.mesi {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  perspective: 1100px;
  perspective-origin: 30% var(--centro);
}

.mese {
  position: absolute;
  left: 0;
  top: var(--centro);
  font-size: var(--corpo, 110px);
  font-variation-settings: 'wdth' 100, 'wght' 400;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  transform-origin: 0 50%;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* a copy that never moves, at the width and weight of the month in the window: the script measures on it */
.sonda {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  font-size: 100px;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
  pointer-events: none;
}

/* ------------------------------------------------------------ the line of the month */
.programma {
  position: absolute;
  left: calc(58% + var(--margine) + 24px);
  right: var(--margine);
  top: var(--centro);
  display: grid;
  transform: translateY(-50%);
}

.voce {
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  padding: 0.18em 0;
  overflow: hidden;
  font-size: clamp(16px, 1.35vw, 21px);
  font-variation-settings: 'wdth' 88, 'wght' 430;
  line-height: 1.3;
  letter-spacing: -0.005em;
  visibility: hidden;
}

.voce.attiva {
  visibility: visible;
}

.giorni {
  margin-right: 0.3em;
  color: var(--accento);
  font-variation-settings: 'wdth' 100, 'wght' 560;
  font-feature-settings: 'tnum' 1;
}

/* what a screen reader reads: the whole line, while the letters that move are hidden from it */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* the script splits every line into words and letters: the words do not break, the letters move */
.parola {
  display: inline-block;
  white-space: nowrap;
}

.lettera {
  display: inline-block;
  will-change: transform;
}

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

.coda__titolo {
  margin: 0;
  font-size: clamp(44px, 7vw, 104px);
  font-variation-settings: 'wdth' 70, 'wght' 220;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

/* ------------------------------------------------------------ phone: the drum across the page, the line under it */
@media (max-width: 760px) {
  .palco {
    --centro: 45%;
  }

  .tamburo {
    width: calc(100% - 2 * var(--margine));
  }

  /* under the drum: --fondo-tamburo is where its lowest month ends, written by the script */
  .programma {
    left: var(--margine);
    top: calc(var(--fondo-tamburo, 70%) + 28px);
    transform: none;
  }

  .voce {
    font-size: 17px;
  }
}