:root {
  --alba-alto: #e9a0a6;       /* the top of the dawn sky */
  --alba: #ffd6a5;            /* the dawn sky near the horizon */
  --giorno-alto: #3e8fd6;     /* the top of the day sky */
  --giorno: #bfe6f6;          /* the day sky near the horizon */
  --sole: #fff0b8;            /* the sun */
  --rosso: #e2463b;           /* the red gores of the balloon */
  --giallo: #ffc23d;          /* the yellow gores, the flame and the button */
  --blu: #2f63c9;             /* the blue gores */
  --crema: #fff1dc;           /* the cream gores, the skirt and the clouds */
  --prato: #8cbf5a;           /* the meadow */
  --verde: #3f7d45;           /* the trees and the hedges */
  --campo: #e2c45e;           /* the wheat fields */
  --lavanda: #a891d6;         /* the lavender rows */
  --tetti: #c75b3c;           /* the roofs of the old town */
  --muri: #f2dcc0;            /* the walls of the old town */
  --fiume: #86cbe8;           /* the river */
  --colline: #8aa6b8;         /* the far hills in the mist */
  --vimini: #b9813f;          /* the wicker of the basket */
  --cuoio: #5e3220;           /* the leather rim of the basket */
  --inchiostro: #1d2433;      /* the text */
  --carta: #fffaf2;           /* the light text */
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--giorno);
  color: var(--inchiostro);
  font-family: 'Outfit Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

p, h1, h2 { margin: 0; }

/* ---------------------------------------------------------------- the stage */
.volo {
  position: relative;
  height: 600lvh;
}

.palco {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  background: var(--alba);
}

.scena {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------------------------------------------------------------- the words over the stage */
.testata {
  position: absolute;
  top: clamp(14px, 3.4vh, 30px);
  left: clamp(16px, 5vw, 64px);
  right: clamp(16px, 5vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}

.marchio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(19px, min(2.4vw, 4vh), 30px);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'opsz' 72;
  letter-spacing: -0.01em;
}

.marchio svg { width: 1.15em; height: 1.15em; }
.marchio__pallone { fill: var(--rosso); }
.marchio__spicchio { fill: var(--giallo); }
.marchio__cesta { fill: var(--cuoio); }

.sotto {
  font-size: clamp(10px, min(1.2vw, 2.2vh), 13px);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* the altimeter and the name of the stretch, bottom left: one label that jumps from one name to the next */
.quota {
  position: absolute;
  left: clamp(16px, 5vw, 64px);
  bottom: clamp(14px, 4vh, 40px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}

.quota__fase { display: flex; flex-direction: column; gap: 2px; }

.quota__nome {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(17px, min(2.2vw, 3.6vh), 28px);
  font-weight: 650;
  font-variation-settings: 'SOFT' 100, 'opsz' 48;
  line-height: 1.05;
}

.quota__nota {
  font-size: clamp(11px, min(1.2vw, 2.2vh), 14px);
  font-weight: 500;
  opacity: 0.8;
}

.quota__altezza {
  font-size: clamp(10px, min(1.1vw, 2vh), 12px);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.quota__etichetta { opacity: 0.65; }

/* the finish: title and button */
.finale {
  position: absolute;
  left: clamp(16px, 6vw, 96px);
  top: 24%;
  max-width: min(44vw, 560px);
  opacity: 0;
  visibility: hidden;
}

.finale__sopra {
  font-size: clamp(10px, min(1.2vw, 2.2vh), 13px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.finale__titolo {
  margin-top: 0.3em;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(30px, min(6.4vw, 11vh), 96px);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.finale__titolo em {
  font-style: italic;
  font-weight: 500;
  color: var(--rosso);
}

.finale__testo {
  margin-top: 0.8em;
  max-width: 30em;
  font-size: clamp(12px, min(1.5vw, 2.6vh), 18px);
  font-weight: 450;
  line-height: 1.4;
}

/* the site's elastic pill */
.tasto {
  position: relative;
  display: inline-flex;
  margin-top: clamp(12px, 2.8vh, 26px);
  padding: 0.95em 1.9em;
  color: var(--inchiostro);
  text-decoration: none;
  font-size: clamp(12px, min(1.4vw, 2.4vh), 16px);
  font-weight: 700;
  letter-spacing: 0.02em;
  isolation: isolate;
}

.tasto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 999px;
  background: var(--giallo);
  box-shadow: 0 5px 0 var(--inchiostro);
  transition: transform 0.6s cubic-bezier(0.34, 1.9, 0.5, 1);
}

.tasto span {
  display: inline-block;
  font-stretch: 100%;
  transition: letter-spacing 0.55s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.tasto:focus-visible { outline: 2px solid var(--inchiostro); outline-offset: 6px; border-radius: 999px; }

@media (hover: hover) {
  .tasto:hover::before { transform: scale(1.08, 1.16); }
  .tasto:hover span { letter-spacing: 0.09em; }
}

.tasto:active::before { transform: scale(0.94); transition-duration: 0.12s; }

.cenno {
  position: absolute;
  right: clamp(16px, 5vw, 64px);
  bottom: clamp(14px, 4vh, 40px);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(10px, min(1.2vw, 2.2vh), 13px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.cenno svg { width: 12px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------------------------------------------------------------- after the stage */
.dopo {
  min-height: 60vh;
  padding: 12vh 6vw;
  background: var(--giorno);
  color: var(--inchiostro);
}

.dopo__marchio { font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; }
.dopo__titolo {
  margin-top: 16px;
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: clamp(30px, 6vw, 72px);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  letter-spacing: -0.02em;
  line-height: 1;
}
.dopo__testo { margin-top: 16px; max-width: 34em; font-size: 17px; font-weight: 450; line-height: 1.5; }

/* ---------------------------------------------------------------- narrow screens: the title goes on top */
@media (max-aspect-ratio: 23/20) {
  .finale {
    left: 16px;
    right: 16px;
    top: clamp(54px, 11vh, 120px);
    max-width: none;
    text-align: center;
  }
  .finale__titolo { font-size: clamp(28px, min(9vw, 8vh), 64px); }
  .finale__testo { margin-left: auto; margin-right: auto; font-size: clamp(12px, min(3.4vw, 2.2vh), 16px); }
}

@media (max-width: 640px) {
  .sotto { display: none; }
  .cenno { display: none; }
}

/* the words over the landscape stay readable */
.quota, .testata { text-shadow: 0 1px 0 rgba(255, 250, 240, 0.55), 0 0 14px rgba(255, 248, 236, 0.75); }