/* Stars along the trail: the "how we work" page of a made-up studio. The steps sit in two columns, one on the left and
   the next on the right; behind them an SVG as big as the whole section holds an invisible trail, drawn by the script
   between the steps, and the little shapes that travel along it. Over each step, bars stand for its weeks of work. */
:root {
  --fondo: #fff1ec;        /* the page */
  --inchiostro: #2b1a4a;   /* text and bars */
  --tenue: #6e5a86;        /* the small text */
  --aquilone: #ff5d73;     /* the kite that hops over the bars */
  --forma-1: #ff5d73;      /* the shapes on the trail, in turn */
  --forma-2: #ffb000;
  --forma-3: #2bb3a3;
  --forma-4: #6c5ce7;
  --forma-5: #2b1a4a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- the opening */
.apertura {
  display: grid;
  align-content: center;
  min-height: 92vh;
  padding: 0 clamp(18px, 6vw, 110px);
}

.apertura__marchio,
.apertura__sotto,
.passo__durata {
  margin: 0;
  color: var(--tenue);
  font-size: clamp(12px, 1vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.apertura__titolo {
  margin: 0.12em 0 0.18em;
  font-family: 'Bricolage Grotesque Variable', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(60px, 13vw, 210px);
  font-weight: 700;
  font-stretch: 85%;
  line-height: 0.88;
  letter-spacing: -0.035em;
}

/* ---------------------------------------------------------------- the steps */
.percorso {
  position: relative;
  padding: 0 clamp(18px, 6vw, 110px) 20vh;
}

.sentiero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sentiero__linea {
  fill: none;
  stroke: none;
}

.sentiero use:nth-of-type(5n + 1) { fill: var(--forma-1); }
.sentiero use:nth-of-type(5n + 2) { fill: var(--forma-2); }
.sentiero use:nth-of-type(5n + 3) { fill: var(--forma-3); }
.sentiero use:nth-of-type(5n + 4) { fill: var(--forma-4); }
.sentiero use:nth-of-type(5n + 5) { fill: var(--forma-5); }

.passi {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: clamp(90px, 22vh, 240px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.passo {
  max-width: 30em;
}

/* one step per row, so the trail can swing from side to side between them */
.passo:nth-child(1) { grid-row: 1; }
.passo:nth-child(2) { grid-row: 2; }
.passo:nth-child(3) { grid-row: 3; }
.passo:nth-child(4) { grid-row: 4; }
.passo:nth-child(5) { grid-row: 5; }

.passo--sinistra {
  grid-column: 1;
}

.passo--destra {
  grid-column: 2;
  justify-self: end;
  text-align: right;
}

/* the bars of the weeks, with the kite sitting on top */
.settimane {
  position: relative;
  display: inline-flex;
  gap: clamp(8px, 0.9vw, 14px);
  padding-top: 30px;
}

.stanghetta {
  display: block;
  width: clamp(12px, 1.3vw, 20px);
  height: clamp(72px, 8.5vw, 120px);
  border-radius: 3px;
  background: var(--inchiostro);
}

.aquilone {
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 30px;
  overflow: visible;
}

.aquilone path {
  fill: var(--aquilone);
}

.aquilone .aquilone__croce {
  fill: none;
  stroke: var(--fondo);
  stroke-width: 1.4;
}

.passo__titolo {
  margin: 0.35em 0 0.2em;
  font-family: 'Bricolage Grotesque Variable', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(34px, 4.6vw, 72px);
  font-weight: 600;
  font-stretch: 90%;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.passo__testo {
  margin: 0.9em 0 0;
  font-size: clamp(14px, 1.1vw, 17px);
  line-height: 1.55;
}

/* ---------------------------------------------------------------- the end */
.chiusura {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: 0 18px;
}

.chiusura__frase {
  margin: 0;
  font-family: 'Bricolage Grotesque Variable', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(30px, 5vw, 80px);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
}

/* on a phone the steps stack in one column; the trail winds over the whole width, behind the words */
@media (max-width: 720px) {
  .passi {
    grid-template-columns: 1fr;
    row-gap: 140px;
  }

  .passo--destra {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
}