/* Font inclusi nel sito (nessuna CDN) - Inter, licenza SIL OFL */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff") format("woff")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff") format("woff")}
@font-face{font-family:"Inter Display";font-weight:400;font-display:swap;src:url("../fonts/inter-display-400.woff") format("woff")}
@font-face{font-family:"Inter Display";font-weight:700;font-display:swap;src:url("../fonts/inter-display-700.woff") format("woff")}

*{box-sizing:border-box}
:root{
  --titolo-giu:clamp(55px,14vh,150px);   /* distanza del titolo dal bordo alto */
  --stacco:clamp(0px,0vh,6px);          /* distanza tra titolo e immagini (0 = attaccati) */
  --alza-immagini:clamp(10px,7vh,60px); /* spazio sotto le immagini, prima del menu */
  --scala-omino:.54;         /* proporzione dell'omino rispetto alla ruspa (1 = grandezza originale) */
  --sfondo:#fafafa;          /* stesso colore di fondo delle immagini */
  --testo:#1b2740;
  --blu:#1c3f94;             /* il blu dei "bit" */
  --titolo:#1c3f94;          /* titolo (cambia qui) */
  --didascalia:#1c3f94;      /* didascalie: blu dei bit (cambia qui) */
  --soft:#6b7893;
  --bordo:#e3e6ec;
  --font-titolo:"Inter Display","Inter",system-ui,"Segoe UI",Arial,sans-serif;
  --font:"Inter",system-ui,"Segoe UI",Arial,sans-serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--sfondo);color:var(--testo);font-family:var(--font);line-height:1.5}

header{width:100%;max-width:1180px;margin:0 auto;padding:var(--titolo-giu) 16px 0}
h1{margin:0;text-align:left;font-family:var(--font-titolo);font-weight:400;letter-spacing:-.015em;font-size:clamp(1.35rem,3vw,2.1rem);color:var(--titolo)}


nav { position: relative; }

.tuo-ip {
  position: absolute;
  right: 30px;          /* era 10px: sposta l'IP verso sinistra */
  bottom: 100%;
  white-space: nowrap;
  font-size: .75em;
  opacity: .7;
}



/* centro: le due immagini, centrate in altezza */
main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:var(--stacco) 16px var(--alza-immagini)}
.scena{width:100%;max-width:1180px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,40px)}
figure{margin:0;text-align:left;min-width:0}

.img{position:relative;aspect-ratio:4/3;max-height:calc(100svh - 230px - var(--titolo-giu) - var(--alza-immagini));width:100%}
.img img{display:block;width:100%;height:100%;object-fit:contain}
/* sfuma i bordi dell'immagine nel colore della pagina: niente "cornice" visibile */
.img.omino img{transform:scale(var(--scala-omino));transform-origin:50% 98%}  /* omino piu' piccolo, stessa linea del terreno della ruspa */
.img::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 18px 14px var(--sfondo)}
figcaption{margin-top:6px;font-weight:500;font-size:1.05rem;color:var(--didascalia);letter-spacing:.01em;padding-left:2%}
/* la didascalia dell'omino segue il bordo sinistro dell'immagine ridimensionata */
figure.f-omino figcaption{padding-left:calc((1 - var(--scala-omino) * .908) / 2 * 100%)}

/* menu in basso, riga unica e "soft" */
nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px 16px;padding:0 clamp(12px,2vw,28px);margin:0}
nav a:nth-child(1){justify-self:start}nav a:nth-child(2){justify-self:center}nav a:nth-child(3){justify-self:end}
nav a{color:var(--soft);text-decoration:none;font-size:.68rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;padding:4px 0 3px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover,nav a:focus-visible{color:var(--blu);border-bottom-color:var(--blu);outline:none}

footer{text-align:center;padding:12px 16px 16px;border-top:1px solid var(--bordo);font-size:.82rem;color:var(--soft)}
footer a{color:inherit}

/* pop-up */
dialog{border:0;border-radius:14px;padding:24px 26px;width:min(92vw,520px);max-height:85vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35);color:var(--testo);font-family:var(--font)}
dialog::backdrop{background:rgba(15,25,45,.55)}
dialog h2{margin:0 0 10px;font-family:var(--font-titolo);font-size:1.3rem}
.popup-testo{max-height:50vh;overflow-y:auto;padding-right:6px}
.popup-azioni{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.popup-azioni form{margin:0}
.bottone{display:inline-block;padding:10px 18px;border:0;border-radius:8px;background:var(--blu);color:#fff;font:inherit;text-decoration:none;cursor:pointer}
.bottone.secondario{background:#e6eaf2;color:var(--testo)}
.chiudi-x{position:absolute;top:8px;right:10px;margin:0}
.chiudi-x button{border:0;background:none;font-size:1.8rem;line-height:1;cursor:pointer;color:#667}

/* smartphone: le due immagini una sopra l'altra */
@media (max-width:760px){
  .scena{grid-template-columns:1fr;gap:6px}
  .img{max-height:none}
  main{align-items:flex-start}
  nav{grid-template-columns:1fr;justify-items:center;gap:2px;padding-bottom:4px}
  nav a:nth-child(n){justify-self:center}
}