/* =========================================================
   LUDOVICA PALOMBI — stile globale
   Palette e tipografia in un unico posto: modifica qui.
   ========================================================= */

:root {
  /* ---------- colori ---------- */
  --bianco:        #ffffff;
  --testo:         #000000;   /* LUDOVICA PALOMBI, titoli */
  --testo-tenue:   #989898;   /* voci di menu, didascalie — CMYK 42/36/36/1 */
  --testo-hover:   #000000;   /* menu al passaggio del mouse */
  --testo-corpo:   #000000;   /* paragrafi lunghi: nero come i titoli */
  --linea:         #e2e2e2;

  /* Alternativa più leggibile per il grigio, se serve rispettare
     lo standard di accessibilità AA: #767676 */

  /* ---------- tipografia ---------- */
  --font: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;

  --dim-titolo: 70pt;         /* titolo grande delle pagine di testo */
  --stacco-titolo: 7rem;      /* vuoto fra il titolo e l'inizio del testo */
  --dim-nome: 15pt;           /* logotipo LUDOVICA PALOMBI */
  --dim-menu: 12pt;           /* voci di menu */
  --dim-firma: 10pt;          /* riga LUOGHI FW 2025 BY LUDOVICA PALOMBI */
  --dim-didascalia: 8.5pt;    /* didascalie e piè di pagina */

  --spaziatura-nome: 0.42em;  /* tracking del logotipo */

  /* ---------- gabbia ----------
     Proporzioni derivate dal mockup A4 e riportate a misura di schermo.
     Il margine inferiore vale circa 1,35 volte quello laterale: è il rapporto
     classico della pagina stampata, dove il piede è sempre più alto del fianco.
     I clamp() evitano che su monitor molto bassi il blocco tocchi il bordo e
     che su monitor molto alti si stacchi troppo.
     Su uno schermo 1440×900:  lato 60 px  ·  fondo 48 px  ·  nome a 602 px

     NOTA: il blocco è ancorato al bordo inferiore. Le due misure sotto sono
     accoppiate — muovendone una si sposta anche il nome:
       · alzare il menu tenendo fermo il nome → togli N allo stacco e aggiungi
         gli stessi N al margine di fondo (e viceversa per abbassarlo)
       · muovere il nome soltanto → cambia solo lo stacco
       · muovere tutto il blocco → cambia solo il margine di fondo           */
  --margine: clamp(2rem, 4.2vw, 4.5rem);        /* margine laterale */
  --margine-fondo: clamp(2.5rem, 5.29vh, 4.5rem);/* distanza dal fondo */
  --stacco-nome-menu: 5rem;     /* aria fra LUDOVICA PALOMBI e la prima voce */
  --interlinea-menu: 1.45rem;   /* aria fra una voce di menu e l'altra */

  --transizione: 380ms cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* i browser danno a <figure> un margine di 40px: annullarlo, altrimenti le
   foto non si allineano al margine delle altre pagine */
figure { margin: 0; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bianco);
}

body {
  font-family: var(--font);
  color: var(--testo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* fade-in all'ingresso di ogni pagina */
body { animation: entra 700ms ease both; }
@keyframes entra { from { opacity: 0 } to { opacity: 1 } }

/* =========================================================
   HOME
   ========================================================= */

.home {
  position: relative;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.home__sfondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* blocco nome + menu, ancorato in basso a destra */
.home__blocco {
  position: absolute;
  right: var(--margine);
  bottom: var(--margine-fondo);
  z-index: 2;
  text-align: right;
}

.logotipo {
  margin: 0 0 var(--stacco-nome-menu);
  font-size: var(--dim-nome);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--spaziatura-nome);
  text-transform: uppercase;
  color: var(--testo);
  /* compensa lo spazio finale generato dal tracking */
  margin-right: calc(var(--spaziatura-nome) * -1);
}

.logotipo .logotipo__cognome { margin-left: 1.6em; }

/* ---------- menu ---------- */
.menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--interlinea-menu);
}

.menu a {
  position: relative;
  font-size: var(--dim-menu);
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--testo-tenue);
  transition: color var(--transizione);
}

.menu a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--testo-hover);
  transition: width var(--transizione);
}

.menu a:hover,
.menu a:focus-visible,
.menu a[aria-current="page"] { color: var(--testo-hover); }

.menu a:hover::after,
.menu a:focus-visible::after,
.menu a[aria-current="page"]::after { width: 100%; }

/* =========================================================
   PAGINE INTERNE — intestazione comune
   ========================================================= */

.pagina { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }

/* In una colonna flex il browser puo' restringere un figlio sotto la sua
   altezza reale, per far stare tutto nella finestra. Su schermi stretti questo
   schiacciava la copertina di Luoghi dentro cento pixel e le tavole finivano
   sopra il testo del concept. Nessun blocco deve restringersi: se e' piu' alto
   della finestra, si scorre. */
.pagina > * { flex-shrink: 0; }

.testata {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.4vh var(--margine);
  background: linear-gradient(to bottom, rgba(255,255,255,.96) 60%, rgba(255,255,255,0));
  pointer-events: none;
  transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}
.testata > * { pointer-events: auto; }

.testata .logotipo { margin: 0; }

.menu--orizzontale { flex-direction: row; gap: 1.8rem; }

/* =========================================================
   PAGINA DI TESTO (About) — scorrimento verticale
   Una sola colonna centrata: testi e immagini alla stessa
   larghezza, come nel riferimento Injiri.
   ========================================================= */

.articolo {
  width: 100%;
  max-width: calc(680px + var(--margine) * 2);
  margin: 0 auto;
  padding: 22vh var(--margine) 14vh;
}

/* Titolo: Helvetica Neue UltraLight Italic, 64 pt, su due righe.
   Il peso 100 è il più sottile che Helvetica Neue possiede: su Mac e iPhone
   il browser lo prende davvero. Su Windows e Android, dove Helvetica Neue non
   è installata, ripiega su Arial corsivo, che ha un solo peso e risulta più
   pieno: è l'unica differenza fra i due sistemi.
   Lo stacco dal testo (--stacco-titolo) riprende la proporzione dell'A4:
   circa quattro volte il corpo del titolo.                                 */
.articolo h1 {
  margin: 0 0 var(--stacco-titolo);
  font-size: var(--dim-titolo);
  font-weight: 100;
  font-style: italic;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--testo);
}

/* Titoli di sezione: Helvetica Neue Regular, nero pieno.
   Il peso 400 è il regular; niente corsivo, niente pesi leggeri.          */
.articolo h2 {
  margin: 5.5rem 0 1.7rem;
  font-size: var(--dim-menu);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo);
}

/* =========================================================
   CORPO DEL TESTO — regola unica per tutto il sito
   About, concept di copertina, introduzioni ai progetti:
   stesso carattere, stesso corpo, stessa interlinea, stesso
   colore. Aggiungi qui il selettore di ogni nuovo testo
   lungo, così le sezioni non possono divergere.
   ========================================================= */

.articolo p,
.copertina__concept,
.progetto__apertura,
.archivio__apertura,
.libro__apertura,
.libro__richiesta p {
  font-size: var(--dim-menu);   /* 12 pt */
  font-weight: 400;
  line-height: 1.95;
  color: var(--testo-corpo);    /* #555555 */
}

.articolo p { margin: 0 0 1.5rem; }

.articolo__apertura { color: var(--testo); }

/* ---------- immagini nell'articolo ---------- */

/* Ritmo verticale: le immagini stanno più vicine al testo che le precede
   (a cui appartengono) e lasciano più aria prima del titolo successivo.   */
.articolo figure { margin: 4rem 0 5rem; }
.articolo figure img { width: 100%; height: auto; }

.articolo figure + h2,
.coppia + h2 { margin-top: 2rem; }

.articolo figcaption {
  margin-top: .8rem;
  font-size: var(--dim-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* due immagini affiancate */
.coppia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(1rem, 2.4vw, 2rem);
  margin: 4rem 0 5rem;
}
.coppia figure { margin: 0; }

/* ---------- contatti in chiusura ---------- */

.contatti {
  margin-top: 5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
  font-size: var(--dim-menu);
  line-height: 2.1;
  color: var(--testo-tenue);
}
.contatti a { transition: color var(--transizione); }
.contatti a:hover { color: var(--testo); }

/* =========================================================
   PAGINA PROGETTO A GRIGLIA (Luoghi project)
   ========================================================= */

/* ---------- copertina: foto a tutta larghezza sfumata nel bianco ----------
   L'immagine sta sotto (z-index -1) e svanisce verso il basso con una
   maschera sfumata: il bianco della pagina la assorbe, e la prima fila di
   miniature entra nella coda della sfumatura.                              */

/* Tutte le misure di questa sezione sono in vw, cioè in percentuale della
   larghezza della finestra: è l'unico modo di riprodurre un mockup "tale e
   quale", perché nel mockup ogni cosa è in proporzione alla larghezza della
   pagina. Valori ricavati misurando il campione (frame 2600 px):
     testo:        larghezza 68,6%   ·  corpo 0,73%  ·  interlinea 1,30
     firma:        corpo 0,61%       ·  stacco dal testo 7,1%
     prima riga di testo a 12,8% dall'alto · griglia a 37% · foto fino a 52%  */

.copertina {
  position: relative;
  isolation: isolate;          /* tiene lo z-index negativo dentro la sezione */
  min-height: 62vw;
  padding: 13vw var(--margine) 0;
}

.copertina__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  -webkit-mask-image: linear-gradient(to bottom,
              #000 0%, #000 62%, rgba(0,0,0,.45) 76%, rgba(0,0,0,.08) 86%,
              transparent 93%);
          mask-image: linear-gradient(to bottom,
              #000 0%, #000 62%, rgba(0,0,0,.45) 76%, rgba(0,0,0,.08) 86%,
              transparent 93%);
}

/* Il blocco è largo apposta: a parità di corpo, più è largo e meno righe
   servono, quindi la fotografia respira. È l'unica leva da usare qui —
   corpo, interlinea e colore arrivano dalla regola unica del corpo testo. */
.copertina__testo {
  width: 78vw;
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

/* Corpo, peso, interlinea e colore arrivano dalla regola unica del corpo
   testo: il concept è identico ai paragrafi dell'About. Qui restano solo le
   scelte di impaginazione — giustificato con l'ultima riga centrata.       */
.copertina__concept {
  margin: 0;
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}

.copertina__firma span { margin: 0 .9em; }

.copertina__firma {
  margin: 6vw 0 0;
  font-size: var(--dim-firma);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--testo);
}

/* ---------- griglia ---------- */

.progetto {
  flex: 1;
  width: 100%;
  max-width: 1500px;
  margin: -8vw auto 0;        /* la griglia sale dentro la sfumatura */
  padding: 0 var(--margine) 16vh;
}

/* ---------- griglia delle tavole ---------- */

.griglia {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
}

/* Riga di invito sopra la griglia. Una sola riga, nel corpo delle
   didascalie, che dice che le tavole si aprono. Serve soprattutto sul
   telefono, dove non esistendo il passaggio del mouse non c'e' nessun
   altro modo di farlo capire. */
.griglia__invito {
  margin: 0 0 clamp(1.6rem, 3vw, 2.8rem);
  font-size: var(--dim-didascalia);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  text-align: center;
}

.solo-dito { display: none; }
@media (hover: none) {
  .solo-mouse { display: none; }
  .solo-dito  { display: inline; }
}

.tavola {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;          /* tiene l'ingrandimento dentro il riquadro */
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

/* Al passaggio del mouse la tavola si ingrandisce appena dentro il suo
   riquadro. Prima invece sbiadiva, e una cosa che sbiadisce si legge come
   spenta, non come apribile: era il segnale sbagliato. Un accenno di
   ingrandimento dice esattamente quello che succede cliccando. */
.tavola img {
  width: 100%;
  height: auto;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
}

.tavola:hover img,
.tavola:focus-visible img { transform: scale(1.035); }

.tavola:focus-visible { outline: 1px solid var(--testo); outline-offset: 6px; }


/* =========================================================
   VISORE A SCHERMO INTERO
   ========================================================= */

.lente {
  position: fixed;
  inset: 0;
  z-index: 100;
  /* Il gesto orizzontale lo gestiamo noi per cambiare tavola. Senza questa
     riga Safari sul telefono lo interpreta come "torna alla pagina prima" e
     butta fuori dal visore. pan-y lascia liberi i gesti verticali. */
  touch-action: pan-y;
  overscroll-behavior: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7vh clamp(3.5rem, 9vw, 8rem);
  background: rgba(255, 255, 255, .975);
  opacity: 0;
  transition: opacity 260ms ease;
}
.lente--visibile { opacity: 1; }
.lente[hidden] { display: none; }

.lente__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 1px 40px rgba(0, 0, 0, .07);
}

/* frecce: due zone cliccabili larghe ai lati, con un segno discreto */
.lente__nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(3.5rem, 9vw, 8rem);
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lente__nav--prec { left: 0; }
.lente__nav--succ { right: 0; }

.lente__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-top: 1px solid var(--testo-tenue);
  border-right: 1px solid var(--testo-tenue);
  transition: border-color var(--transizione);
}
.lente__nav--succ::before { transform: translate(-50%, -50%) rotate(45deg); }
.lente__nav--prec::before { transform: translate(-50%, -50%) rotate(-135deg); }
.lente__nav:hover::before { border-color: var(--testo); }

.lente__chiudi,
.lente__contatore {
  position: absolute;
  bottom: 2.6vh;
  font-size: var(--dim-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.lente__chiudi {
  left: var(--margine);
  border: 0;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color var(--transizione);
}
.lente__chiudi:hover { color: var(--testo); }

.lente__contatore { right: var(--margine); }

/* =========================================================
   SFOGLIATORE (Artbook)
   Anteprima del libro a doppia pagina: la copertina compare da
   sola, poi le pagine vanno a coppie con la piega al centro.
   L'altezza dell'apertura è l'unica misura da regolare.
   ========================================================= */

.libro {
  flex: 1;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 17vh var(--margine) 10vh;
  display: flex;
  flex-direction: column;
}

.libro__apertura { max-width: 62ch; margin: 0 0 6vh; }

.sfoglia {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0 clamp(3rem, 7vw, 7rem);
}

.sfoglia__spalle {
  display: flex;
  align-items: stretch;
  height: 58vh;
  transition: opacity 170ms ease;
}
.sfoglia--cambio .sfoglia__spalle { opacity: 0; }

.sfoglia__pagina {
  height: 100%;
  width: auto;
  object-fit: contain;
  box-shadow: 0 1px 34px rgba(0, 0, 0, .08);
}
/* la piega: le due pagine si toccano, l'ombra le separa appena */
.sfoglia__pagina--sx { clip-path: inset(0 0 0 0); }
.sfoglia__pagina--dx { margin-left: 1px; }
.sfoglia--singola .sfoglia__pagina--dx { display: none; }

.sfoglia__nav {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(3rem, 7vw, 7rem);
  border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sfoglia__nav--prec { left: 0; }
.sfoglia__nav--succ { right: 0; }
.sfoglia__nav[disabled] { cursor: default; opacity: .25; }
.sfoglia__nav:focus { outline: none; }
.sfoglia__nav:focus-visible { outline: 1px solid var(--testo); outline-offset: -8px; }

.sfoglia__nav::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 13px;
  border-top: 1px solid var(--testo-tenue);
  border-right: 1px solid var(--testo-tenue);
  transition: border-color var(--transizione);
}
.sfoglia__nav--succ::before { transform: translate(-50%, -50%) rotate(45deg); }
.sfoglia__nav--prec::before { transform: translate(-50%, -50%) rotate(-135deg); }
.sfoglia__nav:not([disabled]):hover::before { border-color: var(--testo); }

.sfoglia__barra {
  margin-top: 2.4rem;
  text-align: center;
  font-size: var(--dim-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* ---------- richiesta del libro completo ---------- */

.libro__richiesta {
  margin-top: 12vh;
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
  text-align: center;
}
.libro__richiesta p { margin: 0 0 1rem; }
.libro__richiesta a {
  position: relative;
  font-size: var(--dim-menu);
  color: var(--testo);
}
.libro__richiesta a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--testo);
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--transizione);
}
.libro__richiesta a:hover::after { transform: scaleX(0); }

/* =========================================================
   ARCHIVIO A MOSAICO — non usato al momento, tenuto per un
   eventuale ritorno all'archivio completo delle 100 immagini
   Cento immagini fitte, come un muro di ricerca. Ogni riga si
   giustifica da sola: ogni riquadro cresce in proporzione alla
   sua forma, quindi le immagini non vengono tagliate e le righe
   restano allineate. L'altezza della riga è l'unica misura da
   regolare per rendere il mosaico più fitto o più largo.
   ========================================================= */

.archivio {
  flex: 1;
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding: 22vh var(--margine) 8vh;
}

.archivio__apertura {
  max-width: 62ch;
  margin: 0 0 5rem;
}

.mosaico {
  --riga: clamp(130px, 15vw, 215px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(5px, .55vw, 10px);
}

.mosaico .pezzo {
  height: var(--riga);
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--riga));
  cursor: zoom-in;
}
.mosaico .pezzo img { width: 100%; height: 100%; object-fit: cover; }

/* impedisce all'ultima riga di stirarsi per riempire la larghezza */
.mosaico::after { content: ""; flex: 10 0 30%; }

/* =========================================================
   SEQUENZA EDITORIALE — scorrimento verticale
   Le fotografie cambiano scala scendendo: l'alternanza fra
   immagini a tutta larghezza, a colonna e piccole di lato è
   ciò che crea il ritmo del racconto.
   Le larghezze sono le uniche misure di questa sezione;
   tipografia e margini arrivano dal sistema generale.
   ========================================================= */

/* UNA SOLA LARGHEZZA.
   Tutte le fotografie sono larghe uguali e centrate sullo stesso asse:
   il 56 per cento della finestra, misurato sulla sezione editorial di
   arts-science. Nessuna foto è più piccola o più grande di un'altra.
   Il ritmo non lo dà la larghezza, lo dà la forma della fotografia:
   orizzontale, quadrata o verticale. Cambia solo l'altezza.
   Le uniche eccezioni sono le poche immagini a tutto schermo. */

:root {
  --ed-colonna: min(56vw, 900px);             /* la larghezza abituale */
  --ed-larga: min(72vw, 1150px);              /* la misura piu' ampia */
  --ed-cartolina: calc(var(--ed-colonna) * .7);  /* la misura raccolta */
  --ed-passo: clamp(4rem, 6.2vw, 7rem);       /* aria fra una foto e l'altra */
  --ed-vuoto: clamp(.8rem, 1.5vw, 1.3rem);    /* fra le due foto di una coppia */
}

.servizio { padding-bottom: 16vh; }

/* la colonna: ogni fotografia della sequenza è larga così */
.servizio > * {
  width: min(var(--ed-colonna), calc(100% - var(--margine) * 2));
  margin: var(--ed-passo) auto 0;
}

/* Le forme. La larghezza non cambia mai, cambia l'altezza.
   ed-orizzontale non taglia nulla: mostra il file com'è stato esportato.
   Le altre due impongono una forma e prendono il centro dell'immagine. */
.ed-quadrata img  { aspect-ratio: 1 / 1;  object-fit: cover; }
.ed-verticale img { aspect-ratio: 2 / 3;  object-fit: cover; }

/* LARGA: piu' ampia della colonna ma non a tutto schermo. E' la misura
   che si da' a una fotografia che deve pesare piu' delle altre senza
   arrivare a occupare tutta la finestra. Di suo non taglia niente.
   E' anche la misura su cui si appoggia la coppia qui sotto: insieme le
   due verticali sono larghe esattamente quanto una larga. */
.ed-larga { width: min(var(--ed-larga), calc(100% - var(--margine) * 2)); }

/* aggiunta a ed-larga, la schiaccia in una fascia panoramica */
.ed-panoramica img { aspect-ratio: 2 / 1; object-fit: cover; }

/* CARTOLINA: la misura raccolta, sette decimi della colonna. Non e' una
   miniatura, e' una fotografia piccola: si guarda da vicino invece che
   da lontano. Non taglia niente. */
.ed-cartolina {
  width: min(var(--ed-cartolina), calc(100% - var(--margine) * 2));
}

/* COPPIA: due fotografie affiancate, sempre nella loro forma vera.
   La prima sta a sinistra, la seconda a destra. */
.ed-coppia {
  width: min(var(--ed-larga), calc(100% - var(--margine) * 2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--ed-vuoto);
}
.ed-coppia figure { margin: 0; }

/* APERTURA: la prima fotografia, a tutta larghezza, tagliata sopra.
   Il formato è 16:9, cioè quasi esattamente la porzione di schermo che
   resta sotto il menu: chi apre la pagina la vede riempire la finestra,
   con la figura in basso a destra già visibile senza dover scorrere.
   Il taglio toglie solo cielo bianco dall'alto, dove non c'è niente,
   ed è già fatto dentro il file: così pesa meno e viene uguale ovunque,
   telefono compreso, senza che il browser debba tagliare niente.
   La sfumatura nel bianco non serve, la fotografia è già chiarissima e
   si fonde da sola con la pagina. Per rimetterla, togliere i commenti. */
.ed-apertura {
  width: 100%;
  max-width: none;
  margin: 0 auto var(--ed-passo);
}

.ed-apertura img {
  width: 100%;
  height: auto;
  /*
  -webkit-mask-image: linear-gradient(to bottom,
              #000 0%, #000 62%, rgba(0,0,0,.45) 76%, rgba(0,0,0,.08) 86%,
              transparent 93%);
          mask-image: linear-gradient(to bottom,
              #000 0%, #000 62%, rgba(0,0,0,.45) 76%, rgba(0,0,0,.08) 86%,
              transparent 93%);
  */
}

/* a tutto schermo: l'unico momento in cui una foto esce dalla colonna */
.ed-piena {
  width: 100%;
  max-width: none;
  margin-top: calc(var(--ed-passo) * 1.6);
  margin-bottom: calc(var(--ed-passo) * .6);
}
/* di suo non taglia niente: si vede tutta la fotografia, larga quanto la
   finestra. Il taglio va chiesto, non subito. */

/* la stessa piena, ma schiacciata in una fascia. Sta bene alle immagini
   quasi vuote, dove il soggetto e' piccolo e tutto il resto e' aria. */
.ed-piena.ed-sottile img { aspect-ratio: 21 / 9; object-fit: cover; }

.servizio img { display: block; width: 100%; height: auto; }

/* dissolvenza mentre si scorre */
.servizio figure {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms ease, transform 900ms ease;
}
.servizio figure.visibile { opacity: 1; transform: none; }
.servizio > figure:first-of-type { opacity: 1; transform: none; }

/* ---------- crediti in chiusura ---------- */

.crediti {
  width: min(var(--ed-colonna), calc(100% - var(--margine) * 2));
  max-width: 44rem;
  margin-top: calc(var(--ed-passo) * 2.2);
  padding-top: 1.8rem;
  border-top: 1px solid var(--linea);
  font-size: var(--dim-didascalia);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* La colonna di sinistra e' larga quanto serve alla voce piu' lunga,
   "Design, art direction and styling", perche' un ruolo che va a capo
   si legge come due ruoli diversi. */
.crediti > div {
  display: grid;
  grid-template-columns: 17rem 1fr;
  gap: 1rem;
  padding: .55rem 0;
}
.crediti dt { color: var(--testo-tenue); }
.crediti dd { margin: 0; color: var(--testo); }

/* =========================================================
   GALLERIA ORIZZONTALE
   ========================================================= */

.galleria {
  flex: 1;
  display: flex;
  align-items: center;
  /* il passo fra le foto è agganciato al margine di pagina: stessa gabbia */
  gap: calc(var(--margine) * 1.5);
  padding: 0 var(--margine);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;
  cursor: grab;
}
.galleria::-webkit-scrollbar { display: none; }
.galleria.trascina { cursor: grabbing; scroll-behavior: auto; }

.scatto {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.scatto img {
  height: 68vh;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 800ms ease, transform 800ms ease;
  user-select: none;
  -webkit-user-drag: none;
}
.scatto img.visibile { opacity: 1; transform: none; }

.scatto figcaption {
  font-size: var(--dim-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* spazio finale per non far incollare l'ultima foto al bordo */
.galleria::after { content: ""; flex: 0 0 var(--margine); }

/* barra di stato in basso: titolo progetto + avanzamento */
.pie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.2vh var(--margine);
  font-size: var(--dim-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  background: linear-gradient(to top, rgba(255,255,255,.96) 60%, rgba(255,255,255,0));
  pointer-events: none;
}

/* nelle pagine a griglia il piè di pagina scorre col contenuto, non è fisso */
.pie.pie--statico {
  position: static;
  background: none;
  margin-top: 6rem;
}

.avanzamento {
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: var(--linea);
}
.avanzamento__barra {
  height: 100%;
  width: 0;
  background: var(--testo);
  transition: width 120ms linear;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Le tavole scendono da tre colonne a due, e a una sola soltanto quando
   lo schermo e' davvero stretto. Prima passavano a una colonna gia' a 860
   pixel: su un iPad in verticale ogni tavola diventava larga tutto lo
   schermo e la pagina non finiva piu'. */
@media (max-width: 1100px) {
  .griglia { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .griglia { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  :root {
    --margine: 7vw;
    --margine-fondo: 5.45vh;
    --spaziatura-nome: .3em;
    --dim-titolo: 36pt;
    --stacco-titolo: 4rem;
    --dim-firma: 8.5pt;
    --dim-nome: 13pt;
    --dim-menu: 11pt;
    --stacco-nome-menu: 3.35rem;
    --interlinea-menu: 1.2rem;
  }

  .logotipo .logotipo__cognome { margin-left: 1em; }

  /* TESTATA SUL TELEFONO
     Sul computer le fotografie hanno margini bianchi ai lati, quindi la
     testata sfumata ci galleggia sopra senza disturbare. Sul telefono le
     immagini arrivano ai bordi e le passano sotto: il nome finiva stampato
     sulla faccia della modella, mezzo trasparente e illeggibile.
     Qui il fondo diventa bianco pieno, e la testata si ritira scorrendo in
     giu' per lasciare le fotografie pulite. Riappare appena si risale. */
  .testata {
    flex-direction: column;
    align-items: flex-end;
    gap: .9rem;
    background: var(--bianco);
  }
  .testata--via { transform: translateY(-100%); }

  /* Con cinque voci il menu non entra piu' su una riga sola e si spezzava
     a meta' delle parole. Nella barra in alto le due voci lunghe perdono
     la seconda parola: restano riconoscibili e stanno su una riga.
     Nel menu della home, che e' in colonna, i nomi restano per esteso. */
  .menu--orizzontale { gap: .85rem; flex-wrap: nowrap; }
  .menu--orizzontale .solo-largo { display: none; }
  .menu--orizzontale a { white-space: nowrap; }

  .articolo { padding-top: 26vh; }
  .articolo h1,
  .progetto h1 { letter-spacing: .01em; }
  .coppia { grid-template-columns: 1fr; gap: 2.4rem; }

  /* COPERTINA SUL TELEFONO
     Su schermo largo il testo sta sopra la fotografia, che gli fa da fondo.
     Su un telefono quel gioco non regge: la colonna di testo diventa alta
     quanto tutta l'immagine e ci si sovrappone, illeggibile. Qui le due cose
     si separano e si impilano: prima la fotografia intera, poi il testo sul
     bianco. La sfumatura in basso resta e fa da passaggio fra le due. */
  .copertina {
    min-height: 0;
    padding: 12vh 0 0;
    isolation: auto;
  }
  .copertina__foto {
    position: static;
    z-index: auto;
    width: 100%;
    height: auto;
    object-fit: contain;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 99%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 99%);
  }
  .copertina__testo {
    width: 100%;
    margin-top: -7vw;          /* il testo sale dentro la coda della sfumatura */
    padding: 0 var(--margine);
  }
  .copertina__concept { line-height: 1.7; text-align: left; text-align-last: left; }
  .copertina__firma { margin-top: 4rem; letter-spacing: .16em; }
  .progetto { margin-top: 6vh; }
  .griglia { gap: 1.6rem; }

  .lente { padding: 4vh 2.6rem; }
  .lente__nav { width: 2.6rem; }

  /* sul telefono la sequenza editoriale diventa una colonna sola:
     le immagini piccole di lato e le coppie non hanno più senso */
  .sfoglia { padding: 0 2.4rem; }
  .sfoglia__nav { width: 2.4rem; }
  .sfoglia__spalle { height: 52vh; }
  .libro__richiesta { margin-top: 8vh; }

  /* SEQUENZA EDITORIALE SUL TELEFONO
     Le quattro larghezze non ci stanno piu', ma buttarle tutte a tutta pagina
     appiattirebbe il racconto: resterebbero quindici fotografie identiche.
     Restano tre gradini, piu' ravvicinati ma ancora distinguibili:
     la colonna rientra di un margine pieno, la larga di mezzo margine,
     la piena arriva ai bordi. */
  :root {
    --ed-colonna: 100%;
    --ed-larga: calc(100% - var(--margine));
    --ed-passo: clamp(2.6rem, 9vw, 4rem);
  }
  .ed-larga { width: min(var(--ed-larga), 100%); }
  .ed-piena.ed-sottile img { aspect-ratio: 16 / 9; }

  /* la coppia resta affiancata: sono due fotografie che si parlano,
     impilarle scioglierebbe proprio il legame che le tiene insieme */
  .ed-coppia { grid-template-columns: 1fr 1fr; gap: var(--ed-vuoto); }

  .crediti > div { grid-template-columns: 1fr; gap: .2rem; }

  .galleria { gap: 1.6rem; padding-top: 22vh; align-items: center; }
  .scatto img { height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .scatto img { opacity: 1; transform: none; }
}

/* =========================================================
   PAGINA NON TROVATA
   Sobria come il resto: nessun messaggio d'errore chiassoso,
   una riga di testo e la strada per tornare indietro.
   ========================================================= */

.perduta {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  padding: 0 var(--margine);
  text-align: center;
}

.perduta__testo {
  margin: 0;
  font-size: var(--dim-menu);
  font-weight: 400;
  line-height: 1.95;
  color: var(--testo-corpo);
}

.perduta__via {
  position: relative;
  font-size: var(--dim-didascalia);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  transition: color var(--transizione);
}
.perduta__via::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: currentColor;
}
.perduta__via:hover { color: var(--testo); }

/* =========================================================
   CONTATTI
   Stessa colonna di About. L'indirizzo di posta e' la cosa
   piu' grande della pagina: e' quello che serve davvero.
   Il modulo sta sotto, per chi preferisce scrivere subito.
   ========================================================= */

.articolo--contatto { padding-bottom: 18vh; }

/* l'email: piu' grande del corpo del testo ma piu' piccola del titolo,
   con la sottolineatura sottile che usiamo per i collegamenti */
.articolo--contatto .contatto__posta {
  margin: 0 0 1.2rem;
  font-size: clamp(15pt, 2.6vw, 22pt);
  font-weight: 400;
  line-height: 1.3;
  word-break: break-word;
}

.contatto__posta a {
  position: relative;
  color: var(--testo);
}
.contatto__posta a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -.18em;
  width: 100%; height: 1px;
  background: var(--linea);
  transition: background var(--transizione);
}
.contatto__posta a:hover::after,
.contatto__posta a:focus-visible::after { background: var(--testo); }

.articolo--contatto .contatto__nota {
  margin: 0 0 5.5rem;
  font-size: var(--dim-didascalia);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* ---------- modulo ----------
   Nessun riquadro, nessun angolo arrotondato, nessun colore: ogni campo
   e' una riga su cui si scrive, come su un foglio. L'unica cosa che
   cambia al tocco e' la riga, che diventa nera.                        */

.modulo { margin: 0 0 6rem; }

.modulo__campo { margin-bottom: 2.6rem; }

.modulo__campo label {
  display: block;
  margin-bottom: .7rem;
  font-size: var(--dim-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

.modulo__campo input,
.modulo__campo textarea {
  width: 100%;
  padding: .45rem 0;
  border: 0;
  border-bottom: 1px solid var(--linea);
  border-radius: 0;
  background: none;
  font-family: inherit;
  font-size: var(--dim-menu);
  line-height: 1.6;
  color: var(--testo);
  transition: border-color var(--transizione);
  -webkit-appearance: none;
}

.modulo__campo textarea { resize: vertical; min-height: 7rem; }

.modulo__campo input:focus,
.modulo__campo textarea:focus {
  outline: none;
  border-bottom-color: var(--testo);
}

.modulo__invia {
  padding: 0 0 .35rem;
  border: 0;
  border-bottom: 1px solid var(--testo);
  background: none;
  font-family: inherit;
  font-size: var(--dim-didascalia);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo);
  cursor: pointer;
  transition: opacity var(--transizione);
}
.modulo__invia:hover { opacity: .55; }

/* l'esca per i programmi automatici: invisibile a chi guarda */
.modulo__esca { position: absolute; left: -9999px; }