/* ============================================================
   USABILITA' — SCHEDE PROGETTO

   Le schede progetto hanno tutte lo stesso problema, e non e' di
   gusto: e' di comodita' di lettura. Misurato su outsider a
   1440px prima di questo foglio:

     titolo    partiva da x=40
     cover     partiva da x=40
     gallerie  partivano da x=0 (a filo schermo)
     TESTO     partiva da x=432   <-- l'unica cosa centrata

   Ogni volta che si passava da un'immagine a un paragrafo
   l'occhio faceva un salto di 400px a destra e poi tornava
   indietro. Piu': le immagini si toccavano (gap 1px), 32 su 64
   erano tagliate da un aspect-ratio che non era il loro, e su
   telefono le gallerie diventavano un carosello orizzontale con
   la barra nascosta, con gli spread larghi 273px.

   Questo foglio rimette tutto su un asse solo, toglie i tagli,
   da' aria fra le immagini e su telefono le fa scorrere in
   verticale a piena larghezza. Non aggiunge sezioni, non sposta
   testi: cambia solo dove stanno le cose e quanto sono grandi.

   COME E' AGGANCIATO: viene caricato DOPO il blocco <style> di
   pagina e PRIMA di shell.css (vedi includes/head.php), esatta-
   mente per lo stesso motivo per cui shell.css sta in fondo:
   quasi tutte le schede si ridichiarano .body/.shots in casa, e
   cosi' le batte a parita' di specificita' senza !important.
   Per tornare indietro basta togliere quel <link>: nessuna
   pagina e' stata svuotata delle sue regole.
   ============================================================ */


/* ---------- 1. UN ASSE SOLO -----------------------------------
   I blocchi di testo smettono di stare centrati e si allineano a
   sinistra come titolo, cover e gallerie. Il max-width resta
   dov'era: la riga continua a misurare ~59 caratteri, cambia
   solo da dove parte. */
.body,
.cta-block,
.chapter,
.pull-quote{margin-left:0;margin-right:0;}

/* le file di video erano centrate dentro una colonna centrata:
   ora partono da sinistra come tutto il resto */
.video-row{margin-left:0;margin-right:0;justify-content:flex-start;}


/* ---------- 2. INTERLINEA -------------------------------------
   Era 1.85 su una riga da ~59 caratteri (desktop) e da ~40
   caratteri (telefono): righe corte e molto distanti, il testo
   si legge a strappi. 1.72 e 1.6 sono le misure comode per
   queste due lunghezze di riga. */
.body p,
.chapter p,
.duo-txt p{line-height:1.72;}


/* ---------- 3. L'HEADER NON COPRE PIU' IL TESTO ---------------
   Vale per le schede, non per la home: li' sotto l'header c'e' il
   video dell'hero, non delle righe da leggere.

   L'header resta quello di shared.css: sfumatura dal nero a
   trasparente e un filo di blur. Avevo provato a renderlo pieno per
   via delle righe che ci passavano sotto, ma sulle schede nere non
   serve piu' e il pieno tagliava la pagina in due. */


/* ---------- 4. GALLERIE: NIENTE TAGLI, ARIA, DIDASCALIE -------

   Vale per due griglie che fanno la stessa cosa con due nomi
   diversi: .shots (schede album e libri) e .spreads (book hand
   style, flamboyant, state of mind).

   4a. niente tagli. Il tassello aveva un aspect-ratio fisso e
   l'immagine dentro object-fit:cover: dove il rapporto non
   combaciava, l'immagine veniva tagliata. Erano 32 su 64 — gli
   spread del booklet di Ho Fatto Tardi (1.638) schiacciati in
   4/3, le foto verticali del book launch (0.75) schiacciate in
   orizzontale, "Snakes" di Outsider tagliato sopra e sotto.
   Ora e' l'immagine a dare l'altezza, come fa gia' .plates nelle
   prove: nessun ritaglio possibile. */
.shots .ph-tile,
.spreads .ph-tile{
  aspect-ratio:auto;
  background:var(--surface);
  border-radius:3px;overflow:hidden;
  position:relative;
}
.shots .ph-tile img,
.spreads .ph-tile img{width:100%;height:auto;display:block;aspect-ratio:auto;object-fit:fill;}

/* 4b. aria. Il gap era 1px: le immagini si toccavano e si
   leggevano come un muro unico. E la griglia era a filo schermo
   mentre tutto il resto stava a 2.5rem. */
.shots{margin:0 2.5rem;padding:0;gap:2.6rem 1.6rem;}
/* .spreads tiene il suo padding-bottom: rientra col margine */
.spreads{margin-left:2.5rem;margin-right:2.5rem;gap:2.6rem 1.6rem;}

/* 4c. la didascalia. Ogni immagine sta dentro un <figure>, che
   diventa la cella della griglia: il tassello tiene l'immagine,
   la didascalia sta sotto e non ci finisce sopra. */
.shots > figure.shot,
.spreads > figure.shot{margin:0;min-width:0;}
.shots > figure.shot.wide{grid-column:1/-1;}

/* vedi css/project-form.css: le didascalie non vanno in maiuscoletto */
.shots figcaption,
.spreads figcaption,
.plates figcaption{
  margin-top:.85rem;font-size:.8rem;letter-spacing:.01em;
  color:var(--muted);display:flex;gap:.7rem;align-items:baseline;
}
.shots figcaption .n,
.spreads figcaption .n,
.plates figcaption .n{color:var(--accent);font-variant-numeric:tabular-nums;}

/* 4d. si puo' toccare per ingrandire. Il cursore "lente" esiste
   solo da 701px in su: su un telefono non c'era niente che
   dicesse che l'immagine si apre a schermo pieno. Il segno
   compare solo dove non c'e' il puntatore. */
@media(hover:none){
  .shots .ph-tile::after,
  .spreads .ph-tile::after,
  .plates figure::after{
    content:"";position:absolute;right:.7rem;bottom:.7rem;
    width:30px;height:30px;border-radius:50%;
    background:rgba(10,10,13,.55) center/14px 14px no-repeat
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round"><circle cx="10.5" cy="10.5" r="6.5"/><line x1="15.5" y1="15.5" x2="21" y2="21"/><line x1="10.5" y1="7.5" x2="10.5" y2="13.5"/><line x1="7.5" y1="10.5" x2="13.5" y2="10.5"/></svg>');
    border:1px solid rgba(255,255,255,.28);
    pointer-events:none;
  }
  .plates figure{position:relative;}
}


/* ---------- 5. TELEFONO ---------------------------------------
   Qui c'era il danno piu' grosso: la galleria diventava un
   carosello orizzontale con la barra di scorrimento nascosta.
   Uno spread di booklet finiva largo 273px e alto 167 — il testo
   stampato dentro non si leggeva — e niente diceva che dietro ce
   n'erano altri nove.

   Ora scorrono in verticale, a piena larghezza: 375px invece di
   273 (+37%), e non resta niente di nascosto. La didascalia sta
   rientrata come il testo, l'immagine no: la cover fa gia' cosi'
   su telefono, e' il modo del sito. */
@media(max-width:640px){

  .body p,
  .chapter p,
  .duo-txt p{line-height:1.6;}

  .shots,
  .spreads,
  .plates{
    display:grid !important;grid-template-columns:1fr !important;
    overflow:visible;
    margin:0 0 3.5rem;padding:0;gap:2.4rem;
  }
  .shots > figure.shot,
  .spreads > figure.shot{flex:none;}
  .shots .ph-tile,
  .spreads .ph-tile,
  .plates img{border-radius:0;border-left:none;border-right:none;}
  .shots figcaption,
  .spreads figcaption,
  .plates figcaption{padding:0 1.3rem;font-size:.82rem;}

  /* i blocchi di testo restano al loro rientro di 1.3rem */
  .body,.chapter,.cta-block,.pull-quote{margin-left:0;margin-right:0;}
}


/* ---------- 6. MONITOR GRANDI ---------------------------------
   Sopra i 1800px shell.css sposta tutto sulla colonna da 1720.
   Il testo ora e' allineato a sinistra e non piu' centrato,
   quindi deve seguire la colonna anche lui, altrimenti l'asse si
   rompe proprio dove lo schermo e' piu' largo. Il -2.5rem tiene
   conto del padding che questi blocchi hanno gia' (stessa logica
   di .gallery-title in shell.css).
   .plates non era nell'elenco di shell.css: si allinea qui. */
@media(min-width:1800px){
  .body,
  .cta-block,
  .chapter,
  .pull-quote,
  .video-row{margin-left:calc(var(--edge) - 2.5rem);}
  .plates{margin-left:var(--edge);margin-right:var(--edge);}
  .spreads{margin-left:var(--edge);margin-right:var(--edge);}
}