/* Il manifesto in cantiere */
:root {
  --cielo: #ECE8E0;        /* il fondo, carta calda */
  --inchiostro: #1F2124;
  --tenue: #6B675F;
  --gesso: #3F6FAE;        /* il disegno: contorni tratteggiati e quote */
  --gru: #E8642C;          /* la gru, la trave di sollevamento e i casseri */
  --ferro: #9A5634;        /* l'armatura dentro le lettere */
  --tubi: #7E8A96;         /* i tubi del ponteggio */
  --giunti: #3A4048;       /* i giunti del ponteggio */
  --tavole: #C99A57;       /* le tavole del ponteggio */
  --cemento: #A9A49B;      /* il cemento asciutto */
  --spessore: #7F7A71;     /* lo spessore del getto, in ombra */
  --bagnato: #6F6B66;      /* il cemento appena gettato */
  --segni: #8C877E;        /* le righe delle tavole e i fori dei tiranti nel cemento */
  --palizzata: #2A2D31;
  --margine: clamp(16px, 4vw, 56px);
  --alto: 100vh;
}
@supports (height: 100svh) {
  :root { --alto: 100svh; }
}

* { box-sizing: border-box; }
html,
body {
  margin: 0;
}
body {
  background: var(--cielo);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', system-ui, sans-serif;
}

.apertura {
  display: grid;
  align-content: space-between;
  gap: 2rem;
  min-height: calc(var(--alto) * 0.92);
  padding: var(--margine);
}
.apertura__studio {
  margin: 0;
  font-size: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);
  font-weight: 700;
  font-stretch: 118%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.apertura__titolo {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(2.5rem, 1.1rem + 5.4vw, 6.8rem);
  font-weight: 860;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.95;
}
.apertura__nota {
  max-width: 34ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.12rem);
  line-height: 1.4;
}

/* ---- la scena: il palco resta fermo mentre la sezione scorre ---- */
.scena {
  position: relative;
  height: calc(var(--alto) * 9);
}
.palco {
  position: sticky;
  top: 0;
  height: var(--alto);
  height: 100lvh;
  overflow: hidden;
  background: var(--cielo);
}
.cantiere {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.nascosto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* le lettere: Archivo nero, la larghezza la sceglie lo script (font-stretch) perché la scritta riempia il palco */
.lettera-testo {
  font-family: 'Archivo Variable', system-ui, sans-serif;
  font-weight: 900;
}
.gesso-contorno {
  fill: none;
  stroke: var(--gesso);
  stroke-linejoin: round;
}
.cassero {
  fill: none;
  stroke: var(--gru);
  stroke-linejoin: miter;
}
.cemento-asciutto {
  fill: var(--cemento);
}
.cemento-spessore {
  fill: var(--spessore);
}
.cemento-bagnato {
  fill: var(--bagnato);
}
.quota-testo {
  fill: var(--gesso);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pezzo {
  cursor: default;
}

/* la frase finale: compare in alto quando la gru se ne va */
.motto {
  position: absolute;
  top: 0;
  left: var(--margine);
  right: var(--margine);
  margin: 0;
  color: var(--inchiostro);
  font-size: clamp(0.98rem, 0.8rem + 0.9vw, 1.6rem);
  font-weight: 640;
  font-stretch: 106%;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
}

/* la palizzata del cantiere, larga quanto il palco, alta quanto il suolo (lo script scrive --suolo) */
.palizzata {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--suolo, 72px);
  padding: 0 var(--margine);
  color: #EDE8DE;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--suolo, 72px) * 1.6 - 2px), rgba(0, 0, 0, 0.28) calc(var(--suolo, 72px) * 1.6 - 2px) calc(var(--suolo, 72px) * 1.6)),
    var(--palizzata);
}
.palizzata::before {
  /* la fascia a strisce in cima alla palizzata */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(-45deg, var(--gru) 0 10px, var(--palizzata) 10px 20px);
  content: '';
}
.palizzata p {
  margin: 0;
  font-size: clamp(0.72rem, 0.66rem + 0.3vw, 0.95rem);
  font-weight: 780;
  font-stretch: 125%;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.palizzata__fase {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.palizzata__ora {
  color: var(--gru);
}
.fase {
  display: inline-flex;
  min-width: 9.5em;
}
.fase .maschera {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.fase .lettera {
  display: inline-block;
  white-space: pre;
}

.chiusura {
  padding: 22vh var(--margine) 28vh;
}
.chiusura__titolo {
  max-width: 14ch;
  margin: 0 0 1.4rem;
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 5rem);
  font-weight: 860;
  font-stretch: 112%;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.chiusura__testo {
  max-width: 50ch;
  margin: 0;
  color: var(--tenue);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.55;
}

@media (max-width: 560px) {
  .palizzata p {
    font-size: 0.66rem;
    letter-spacing: 0.07em;
  }
  .fase {
    min-width: 7.2em;
  }
}