/* Giansalvo Cannizzo — prototipo redesign, 23/09/2026
   Linguaggio ripreso da Oups: serif editoriale + dattiloscritto, un solo accento rosso. */
@font-face{font-family:"Newsreader";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:300;font-style:italic;font-display:swap;src:url(fonts/newsreader-latin-300-italic.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/newsreader-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url(fonts/newsreader-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-700-normal.woff2) format("woff2")}

:root{
  --carta:#FFFFFF; --inch:#141414; --tenue:#585858; --filo:#E2E2E0; --rosso:#C4332A;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"Courier Prime",ui-monospace,Menlo,monospace;
  --gutter:clamp(18px,4.5vw,64px);
}
[data-sfondo="grigio"]{--carta:#ECECEA; --filo:#D6D6D3}
[data-sfondo="nero"]{--carta:#0F0F0F; --inch:#EAEAE8; --tenue:#A8A8A5; --filo:#2A2A2A; --rosso:#E0584D}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inch);font-family:var(--serif);
  font-weight:300;font-size:19px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.mono{font-family:var(--mono);font-weight:400}
:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}

/* ---------- testata: non fissa; ricompare quando si risale ---------- */
.testata{position:sticky;top:0;z-index:20;background:var(--carta);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  padding:18px var(--gutter) 14px;border-bottom:1px solid transparent;
  transition:transform .28s ease,border-color .2s}
.testata.nascosta{transform:translateY(-105%)}
.testata.staccata{border-bottom-color:var(--filo)}
.firma{font-size:22px;font-weight:400;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.firma::after{content:"";display:inline-block;width:.46em;height:.46em;border-radius:50%;
  background:var(--rosso);margin-left:.28em;vertical-align:.02em}
.menu{display:flex;gap:clamp(14px,2.4vw,30px);font-family:var(--mono);font-size:13.5px;
  letter-spacing:.12em;text-transform:uppercase}
.menu a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{border-bottom-color:currentColor}

/* ---------- home ---------- */
.apertura{padding:clamp(28px,11vh,140px) var(--gutter) clamp(40px,8vh,96px);max-width:1100px}
.apertura h1{font-weight:300;font-size:clamp(34px,5.6vw,72px);line-height:1.04;
  letter-spacing:-.02em;margin:0;text-wrap:balance}
.apertura h1 em{font-style:italic}
.apertura .occhiello{font-family:var(--mono);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 22px}
.bozza{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--rosso);
  border:1px dashed var(--rosso);padding:2px 7px;display:inline-block;margin-top:18px;text-transform:uppercase}

.progetti{list-style:none;margin:0;padding:0 var(--gutter);max-width:900px;margin-inline:auto;
  display:grid;grid-template-columns:1fr;gap:clamp(56px,9vh,110px)}
.progetti a{text-decoration:none;display:block}
/* copertine nel loro formato: mai ritagliare, ma con un tetto d'altezza
   perche' titolo e descrizione restino in vista sotto */
.copertina{overflow:hidden;background:var(--filo);max-height:min(70vh,720px);
  display:flex;align-items:center;justify-content:center}
.copertina img{width:100%;height:auto;max-height:min(70vh,720px);object-fit:contain;transition:transform .8s ease}
.progetti a:hover .copertina img{transform:scale(1.025)}
.didascalia{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin-top:16px;align-items:baseline}
.didascalia .n{font-family:var(--mono);font-size:13px;color:var(--rosso);letter-spacing:.08em}
.didascalia h2{margin:0;font-weight:400;font-size:clamp(26px,2.6vw,34px);line-height:1.1;letter-spacing:-.01em}
.didascalia .meta{grid-column:2;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--tenue)}
.didascalia p{grid-column:2;margin:6px 0 0;font-style:italic;color:var(--tenue);font-size:17px;max-width:38ch}

.archivio-invito{margin:clamp(90px,16vh,180px) var(--gutter) 0;padding:40px 0;border-top:1px solid var(--filo);
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.archivio-invito p{margin:0;font-size:clamp(22px,2.4vw,30px);max-width:30ch}
.archivio-invito a{font-family:var(--mono);font-size:14px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid}

/* ---------- pagina progetto ---------- */
.intesta{padding:clamp(48px,10vh,120px) var(--gutter) clamp(32px,6vh,72px);
  display:grid;gap:22px;max-width:1200px}
@media(min-width:900px){.intesta{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:64px;align-items:end}}
.intesta .occhiello{grid-column:1/-1;font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin:0}
.intesta h1{margin:0;font-weight:300;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.025em}
.intesta .testo{margin:0;font-size:20px;max-width:36ch}
.intesta .nota{grid-column:1/-1}

.sequenza{padding:0 var(--gutter)}
.sequenza figure{margin:0 auto clamp(72px,14vh,160px);display:flex;flex-direction:column;align-items:center}
/* ogni immagine, dittici compresi, sta intera nello schermo */
.sequenza figure img{max-height:calc(100vh - 120px);width:auto;max-width:100%;object-fit:contain}
.sequenza figcaption{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--tenue);
  margin-top:12px;align-self:center}
@media(max-width:600px){.sequenza{padding:0}
  .sequenza figure{margin-bottom:64px}
  .sequenza figure img{max-height:none;width:100%}
  .sequenza figcaption{padding:0 var(--gutter)}}

.dopo{margin:40px var(--gutter) 0;padding:36px 0;border-top:1px solid var(--filo);
  display:grid;gap:26px}
@media(min-width:900px){.dopo{grid-template-columns:1fr 1fr}}
.dopo a{text-decoration:none;display:block}
.dopo .et{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)}
.dopo .t{font-size:clamp(26px,3vw,40px);line-height:1.1;margin-top:6px}
.dopo .t::after{content:" →";color:var(--rosso)}

footer{margin-top:clamp(80px,14vh,160px);padding:28px var(--gutter) 40px;border-top:1px solid var(--filo);
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;
  font-family:var(--mono);font-size:13px;letter-spacing:.05em;color:var(--tenue)}
footer a{color:var(--inch)}
.instagram{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.instagram svg{flex:none}
.contatti .instagram{font-size:clamp(22px,2.4vw,30px)}
.contatti .instagram svg{width:.75em;height:.75em}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================= v2 ================= */
/* testata sopra la foto d'apertura: trasparente, poi piena scorrendo */
.testata.sopra{position:fixed;left:0;right:0;background:transparent;color:#fff;
  background:linear-gradient(rgba(0,0,0,.38),rgba(0,0,0,0))}
.testata.sopra.staccata{background:var(--carta);color:var(--inch)}
/* il pallino resta sempre rosso (var(--rosso) di base), anche sull'header
   trasparente sopra la foto d'apertura: prima diventava bianco qui */

/* apertura a tutta pagina */
.eroe{position:relative;height:100vh;height:100svh;min-height:480px;overflow:hidden;background:#000}
.eroe img{width:100%;height:100%;object-fit:cover;display:block}
.eroe-testo{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(28px,8vh,80px);color:#fff}
.eroe::after{content:"";position:absolute;inset:auto 0 0 0;height:45%;
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.5));pointer-events:none}
.eroe-testo{z-index:2}
.frase{margin:0;font-size:clamp(30px,4.6vw,60px);line-height:1.05;font-weight:300;letter-spacing:-.015em;max-width:18ch}
.eroe .bozza{color:#fff;border-color:#fff}
.giu{position:absolute;z-index:2;right:var(--gutter);bottom:clamp(28px,8vh,80px);color:#fff;
  font-family:var(--mono);font-size:22px;text-decoration:none}
.progetti{margin-top:clamp(70px,12vh,140px)}

/* righe giustificate (archivio, porte): foto intere, lettura da sinistra a destra */
.gruppo{padding:0 var(--gutter);margin-bottom:clamp(48px,8vh,90px)}
.gruppo h2{font-weight:400;font-size:clamp(24px,2.6vw,34px);margin:0 0 16px;display:flex;gap:14px;align-items:baseline}
.gruppo h2 .mono{font-size:13px;color:var(--tenue);letter-spacing:.06em}
.giustificata{display:flex;flex-wrap:wrap;gap:6px}
.giustificata .cella{position:relative;display:block;background:var(--filo)}
.giustificata .cella i{display:block}
.giustificata .cella img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.giustificata .riempi{flex-grow:10000;flex-basis:0}
@media(max-width:600px){.giustificata{gap:4px}.gruppo{padding:0 10px}}
.anni{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:14px;letter-spacing:.05em}
.anni a{text-decoration:none;border-bottom:1px solid var(--filo)}

/* sequenza: la foto e' un link al visore */
.sequenza figure a{display:block;cursor:zoom-in}

/* stampe */
.stampe{list-style:none;margin:0;padding:0 var(--gutter);display:grid;gap:48px 32px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:end}
.stampe .foto{display:block;cursor:zoom-in}
.stampe img{width:100%;height:auto}
.stampe .cod{margin:12px 0 2px;font-size:13.5px;letter-spacing:.05em}
.stampe .spec{margin:0 0 10px;font-size:12.5px;color:var(--tenue)}
.richiedi{display:inline-block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;border:1px solid var(--inch);padding:9px 16px}
.richiedi:hover{background:var(--inch);color:var(--carta)}

/* info */
.info .testo p{margin:0 0 1em}
.contatti{padding:0 var(--gutter)}
.contatti h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);font-weight:400}
.contatti p{margin:.4em 0;font-size:clamp(22px,2.4vw,30px)}
.contatti .tenue{font-size:14px;color:var(--tenue)}

/* visore: foto grande, frecce, scorrimento col dito, Indietro chiude */
.visore{position:fixed;inset:0;z-index:50;background:var(--carta);display:flex;align-items:center;justify-content:center}
.visore[hidden]{display:none}
.visore img{max-width:calc(100% - 32px);max-height:calc(100% - 110px);width:auto;height:auto;object-fit:contain}
.visore button{position:absolute;font:inherit;background:none;border:0;color:var(--inch);cursor:pointer;
  font-family:var(--mono);font-size:22px;width:52px;height:52px}
.visore .vx{top:10px;right:10px;font-size:30px}
.visore .vp{left:6px;top:50%;transform:translateY(-50%)}
.visore .vn{right:6px;top:50%;transform:translateY(-50%)}
.visore .vc{position:absolute;bottom:18px;left:0;right:0;text-align:center;margin:0;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--tenue)}
@media(max-width:600px){.visore .vp,.visore .vn{top:auto;bottom:6px;transform:none}
  .visore img{max-width:100%;max-height:calc(100% - 130px)}}
.testata.sopra{border-bottom:0}
@media(max-width:600px){.intesta{padding-top:28px}}
/* apertura con foto chiara: testo scuro, niente velo nero */
.eroe.scuro .eroe-testo,.eroe.scuro .giu{color:#141414}
.eroe.scuro .bozza{color:#141414;border-color:#141414}
.eroe.scuro::after{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.55))}
.apertura-chiara .testata.sopra:not(.staccata){color:#141414;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,0))}
.apertura-chiara .testata.sopra:not(.staccata) .firma::after{background:var(--rosso)}
/* pulsante bianco/nero nella testata: icona cerchio metà bianco metà nero,
   non più testo (era troppo largo su mobile, vedi nota sopra) */
.menu{align-items:center;flex-wrap:wrap}
.menu .tema{font-family:var(--mono);font-size:15px;line-height:1;color:inherit;background:none;
  border:1px solid currentColor;border-radius:999px;cursor:pointer;margin-left:4px;opacity:.75;
  width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center}
.menu .tema:hover{opacity:1}
/* sul telefono il pulsante scende col resto del menu, sotto al nome:
   in overlay sulla riga del nome (posizione precedente) il testo esplicito
   "Passa al nero/bianco" è troppo lungo e finisce sopra la firma */
@media(max-width:600px){.menu .tema{margin-left:0}}