/* ============================================================================
   MESSA A REGISTRO — layout.css
   La struttura. Nessun movimento qui dentro: il movimento sta in motion.css.

   PROPRIETÀ (contratto §0.1). Questo file scrive SOLO i componenti di `layout`:
   .insegna · .disco · .apertura · .indice · .progetto · .riga · .rail ·
   .opera / .lastra / .crocini · .scheda · .bio.
   Dei componenti di `base` (.testata, .righello, .filo, .barra-colore,
   .segnatura, .didascalia, .filtri, .riga-titolo, .colophon, .piede) qui si
   scrive esclusivamente la COLLOCAZIONE nella propria griglia — grid-column,
   grid-row, order, place-self — mai aspetto, colore, tipografia, movimento.

   Si anima solo transform/opacity/clip-path/background-color: qui non si anima
   nulla, e nessuna proprietà di layout è mai messa in transizione.
   ========================================================================== */


/* ══════════════════════════════════════ token derivati di struttura ═════ */
/* Non sostituiscono i token del SISTEMA (che vivono in base.css): sono
   grandezze DERIVATE dalla gabbia a 12 colonne, necessarie perché il disco è
   fuori flusso e le lastre della vetrina devono conoscere la colonna. */
:root{
  /* larghezza reale della gabbia e sua fuoriuscita rispetto al viewport */
  --gabbia: min(100vw, var(--max));
  --fuori:  max(0px, calc((100vw - var(--max)) / 2));

  /* la colonna: (gabbia − 2 margini − 11 gutter) / 12 */
  --colonna: calc((var(--gabbia) - 2 * var(--margine) - 11 * var(--gutter)) / 12);

  /* passo di colonna, usato dalla griglia dichiarata e dalle corse del disco */
  --passo: calc(var(--colonna) + var(--gutter));

  /* il disco: tre colonne piene + i due gutter interni */
  --disco-d: calc(3 * var(--colonna) + 2 * var(--gutter));

  /* --testata-h e la scala --z-* NON si dichiarano qui: vivono in base.css,
     che carica per primo ed è il proprietario della testata e dello skip link.
     Erano dichiarate in due file con valori diversi (--z-testata 80 in base,
     40 qui) e l'ultimo file vinceva per caso: --z-disco 1 · --z-indice 2 ·
     --z-testata 40 · --z-scheda 60 · --z-salta 200 stanno ora tutte insieme. */
}


/* ══════════════════════════════════════════════ gabbia comune ═══════════ */
/* Ogni sezione di primo livello è la stessa gabbia: max --max, centrata,
   margine laterale --margine. Il full-bleed si ottiene per sottrazione
   (width:100vw; margin-inline: calc(50% - 50vw)), mai togliendo la gabbia. */
.insegna,
.apertura,
.progetto,
.bio{
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--max);
  margin-inline: auto;
  padding-inline: var(--margine);
}

.indice{
  position: relative;
  z-index: var(--z-indice);
}


/* ============================================================================
   1 · INSEGNA — la hero a schermo pieno
   ========================================================================== */

.insegna{
  position: relative;
  min-block-size: 100dvh;
  padding-block: calc(var(--testata-h) + var(--sp-3)) var(--sp-3);

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  grid-template-rows:
    [disco]    var(--disco-d)
    [nome]     auto
    [vetrina]  minmax(var(--sp-5), 1fr)
    [piede]    auto;

  /* coordinate di partenza condivise con il disco fuori flusso */
  --insegna-alto: calc(var(--testata-h) + var(--sp-3));
}

/* --- 1.1 la griglia dichiarata: 11 hairline, l'unica volta in tutto il sito --- */
.insegna__griglia{
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  z-index: 0;
  pointer-events: none;
}
.insegna__griglia i{
  position: absolute;
  inset-block: 0;
  inline-size: 1px;
  /* la hairline cade al centro del gutter fra la colonna --n e la successiva */
  inset-inline-start: calc(
    var(--margine) + var(--n) * var(--passo) - var(--gutter) / 2
  );
  background-color: var(--registro);
}
.insegna__griglia i:nth-child(1)  { --n: 1 }
.insegna__griglia i:nth-child(2)  { --n: 2 }
.insegna__griglia i:nth-child(3)  { --n: 3 }
.insegna__griglia i:nth-child(4)  { --n: 4 }
.insegna__griglia i:nth-child(5)  { --n: 5 }
.insegna__griglia i:nth-child(6)  { --n: 6 }
.insegna__griglia i:nth-child(7)  { --n: 7 }
.insegna__griglia i:nth-child(8)  { --n: 8 }
.insegna__griglia i:nth-child(9)  { --n: 9 }
.insegna__griglia i:nth-child(10) { --n: 10 }
.insegna__griglia i:nth-child(11) { --n: 11 }

/* --- 1.2 il nome: colonne 2–9, a un terzo dell'altezza --- */
.insegna__nome{
  grid-column: 2 / span 8;
  grid-row: nome;
  position: relative;
  z-index: 2;
  margin: 0;
  transform-origin: 0 0;   /* corsa verso la testata: motion.css §3 */
}
/* i contenitori di titolo non tagliano mai le righe che entrano da sotto:
   il clip è sullo span (.riga-titolo, di base), non qui. */
.insegna__nome{ overflow: visible }

/* --- 1.3 la qualifica, sotto il disco, colonne 10–12 --- */
.insegna__qualifica{
  grid-column: 10 / span 3;
  grid-row: nome;
  align-self: start;
  margin: 0;
  padding-block-start: var(--sp-2);
}

/* --- 1.4 la vetrina: tre lastre sfalsate 0 / 7vh / 14vh, colonne 10–12 --- */
.insegna__vetrina{
  grid-column: 10 / span 3;
  grid-row: vetrina;
  position: relative;
  min-block-size: calc(14dvh + var(--riga-vetrina));

  /* altezza di lastra della vetrina, dichiarata come FRAZIONE di --riga:
     serve un numero puro alla consegna verso l'indice (motion.css §3),
     e in CSS non si divide una lunghezza per una lunghezza. */
  --riga-vetrina: calc(var(--riga) * .42);
  --pad-vetrina:  calc(var(--pad) * .55);
}
.opera--vetrina{
  position: absolute;
  inset-inline-end: 0;
  --riga: var(--riga-vetrina);
  --pad:  var(--pad-vetrina);
}
.opera--vetrina[data-slot="1"]{ inset-block-start: 0;    inset-inline-end: 0;   z-index: 3 }
.opera--vetrina[data-slot="2"]{ inset-block-start: 7dvh; inset-inline-end: 9%;  z-index: 2 }
.opera--vetrina[data-slot="3"]{ inset-block-start: 14dvh;inset-inline-end: 18%; z-index: 1 }

/* I due piani del crossfade occupano lo stesso posto: l'area interna della
   lastra, cioè il passe-partout tolto.
   Il selettore porta anche .lastra__img perché quella regola (§6, più in basso
   in questo file) impone inline-size/block-size 100%: con `auto` un rimpiazzato
   in posizione assoluta tornerebbe alla propria misura intrinseca, con `100%`
   sborderebbe di --pad a destra. La misura va scritta, e va scritta più forte. */
.lastra__img.vetrina__piano{
  position: absolute;
  inset: var(--pad);
  inline-size: calc(100% - 2 * var(--pad));
  block-size:  calc(100% - 2 * var(--pad));
  object-fit: contain;
}

/* --- 1.5 il filo di piede: tutte e 12 le colonne (collocazione di .filo) --- */
.insegna__piede{
  grid-column: 1 / -1;
  grid-row: piede;
  align-self: end;
}


/* ============================================================================
   2 · IL DISCO — marchio ricostruito in tipografia, mai un'immagine
   ========================================================================== */

/* Stato di riposo: ASSOLUTO dentro l'insegna. È il solo stato corretto senza
   JS, con prefers-reduced-motion e senza scroll-timeline: il disco scorre via
   con la hero e la pagina resta giusta. `position:fixed` lo prende solo
   l'engine, scrivendo data-modo. */
.disco{
  position: absolute;
  inset-block-start: var(--disco-alto);
  inset-inline-end: var(--margine);
  inline-size: var(--disco-d);
  block-size: var(--disco-d);
  z-index: var(--z-disco);
  pointer-events: none;
  transform-origin: 0 0;

  /* Il disco è fuori flusso ma deve stare esattamente nella riga `disco` della
     griglia dell'insegna, che comincia al padding superiore della sezione:
     è la coordinata già dichiarata da .insegna come --insegna-alto (che fino a
     qui era scritta e mai letta). Con `calc(--testata-h + 14dvh)` il disco
     scendeva 116px sotto la propria riga e stampava sopra la qualifica
     «Graphic designer — Cervia · Bologna · Romagna», che il SISTEMA vuole
     SOTTO il disco. Verificato a schermo, 1600×1000. */
  --disco-alto: var(--insegna-alto, calc(var(--testata-h) + var(--sp-3)));
  /* Corsa: quanto sale e quanto va a sinistra per arrivare in colonna 1.
     La salita è 0 e non −12dvh: il disco nasce a --disco-alto (80px, cioè 24px
     sotto la testata alta 56) e con −12dvh finiva per intero DIETRO la testata
     sticky, che è opaca e sta a --z-testata 40 contro --z-disco 1. Il bullet
     della numerazione in colonna 1 — che il SISTEMA vuole visibile per tutta
     la scrollata — non si vedeva mai. Alzare invece il punto di partenza per
     conservare il contro-scorrimento farebbe ricadere il disco sulla qualifica
     dell'insegna: fra le due, resta visibile il bullet. */
  --disco-salita: 0px;
  --disco-sinistra: calc(-1 * (var(--gabbia) - 2 * var(--margine) - var(--disco-d)));
  --disco-scala: .18;
}
.disco[data-modo]{
  position: fixed;
  inset-block-start: var(--disco-alto);
  inset-inline-end: calc(var(--fuori) + var(--margine));
}

.disco__cerchio{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: var(--rosso);
}

/* la B esce dal bordo sinistro del cerchio, esattamente come nel marchio */
.disco__b{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--disco-d) * -0.30);
  margin-block-start: calc(var(--disco-d) * -0.36);
  font-family: var(--f-display);
  font-weight: 800;
  font-synthesis-weight: none;
  font-size: calc(var(--disco-d) * .72);
  line-height: 1;
  letter-spacing: 0;
  color: var(--inchiostro);
  user-select: none;
}

/* la copia bianca: stesso box, stesse coordinate, ritagliata sul cerchio.
   Si animano i wrapper, MAI il clip-path. */
.disco__clip{
  position: absolute;
  inset: 0;
  clip-path: circle(50% at 50% 50%);
}
.disco__b--dentro{
  color: var(--foglio);
}


/* ============================================================================
   3 · APERTURA DELL'INDICE
   ========================================================================== */

.apertura{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-4);
  align-content: center;
  min-block-size: 64vh;
  padding-block: var(--sp-6);
}
.apertura__titolo{
  grid-column: 1 / span 6;
  margin: 0;
  overflow: visible;
}
.apertura__contatori{
  grid-column: 9 / span 4;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.apertura__regola{
  grid-column: 1 / span 6;
  margin: 0;
}
/* appiglio di sola collocazione: .filtri resta di base */
.apertura__slot--filtri{
  grid-column: 1 / -1;
  margin-block-start: var(--sp-3);
}


/* ============================================================================
   4 · BLOCCO PROGETTO
   La colonna 1 è riservata all'apparato per tutta la scrollata: nessuna
   immagine ci entra sopra i 1180px.
   ========================================================================== */

.progetto{
  padding-block: var(--sp-7) 0;
}
.progetto:last-of-type{ padding-block-end: var(--sp-6) }

.progetto__testa{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-2);
  margin-block-end: var(--sp-5);
}
/* collocazione di .segnatura (componente di base) in colonna 1 */
.progetto__testa > .segnatura{
  grid-column: 1 / span 1;
  grid-row: 1 / span 2;
  align-self: start;
}
.progetto__titolo{
  grid-column: 2 / span 7;
  grid-row: 1;
  margin: 0;
  overflow: visible;
}
.progetto__meta{
  grid-column: 2 / span 7;
  grid-row: 2;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 .7em;
}
/* Nessun `color`: il punto medio è un glifo, non una linea, e --registro è
   1.90:1 su --carta. Eredita il --grafite di .dati, come già fa il separatore
   della didascalia in base.css. */
.progetto__meta > span + span::before{
  content: "·";
  margin-inline-end: .7em;
}
.progetto__claim{
  grid-column: 9 / span 4;
  grid-row: 1;
  margin: 0;
}
.progetto__azione{
  grid-column: 9 / span 4;
  grid-row: 2;
  align-self: start;
  margin: 0;
}
/* L'attribuzione allo studio: terza riga, incolonnata col titolo e coi
   metadati. Sta sotto l'apparato del progetto e non accanto al claim,
   perché è un dato di paternità, non un argomento di vendita. */
.progetto__testa > .nota-collaborazione{
  grid-column: 2 / span 7;
  grid-row: 3;
  margin-block-start: var(--sp-1);
}

/* le righe partono da colonna 2: la 1 resta all'apparato.
   Il rientro è dichiarato come token e non scritto a mano nel padding, perché
   fascia e rail devono poterlo LEGGERE per compensarlo: il trucco full-bleed
   `margin-inline: calc(50% - 50vw)` presuppone un contenitore centrato nel
   viewport, e questo non lo è più. */
.progetto__righe{
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  --indent-righe: var(--passo);
  padding-inline-start: var(--indent-righe);
}


/* ============================================================================
   5 · RIGA — baseline INFERIORE condivisa. Il cuore del sistema.
   ========================================================================== */

.riga{
  display: flex;
  /* DEVIAZIONE DICHIARATA dal CONTRATTO §11.1 (`flex-end`), conseguenza della
     deviazione <figure>/<figcaption> del §9: l'elemento flex è l'OPERA, che è
     lastra + didascalia, e la didascalia ha altezza variabile (il committente
     va a capo). Con `flex-end` si allineavano le didascalie e le lastre
     galleggiavano. Poiché ogni .lastra è alta var(--riga) ed è il primo figlio
     dell'opera, allineare in ALTO produce esattamente il pavimento comune
     voluto dal SISTEMA: stesso bordo alto E stesso bordo BASSO per tutte
     le lastre della riga. */
  align-items: flex-start;    /* = baseline inferiore condivisa delle lastre */
  flex-wrap: wrap;
  column-gap: var(--gutter);
  row-gap: var(--sp-4);

  /* il vuoto dichiarato ha una misura, non è un residuo */
  --vuoto: calc(2 * var(--colonna) + var(--gutter));
}

/* Il vuoto alterna lato su sequenza fissa: destra · sinistra · destra · centro.
   È un elemento flex vero, quindi è misurabile e cede per primo quando la riga
   è satura (flex-shrink 1 contro flex-shrink 0 delle lastre). */
.riga--vuoto-destra::after,
.riga--vuoto-sinistra::before{
  content: "";
  flex: 0 1 var(--vuoto);
  min-inline-size: 0;
  block-size: 0;
}
.riga--vuoto-centro::before,
.riga--vuoto-centro::after{
  content: "";
  flex: 0 1 calc(var(--vuoto) / 2);
  min-inline-size: 0;
  block-size: 0;
}

/* VIBRAZIONE: dentro una riga «ritirata» ogni rosso arretra di un valore.
   Una sola dichiarazione ridefinisce i token per l'intero sottoalbero. */
.riga--ritirata{
  --rosso: var(--rosso-fondo);
  --rosso-ink: var(--rosso-fondo);
}


/* ============================================================================
   6 · OPERA / LASTRA — l'unità atomica
   Formula del SISTEMA, spostata su .opera come da contratto §9:
   width = (altezza − 2·pad) · ratio + 2·pad   ·   height = --riga
   ========================================================================== */

.opera{
  box-sizing: border-box;
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  --ratio: 1;
  inline-size: calc((var(--riga) - 2 * var(--pad)) * var(--ratio) + 2 * var(--pad));
  max-inline-size: 100%;
}

.lastra{
  box-sizing: border-box;
  display: block;
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  block-size: var(--riga);
  padding: var(--pad);
  overflow: hidden;

  background-color: var(--foglio);
  background-image: var(--lqip, none);
  background-repeat: no-repeat;
  background-origin: content-box;   /* l'area interna HA il ratio dell'opera */
  background-position: center;
  background-size: 100% 100%;

  border: var(--hair);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a.lastra{ cursor: pointer }

.lastra__img{
  display: block;
  position: relative;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;   /* mai un crop: sono lavori consegnati */
}

/* focus: mai rimosso, mai sostituito da outline:none */
.lastra:focus-visible{
  outline: 2px solid var(--rosso-ink);
  outline-offset: 3px;
}

/* --- crocini di registro: geometria (l'aspetto e l'apparizione: motion §2) --- */
.crocini{
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  --croce: 12px;
  --croce-off: calc(max(var(--pad), 14px) / 2 - var(--croce) / 2);
}
.crocini i{
  position: absolute;
  inline-size: var(--croce);
  block-size: var(--croce);
}
.crocini i:nth-child(1){ inset-block-start: var(--croce-off); inset-inline-start: var(--croce-off) }
.crocini i:nth-child(2){ inset-block-start: var(--croce-off); inset-inline-end:   var(--croce-off) }
.crocini i:nth-child(3){ inset-block-end:   var(--croce-off); inset-inline-end:   var(--croce-off) }
.crocini i:nth-child(4){ inset-block-end:   var(--croce-off); inset-inline-start: var(--croce-off) }


/* ============================================================================
   7 · FASCIA — full-bleed, ratio > 3. Punteggiatura del ritmo.
   ========================================================================== */

.riga--fascia{
  display: block;
  inline-size: 100vw;
  /* Esce dalla gabbia E dall'indent di colonna 1. Il 50% si risolve sul content
     box di .progetto__righe, che è rientrato di --indent-righe: senza la
     sottrazione la fascia partiva a --passo/2 e sfondava di altrettanto a
     destra, con barra di scorrimento orizzontale su tutto il documento. */
  margin-inline: calc(50% - 50vw - var(--indent-righe, 0px) / 2);
}
.opera--fascia{
  --pad: 0px;
  inline-size: 100%;
  max-inline-size: none;
}
.opera--fascia .lastra{
  border-inline: 0;
  /* altezza guidata dalla misura reale: la fascia riempie il viewport in
     larghezza e la sua altezza discende dal ratio, con pavimento --riga-bassa
     e tetto 62vh perché un 3:1 non diventi un muro. */
  block-size: clamp(var(--riga-bassa), calc(100vw / var(--ratio)), 62vh);
}
.opera--fascia .didascalia{
  padding-inline: var(--margine);
}


/* ============================================================================
   8 · RAIL — la sfogliatura. Serie lunghe e omogenee.
   ========================================================================== */

.riga--rail{
  display: block;
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw - var(--indent-righe, 0px) / 2);   /* cfr. §7 */
  background-color: var(--velina);
  padding-block: var(--sp-3);
}
.rail__testa{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding-inline: var(--margine);
}
.rail__pista{
  display: flex;
  align-items: flex-start;    /* cfr. §5: il pavimento comune sta sulle lastre */
  gap: var(--gutter);
  margin: 0;
  padding-inline: var(--margine);
  list-style: none;

  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margine);

  /* l'affordance non si nasconde mai */
  scrollbar-width: thin;
  scrollbar-color: var(--registro) transparent;

  /* --riga della pista, dichiarata sul PADRE per non creare un ciclo
     quando .opera--rail ridefinisce --riga */
  --riga-rail: calc(var(--riga) * .8);
  padding-block-end: var(--sp-2);
}
.rail__pista:focus-visible{
  outline: 2px solid var(--rosso-ink);
  outline-offset: -2px;
}
.rail__voce{
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.opera--rail{
  --riga: var(--riga-rail);
}


/* ============================================================================
   9 · TOTEM — ratio < 0.4. Il formato diventa un comportamento.
   Qui la sola geometria; lo scorrimento legato allo scroll è in motion.css §6.
   ========================================================================== */

.lastra--totem{
  overflow: hidden;
}
.lastra--totem .lastra__img{
  inline-size: 100%;
  block-size: auto;
  object-fit: fill;
  object-position: top;
}


/* ============================================================================
   10 · SCHEDA PROGETTO
   ========================================================================== */

.scheda{
  position: fixed;
  inset: 0;
  z-index: var(--z-scheda);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--carta);
  padding-block: var(--sp-4) 0;
}
.scheda[hidden]{ display: none }

.scheda__foglio{
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--max);
  margin-inline: auto;
  padding: var(--sp-5) var(--margine) var(--sp-6);
  background-color: var(--foglio);
  border: var(--hair);

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-4);
  align-content: start;
}
/* collocazione di serie: colonna singola centrata di 8 colonne */
.scheda__foglio > *{ grid-column: 3 / span 8 }

.scheda__testa{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-2);
}
.scheda__testa > .scheda__dati{ grid-column: 1 / span 8; margin: 0;
  display: flex; flex-wrap: wrap; gap: 0 .7em }
.scheda__dati > span + span::before{
  content: "·";
  margin-inline-end: .7em;   /* eredita --grafite: cfr. .progetto__meta */
}
.scheda__titolo{ grid-column: 1 / span 9; margin: 0; overflow: visible }
.scheda__claim{ grid-column: 1 / span 8; margin: 0 }
/* LA VIA D'USCITA, A OGNI LARGHEZZA E DA QUALUNQUE PUNTO DELLA SCROLLATA.

   Era `sticky` dentro .scheda__testa, e sticky tiene solo finché il proprio
   contenitore è a schermo: uscita la testa, usciva il pulsante. Misurato a
   1440px — dopo 1200px di scroll stava a −791, in fondo alla scheda a −2274.
   Intanto la testata del sito è coperta dalla scheda (z-scheda 60 contro
   z-testata 40) e prende `inert`: chi scorreva una scheda lunga restava senza
   nessun comando, con il solo tasto indietro del browser.

   Da una modale a schermo intero si deve poter uscire sempre. Quindi `fixed`
   sul viewport, non sulla griglia. Il fondo `--foglio` con hairline non è
   decorazione: il pulsante passa sopra le tavole, comprese quelle a fondo
   scuro, e senza un fondo proprio sparirebbe dentro le immagini.
   `min-block-size: 44px` porta l'area di tocco alla soglia di accessibilità. */
.scheda__chiudi{
  position: fixed;
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--margine);
  z-index: 3;

  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--sp-2);
  background-color: var(--foglio);
  border: var(--hair);
}

.scheda__apertura{ grid-column: 1 / -1 }
.scheda__tags{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scheda__social{ margin: 0 }

.scheda__tavole{
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;   /* la baseline inferiore vale anche qui, cfr. §5 */
  flex-wrap: wrap;
  column-gap: var(--gutter);
  row-gap: var(--sp-5);
  margin-block-start: var(--sp-4);
}

.scheda__navigazione{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-3);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-3);
  border-block-start: var(--hair);

  --riga-vicino: calc(var(--riga) * .5);
}
.scheda__vicino{
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--sp-2);
  text-decoration: none;
  color: inherit;
}
.scheda__vicino--succ{
  align-items: end;
  text-align: end;
}
.scheda__vicino:focus-visible{
  outline: 2px solid var(--rosso-ink);
  outline-offset: 4px;
}
.opera--vicino{
  --riga: var(--riga-vicino);
}


/* ============================================================================
   11 · BIO — due colonne asimmetriche, 7 + 4

   Era la sezione «metodo» e ne conserva la gabbia esatta: cambia la voce,
   non la misura. La colonna stretta resta la scheda tecnica; la colonna
   larga porta titolo, qualifica e testo. Il ritratto, quando c'è, entra
   nella colonna stretta SOPRA la scheda tecnica: una lastra come le altre,
   crocini compresi — l'unica figura del sito che non è un lavoro, e il solo
   modo di non farla stonare è trattarla come se lo fosse.
   ========================================================================== */

.bio{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--sp-4);
  padding-block: var(--sp-7);
}
.bio__titolo{ grid-column: 1 / span 7; margin: 0; overflow: visible }
.bio__qualifica{ grid-column: 1 / span 7; margin: 0 }
.bio__testo{ grid-column: 1 / span 7 }
/* È una .opera: la larghezza esce dalla formula (altezza · ratio), non dalle
   quattro colonne che occupa. Resta più stretta della colonna ed è giusto
   così — nessuna lastra del sito riempie il proprio contenitore. */
.bio__ritratto{
  grid-column: 9 / span 4;
  /* Copre le tre righe della colonna sinistra (titolo · qualifica · testo)
     e non due: su due, la propria altezza le gonfiava entrambe e la qualifica
     scendeva staccandosi dal titolo. Con la terza riga — il testo, che è alto —
     l'altezza del ritratto è già coperta e nessuna riga si deforma. */
  grid-row: 1 / span 3;
  align-self: start;
  justify-self: start;
  margin: 0;
  --riga: 420px;              /* l'altezza-lastra della sezione, cfr. §5 */
}
.bio__scheda-tecnica{
  grid-column: 9 / span 4;
  align-self: start;
  margin: 0;
}
.scheda-tecnica__riga{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  column-gap: var(--gutter);
  padding-block: var(--sp-2);
}
.scheda-tecnica__riga > dt,
.scheda-tecnica__riga > dd{ margin: 0 }
/* la hairline fra le righe: si disegna con scaleX in motion.css §1 */
.scheda-tecnica__riga::before{
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background-color: var(--registro);
  transform-origin: 0 50%;
}


/* ============================================================================
   12 · RESPONSIVE — responsive vero, non tre media query di cortesia
   ========================================================================== */

/* --- 720 → 1180px: due lastre per riga, --riga più bassa,
       la colonna 1 di apparato collassa nella testata --- */
@media (max-width: 1180px){
  :root{
    --riga: clamp(240px, 36vh, 420px);
  }
  .insegna{
    grid-template-rows:
      [disco]   var(--disco-d)
      [nome]    auto
      [vetrina] minmax(var(--sp-4), 1fr)
      [piede]   auto;
  }
  .insegna__nome{ grid-column: 1 / span 9 }

  /* l'apparato esce dalla colonna 1: il righello nella testata lo sostituisce */
  .progetto__testa > .segnatura{ grid-column: 1 / span 12; grid-row: auto }
  .progetto__titolo{ grid-column: 1 / span 12; grid-row: auto }
  .progetto__meta{ grid-column: 1 / span 12; grid-row: auto }
  .progetto__claim{ grid-column: 1 / span 8; grid-row: auto }
  .progetto__azione{ grid-column: 1 / span 8; grid-row: auto }
  .progetto__testa > .nota-collaborazione{ grid-column: 1 / span 8; grid-row: auto }
  /* il rientro sparisce col token, così fascia e rail leggono 0 e il
     full-bleed torna a essere esattamente 100vw da bordo a bordo */
  .progetto__righe{ --indent-righe: 0px }

  .apertura__titolo{ grid-column: 1 / span 8 }
  .apertura__contatori{ grid-column: 1 / span 12; flex-direction: row; flex-wrap: wrap; gap: var(--sp-4) }
  .apertura__regola{ grid-column: 1 / span 8 }

  .bio__titolo,
  .bio__qualifica,
  .bio__testo{ grid-column: 1 / span 12 }
  .bio__ritratto{ grid-column: 1 / span 6; grid-row: auto }
  .bio__scheda-tecnica{ grid-column: 1 / span 12 }

  .scheda__foglio > *{ grid-column: 1 / -1 }
  .scheda__titolo,
  .scheda__claim,
  .scheda__testa > .scheda__dati{ grid-column: 1 / span 10 }
}

/* --- sotto 720px: una lastra per riga a larghezza piena e ALTEZZA LIBERA.
       Qui e solo qui l'altezza-riga costante decade: su schermo stretto un A4
       a 280px è illeggibile. --- */
/* 719.98 e non 719: base.css collassa il righello a 719.98px e motion.css
   spegne la Deriva sotto i 720px. Fra 719 e 720 i tre file devono dire la
   stessa cosa, altrimenti a 719.5px il sito è per metà desktop. */
@media (max-width: 719.98px){
  :root{
    --riga: clamp(200px, 30vh, 300px);
    --pad: clamp(8px, 2.6vw, 14px);
  }

  /* la griglia dichiarata scende a 3 hairline */
  .insegna__griglia i:nth-child(n){ display: none }
  .insegna__griglia i:nth-child(3),
  .insegna__griglia i:nth-child(6),
  .insegna__griglia i:nth-child(9){ display: block }

  .insegna{
    --disco-d: 50vw;
    grid-template-rows:
      [nome]      auto
      [disco]     var(--disco-d)
      [qualifica] auto
      [vetrina]   minmax(var(--sp-4), 1fr)
      [piede]     auto;
    padding-block-start: calc(var(--testata-h) + var(--sp-4));
  }
  .insegna__nome{ grid-column: 1 / -1; grid-row: nome }
  .insegna__qualifica{ grid-column: 1 / -1; grid-row: qualifica; padding-block-start: var(--sp-2) }

  /* il disco passa sotto il nome, allineato a destra, diametro = metà larghezza */
  .disco{
    --disco-d: 50vw;
    --disco-salita: -8dvh;
    --disco-sinistra: calc(-1 * (100vw - 2 * var(--margine) - var(--disco-d)));
    grid-column: 7 / -1;
    grid-row: disco;
    inset-block-start: 0;
    inset-inline-end: 0;
  }
  /* SU MOBILE IL DISCO NON SI AGGANCIA. Resta assoluto nell'insegna e scorre
     via con la hero, che è lo stato di riposo dichiarato a §4.

     Agganciato faceva danno due volte. Primo: a 390px il diametro è 50vw, un
     bollo rosso da 168px piantato a metà schermo — passa sopra i metadati del
     progetto (che diventano illeggibili) e dietro le tavole, perché il lavoro
     sta davanti al rosso ed è giusto così. Secondo, e decisivo: qui non ha
     nemmeno una funzione. Il disco agganciato è il bullet della numerazione in
     colonna 1, e sotto 1180px la colonna 1 non esiste più — l'apparato passa a
     tutta larghezza e a numerare i progetti ci pensa il righello nella testata,
     che stampa «03/22» sempre visibile. Restava un ornamento fisso in mezzo
     alla lettura. */
  .disco[data-modo]{
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
  }

  /* la vetrina diventa una sola lastra */
  .insegna__vetrina{ --riga-vetrina: calc(var(--riga) * .9); min-block-size: var(--riga-vetrina) }
  .opera--vetrina[data-slot="2"],
  .opera--vetrina[data-slot="3"]{ display: none }
  .opera--vetrina[data-slot="1"]{ position: relative; inset: auto; inline-size: 100%; max-inline-size: 100% }
  .opera--vetrina[data-slot="1"] .lastra{ block-size: auto; aspect-ratio: var(--ratio) }

  /* una lastra per riga, altezza libera dedotta dal ratio reale */
  .opera{
    inline-size: 100%;
    max-inline-size: 100%;
  }
  .lastra{
    block-size: auto;
    aspect-ratio: var(--ratio);
  }
  .riga{ row-gap: var(--sp-4) }
  .riga--vuoto-destra::after,
  .riga--vuoto-sinistra::before,
  .riga--vuoto-centro::before,
  .riga--vuoto-centro::after{ display: none }

  /* la fascia ultra-wide diventa essa stessa un rail: solo CSS */
  .riga--fascia{
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margine);
    scrollbar-width: thin;
    scrollbar-color: var(--registro) transparent;
    padding-inline: var(--margine);
  }
  .opera--fascia{
    --pad: 0px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    inline-size: calc(var(--riga-bassa) * var(--ratio));
    max-inline-size: none;
  }
  .opera--fascia .lastra{
    block-size: var(--riga-bassa);
    aspect-ratio: auto;
    border-inline: var(--hair);
  }
  .opera--fascia .didascalia{ padding-inline: 0 }

  /* il rail resta orizzontale: è il suo medium */
  .opera--rail{ inline-size: calc((var(--riga) - 2 * var(--pad)) * var(--ratio) + 2 * var(--pad)) }
  .opera--rail .lastra{ block-size: var(--riga); aspect-ratio: auto }

  .scheda__foglio{ padding-inline: var(--sp-2) }

  /* .scheda__chiudi non compare qui: è `fixed` a ogni larghezza (§10). Prima
     questo breakpoint lo rimetteva `static`, ed è così che spariva. */
  .scheda__navigazione{ grid-template-columns: minmax(0, 1fr) }
  .scheda__vicino--succ{ align-items: start; text-align: start }
  .opera--vicino{ inline-size: calc((var(--riga-vicino) - 2 * var(--pad)) * var(--ratio) + 2 * var(--pad)) }
  .opera--vicino .lastra{ block-size: var(--riga-vicino); aspect-ratio: auto }
}