/* The wave made of circles: the product page of a made-up synthesizer maker, Odalo, in the minimal style. A warm white
   page, black hairlines, one electric blue for the square to aim for and the thread that carries the wave. The
   circles and the wave are drawn by the script in one SVG; the word is plain HTML. */
:root {
  --carta: #f3f0e8;        /* the warm white of the page */
  --inchiostro: #141414;   /* the wave, the arms, the text */
  --tenue: #8d887e;        /* the small text */
  --cerchio: #b9b2a5;      /* the circles and the axis */
  --accento: #2f45ff;      /* the dashed square and the thread */
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  background: var(--carta);
  color: var(--inchiostro);
  font-family: 'Anybody Variable', 'Anybody', '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-variation-settings: 'wght' 480, 'wdth' 100;
  letter-spacing: 0.01em;
}

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

.titolo {
  margin: 0;
  font-size: clamp(42px, 7.4vw, 112px);
  font-variation-settings: 'wght' 300, 'wdth' 70;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.titolo--medio {
  font-size: clamp(36px, 5.6vw, 84px);
}

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

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

.tavola {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.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: 18px;
  font-variation-settings: 'wght' 760, 'wdth' 130;
  letter-spacing: 0;
}

/* the drawing */
.asse {
  stroke: var(--cerchio);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.cerchio {
  fill: none;
  stroke: var(--cerchio);
  stroke-width: 1;
}

.braccio {
  stroke: var(--inchiostro);
  stroke-width: 1;
  stroke-linecap: round;
}

.onda {
  fill: none;
  stroke: var(--inchiostro);
  stroke-width: 1.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.filo {
  stroke: var(--accento);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.bersaglio {
  fill: none;
  stroke: var(--accento);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}

/* the word under the wave: wider and heavier as the wave gets squarer */
.scritta {
  position: absolute;
  z-index: 2;
  left: clamp(16px, 5vw, 72px);
  bottom: clamp(22px, 5vh, 56px);
}

.conto {
  margin: 0 0 6px;
  color: var(--tenue);
  font-size: 14px;
  font-variation-settings: 'wght' 520, 'wdth' 100;
  font-variant-numeric: tabular-nums;
}

.parola {
  margin: 0;
  font-size: clamp(56px, 9vw, 132px);
  font-variation-settings: 'wght' var(--peso, 200), 'wdth' var(--largo, 60);
  line-height: 0.9;
  letter-spacing: -0.02em;
}

/* ------------------------------------------------------------ phone: the same, turned on its side */
@media (max-width: 640px) {
  .onda {
    stroke-width: 1.5;
  }

  .parola {
    font-size: 14.5vw;
  }
}