:root {
  --pannello: #dcae6e;        /* the pegboard on the workshop wall */
  --fori: #8a5e33;            /* the holes of the pegboard */
  --banco: #8a5230;           /* the walnut workbench */
  --banco-chiaro: #b4723f;    /* the light edge of the bench */
  --abete: #f3d9a4;           /* the spruce top of the guitar */
  --mogano: #8c4527;          /* the mahogany neck and headstock */
  --palissandro: #3b211a;     /* the rosewood fretboard and bridge */
  --sunburst: #6b2c12;        /* the dark edge of the sunburst */
  --ambra: #e89a3a;           /* the amber heart of the sunburst */
  --osso: #f6eedc;            /* the bone nut, the saddle and the binding */
  --metallo: #d9dde2;         /* the frets, the tuners and the strings */
  --rosso: #e0523b;           /* the tool handles, the inlays of the rosette and the button */
  --verde: #2f6e70;           /* the lamp, the clamps and the jars */
  --giallo: #f2b33d;          /* the lamp light and the button */
  --inchiostro: #2a1a12;      /* the text */
  --carta: #fff7e8;           /* the light text and the sawdust */
}

* { box-sizing: border-box; }

html, body { margin: 0; }

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

p, h1, h2 { margin: 0; }

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

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

.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__corpo { fill: var(--ambra); stroke: var(--inchiostro); stroke-width: 1.4; }
.marchio__buca { fill: var(--inchiostro); }
.marchio__manico { fill: var(--mogano); stroke: var(--inchiostro); stroke-width: 1.2; stroke-linejoin: round; }

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

/* the stage name and the bench hours, bottom left: one label that jumps from one name to the next */
.fase-box {
  position: absolute;
  left: clamp(16px, 5vw, 64px);
  bottom: clamp(14px, 4vh, 40px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  color: var(--carta);
}

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

.fase__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;
}

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

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

.ore__etichetta { opacity: 0.7; }

/* the finish: title and button */
.finale {
  position: absolute;
  left: clamp(16px, 6vw, 96px);
  top: 22%;
  max-width: min(40vw, 540px);
  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(5.8vw, 10.5vh), 92px);
  font-weight: 700;
  font-variation-settings: 'SOFT' 100, 'opsz' 144;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

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

.finale__testo {
  margin-top: 0.8em;
  max-width: 28em;
  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;
  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;
  color: var(--carta);
  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(--banco);
  color: var(--carta);
}

.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(50px, 10vh, 110px);
    max-width: none;
    text-align: center;
  }
  .finale__titolo { font-size: clamp(26px, min(8.4vw, 7.4vh), 60px); }
  .finale__testo { margin-left: auto; margin-right: auto; font-size: clamp(11px, min(3.4vw, 2.1vh), 16px); }
  .tasto { margin-top: clamp(8px, 2vh, 20px); }
}

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

.testata { text-shadow: 0 1px 0 rgba(255, 240, 210, 0.5); }
.fase-box, .cenno { text-shadow: 0 1px 2px rgba(40, 20, 10, 0.45); }