/* ═══════════════════════════════════════
   BASE — reset, variabili, elementi globali
═══════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg:     #f0f0f0;
  --dark:   #212121;
  --white:  #ffffff;
  --accent: #c0ff72;
  --mid:    #999;          /* solo separatori e segni decorativi */
  --mid-testo: #6b6b6b;    /* lo stesso grigio, ma leggibile: 5,3:1 su bianco */

  /* ── Scala tipografica: tre fasce ─────────────────────────────
     Prima il sito usava diciassette corpi diversi, di cui sette
     schiacciati fra 9 e 15px a fare lo stesso lavoro. Ora i titoli
     restano come sono (clamp 52-100px, peso 700) e tutto il resto
     passa da due misure sole.
     I colori sono scelti per stare sopra 4,5:1 di contrasto, che e'
     la soglia WCAG AA per il testo sotto i 24px. */
  --t-testo:       14px;   /* cio` che si legge per capire.
                              Su mobile resta 17px: vedi responsive.css */
  --t-didascalia:  13px;   /* metadati, luoghi, firme */
  --t-etichetta:   11px;   /* badge maiuscoli e titoletti */
  --t-ui:          14px;   /* comandi minori e campi form */

  /* ── Pulsanti ───────────────────────────────────────────────────
     Tutti i pulsanti del sito parlano con la stessa voce: maiuscolo
     spaziato, corpo piccolo, peso medio. Il modello e' lo "scopri il
     progetto" delle schede progetto. Vale per il discover della hero,
     il contattaci fisso, gli invia dei form, l'allega il CV, le testate
     della pagina press e l'indietro delle schede placemaking.
     Cambiando queste tre righe cambiano tutti insieme. */
  --t-pulsante:    11px;   /* = --t-etichetta: pulsanti e badge stesso corpo */
  --ls-pulsante:   .14em;
  --peso-pulsante: 500;

  /* ── Titoloni ───────────────────────────────────────────────────
     Un corpo solo per i titoli grandi di tutto il sito: la frase della
     hero, il titolo dei progetti, ESG, Trademarks, Contatti, Lavora con
     noi, Press. Cambiando questa riga cambiano tutti insieme.
     Su mobile il valore si ridefinisce: vedi responsive.css. */
  --t-titolo: clamp(52px, 7.5vw, 100px);

  --ink-testo:       rgba(33, 33, 33, .78);   /* 7,2:1 su #f0f0f0 */
  --ink-didascalia:  rgba(33, 33, 33, .72);   /* 6,0:1 su #f0f0f0 */
  --ink-su-scuro:    rgba(255, 255, 255, .75);/* 9,6:1 su #212121 */

  --nav-h:  75px;   /* 55px + 10px sopra e sotto. Guida anche altezza hero,
                       posizione hamburger e logo dell'overlay */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--dark);
  overflow-x: hidden;
}

/* ── Testo solo per screen reader ──
   Visibile agli assistenti vocali e ai motori di ricerca, invisibile
   sullo schermo. Serve dove un titolo e' necessario per la struttura
   della pagina ma il progetto grafico non lo prevede. clip-path e non
   display:none, perche' display:none lo toglierebbe anche a loro. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── Label di sezione (badge verde) ──
   Titolo breve in alto a sinistra di ogni sezione della homepage. */
.section-label {
  display: inline-block;
  align-self: flex-start;    /* nei contenitori flex il fondino resta a misura del testo */
  font-size: var(--t-etichetta);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--accent);
  padding: 6px 8px 6px 10px; /* dx ridotto: il letter-spacing aggiunge spazio dopo l'ultima lettera */
}

/* ── placeholder immagine ── */
.ph {
  background: #2a2a2a;
  position: relative;
  overflow: hidden;
}

.ph::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      transparent calc(50% - .5px),
      rgba(255,255,255,.04) calc(50% - .5px),
      rgba(255,255,255,.04) calc(50% + .5px),
      transparent calc(50% + .5px)),
    linear-gradient(-135deg,
      transparent calc(50% - .5px),
      rgba(255,255,255,.04) calc(50% - .5px),
      rgba(255,255,255,.04) calc(50% + .5px),
      transparent calc(50% + .5px));
}

.ph-lbl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.12);
  pointer-events: none;
  z-index: 1;
  white-space: nowrap;
}