/* A layout set on the grid: the cover of a made-up furniture catalogue, in the minimal style. A warm white page,
   black ink, twelve faint columns and one vermilion, used only for what is selected and, at the end, for the figure.
   In a tall section a stage stays still while you scroll: every word is placed by the script. */
:root {
  --carta: #f3f0e8;        /* the warm white of the page */
  --inchiostro: #141414;   /* the words */
  --tenue: #8d887e;        /* the small text */
  --colonna: #ebe6da;      /* the fill of the twelve columns */
  --filo: #ddd7c9;         /* the hairline edges of the columns */
  --accento: #e8401c;      /* the selection, and the figure at the end */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', Archivo, '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.4vw, 124px);
  font-weight: 300;
  font-stretch: 88%;
  line-height: 0.94;
  letter-spacing: -0.04em;
}

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

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

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

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

/* the state of the page, one word at a time: each one slides up out of a window */
.stato {
  display: grid;
  justify-items: end;
  overflow: hidden;
  padding: 2px 0;
}

.stato__riga {
  grid-area: 1 / 1;
  font-stretch: calc(var(--wd, 100) * 1%);
  white-space: nowrap;
}

/* the page: the area inside the margins, where the columns and the blocks live */
.pagina {
  --gutter: 20;
  position: absolute;
  top: 78px;
  bottom: 44px;
  left: clamp(16px, 5vw, 72px);
  right: clamp(16px, 5vw, 72px);
}

/* the columns reach a little past the page, so letters that touch the top or the foot never look cut by them */
.griglia {
  position: absolute;
  inset: -16px 0;
}

.colonna {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--colonna);
  box-shadow: inset 1px 0 var(--filo), inset -1px 0 var(--filo);
  opacity: 0.55;
}

/* the columns under the selected block warm up */
.colonna__luce {
  position: absolute;
  inset: 0;
  background: var(--accento);
  opacity: 0;
}

/* the blocks keep the real text for screen readers; what you see are their words, placed one by one */
.blocco {
  margin: 0;
  font: inherit;
}

.grande,
.parola {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
  transform-origin: 0 0;
  will-change: transform;
}

.grande {
  font-size: 100px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* the figure turns vermilion at the end */
.grande--cifra {
  --acc: 0;
  color: color-mix(in srgb, var(--accento) calc(var(--acc) * 100%), var(--inchiostro));
  font-feature-settings: 'tnum' 1;
}

.parola--sotto {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 520;
  font-stretch: 96%;
  letter-spacing: -0.01em;
}

.parola--testo {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
}

.parola--dida {
  font-size: 13px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--tenue);
}

/* ------------------------------------------------------------ the selection: frame, handles, guides */
.cornice {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  border: 1px solid var(--accento);
  opacity: 0;
  pointer-events: none;
}

.cornice__maniglia {
  position: absolute;
  width: 7px;
  height: 7px;
  border: 1px solid var(--accento);
  background: var(--carta);
}

.cornice__maniglia--a {
  left: -4px;
  top: -4px;
}

.cornice__maniglia--b {
  right: -4px;
  top: -4px;
}

.cornice__maniglia--c {
  left: -4px;
  bottom: -4px;
}

.cornice__maniglia--d {
  right: -4px;
  bottom: -4px;
}

.cornice__misura {
  position: absolute;
  left: -1px;
  bottom: 100%;
  margin-bottom: 7px;
  color: var(--accento);
  font-size: 11px;
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.guida {
  position: absolute;
  top: -22px;
  bottom: -22px;
  left: 0;
  width: 1px;
  z-index: 1;
  background: var(--accento);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------ phone: the same, with smaller measures */
@media (max-width: 640px) {
  .pagina {
    --gutter: 8;
    top: 66px;
    bottom: 28px;
  }

  .testa {
    padding-top: 22px;
  }

  .parola--sotto {
    font-size: 17px;
  }

  .parola--testo {
    font-size: 14px;
  }

  .parola--dida {
    font-size: 11px;
  }

  .cornice__misura {
    font-size: 10px;
  }
}