/* ==========================================================================
   Sinflora - le pagine interne, terzo stile

   Si carica DOPO base.css, struttura.css e home.css:
     base    → token, reset, scala tipografica
     struttura → testata, menu, slider, footer
     home      → palette calda, forme organiche, onde, cartigli, occhielli
     questo  → solo quello che nella home non c'e'

   Le regole del linguaggio, che valgono qui come nella home:
     · le fotografie stanno dentro le forme, mai in un rettangolo
     · il testo sta fuori dall'immagine - nessun velo scuro, mai
     · le fasce piene aprono e chiudono con una curva
     · niente corsivo
   ========================================================================== */


/* ==========================================================================
   1. LA TESTATA DI PAGINA
   Non una fotografia con il titolo scritto sopra: il titolo sta sulla carta
   e la fotografia gli sta accanto, dentro una forma. E' la stessa regola
   del ritratto in home, e vale come apertura di ogni pagina interna.
   ========================================================================== */

.testata {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(3rem, 7vw, 6rem);
  overflow-x: clip;
}

.testata__griglia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

.briciole {
  grid-column: 1 / -1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  font-size: 0.6875rem;
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--salvia-testo);
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}

.briciole a { color: inherit; text-decoration: none; }
.briciole a:hover { color: var(--oliva); text-decoration: underline; }
/* la freccina fra una voce e l'altra (richiesta del committente, 15/09) */
.briciole li:not(:last-child)::after { content: "›"; margin-left: var(--s-2); font-size: 1.25em; line-height: 1; opacity: 0.7; }

/* Le righe vanno dette: senza, il titolo largo quanto la griglia finisce
   dopo la fotografia e l'introduzione, cioe' in fondo. */
.testata__titolo {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-6xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--oliva-cupo);
  position: relative;
  z-index: 1;
  /* Il titolo attraversa tutte e due le colonne per disegno: e' cosi' che
     la fotografia ne scavalca la coda. Il limite pero' non puo' essere solo
     in `ch`, perche' `ch` segue il corpo del carattere mentre la colonna
     segue la finestra, e fra i 961 e i 1280 px le due cose divergono: li' la
     fotografia si mangiava una parola intera. Misurato a 1024:
     «che abbiamo realizz».
     La percentuale vince nella fascia stretta e fa andare a capo prima; i
     15ch vincono da 1280 in su, dove l'effetto serve. */
  max-width: min(15ch, 60%);
}

/* La fotografia scavalca la coda del titolo, come in home. Sta in una riga
   sola e sborda con un margine negativo: cosi' non allunga la griglia. */
.testata__foto {
  grid-column: 2;
  grid-row: 2;
  z-index: 2;
  margin: clamp(1.5rem, 5vw, 5rem) 0 calc(clamp(3rem, 9vw, 8rem) * -1);
  aspect-ratio: 4 / 5;
}

/* Il sommario sta nella STESSA riga del titolo, appoggiato in fondo.
   Prima stava in una riga sua, sotto: e siccome la riga del titolo e' alta
   quanto la fotografia, restavano fra i 204 e i 298 pixel di niente in mezzo
   - misurati a 1440 su quattro pagine. Adesso quel vuoto e' lo spazio fra
   titolo e sommario dentro una riga sola, e la testata e' piu' corta di
   tutta l'altezza della riga che non c'e' piu'. */
.testata__intro {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  max-width: 40ch;
  padding-top: var(--s-5);
}

.testata__intro p {
  font-size: var(--t-md);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  margin: 0 0 var(--s-5);
}


/* ==========================================================================
   2. LE FASI
   Come si svolge un lavoro, in tre o quattro passaggi numerati. Il numero
   e' grande e sta dentro una forma: e' l'unico posto in cui una cifra fa
   da figura.
   ========================================================================== */

.fasi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.5rem, 3.5vw, 3rem);
}

.fase { display: grid; gap: var(--s-4); align-content: start; }

.fase__numero {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--forma-1);
  background: var(--oro);
  color: var(--oliva-cupo);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1;
}

.fase:nth-child(2) .fase__numero { border-radius: var(--forma-4); }
.fase:nth-child(3) .fase__numero { border-radius: var(--forma-6); }
.fase:nth-child(4) .fase__numero { border-radius: var(--forma-3); }

.fase h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-title);
  margin: 0;
}

.fase p { margin: 0; color: var(--ink-soft); font-size: var(--t-sm); line-height: var(--lh-body); }

.section--oliva .fase h3 { color: var(--white); }
.section--oliva .fase p { color: var(--terra); }


/* ==========================================================================
   3. COSA COMPRENDE
   Un elenco di voci con la spunta. Serve a dire in fretta cosa c'e' dentro
   un servizio, senza scrivere un papiro.
   ========================================================================== */

.comprende {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-4) clamp(1.5rem, 4vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* La spunta e' fuori dal flusso, non un elemento flex: dentro la voce
   servono grassetti e trattini, e con `display: flex` ogni pezzo di testo
   diventava una colonna sua - il titolo in grassetto finiva incolonnato a
   sinistra e il resto della frase a destra. Cosi' la riga e' testo normale
   e si spezza dove deve. */
.comprende li {
  position: relative;
  padding-left: calc(1.125rem + var(--s-3));
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.comprende .ico {
  position: absolute;
  left: 0;
  top: 0.28em;
  color: var(--oliva);
}

.comprende b { font-weight: 600; color: var(--ink); }
.section--oliva .comprende b { color: var(--white); }

.section--oliva .comprende li { color: var(--terra); }
.section--oliva .comprende .ico { color: var(--oro); }


/* ==========================================================================
   4. LA GALLERIA
   Fotografie dentro le forme, didascalia sotto e fuori. Le forme si
   alternano: due uguali affiancate si leggono come un errore.
   ========================================================================== */

.galleria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

/* Una raccolta che segue un elenco o una nota, e non la testata di sezione,
   restava incollata: lo stacco fra il testo e le fotografie lo porta il
   margine di `.sec-head`, e li' `.sec-head` non c'e'. Misurato su
   piante-da-interno: zero pixel fra l'ultima riga dell'elenco e la prima
   fotografia. */
:is(.comprende, .nota-sezione) + :is(.galleria, .reparto) { margin-top: var(--s-7); }

/* `min-width: 0` non e' decorativo: senza, la scheda quadrata di
   `galleria--opere` sfonda la colonna. La misura minima automatica di una
   cella di griglia la calcola il contenuto, e un'immagine con
   `aspect-ratio` e `height: 100%` la dichiara piu' larga della traccia: fra
   768 e 900 px la quarta fotografia usciva dalla gabbia e scavalcava il
   bordo destro. La colonna implicita della figura la va dichiarata a
   `minmax(0, 1fr)` per lo stesso motivo: senza, si dimensiona sul
   contenuto e la cornice quadrata se la porta a 440 px dentro una traccia
   di 391. Si vedeva su `giardini-realizzati` e su `wedding` da prima che
   queste due righe esistessero. */
.galleria figure { margin: 0; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
.galleria .forma { aspect-ratio: 4 / 5; }

.galleria figure:nth-child(6n+1) .forma { border-radius: var(--forma-1); }
.galleria figure:nth-child(6n+2) .forma { border-radius: var(--forma-3); }
.galleria figure:nth-child(6n+3) .forma { border-radius: var(--forma-5); }
.galleria figure:nth-child(6n+4) .forma { border-radius: var(--forma-2); }
.galleria figure:nth-child(6n+5) .forma { border-radius: var(--forma-6); }
.galleria figure:nth-child(6n+6) .forma { border-radius: var(--forma-4); }

.galleria figcaption {
  font-size: var(--t-sm);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
}

/* La didascalia. `.caption` nasce maiuscola in base.css, che va bene per
   un'etichetta e non per una frase: qui e' una frase, e sotto una
   fotografia si legge come una riga di giornale. Questa correzione stava
   in home.css insieme al riquadro smussato che e' stato tolto: e' il pezzo
   che serviva, ed e' tornato dove le gallerie stanno davvero. */
.galleria .caption {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-md);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  text-transform: none;
  color: var(--ink);
}

/* Sul telefono la didascalia scendeva a 17 px serif contro i 16 della prosa:
   una riga di corredo che pesava piu' del paragrafo. La correzione stava in
   home.css, ma questo foglio si carica dopo e con la stessa specificita' se
   la riprendeva. Va ripetuta qui. */
@media (max-width: 47.99rem) {
  .galleria .caption { font-size: var(--t-testo); }
}

.galleria figcaption { display: grid; gap: var(--s-1); }

.galleria .marginalia {
  display: block;
  font-size: var(--t-3xs);
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  font-weight: 600;
  font-style: normal;
  color: var(--salvia-testo);
}

/* lo sfalsamento toglie la griglia dall'occhio */
.galleria--sfalsata figure:nth-child(even) { margin-top: clamp(1.5rem, 4vw, 3.5rem); }


/* ==========================================================================
   IL CAROSELLO DI FOTOGRAFIE SMUSSATE
   Chiesto dal committente per gli eventi: «basta forme stondate, teniamole
   smussate», e un carosello invece di una griglia. E' il terzo modo di
   contenere una fotografia, accanto al ciottolo e alla fotografia nuda:
   un riquadro con gli angoli morbidi, che non compete con le sagome
   organiche perche' non prova a essere una sagoma.
   ========================================================================== */

.cornice-morbida {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
  background: var(--terra-chiara);
  box-shadow: inset 0 0 0 1px rgb(32 38 30 / 0.07);
}

.cornice-morbida > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Il nastro esce dalla gabbia ai due lati, cosi' si vede che continua. */
.galleria--morbida {
  display: flex;
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-block: 0 var(--s-3);
  padding-inline: var(--shell-pad);
  margin-inline: calc(var(--shell-pad) * -1);
  scroll-padding-inline: var(--shell-pad);
}

.galleria--morbida::-webkit-scrollbar { display: none; }

.galleria--morbida > figure {
  flex: 0 0 min(78vw, 20rem);
  scroll-snap-align: start;
  margin: 0;
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}

@media (min-width: 48rem) {
  .galleria--morbida > figure { flex-basis: clamp(16rem, 24vw, 22rem); }
}

/* --- Il modulo sta al centro della fascia -------------------------------
   Segnalato: «la sezione con il form la metterei tutta centrata, mi fa
   strano vederla a lato». Su una fascia colorata un modulo appoggiato a
   sinistra lascia meta' fascia vuota e sembra un ripensamento. */
.modulo-sezione .modulo {
  max-width: 46rem;
  margin-inline: auto;
}

/* Sotto i 768 px la griglia diventa un nastro: quattro fotografie in colonna
   sono quattro schermate, e il posto si guarda a colpo d'occhio. Sopra resta
   la griglia sfalsata, che li' ci sta tutta. */
@media (max-width: 47.99rem) {
  .galleria--nastro-mobile {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline: var(--shell-pad);
    margin-inline: calc(var(--shell-pad) * -1);
    scroll-padding-inline: var(--shell-pad);
  }

  .galleria--nastro-mobile::-webkit-scrollbar { display: none; }

  .galleria--nastro-mobile > figure {
    flex: 0 0 min(74vw, 18rem);
    scroll-snap-align: start;
    margin-top: 0;
    min-width: 0;
  }
}

/* La locandina: il foglio a sinistra, i quattro dati a destra. Sotto i 900
   px passa in colonna, perche' un manifesto stretto non si legge. */
.locandina {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

.locandina .galleria { display: block; }
.locandina .cornice-morbida { aspect-ratio: 3375 / 4219; }
/* I quattro dati stanno in colonna, uno sotto l'altro: sono una scheda
   tecnica, non un elenco da scorrere con l'occhio in orizzontale. */
.locandina__testo {
  display: grid;
  gap: var(--s-3);
  align-content: center;
  justify-items: start;
}

.locandina__testo h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-title);
  color: var(--ink);
}

.locandina__testo p:not(.occhiello) { margin: 0; max-width: 42ch; color: var(--ink-soft); }

.locandina__dati {
  align-self: center;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

@media (max-width: 56.25rem) {
  .locandina { grid-template-columns: minmax(0, 1fr); }
  .locandina .galleria { max-width: 24rem; }
}

/* Nella lente la fotografia ingrandita prende gli stessi angoli morbidi:
   un riquadro squadrato dentro un sito senza riquadri squadrati stona. */
.lente__corpo img { border-radius: clamp(0.75rem, 1.6vw, 1.25rem); }


/* ==========================================================================
   5. IL BLOCCO DI RICHIAMO
   Una fotografia piena con il testo su un cartiglio di carta: e' lo stesso
   dispositivo del wedding in home, e ripetendolo diventa un sistema.
   ========================================================================== */

.richiamo {
  position: relative;
  isolation: isolate;
  min-height: clamp(24rem, 44vw, 34rem);
  display: grid;
  align-items: center;
  overflow-x: clip;
  background: var(--terra-chiara);
}

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

.richiamo > .shell { width: 100%; padding-block: clamp(3rem, 8vw, 5rem); }

.richiamo__cartiglio {
  max-width: min(30rem, 100%);
  padding: clamp(2.25rem, 4vw, 3rem) clamp(2.25rem, 4vw, 3rem) clamp(2rem, 3.5vw, 2.5rem);
  background: var(--terra-velo);
  border-radius: var(--forma-carta);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  box-shadow: 0 1.25rem 3.5rem rgb(20 30 14 / 0.22);
}

/* il titolo prima, l'occhiello sotto: in alto a sinistra la curva rientra
   troppo e l'occhiello finirebbe sulla fotografia */
.richiamo__cartiglio h2 { order: 1; font-family: var(--serif); font-weight: 600;
  font-size: var(--t-2xl); line-height: var(--lh-title); letter-spacing: var(--ls-title);
  color: var(--ink); margin: 0; }
.richiamo__cartiglio .occhiello { order: 2; margin-top: calc(var(--s-2) * -1); }
.richiamo__cartiglio p { order: 3; margin: 0; max-width: 32ch; color: var(--ink-soft); }
.richiamo__cartiglio .btn { order: 4; }


/* ==========================================================================
   6. I COMUNI SERVITI
   Dove lavoriamo. Utile per il posizionamento locale, ma non deve pesare
   come una sezione vera: e' un elenco, non un capitolo.
   ========================================================================== */

.comuni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.comuni li {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--forma-3);
}

.comuni li:nth-child(3n+2) { border-radius: var(--forma-5); }
.comuni li:nth-child(3n+3) { border-radius: var(--forma-6); }


/* ==========================================================================
   7. LE ALTRE PAGINE
   In fondo, tre rimandi. Non un menu ripetuto: tre schede con la loro
   fotografia, come i mestieri in home.
   ========================================================================== */

.altre {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.altra { position: relative; display: grid; gap: var(--s-3); }
.altra .forma { aspect-ratio: 3 / 2; transition: transform var(--dur) var(--ease-out); }
.altra:hover .forma, .altra:focus-within .forma { transform: translateY(-5px); }

.altra .forma { border-radius: clamp(0.75rem, 1.6vw, 1.25rem); }

.altra h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-title);
  margin: 0;
}

.altra h3 a { color: inherit; text-decoration: none; }
.altra h3 a::after { content: ""; position: absolute; inset: 0; }
.altra p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }


/* ==========================================================================
   8. LA CHIUSURA
   Un solo invito, alla fine. I recapiti veri, non un modulo che nessuno
   compila.
   ========================================================================== */

.chiusura { text-align: center; }

.chiusura__corpo {
  display: grid;
  gap: var(--s-5);
  justify-items: center;
  max-width: 44rem;
  margin-inline: auto;
}

.chiusura h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-4xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin: 0;
}

.chiusura p { margin: 0; max-width: 42ch; color: var(--ink-soft); }

.chiusura__vie {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: center;
  align-items: center;
}


/* ==========================================================================
   9. MOBILE
   ========================================================================== */

@media (max-width: 60rem) {
  .testata__griglia { grid-template-columns: 1fr; }
  .testata__titolo,
  .testata__foto,
  .testata__intro { grid-column: 1; }
  .testata__titolo { grid-row: 2; max-width: 100%; }
  .testata__foto {
    grid-row: 3;
    margin: var(--s-5) 0 0;
    width: min(100%, 22rem);
    justify-self: end;
    aspect-ratio: 4 / 5;
  }
  .testata__intro { grid-row: 4; padding-top: var(--s-5); }

  .galleria--sfalsata figure:nth-child(even) { margin-top: 0; }
}

@media (max-width: 47.99rem) {
  /* Sul telefono il richiamo si spezzava: la fotografia diventava una
     striscia in alto e il cartiglio scendeva sotto, sulla carta. Segnalato:
     «l'immagine di sfondo deve coprire tutta la section, dalla prima curva
     in alto alla curva in basso». Adesso si comporta come la fascia del
     wedding: fotografia a tutta sezione, cartiglio appoggiato sopra. Il
     cartiglio e' una forma opaca, non un velo, quindi il testo si legge. */
  /* Il cartiglio copriva quasi tutta la foto: adesso sta in basso e la
     sezione e' piu' alta, cosi' sopra la fotografia si legge. */
  .richiamo {
    display: grid;
    align-items: end;
    min-height: clamp(40rem, 168vw, 48rem);
  }

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

  .richiamo > .shell {
    position: static;
    margin-top: 0;
    padding-block: clamp(2rem, 7vw, 3rem);
  }

  .richiamo__cartiglio {
    max-width: min(23rem, 92%);
    margin-inline: auto;
  }

  /* Dentro un cartiglio appoggiato su una fotografia il testo corrente
     scende di un gradino: e' una scheda, non la colonna della pagina. */
  .richiamo__cartiglio p:not(.occhiello) {
    font-size: var(--t-sm);
    line-height: 1.5;
  }

  .altra .forma { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   LA LENTE
   Lo script la inietta in ogni pagina, ma le sue regole stavano solo in
   pagina.css: le pagine sul foglio nuovo si ritrovavano i tre bottoncini
   della lente visibili in fondo, senza capire da dove uscissero.
   ========================================================================== */

.lente {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  background: rgb(10 22 12 / 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
}

.lente__corpo {
  margin: 0;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
  max-height: 100%;
}

.lente__corpo img {
  max-width: 100%;
  max-height: calc(100svh - 8rem);
  width: auto;
  object-fit: contain;
  filter: none;
}

.lente__chiudi {
  position: absolute;
  top: var(--s-5);
  right: var(--s-5);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--paper);
  border: 1px solid rgb(245 243 234 / 0.35);
  border-radius: 50%;
}

.lente__nav {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: var(--paper);
  border: 1px solid rgb(245 243 234 / 0.35);
  border-radius: 50%;
}

.lente__chiudi:hover,
.lente__nav:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

  .lente {
    grid-template-columns: 1fr;
    padding: var(--s-4);
  }

  .lente__nav { display: none; }

  .lente__corpo img { max-height: calc(100svh - 7rem); }

/* ==========================================================================
   IL TITOLO DEL CARTIGLIO
   In alto a sinistra la curva di --forma-3 rientra cosi' tanto che la prima
   parola del titolo usciva dalla carta e finiva sulla fotografia, sotto 2:1
   di contrasto. Il margine interno non basta: va rientrata la prima riga,
   che e' l'unica che tocca la curva.
   ========================================================================== */

.richiamo__cartiglio h2 { text-indent: clamp(0.4rem, 1.4vw, 1rem); }

/* Sotto il titolo la curva rientra ancora di piu', e la rientranza cresce
   riga dopo riga: l'occhiello, il paragrafo e il bottone finivano fuori
   dalla carta, sopra la fotografia. Succedeva anche sulla pagina modello
   (`progettazione-e-realizzazione`, cartiglio del vivaio: «Potete vederlo
   prima» e «Visita il Garden» erano sull'immagine). Il rientro del titolo
   non basta, perche' `text-indent` muove solo la prima riga: qui si sposta
   il blocco intero. */
.richiamo__cartiglio .occhiello,
.richiamo__cartiglio p,
.richiamo__cartiglio .btn { margin-left: clamp(0.75rem, 3.4vw, 3.5rem); }


@media (max-width: 47.99rem) {
}


/* ==========================================================================
   9. IL REPARTO
   Le famiglie di un reparto del negozio: fotografia nella forma, nome, una
   riga.

   Ogni famiglia porta alla vecchia pagina di approfondimento che sta ancora
   online. E' il punto: quelle pagine sono uscite dal menu - il cliente ha
   chiesto di accorpare - ma restano quelle che intercettano le ricerche, e
   senza un collegamento resterebbero isolate. Metterle qui, con la loro
   fotografia, evita di doverle elencare in fondo alla pagina come un
   listino di collegamenti: la griglia E' l'elenco, e si guarda invece di
   leggersi.
   ========================================================================== */

.reparto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.75rem);
}

.famiglia {
  position: relative;
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.famiglia .forma {
  aspect-ratio: 1 / 1;
  transition: transform var(--dur) var(--ease-out);
}

/* sei forme che ruotano: due uguali affiancate si leggono come un errore */
.famiglia:nth-child(6n+1) .forma { border-radius: var(--forma-2); }
.famiglia:nth-child(6n+2) .forma { border-radius: var(--forma-5); }
.famiglia:nth-child(6n+3) .forma { border-radius: var(--forma-1); }
.famiglia:nth-child(6n+4) .forma { border-radius: var(--forma-6); }
.famiglia:nth-child(6n+5) .forma { border-radius: var(--forma-3); }
.famiglia:nth-child(6n+6) .forma { border-radius: var(--forma-4); }

.famiglia:hover .forma,
.famiglia:focus-within .forma { transform: translateY(-6px) rotate(-1deg); }

.famiglia h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: var(--lh-title);
  margin: 0;
}

.famiglia h3 a { color: inherit; text-decoration: none; }
.famiglia h3 a::after { content: ""; position: absolute; inset: 0; }

.famiglia p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
}


/* ==========================================================================
   10. GLI APPROFONDIMENTI
   Le pagine di dettaglio che restano online ma non meritano una fotografia
   propria. Stessa forma delle pastiglie dei comuni serviti, perche' fanno
   lo stesso mestiere: sono un indice, non un capitolo. Qui pero' si
   cliccano, quindi hanno un bersaglio da dito e un colore che si muove.
   ========================================================================== */

.approfondimenti {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.approfondimenti a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--t-sm);
  color: var(--salvia-testo);
  text-decoration: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out);
}

/* Qui c'erano due regole che davano alle voci 2, 3, 5 e 6 due sagome
   organiche diverse. Avevano piu' specificita' della pastiglia tonda
   dichiarata piu' avanti e vincevano: in fila si vedevano quattro bottoni
   di quattro forme. Segnalato: «devono essere tutti della stessa forma». */

.approfondimenti a:hover,
.approfondimenti a:focus-visible {
  color: var(--azione);
  border-color: var(--azione);
  background: var(--terra-velo);
}


/* ==========================================================================
   11. LA NOTA DI SEZIONE
   Una riga sotto un elenco, per la precisazione che non merita un paragrafo
   proprio ma che senza il resto resta monco. Rientrata come l'elenco che
   commenta, non allineata al bordo della sezione.
   ========================================================================== */

.nota-sezione {
  margin: var(--s-6) 0 0;
  max-width: 62ch;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.section--oliva .nota-sezione { color: rgb(255 255 255 / 0.78); }


/* ==========================================================================
   12. LA SCHEDA DELLA SEDE
   Indirizzo, orari e recapiti, tre blocchi affiancati. E' la sola pagina in
   cui questi dati sono il contenuto e non una coda: qui vanno letti da
   lontano, non cercati.

   Le tre schede non sono rettangoli: prendono la curva dalle forme, ognuna
   la sua, come le pastiglie dei comuni.
   ========================================================================== */

.sede {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
}

/* I tre riquadri dei recapiti, rifatti l'8 settembre.
   Erano tre sagome organiche - le stesse dei contenitori delle fotografie -
   con dentro un indirizzo, tre orari e due numeri di telefono: la forma
   diceva «guardami», il contenuto e' una scheda da leggere, e il testo ne
   usciva fino a 35 px perche' quelle curve rientrano fino al 50%.
   Adesso sono riquadri normali, bianchi, con l'angolo arrotondato e
   l'icona in evidenza sopra il titolo. */
.sede__blocco {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgb(22 48 29 / 0.04), 0 10px 26px rgb(22 48 29 / 0.05);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.sede__blocco h3 {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
  color: var(--oliva-cupo);
}

/* L'icona sta in un tondo verde chiaro sopra il titolo: da' al riquadro un
   punto d'ingresso, che e' quello che la sagoma faceva senza volerlo. */
.sede__blocco h3 .ico {
  color: var(--azione);
  flex: none;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 0.6rem;
  background: rgb(17 108 55 / 0.08);
  border-radius: 100px;
}

.sede__blocco p {
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.sede__blocco a:not(.linea) { color: var(--azione); text-decoration: none; }
.sede__blocco a:not(.linea):hover { text-decoration: underline; }

.sede__minore { color: var(--salvia-testo); font-size: var(--t-sm); }

/* --- I tre riquadri, rimisurati ----------------------------------------
   Segnalato: «la CTA indicazioni stradali e' lunga quanto tutto il box»,
   e «per parlarci e' davvero brutto».

   Il filetto di `.linea` prende tutta la larghezza dell'elemento, e dentro
   un riquadro in griglia l'elemento e' largo quanto il riquadro. Qui la
   riga si stringe sul suo testo. */
.linea--corta { justify-self: start; }

/* «Per parlarci» erano due collegamenti sottolineati uno sotto l'altro piu'
   una riga grigia: tre righe di dati senza gerarchia. Adesso sono due righe
   con l'icona, il numero in evidenza e sotto, piccolo, che cosa e'. */
.sede__vie {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sede__vie a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
  padding: 0.45rem 0;
  color: var(--ink);
  text-decoration: none;
}

.sede__vie a > span { display: grid; gap: 0.1rem; }
.sede__vie b { font-size: var(--t-lg); font-weight: 600; color: var(--azione); letter-spacing: var(--ls-normal); }
.sede__vie .sede__minore { font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: var(--ls-maiusc); }

.sede__vie .ico {
  width: 18px;
  height: 18px;
  color: var(--salvia-ped);
  transition: color var(--dur-fast) var(--ease-out);
}

.sede__vie a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sede__vie a:hover .ico { color: var(--azione); }

/* Gli orari: la riga del giorno era in maiuscolo spaziato e l'orario in
   grassetto, tre volte di fila. Il grassetto resta solo su oggi. */
.sede__orari dt { font-weight: 500; }
.sede__orari dd { font-weight: 400; font-size: var(--t-md); }
.sede__orari .is-oggi dd { font-weight: 600; }

.sede__orari { margin: 0; display: grid; gap: var(--s-3); }
.sede__orari > div { display: grid; gap: 0.15rem; }

.sede__orari dt {
  font-size: var(--t-3xs);
  line-height: var(--lh-micro);
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--salvia-testo);
}

.sede__orari dd {
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
}

/* Il giorno di oggi: lo script mette `is-oggi` sulla riga giusta, come nel
   piede. Chi arriva sulla pagina cerca quello, non l'orario di giovedi'.

   L'oro sul fondo chiaro sta a 2,12:1 - meno della meta' del minimo, e su
   un'etichetta da 12 px. Nel piede va bene perche' li' il fondo e' scuro;
   qui no. Il segno resta d'oro ma e' un pallino, che non porta
   informazione da solo: quella la portano il colore piu' fondo e il peso. */
.sede__orari .is-oggi dt {
  color: var(--oliva-cupo);
  position: relative;
  padding-left: 0.95rem;
}

.sede__orari .is-oggi dt::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 100px;
  background: var(--oro);
}

.sede__orari .is-oggi dd { color: var(--oliva-cupo); font-weight: 600; }


/* ==========================================================================
   IL PRIMA E IL DOPO
   Serve una volta sola in tutto il sito: in tutto l'archivio del cliente
   c'e' UNA coppia scattata dallo stesso punto, ed e' la cosa piu'
   convincente che il portfolio abbia. Metterla in fila con le altre foto
   la sprecherebbe, percio' ha una fascia sua.

   Il vecchio scatto e' piu' piccolo e ha una sagoma sua, verticale: si
   legge come un'istantanea appoggiata accanto al lavoro finito. Il dopo e'
   grande e sdraiato.
   ========================================================================== */

/* Un prima e dopo si guarda confrontando, e per confrontare le due
   fotografie devono essere paragonabili. Con 21rem contro 1fr il «dopo»
   veniva 3,7 volte l'area del «prima»: non era piu' un confronto, era una
   fotografia grande con un francobollo accanto. Adesso il rapporto e'
   circa 1 a 1,5, che basta a dire quale delle due e' il risultato senza
   togliere all'altra la possibilita' di essere letta. */
.pd {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5vw, 4.5rem);
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: end;
}

.pd__foto { margin: 0; }

.pd__prima { grid-column: 1; grid-row: 1; }
.pd__dopo { grid-column: 2; grid-row: 1; }


.pd__dopo .forma { aspect-ratio: 4 / 3; }

.pd figcaption {
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-4);
  font-size: var(--t-sm);
  line-height: var(--lh-ui);
  color: var(--terra);
  max-width: 40ch;
}

.pd .marginalia {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  color: var(--oro-tenue);
}

.pd__nota {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  max-width: 58ch;
  color: var(--terra);
}

@media (max-width: 60rem) {
  .pd { grid-template-columns: minmax(0, 1fr); }
  .pd__prima,
  .pd__dopo,
  .pd__nota { grid-column: 1; }
  .pd__prima { grid-row: 1; width: min(100%, 15rem); }
  .pd__dopo { grid-row: 2; }
  .pd__nota { grid-row: 3; }
}


/* ==========================================================================
   13. LA FOTOGRAFIA CHE ATTRAVERSA IL CONFINE
   Una fotografia che scavalca il bordo fra due sezioni da' una profondita'
   che nessuna ombra raggiunge: e' il dispositivo chiesto da
   docs/27_ISTRUZIONI_PAGINE.md, regola 2, e finora non era mai stato
   scritto in CSS.

   Come funziona: la fotografia resta dov'e', ma il margine negativo accorcia
   la sezione che la contiene, cosi' quella successiva le sale sotto e la
   fotografia si trova a cavallo dei due fondi. Il margine vale il fondo
   della sezione (`--section`) piu' un filo: quel filo e' quanto entra
   davvero nella sezione sotto, e la curva della fascia (`onda-su`) ne
   aggiunge altrettanto perche' e' disegnata sopra il bordo.

   `z-index` serve perche' la sezione seguente ha il proprio fondo pieno:
   senza, la fotografia ci finirebbe dietro.
   ========================================================================== */

/* La fotografia ponte non prende tutta la gabbia: se la prendesse
   coprirebbe per intero la cupola dell'onda, che e' alta al centro e bassa
   ai lati, e il confine fra le due sezioni tornerebbe una riga dritta.
   Tenuta a destra, la curva resta visibile alla sua sinistra. */
.foto-ponte {
  margin: clamp(2rem, 5vw, 3.5rem) 0 0 auto;
  max-width: 62%;
}


.sborda-giu,
.sborda-su { position: relative; z-index: 3; }

.sborda-giu { margin-bottom: calc(var(--section) * -1 - 3.5rem); }
.sborda-su { margin-top: calc(var(--section) * -1 - 3.5rem); }

/* Sotto i 900 px la fotografia torna larga quanto la gabbia: alla meta' di
   una colonna sola non resterebbe niente da guardare. */
@media (max-width: 900px) {
  .foto-ponte { max-width: 100%; margin-left: 0; }
}

/* Sotto i 700 px le fasce sono piu' basse e la curva piu' corta: se si
   scavalcasse con la stessa misura la fotografia coprirebbe il titolo
   della sezione seguente. */
@media (max-width: 700px) {
  .sborda-giu { margin-bottom: calc(var(--section) * -1 - 2rem); }
  .sborda-su { margin-top: calc(var(--section) * -1 - 2rem); }
}


/* --- Lo sconfinamento nella testata ------------------------------------
   Caso a parte del blocco 13, per `terrazzi-e-pergole`: qui a scavalcare
   non e' una fotografia in mezzo alla pagina ma quella dell'apertura, che
   un margine negativo suo ce l'ha gia' - quello che le fa scavalcare la
   coda del titolo. Per uscire anche dalla sezione servono due cose: un
   margine piu' profondo di quello del blocco 13, e il vuoto in fondo alla
   testata tolto di mezzo, perche' quel vuoto lo riempie la fotografia che
   scende nella fascia. */
@media (min-width: 60.01rem) {
  /* Non zero: la colonna del testo finisce con un bottone, e senza un po'
     di margine la curva della fascia sotto ci sale sopra. */
  .testata:has(.sborda-giu) { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
  .testata__foto.sborda-giu {
    margin-bottom: calc(clamp(3rem, 9vw, 8rem) * -1 - clamp(9rem, 16vw, 10rem));
  }
}

/* In colonna la fotografia sta sopra l'introduzione, non di fianco: un
   margine negativo qui le farebbe salire il testo addosso. */
@media (max-width: 60rem) {
  .testata__foto.sborda-giu { margin-bottom: 0; }
}


/* ==========================================================================
   IL RITMO DELLA GRIGLIA DELLE OPERE
   Dentro una .galleria il foglio fa di ogni figura una scheda su carta, e
   li' dentro le sagome non si distinguono piu' l'una dall'altra. Il ritmo,
   in un portfolio, deve pero' esserci - un muro di dodici riquadri uguali
   non si guarda.

   Lo prendiamo dove il sito ce l'ha gia': il carosello della home cambia
   le PROPORZIONI a giro di nth-child. Qui, in ogni riga di quattro: una
   alta, due verticali e una quadrata. Con lo sfalsamento delle pari basta.
   ========================================================================== */


/* Sotto le due colonne le proporzioni tornano tutte uguali: con una foto
   per riga la varieta' non si vede piu' e resta solo l'altezza che balla. */
@media (max-width: 47.99rem) {
}


/* ==========================================================================
   14. LE ALTRE DUE TESTATE
   La testata qui sopra e' bella, e a forza di essere bella era diventata
   l'unica: diciotto pagine aprivano con la stessa identica schermata -
   briciola, titolo, ciottolo a destra, sommario ancorato in basso, e lo
   stesso vuoto di quattrocentocinquanta pixel fra titolo e sommario.
   Misurato a 1440 px su otto pagine, coincideva al pixel.

   Il change che il cliente ha chiesto si vede prima di leggere. Quindi
   servono altre due aperture, non altri testi.

   Non sono due stili diversi: sono la stessa grammatica - titolo sulla
   carta, fotografia in una forma organica, nessuna scritta sopra la foto -
   con tre impaginazioni. Si sceglie per famiglia di pagina, non a caso.
   ========================================================================== */

/* ---- Accanto: compatta, senza vuoto -------------------------------------
   Per i reparti del negozio. Li' non c'e' niente da annunciare in grande:
   c'e' da arrivare in fretta a cosa si trova. Testo e fotografia partono
   dalla stessa riga e finiscono insieme. */

.testata--accanto .testata__griglia {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
}

/* Titolo e sommario stanno in due righe diverse della griglia, e le righe
   le detta la fotografia accanto, che le scavalca entrambe. Senza dire dove
   si appoggiano dentro la propria riga, i due si allontanano fino ai bordi
   e in mezzo resta il vuoto che questa variante doveva togliere. Cosi'
   invece si vengono incontro e restano attaccati. */
.testata--accanto .testata__titolo {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  font-size: var(--t-5xl);
  max-width: 14ch;
}

.testata--accanto .testata__foto {
  grid-column: 2;
  grid-row: 2 / span 2;
  margin: 0;
  aspect-ratio: 1 / 1;
  align-self: center;
}

.testata--accanto .testata__intro {
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  padding-top: var(--s-5);
  max-width: 36ch;
}

/* ---- Stesa: la fotografia sotto, larga ----------------------------------
   Per le attivita' e per il portfolio, dove il soggetto e' un luogo pieno
   di gente e vuole larghezza. Titolo e sommario affiancati in alto, poi la
   fotografia a tutta la colonna del testo: e' l'unica apertura in cui la
   fotografia e' piu' larga che alta, e si riconosce da lontano. */

.testata--stesa .testata__griglia {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: end;
}

.testata--stesa .testata__titolo {
  grid-column: 1;
  grid-row: 2;
  font-size: var(--t-5xl);
  max-width: 16ch;
}

.testata--stesa .testata__intro {
  grid-column: 2;
  grid-row: 2;
  padding-top: 0;
  padding-bottom: 0.4rem;
  max-width: 38ch;
}

.testata--stesa .testata__foto {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  aspect-ratio: 21 / 9;
}

@media (max-width: 60rem) {
  .testata--accanto .testata__griglia,
  .testata--stesa .testata__griglia { grid-template-columns: 1fr; }

  .testata--accanto .testata__titolo,
  .testata--accanto .testata__foto,
  .testata--accanto .testata__intro,
  .testata--stesa .testata__titolo,
  .testata--stesa .testata__intro,
  .testata--stesa .testata__foto { grid-column: 1; }

  .testata--accanto .testata__titolo,
  .testata--stesa .testata__titolo { grid-row: 2; max-width: none; }
  .testata--accanto .testata__foto,
  .testata--stesa .testata__foto { grid-row: 3; margin: var(--s-5) 0 0; }
  .testata--accanto .testata__intro,
  .testata--stesa .testata__intro { grid-row: 4; padding-top: var(--s-5); }

  /* In colonna la fotografia larga diventa una fessura: si rialza. */
  .testata--stesa .testata__foto { aspect-ratio: 16 / 10; }
}


/* ==========================================================================
   15. DOVE GUARDA IL RITAGLIO
   Le forme organiche tagliano parecchio, e a volte quello che resta in campo
   e' peggio di quello che esce. Due casi veri: nella testata del garden si
   leggeva «SINFLOR» accanto a «SINFLORA» intera, perche' un albero copre la
   prima insegna; in una scheda un cartello giallo restava tagliato a meta'
   della parola. Sono decisioni sulla singola fotografia, non sul sistema.
   ========================================================================== */

.taglia--destra > img { object-position: 72% 50%; }
.taglia--sinistra > img { object-position: 28% 50%; }
.taglia--alto > img { object-position: 50% 22%; }
.taglia--basso > img { object-position: 50% 82%; }


/* --- L'occhiello del richiamo, sul telefono ----------------------------
   Stesso caso del cartiglio del wedding: il margine negativo di 8 px era
   la contromisura a un gap di 16. Da quando la catena della testata sta a
   8 (home.css, sezione 50) quel margine incolla l'occhiello al titolo. */
@media (max-width: 47.99rem) {
  .richiamo__cartiglio .occhiello { margin-top: 0; }
}

/* --- Il titolo del richiamo contro il morso in alto a destra -----------
   `--forma-carta` e' gentile a sinistra ma in alto a destra toglie un
   ellisse largo 245 px su 350 e alto 91: misurato con scripts/sagoma.py,
   la prima riga di «Prima veniamo a vedere» ne usciva di 9,6 px su
   giardini e di poco su piante-da-interno, e sono le righe piu' lunghe.
   Sedici pixel di margine in piu' bastano: piu' in basso la sagoma e'
   larga 324 px invece di 300, cioe' piu' della colonna. */
@media (max-width: 47.99rem) {
  .richiamo__cartiglio { padding-top: 3.25rem; }
}

/* --- E il bottone contro il morso in basso a destra --------------------
   Sul telefono il cartiglio non e' piu' largo come su una scrivania: e'
   alto e stretto - 320x472 su terrazzi-e-pergole - e il 74% di altezza
   dell'angolo in basso a destra diventa un'ellisse alta 350 px, cioe' un
   bordo che rientra per tre quarti della carta. «Pergole e bioclimatiche»
   ne usciva di 16,6 px e «Chiamaci: 391 1650909» di 12,3.
   Qui quel morso scende al 34%: la sagoma resta la stessa di sopra - il
   grande sventaglio in alto a destra non si tocca - e sotto il bordo torna
   dritto abbastanza da reggere una riga di bottone. */
@media (max-width: 47.99rem) {
  .richiamo__cartiglio { border-radius: 22% 70% 26% 24% / 28% 26% 34% 22%; }
}


/* --- L'occhiello dentro la testata stesa -------------------------------
   `.testata__intro p` (riga 108) e' piu' forte di `.occhiello` e gli
   sovrascriveva corpo, colore, interlinea e margine. Su attivita.html il
   rimedio era stato scritto in linea sul tag, con il verde chiaro
   `--salvia-ped`: 2,67:1 su carta a 12 px, sotto la soglia, e con
   l'interlinea del testo corrente (18,6 px) su un maiuscoletto che la
   vuole a --lh-micro. Erano le uniche dichiarazioni in linea del progetto.
   Qui la regola sta dove deve stare, e il verde e' quello leggibile. */
.testata__intro p.occhiello {
  font-size: var(--t-3xs);
  line-height: var(--lh-micro);
  color: var(--salvia-testo);
  margin: 0 0 var(--s-3);
}


/* ==========================================================================
   LE SCHEDE CHE NON PARTIVANO DALLA STESSA RIGA
   Misurato due volte, con le stesse misure: dentro la
   griglia «Anche questo» i titoli delle schede partono ad altezze diverse
   - 16 px di scarto a 1440 su piante-da-interno, casa-e-giardino e
   piante-da-esterno, 20 a 1024 - mentre le fotografie sopra sono allineate
   al pixel. Nelle gallerie succede alle didascalie: su eventi partono a
   1849 · 1889 · 1849 · 1879, e la distanza dalla loro fotografia vale
   62 · 46 · 36 px nella stessa riga.

   Non e' il testo: e' che queste due griglie non dicono `align-content`.
   Una griglia stirata all'altezza della riga distribuisce l'avanzo fra le
   proprie bande, e l'avanzo cambia da scheda a scheda perche' cambia il
   numero di righe della descrizione. `.fase` (riga 129) e `.famiglia`
   (riga 596) lo dichiarano da sempre, e infatti stanno allineate.
   ========================================================================== */

.altra,
.galleria figure { align-content: start; }


/* ==========================================================================
   LA CATENA DELLA TESTATA, SULLE PAGINE INTERNE
   La sezione 50 di home.css porta a 8 px la distanza fra l'etichetta e il
   titolo, e a 16 tutto il resto. Su `.chiusura__corpo` e
   `.richiamo__cartiglio` non arrivava mai: questi due blocchi dichiarano
   `gap` qui dentro (righe 301-310 e 389-394) e pagina3.css e' caricato
   dopo home.css. Misurato a 390 prima di questa regola: 24 · 24 · 32,
   dove la `.sec-head` accanto faceva correttamente 8 · 16.
   ========================================================================== */

@media (max-width: 47.99rem) {
  .chiusura__corpo,
  .richiamo__cartiglio { row-gap: var(--v-legatura); }

  .chiusura__corpo > :is(h1, h2) ~ *,
  .richiamo__cartiglio > :is(h1, h2) ~ * {
    margin-top: calc(var(--v-passo) - var(--v-legatura));
  }

  /* L'etichetta sta sopra il titolo, come in ogni altra testata. */

  /* Le raccolte al grado della scala, 24 px: il clamp ne dava 20. */
  .altre,
  .galleria { row-gap: var(--v-grado); }
}


/* ==========================================================================
   LA TESTATA FRA IL TELEFONO E LA SCRIVANIA
   Sotto i 960 px le tre testate si mettono in colonna e la fotografia
   prende `width: min(100%, 22rem)` con `justify-self: end` (riga 427).
   Su un telefono va bene, perche' li' vince il 100%: la colonna e' 350 px.
   Ma appena la colonna supera i 352 px quel tetto smette di crescere e la
   fotografia resta appesa a destra. Misurato: **340 px di carta vuota a
   768, 465 a 900**, su tutte e diciotto le pagine interne. La testata
   arriva a 949 px di altezza a 768 e 976 a 900 per contenere un titolo,
   due righe e un bottone. Si legge come un'immagine che non ha caricato.

   Due rimedi diversi, perche' il problema e' diverso:

   · da 416 a 703 px la colonna non e' larga abbastanza per due colonne
     vere. La fotografia se la prende tutta e diventa piu' larga che alta:
     a 640 px fa 576x384 invece di 352x440, e il vuoto sparisce.
   · da 704 a 960 px lo spazio per due colonne c'e': la fotografia torna
     22rem a destra e il sommario le va accanto invece che sotto. Il vuoto
     diventa il testo che prima stava piu' in basso, e la testata si
     accorcia di quello che ci guadagna.
   ========================================================================== */

@media (min-width: 26rem) and (max-width: 43.99rem) {
  .testata__foto,
  .testata--accanto .testata__foto,
  .testata--stesa .testata__foto {
    width: 100%;
    justify-self: stretch;
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 44rem) and (max-width: 60rem) {
  .testata__griglia,
  .testata--accanto .testata__griglia,
  .testata--stesa .testata__griglia {
    grid-template-columns: minmax(0, 1fr) 22rem;
    column-gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }

  .testata__titolo,
  .testata--accanto .testata__titolo,
  .testata--stesa .testata__titolo { grid-column: 1 / -1; grid-row: 2; }

  .testata__foto,
  .testata--accanto .testata__foto,
  .testata--stesa .testata__foto {
    grid-column: 2;
    grid-row: 3;
    width: 100%;
    justify-self: stretch;
    margin: 0;
    /* Un ciottolo 4/5 alto 440 px accanto a duecento pixel di testo
       rimetterebbe il vuoto dov'era, solo dall'altra parte. */
    aspect-ratio: 1 / 1;
  }

  /* Sulla scrivania il sommario e' appoggiato in basso, accanto al titolo
     (`align-self: end`, riga 103). Qui sta sotto il titolo e accanto alla
     fotografia: appoggiato in basso lascerebbe 290 px di vuoto fra il
     titolo e se stesso, cioe' lo stesso buco spostato di lato. */
  .testata__intro,
  .testata--accanto .testata__intro,
  .testata--stesa .testata__intro {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    padding-top: var(--s-5);
  }
}


/* ==========================================================================
   IL CARTIGLIO DEL RICHIAMO AVEVA TRE BORDI SINISTRI
   Misurato tre volte, con le stesse misure. Dentro lo
   stesso blocco di carta partivano da tre punti diversi:

        1440 px      seconda riga del titolo   64
                     prima riga del titolo     64 + text-indent
                     occhiello, testo, invito  97      ← 33 px piu' in la'

   Le due correzioni sono documentate e servivano tutt'e due a tenere il
   contenuto dentro la curva, ma crescono con pendenze diverse - 1,4vw il
   rientro della prima riga, 3,4vw il margine di tutto il resto - quindi
   piu' lo schermo e' largo, piu' il titolo resta appeso fuori asse.

   Erano nate quando il cartiglio usava una delle sei forme di sistema, che
   a sinistra rientrano fino al 50%. Adesso usa `--forma-carta`, che a
   sinistra e' gentile: 22% in alto e 24% in basso. Un margine interno solo,
   uguale per tutti, basta e avanza - e restituisce al paragrafo 33 px di
   colonna, che erano 35 caratteri per riga contro i 45 di soglia.
   ========================================================================== */

.richiamo__cartiglio {
  padding-left: clamp(3rem, 5.5vw, 4rem);
}

.richiamo__cartiglio h2 { text-indent: 0; }

.richiamo__cartiglio .occhiello,
.richiamo__cartiglio p,
.richiamo__cartiglio .btn { margin-left: 0; }


/* ==========================================================================
   UNA MISURA SOLA PER RUOLO
   `docs/28_TIPOGRAFIA.md` § 3.2 lo dice come regola che non si discute, e
   su cura-del-verde le tre griglie di schede convivono nella stessa pagina,
   quindi la differenza si vede senza doverla cercare:

     titolo di scheda   .famiglia h3  19 px @1440   .fase h3 / .altra h3  24
     testo di scheda    .famiglia p   interlinea 1,35   le altre   1,60

   Un rapporto di 1,26 fra due titoli dello stesso rango, e due interlinee
   al 18% di distanza. `--lh-ui` e' l'interlinea dei bottoni e delle voci di
   menu: su un paragrafo di tre righe stringe.
   ========================================================================== */

.famiglia h3 { font-size: var(--t-xl); }
.famiglia p { line-height: var(--lh-body); }


/* --- La nota di sezione era il blocco piu' largo della pagina -----------
   62ch valgono 84 caratteri reali a 15 px, e la nota sta sotto un elenco
   che ne fa 34: due blocchi di prosa a due volte e mezzo di distanza,
   nella stessa sezione. `docs/28` § 2.9 segnalava lo stesso valore su
   base.css e chiedeva 47ch; qui era rimasto. */
.nota-sezione { max-width: 47ch; }


/* ==========================================================================
   I TRE CARTIGLI DEI RECAPITI: TESTO DENTRO SAGOME DA FOTOGRAFIA
   `.sede__blocco` usava `--forma-3`, `--forma-5` e `--forma-6`, cioe' tre
   delle sei forme di sistema. Quelle sono tarate su una fotografia e
   rientrano fino al 50%: e' lo stesso difetto per cui era nata
   `--forma-carta`, e qui non era mai stato applicato.

   Misurato con scripts/sagoma.py, sfondamento massimo del contenuto:

              390     768    1440
     h3      25,5    35,5    26,7
     orari   27,6    28,6    12,3
     testo   13,1    12,6      ok

   A 390 si vedeva a occhio: «Chiusi» e «MARTEDI' E DOMENICA» finivano sotto
   la curva del secondo cartiglio, e il filetto di «INDICAZIONI STRADALI»
   usciva dal primo sulla destra.

   Qui le tre sagome restano diverse fra loro e restano storte sui due assi
   - nessuna coppia di raggi e' uguale - ma nessun angolo entra oltre un
   terzo del lato, che e' il punto in cui una curva smette di reggere una
   colonna di testo.
   ========================================================================== */

/* Le tre sagome organiche sono uscite di scena: vedi `.sede__blocco`. */


/* --- Il reparto a cinque colonne da 224 px ------------------------------
   Su casa-e-giardino le cinque famiglie stavano in fila a 1440: colonna di
   224 px, 66 sotto il minimo che il progetto si e' dato, e descrizioni a
   31 caratteri per riga su quattro o cinque righe. Con 18rem la griglia si
   ferma a quattro colonne da 297 px. */
.reparto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }


/* --- Le pastiglie che non portano da nessuna parte ----------------------
   `.comuni li` e `.approfondimenti a` avevano lo stesso corpo, lo stesso
   margine interno, lo stesso bordo e la stessa famiglia di sagome: due
   file di pastiglie identiche, di cui una cliccabile e una no. Su wedding
   sono i sette nomi delle tavole, su contatti i comuni serviti: nessuno
   dei due e' un collegamento, e nessun segno lo diceva.

   Qui l'elenco inerte diventa pieno e senza bordo, cioe' un'etichetta; il
   contorno resta a chi porta da qualche parte. */
/* ==========================================================================
   LE PASTIGLIE DEI COMUNI
   Segnalato: «i box dei badge dove lavoriamo non mi piacciono, li farei
   normali e a sfondo bianco, e trova un giusto equilibrio tra prima e
   seconda riga».

   Erano tre sagome organiche a rotazione - lo stesso disegno dei
   contenitori delle fotografie - su un elenco di nomi di paese: la forma
   diceva «guardami», il contenuto e' una lista. Adesso sono pastiglie
   bianche con un filetto sottile: si leggono come etichette, e restano
   distinguibili dagli approfondimenti, che sono collegamenti e hanno il
   fondo trasparente.

   L'equilibrio fra le righe: nove nomi su una gabbia da 1296 px stavano
   otto sulla prima riga e uno sulla seconda. Con una gabbia piu' stretta si
   dividono cinque e quattro. */
.comuni {
  max-width: 44rem;
  row-gap: var(--s-2);
}

.comuni li {
  border-radius: 100px;
  border-color: var(--line);
  background: var(--white);
  color: var(--ink-soft);
  padding: 0.45rem 0.95rem;
}

.comuni li:nth-child(3n+2),
.comuni li:nth-child(3n+3) { border-radius: 100px; }

/* Sulle fasce colorate il bianco pieno sarebbe una macchia: li' la
   pastiglia si schiarisce quel tanto che basta a staccarsi dal fondo. */
.section--oliva .comuni li,
.section--terra .comuni li {
  background: rgb(255 255 255 / 0.12);
  border-color: rgb(255 255 255 / 0.28);
  color: inherit;
}


/* ==========================================================================
   VIA LE CORNICI SQUADRATE: FORME MORBIDE DAPPERTUTTO
   Chiesto dal committente: «non mi piace molto i cosi spigolosi con il
   bordo sotto, terrei tutte forme morbide o irregolari ovunque».

   Il modo «cornice» - fotografia squadrata con il filetto sfalsato - esce
   da tutte e diciannove le pagine: sessantaquattro immagini passano al
   ciottolo. Le regole che seguono sono quelle che finora esistevano solo
   per la cornice e che al ciottolo mancavano.
   ========================================================================== */

/* Le proporzioni che variano dentro `galleria--opere`: erano dichiarate
   sulla cornice, e senza queste righe tutte le fotografie tornavano 4/5,
   cioe' un provino invece di un portfolio. */
.galleria--opere .forma { aspect-ratio: 4 / 5; }
.galleria--opere figure:nth-child(4n+1) .forma { aspect-ratio: 3 / 4; }
.galleria--opere figure:nth-child(4n+4) .forma { aspect-ratio: 1 / 1; }

@media (max-width: 47.99rem) {
  /* Con una fotografia per riga la varieta' non si vede piu' e resta solo
     l'altezza che balla: sotto le due colonne tornano tutte uguali. */
  .galleria--opere .forma { aspect-ratio: 4 / 5; }
}

/* La fotografia a cavallo fra due sezioni. */
.foto-ponte .forma { aspect-ratio: 16 / 9; }

@media (max-width: 700px) {
  .foto-ponte .forma { aspect-ratio: 4 / 3; }
}

/* Il «prima» del prima/dopo. La cornice qui non era un vezzo: serviva a
   farlo leggere come un'altra fotografia, non come la meta' sinistra di un
   dittico. A distinguerlo resta la rotazione, che e' il segno piu' forte
   dei due, e adesso e' un ciottolo storto invece di un riquadro storto. */
.pd__prima .forma {
  aspect-ratio: 3 / 4;
  transform: rotate(-1.5deg);
  transform-origin: 100% 100%;
}


/* ==========================================================================
   IL TITOLO SI STAMPAVA SOPRA IL SOMMARIO, DA 961 A 1400 PX
   Non «tocca la coda»: testo sopra testo, sulla prima schermata. Misurato
   in revisione e verificato a schermo su `giardini` a 1024 px, dove tutto
   il blocco del sommario - tre righe di prosa piu' il bottone «Chiedi un
   sopralluogo» - passa **sotto** «progetto alla manutenzione».

     larghezza   giardini   progettazione   terrazzi
        960        pulito      pulito        pulito
        961       181 px      145 px        171 px
       1024       181 px      132 px        158 px
       1280        51 px       51 px         78 px
       1366        24 px       24 px        pulito
       1440         1 px        1 px        pulito

   A 1440 il margine era di UN pixel: non funzionava, semplicemente non
   aveva ancora smesso. E 1366 e' la larghezza di portatile piu' diffusa.

   La causa e' il disegno stesso: titolo e sommario stanno nella STESSA
   cella della griglia, il sommario appoggiato in fondo (riga 105). Serviva
   a togliere i 204-298 px di vuoto che restavano quando il sommario stava
   in una riga sua, e con un titolo di due righe funziona. Con tre o quattro
   righe il titolo si prende tutta la cella e il sommario ci finisce dentro.

   Qui la cella diventa due righe con una molla in mezzo: il titolo in alto,
   il sommario in fondo, e il vuoto sta fra i due invece che sotto. Il
   risultato a occhio e' lo stesso di prima dove prima funzionava, ma quando
   il titolo cresce la molla si chiude invece di far collidere i due blocchi.
   ========================================================================== */

@media (min-width: 60.01rem) {
  .testata:not(.testata--accanto):not(.testata--stesa) .testata__griglia {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .testata:not(.testata--accanto):not(.testata--stesa) .testata__titolo {
    grid-row: 2;
  }

  /* La fotografia continua a scavalcare la coda del titolo: adesso copre
     tutte e tre le righe invece di una sola. */
  .testata:not(.testata--accanto):not(.testata--stesa) .testata__foto {
    grid-row: 2 / 5;
  }

  /* Il sommario sta sotto il titolo, non in fondo alla colonna. Appoggiato
     in fondo lasciava fino a 290 px di vuoto in mezzo - segnalato su
     fioreria: «la descrizione e' troppo lontana dal titolo». Il vuoto
     adesso sta sotto, dove c'e' la fotografia a riempirlo. */
  .testata:not(.testata--accanto):not(.testata--stesa) .testata__intro {
    grid-row: 3;
    align-self: start;
    padding-top: clamp(1rem, 2vw, 1.75rem);
  }
}


/* --- Il titolo di pagina, sul telefono ---------------------------------
   `home.css` sezione 50 lo porta a `--t-5xl` con interlinea 1,10 sotto i
   768 px, e il commento cita la misura per cui era nato: a 390 px il corpo
   grande vale 49,8 e «Giardini su misura, dal progetto alla manutenzione»
   esce in quattro righe da undici caratteri, 209 px prima di qualunque
   altra cosa. Quella regola non arrivava: `.testata__titolo` dichiara qui
   sopra (riga 67) corpo e interlinea con la stessa specificita', e
   pagina3.css e' caricato dopo home.css.
   E' il terzo caso dello stesso inciampo, dopo `.chiusura__corpo` e
   `.richiamo__cartiglio`. */
@media (max-width: 47.99rem) {
  .testata__titolo {
    font-size: var(--t-5xl);
    line-height: 1.10;
  }
}


/* --- Il reparto torna a riempire la riga -------------------------------
   Portare la traccia minima a 18rem dava colonne da 297 px invece di 224,
   ma su casa-e-giardino e giardini, che hanno CINQUE famiglie, la griglia
   passava da cinque colonne a quattro: la quinta scheda restava sola con
   1.100 px di gabbia vuota accanto, e la sezione saliva da 629 a 1.151 px.
   Un orfano di quella misura si vede molto piu' di una colonna stretta.
   Con 14rem `auto-fit` riempie sempre la riga, qualunque sia il numero di
   famiglie. Che cinque famiglie su una riga sola siano troppe resta vero:
   e' una domanda di contenuto, scritta in docs/29. */
.reparto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Le due griglie da cinque - casa-e-giardino e giardini - erano il caso che
   `auto-fit` non sa risolvere: o cinque colonne da 224 px, o quattro con la
   quinta scheda sola accanto a 1.100 px di vuoto. Su tre colonne diventano
   3+2, che e' pieno da entrambi i lati, e la colonna passa da 224 a 402 px
   a 1440 e da 237 a 330 a 1180. Solo qui: tre e quattro famiglie la riga la
   riempiono gia'. */
@media (min-width: 60rem) {
  .reparto:has(> :nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Quattro famiglie - garden, piante da interno, piante da esterno - fra 816
   e 1.150 px stavano su tre colonne: 3+1, con la quarta scheda sola. Quattro
   colonne li' non ci stanno (203 px a 1024), quindi restano due. Sopra i
   1.150 la riga da quattro torna, e la colonna e' 237 px a 1180 e 291 a
   1440: stretta, ma e' una scheda con una fotografia e due righe, non una
   colonna di prosa. */
@media (min-width: 51rem) and (max-width: 71.87rem) {
  .reparto:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --- La fotografia ponte saliva sul titolo della sezione dopo ----------
   Misurato fra il fondo della fotografia e la cima dell'occhiello della
   sezione seguente: **-4 px a 768, 900 e 1024**, cioe' il bordo della
   fotografia poggiava sulla riga di «COSA FACCIAMO». Su prati e su
   manutenzione, che sono le due pagine che usano `.foto-ponte`.

   Lo scavalco e' voluto e resta: quello che era tarato male e' di quanto.
   Da 3,5rem a 2,25rem sopra i 700 px e da 2rem a 1,25rem sotto: la
   fotografia attraversa ancora il confine, e sotto le resta aria. */
.sborda-giu { margin-bottom: calc(var(--section) * -1 - 2.25rem); }
.sborda-su { margin-top: calc(var(--section) * -1 - 2.25rem); }

@media (max-width: 700px) {
  .sborda-giu { margin-bottom: calc(var(--section) * -1 - 1.25rem); }
  .sborda-su { margin-top: calc(var(--section) * -1 - 1.25rem); }
}


/* --- Dodici pixel non sono un gradino della scala -----------------------
   Dentro una scheda, fra la fotografia e il titolo e fra il titolo e il
   testo, `.famiglia` e `.altra` mettevano 12 px mentre `.fase` ne mette 16.
   Tre griglie nella stessa pagina - su prati stanno a poche schermate di
   distanza - con due passi diversi per la stessa relazione. La scala
   rifatta e' 8 · 16 · 24 · 48 · 96: 12 non c'e'. */
.famiglia,
.altra { gap: var(--s-4); }


/* ==========================================================================
   LA TESTATA STESA: LA LENTE
   La fotografia a tutta larghezza con `aspect-ratio: 21/9` misura 1296x555
   a 1440 px, e su un riquadro cosi' schiacciato qualunque raggio in
   percentuale intorno al 50% produce la stessa cosa: una lente simmetrica.
   E' la forma piu' banale che ci sia, ed e' esattamente quello che il
   committente aveva gia' chiesto di evitare sul cartiglio del wedding
   («piu' particolare e meno ovale»).

   Due correzioni insieme:

   · la sagoma. `forma--viva` anima `border-radius` attraverso
     --respiro-a/b/c, e un'animazione in corso vince su una dichiarazione
     statica: e' l'inciampo gia' documentato qui sopra. Le tre tappe si
     dichiarano quindi come variabili, non come `border-radius`. I raggi
     verticali restano bassi - su un riquadro alto 460 px un 60% e' gia'
     280 px - e a variare sono quelli orizzontali: viene una macchia lunga
     con quattro angoli diversi, non una lente.

   · l'altezza. Da 21/9 a 2,8/1 la fotografia scende da 555 a 463 px, e il
     margine sopra da 48 a 32. La testata passa da 1.039 a circa 950 px.
     Resta sopra i 780 che entrano in un portatile da 1440x900: una
     fotografia panoramica a tutta larghezza costa cinquecento pixel, e
     quella e' la ragione d'essere di questa variante. Se la prima
     schermata deve entrare intera, va cambiata la variante, non il raggio.
   ========================================================================== */

/* Solo sopra i 960 px: sotto, la testata si impila o si affianca e la
   fotografia torna quadrata. Senza la media query questa regola scendeva
   fino al tablet e li' faceva una feritoia di 352x126. */
@media (min-width: 60.01rem) {
  .testata--stesa .testata__foto {
    aspect-ratio: 3.2 / 1;
    margin-block: clamp(1.25rem, 2.6vw, 2rem) 0;
    --respiro-a: 16% 52% 26% 44% / 58% 32% 66% 38%;
    --respiro-b: 32% 60% 38% 66% / 44% 20% 50% 24%;
    --respiro-c: 26% 46% 18% 54% / 66% 36% 60% 30%;
    border-radius: var(--respiro-a);
  }
}

@media (max-width: 60rem) {
  /* Sotto i 960 la testata si impila e la fotografia torna quadrata o
     verticale: li' la sagoma di sistema va benissimo. */
  .testata--stesa .testata__foto {
    --respiro-a: var(--forma-3);
    --respiro-b: var(--forma-1);
    --respiro-c: var(--forma-5);
  }
}


/* --- Le briciole erano un bersaglio da 20 px --------------------------
   Sotto la soglia dei 24 px di WCAG 2.5.8, ed e' la prima riga di ogni
   pagina interna. Il margine negativo restituisce alla riga l'altezza che
   aveva: cresce l'area toccabile, non l'impaginato. */
.briciole a {
  padding-block: 0.4rem;
  margin-block: -0.4rem;
}


/* --- La nota del prima/dopo aveva un corpo suo ------------------------
   17 px contro i 15 di `.nota-sezione`, che e' lo stesso ruolo nella
   stessa pagina, e settanta caratteri per riga su una colonna di 622. */
.pd__nota {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  max-width: 52ch;
}

/* Le briciole sono un maiuscoletto: interlinea --lh-micro, come tutti gli
   altri. Senza dichiararla prendevano quella della prosa, 19,2 px su 12. */
.briciole { line-height: var(--lh-micro); }


/* ==========================================================================
   LA TESTATA COMINCIA PRIMA
   Segnalato: «la foto a lato del titolo la farei iniziare piu' in alto, e
   in generale il padding-top della testata lo diminuirei da desktop un po'
   ovunque». Misurato a 1440: 80 px sopra le briciole e altri 72 sopra la
   fotografia, cioe' 152 px di carta prima che cominci qualcosa. La
   fotografia partiva 65 px sotto la prima riga del titolo.
   ========================================================================== */

.testata { padding-block: clamp(1.75rem, 3.4vw, 3.25rem) clamp(3rem, 7vw, 6rem); }

.testata__foto { margin-top: clamp(0.5rem, 1.4vw, 1.25rem); }

/* La variante stesa ha la fotografia sotto, non accanto: li' il margine
   serve a staccarla dal titolo e resta. */
.testata--stesa .testata__foto { margin-top: clamp(1.25rem, 2.6vw, 2rem); }


/* ==========================================================================
   LO SFONDO ARRIVA FIN DENTRO LE CURVE
   Segnalato: «lo sfondo sarebbe bello che prendesse tutta la sezione,
   quindi anche dove c'e' la curva sopra e sotto, questo in generale
   ovunque». Era vero, e la causa e' nel modo in cui l'onda e' fatta: e' uno
   pseudo-elemento che sporge FUORI dalla sezione e la dipinge del colore
   del fondo. Su una fascia a tinta unita funziona; su una fascia che ha
   una FOTOGRAFIA come fondo, sopra e sotto restava la carta, e la curva si
   leggeva come un ritaglio chiaro invece che come il bordo dell'immagine.

   Per le due fasce fotografiche - il richiamo e la fascia del wedding - la
   curva smette di essere un pezzo appiccicato e diventa la forma della
   sezione stessa: la sezione cresce di `--onda` sopra e sotto con un
   margine negativo, e i suoi angoli prendono un raggio orizzontale enorme
   e uno verticale corto. Il bordo di sopra sale a cupola verso il centro,
   esattamente come prima, ma adesso e' un bordo vero: `overflow: hidden`
   ci ritaglia dentro la fotografia.

   Le fasce a tinta unita tengono lo pseudo-elemento: li' non c'e' niente
   da ritagliare e il meccanismo vecchio va benissimo.
   ========================================================================== */

.richiamo.onda-su,
.richiamo.onda-giu,
.fascia-wedding.onda-su,
.fascia-wedding.onda-giu { overflow: hidden; }

.richiamo.onda-su::before,
.richiamo.onda-giu::after,
.fascia-wedding.onda-su::before,
.fascia-wedding.onda-giu::after { content: none; }

.richiamo.onda-su,
.fascia-wedding.onda-su {
  margin-top: calc(var(--onda) * -1);
  padding-top: var(--onda);
  border-start-start-radius: 50% calc(var(--onda) * 1.7);
  border-start-end-radius: 50% calc(var(--onda) * 1.7);
}

.richiamo.onda-giu,
.fascia-wedding.onda-giu {
  margin-bottom: calc(var(--onda) * -1);
  padding-bottom: var(--onda);
  border-end-start-radius: 50% calc(var(--onda) * 1.7);
  border-end-end-radius: 50% calc(var(--onda) * 1.7);
}

/* --- Una sola onda per confine ------------------------------------------
   Segnalato: «la sezione la scenografia e' gia' li' ha delle curve strane,
   specialmente da mobile». Erano due curve sovrapposte.
   La fascia con la fotografia si dà la sua onda arrotondando i propri
   angoli; la fascia a tinta unita che le sta accanto se ne disegna un'altra
   con uno pseudo-elemento che sporge oltre il proprio bordo. Al confine fra
   le due se ne vedevano due, una convessa e una concava a pochi pixel di
   distanza: da vicino sembra un errore di ritaglio.
   Dove c'e' la fotografia, la fotografia vince: e' lei che si sagoma, ed e'
   il pezzo che si guarda. Lo pseudo-elemento della vicina si spegne. */
:is(.richiamo, .fascia-wedding).onda-giu + .onda-su::before { content: none; }
.onda-giu:has(+ :is(.richiamo, .fascia-wedding).onda-su)::after { content: none; }


/* --- L'etichetta torna sopra il titolo ---------------------------------
   Era stata spostata sotto perche' in alto a sinistra la forma di sistema
   rientrava troppo e l'etichetta finiva sulla fotografia. Adesso il
   cartiglio usa `--forma-carta`, gentile a sinistra, e ha un margine
   interno piu' largo: l'ordine torna quello naturale, etichetta e poi
   titolo, come in tutte le altre testate del sito. */
.richiamo__cartiglio h2 { order: 2; }
.richiamo__cartiglio .occhiello { order: 1; margin-top: 0; }


/* --- La chiusura: sopra la curva aggiunge, sotto il piede toglie --------
   Segnalato su «Raccontateci lo spazio»: troppo margine sopra, dove c'e' la
   curva, e poco sotto. E' vero, e non e' simmetrico per una ragione: la
   curva di sopra dipinge il colore della fascia altri 28 px piu' in alto,
   quindi lo spazio visto e' padding + onda; sotto, invece, la curva del
   piede sale dentro la fascia e se ne mangia altrettanti. */
.chiusura.onda-su { padding-top: calc(var(--section) * 0.6); }
.chiusura.onda-giu { padding-bottom: calc(var(--section) * 1.05); }


/* ==========================================================================
   IL MODULO DI CONTATTO
   Chiesto: un modulo come quello del sito vecchio, fatto meglio, con il
   consenso al trattamento dei dati che rimanda all'informativa.

   Il modulo vecchio era una colonna sola di cinque campi tutti larghi
   uguali, senza etichette: solo testo grigio dentro il campo, che sparisce
   appena si scrive. Qui le etichette stanno sopra e restano; i campi corti
   stanno in due colonne, quelli lunghi a tutta larghezza; e il campo che
   la gente scriveva a mano dentro il messaggio - «di cosa avete bisogno» -
   e' diventato una scelta.
   ========================================================================== */

.modulo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.2vw, 1.5rem);
  max-width: 52rem;
}

.modulo__campo { display: grid; gap: var(--s-2); }
.modulo__campo--largo { grid-column: 1 / -1; }

.modulo label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
}

.modulo__facoltativo {
  font-weight: 400;
  color: var(--salvia-testo);
}

.modulo input:not([type="checkbox"]),
.modulo select,
.modulo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.95rem;
  font-family: var(--sans);
  font-size: var(--t-md);      /* sotto i 16 px iOS ingrandisce la pagina */
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}

.modulo textarea { min-height: 8rem; resize: vertical; }

.modulo select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--salvia-testo) 50%),
                    linear-gradient(135deg, var(--salvia-testo) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.85rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.modulo :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--azione);
  box-shadow: 0 0 0 3px rgb(17 108 55 / 0.14);
}

/* `.modulo label` mette 600 a tutte le etichette, ed e' giusto per «Nome e
   cognome»; qui pero' l'etichetta e' una frase di tre righe, e in grassetto
   il consenso sembrava un avviso. La classe da sola perdeva contro il
   selettore a due classi. */
.modulo label.modulo__consenso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3);
  align-items: start;
  font-weight: 400;
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.modulo__consenso input {
  width: 20px;
  height: 20px;
  margin-top: 0.15rem;
  accent-color: var(--azione);
}

.modulo__consenso a { color: var(--azione); }

@media (max-width: 47.99rem) {
  .modulo { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   LA GALLERIA A GRIGLIA
   Chiesto per «Mazzi, composizioni e centrotavola»: «fai foto normali
   arrotondate in griglia che si possono aprire con lightbox».

   E' l'altra faccia della galleria sfalsata: li' le fotografie hanno
   proporzioni diverse e stanno su una griglia mossa, perche' sono opere e
   ognuna ha la sua forma; qui sono un catalogo, e un catalogo si guarda a
   colpo d'occhio. Riquadri uguali, angolo arrotondato, e si aprono a
   schermo intero con la lente, che il sito ha gia' su tutte le gallerie.
   ========================================================================== */

/* Tre colonne, non quattro: sei fotografie su quattro colonne fanno 4+2, e
   una fotografia da 310 px di una composizione floreale non si guarda. Su
   tre sono 3+3 e ognuna misura 420 px. */
.galleria--griglia {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.8vw, 1.5rem);
}

@media (max-width: 64rem) {
  .galleria--griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sul telefono otto riquadri a tutta larghezza sono otto schermate: due
   colonne li tengono in due, e un catalogo si guarda a colpo d'occhio. */
@media (max-width: 47.99rem) {
  .galleria--griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galleria--griglia .caption { font-size: var(--t-3xs); }
}

.galleria--griglia figure { gap: var(--s-2); margin-top: 0; }

.galleria--griglia figure:nth-child(n) .forma,
.galleria--griglia figure:nth-child(n) .forma > img {
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
}

.galleria--griglia .forma {
  overflow: hidden;
  cursor: zoom-in;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}

.galleria--griglia .forma:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgb(22 48 29 / 0.14);
}

.galleria--griglia figcaption {
  gap: 0;
  font-size: var(--t-xs);
  line-height: var(--lh-ui);
}

.galleria--griglia .caption {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-xs);
  line-height: var(--lh-ui);
  color: var(--ink-soft);
  letter-spacing: var(--ls-normal);
}

.galleria--griglia .marginalia { display: none; }


/* ==========================================================================
   IL BLOCCO AFFIANCATO
   Prende il posto di `.attraverso` sulla fioreria. Quel blocco faceva
   passare il titolo dietro a una fotografia scontornata, e la fotografia
   scontornata era il difetto: il bordo del ritaglio si vedeva, in basso
   restavano una manica blu e due mani, e il titolo si spezzava in due
   pezzi lontani per farle spazio. Segnalato: «brutta la foto a lato e il
   testo cosi'».
   Qui e' un blocco normale, testo e fotografia affiancati, con la
   fotografia intera dentro una delle forme di sistema.
   ========================================================================== */

.affiancata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: center;
}

.affiancata__testo {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  max-width: 34rem;
}

.affiancata__testo h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-4xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--oliva-cupo);
}

.affiancata__testo p:not(.occhiello) {
  margin: 0;
  font-size: var(--t-md);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
  max-width: 42ch;
}

.affiancata__foto {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.affiancata__foto > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 60rem) {
  .affiancata { grid-template-columns: minmax(0, 1fr); }
  .affiancata__foto { aspect-ratio: 3 / 2; }
}


/* ==========================================================================
   LE SCHEDE DI DETTAGLIO
   Segnalato: «le schede di dettaglio non mi piacciono i bottoni cosi', vedi
   di farla meglio».

   Erano pastiglie con tre sagome organiche a rotazione, cioe' la stessa
   forma dei contenitori delle fotografie messa attorno a un elenco di
   collegamenti: una macchia storta che sembra un errore di rendering, e
   nessun segno che dicesse «si clicca» a parte il colore.

   Adesso sono righe di collegamento vere: fondo bianco, filetto sottile,
   una freccia che dice dove portano, e al passaggio si tingono di verde e
   la freccia avanza. Restano distinguibili dai comuni, che sono etichette
   e non portano da nessuna parte.
   ========================================================================== */

.approfondimenti { gap: var(--s-3) var(--s-3); }

.approfondimenti a {
  gap: var(--s-3);
  padding: 0.6rem 1.1rem;
  border-radius: 100px;
  background: var(--white);
  color: var(--azione);
  font-weight: 500;
}

/* Su eventi cinque pastiglie su sei portano a una pagina del sito nuovo e
   una alla landing vecchia, che ha un altro indirizzo e un altro design.
   Erano identiche. La freccia obliqua e' il segno che si esce. */
.approfondimenti a[target="_blank"]::after { content: "↗"; }

.approfondimenti a::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  color: var(--salvia-testo);
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.approfondimenti a:hover,
.approfondimenti a:focus-visible {
  background: rgb(17 108 55 / 0.06);
  border-color: var(--azione);
  color: var(--azione);
}

.approfondimenti a:hover::after,
.approfondimenti a:focus-visible::after {
  transform: translateX(3px);
  color: var(--azione);
}

/* Sulle fasce colorate il bianco velato le spegneva: sei collegamenti che
   leggevano come voci disattivate, e non erano nemmeno tutti uguali. Sulla
   carta e sulla terra la pastiglia resta bianca piena, come nel resto del
   sito; sull'oliva, che e' scura, la pastiglia bianca col verde dentro e'
   l'unica combinazione che si stacca dal fondo. */
.section--oliva .approfondimenti a {
  background: var(--white);
  border-color: transparent;
  color: var(--azione);
}
/* Un link dentro un testo sull'oliva o sul bosco usciva verde su verde. */
:is(.section--oliva, .section--bosco) :is(p, li):not(.approfondimenti li) > a:not(.btn) {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* --- La testata e la fascia che le sale addosso ------------------------
   Segnalato su giardini, da telefono: «la prima CTA e' troppo attaccata
   alla prima sezione». La fascia dopo ha l'onda che sale, e la cupola
   entra dentro la testata di `var(--onda)`: sotto il bottone restavano
   venti pixel. */
.testata:has(+ .onda-su),
.testata:has(+ .section--oliva),
.testata:has(+ .section--terra),
.testata:has(+ .section--bosco) {
  padding-bottom: calc(clamp(3rem, 7vw, 6rem) + var(--onda));
}

/* La stesa ha gia' una carta piu' corta sotto - la fotografia e' una fascia
   larga, non un bottone - e sommandole l'onda diventava 142 px: corsi si
   apriva a 890 px contro i 784 di eventi, che ha la stessa testata e non ha
   l'onda. Qui la base e' quella della stesa, non quella della testata
   grande. */
.testata--stesa:has(+ .onda-su),
.testata--stesa:has(+ .section--oliva),
.testata--stesa:has(+ .section--terra),
.testata--stesa:has(+ .section--bosco) {
  padding-bottom: calc(clamp(1.5rem, 2.6vw, 2.25rem) + var(--onda));
}


/* --- Il reparto sul telefono ------------------------------------------
   A una colonna sola le schede diventano cinque blocchi alti quanto lo
   schermo: la fotografia quadrata da sola misura 350 px, e la sezione di
   giardini arrivava a 2.380. Chiesto: «valutare se centrare i testi sotto
   alle immagini, e forse visto che sono molti farei un carosello».
   Il carosello nasconderebbe quattro schede su cinque a chi arriva da una
   ricerca: meglio tenerle tutte e accorciarle. La fotografia passa da
   quadrata a 16/10 - 131 px in meno per scheda - e il testo va al centro,
   come sulle tessere della home. */
@media (max-width: 47.99rem) {
  .famiglia {
    text-align: center;
    justify-items: center;
    gap: var(--s-3);
  }

  .famiglia .forma { aspect-ratio: 16 / 10; }
  .famiglia p { max-width: 32ch; }

  /* Le schede «Anche questo» hanno la stessa forma e lo stesso problema. */
  .altra {
    text-align: center;
    justify-items: center;
  }

  .altra p { max-width: 32ch; }
}


/* --- La testata stesa lascia meno carta sotto ---------------------------
   Segnalato su contatti: «fra la foto e come raggiungerci ce n'e' un sacco,
   mentre fra le altre poco». Misurato a 1440: 96 px di margine della
   testata piu' 75 della sezione dopo, e la sagoma della fotografia risale
   ai lati, quindi dove sta il titolo il vuoto si legge quasi doppio. */
.testata--stesa { padding-bottom: clamp(1.5rem, 2.6vw, 2.25rem); }


/* ==========================================================================
   LA TESTATA ACCANTO SI SVUOTAVA CON LO SCHERMO
   Misurato su garden: fra le briciole e il titolo c'erano 24 px
   a 900, 141 a 1366 e **154 a 1440**, e la colonna di testo finiva 129 px
   prima della fotografia. `docs/27` § 0 descrive questa variante come «testo
   e fotografia partono insieme e finiscono insieme, nessun vuoto»: succedeva
   solo a 1024.

   La causa e' la fotografia quadrata su una colonna che cresce con la
   finestra: a 1440 e' alta 583 px, il testo ne occupa 250, e con la griglia
   centrata i 333 px di avanzo si dividono sopra e sotto.

   Due correzioni: il testo si appoggia in alto invece che al centro, e la
   fotografia da quadrata passa a 4/3, cioe' 146 px in meno a 1440. Quello
   che resta di avanzo sta tutto sotto, dove la fotografia lo riempie.
   ========================================================================== */

@media (min-width: 60.01rem) {
  /* La quarta riga e' la molla: senza, la fotografia che scavalca le righe
     due e tre le gonfia tutte e due, e il vuoto si apre fra il titolo e il
     sommario invece che sotto. */
  .testata--accanto .testata__griglia {
    align-items: start;
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .testata--accanto .testata__foto {
    grid-row: 2 / 5;
    aspect-ratio: 4 / 3;
    align-self: start;
    margin-top: clamp(0.5rem, 1.4vw, 1.25rem);
  }

  .testata--accanto .testata__titolo { align-self: start; }
  .testata--accanto .testata__intro { align-self: start; }
}


/* ==========================================================================
   L'ELENCO CON LA SPUNTA: TRE COLONNE, NON QUATTRO
   Misurato. `auto-fit` con la traccia a 16rem arriva a
   quattro colonne appena puo': a 1440 sono 288 px di colonna, cioe' 45
   caratteri per riga esatti - il minimo che il progetto si e' dato - e a
   1024 scendono a 43, sotto. E il numero di colonne non ha niente a che
   vedere con quante voci ci sono: sei voci in quattro colonne lasciano due
   celle bianche da 288x96 in mezzo alla fascia piena, nove ne lasciano tre.

   Con tre colonne fisse la colonna sale a 400 px (56 caratteri), sei voci
   fanno due righe piene e nove ne fanno tre. Sotto i 1024 si scende a due,
   sotto i 640 a una.
   ========================================================================== */

.comprende { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 64rem) {
  .comprende { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Dentro la locandina l'elenco e' una scheda tecnica accanto al manifesto,
   non una fascia larga: quattro righe in colonna. Sta qui e non piu' su
   perche' `.comprende` si ridichiara le colonne tre volte in questo foglio,
   e la prima delle tre arriva dopo. */
.locandina .comprende,
.locandina .comprende:where(*) { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }

@media (max-width: 40rem) {
  .comprende { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   I TITOLI DELLE SCHEDE SONO COLLEGAMENTI, E ADESSO SI VEDE
   Misurato: `.famiglia h3 a` e `.altra h3 a` ereditano il
   colore, non hanno sottolineatura e non hanno freccia. L'unico segnale era
   un sollevamento al passaggio del mouse, che sul telefono non esiste. E
   sono l'aggancio alle 41 landing storiche, cioe' la ragione per cui quelle
   schede portano da qualche parte.

   La freccia sta dopo il titolo, si vede senza passarci sopra, e avanza
   quando ci si passa. Il titolo resta del colore del testo: e' un titolo,
   non un link in mezzo a un paragrafo.
   ========================================================================== */

/* La freccia sta in una riga flessibile insieme al titolo, non in un
   `float`: un float piu' alto della sua riga esce dal blocco e si infila
   nel paragrafo sotto, restringendogli le prime righe. Misurato: le tre
   descrizioni di una stessa griglia finivano larghe 319, 320 e 323 px. */
.famiglia h3,
.altra h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}

.famiglia h3 a,
.altra h3 a { flex: 1 1 auto; }

.famiglia h3::after,
.altra h3::after {
  content: "→";
  flex: none;
  color: var(--salvia-testo);
  font-family: var(--sans);
  font-weight: 400;
  transition: transform var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.famiglia:hover h3::after,
.altra:hover h3::after,
.famiglia h3 a:focus-visible ~ ::after,
.altra h3 a:focus-visible ~ ::after {
  transform: translateX(3px);
  color: var(--azione);
}


/* --- La nota di sezione non e' una voce dell'elenco ---------------------
   Aveva lo stesso corpo, la stessa interlinea e lo stesso colore di
   `.comprende li`, e stava sotto la griglia allineata alla prima colonna:
   si leggeva come una settima voce a cui era caduta la spunta. */
.nota-sezione {
  padding-left: var(--s-4);
  border-left: 2px solid var(--oro-tenue);
  color: var(--salvia-testo);
}


/* --- Le pastiglie si rimpiccioliscono come i bottoni --------------------
   `.btn` scende a 14 px sul telefono, `.approfondimenti a` e `.comuni li`
   restavano a 15: due famiglie di pastiglie, una si rimpicciolisce e
   l'altra no. */
@media (max-width: 47.99rem) {
  .approfondimenti a,
  .comuni li { font-size: var(--t-xs); }
  .approfondimenti a { min-height: 44px; }
}


/* --- Le colonne si stringevano mentre lo schermo cresceva ---------------
   Misurato su progettazione: `.fase p` fa 350 px a 390, 332 a 768, **249 a
   900**, 283 a 1024 e 288 a 1440; `.altra p` 323, 334, **252**, 287, 405.
   `28_TIPOGRAFIA` § 3.2 lo vieta, e § 3.3 fissa il pavimento a 290 px.
   La causa e' la traccia minima a 15rem, cioe' 240 px: a 900 ci sta una
   colonna in piu' di quante ne regga il testo. Con 18rem e 17rem la griglia
   si ferma prima, e a 900 le due griglie passano da tre colonne strette a
   due larghe. */
.fasi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.altre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

/* Le sequenze di quattro passi - otto pagine su diciannove - fra 1.100 e
   1.400 px finivano su tre colonne: 3+1, con l'ultimo passo solo e due terzi
   di riga vuoti accanto. Quattro colonne li' non ci stanno (237 px a 1180),
   quindi restano due, e la griglia si ferma a 64rem perche' a tutta gabbia
   una scheda da un passo diventerebbe larga 626 px. */
@media (min-width: 60rem) {
  .fasi:has(> :nth-child(4)):not(:has(> :nth-child(5))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 64rem;
  }
}


/* --- Le vedove nei sommari -----------------------------------------------
   Su piante-da-esterno il sommario della testata finiva con «catalogo.» da
   solo su una quarta riga; su altre pagine capitava lo stesso a una parola
   corta. `pretty` sposta una parola dalla riga precedente e chiude il
   paragrafo pieno. Le testate di sezione ce l'hanno gia': qui mancava alle
   testate di pagina, ai cartigli e alle note. */
.testata__intro p,
.richiamo__cartiglio p,
.chiusura__corpo p,
.nota-sezione { text-wrap: pretty; }


/* --- La nota si allinea al testo che commenta, non alle spunte ----------
   `.comprende li` rientra di 30 px per far posto alla spunta; la nota sotto
   partiva dal bordo della griglia, cioe' incolonnata con le spunte e non
   con le parole. */
.comprende + .nota-sezione { margin-left: calc(1.125rem + var(--s-3)); }


/* --- I collegamenti dentro una nota erano alti venti pixel --------------
   Su corsi «Facebook» e «Instagram» stanno dentro una riga di prosa e sono
   l'unico modo di arrivare al calendario dal telefono: 74x20 e 75x20,
   sotto la soglia di 24 px. L'eccezione WCAG per i collegamenti in linea
   tecnicamente li copre, ma un bersaglio si prende con il pollice e non con
   un cavillo. Il riempimento verticale non sposta la riga, perche' e'
   dentro il mezzo interlinea che c'e' gia'. */
.nota-sezione a { padding-block: 5px; }


/* ==========================================================================
   LE SEGNALAZIONI DEL 14 SETTEMBRE, SU CASA E GIARDINO
   Valgono per tutte le pagine: i componenti sono gli stessi.
   ========================================================================== */

/* --- Il puntatore sulle fotografie delle schede -------------------------
   Il collegamento del titolo si allarga a tutta la scheda con uno
   pseudo-elemento. In Chrome copre anche la fotografia; in Safari la
   fotografia, quando al passaggio si solleva con `transform`, puo' essere
   disegnata sopra lo pseudo-elemento, e li' il puntatore torna la freccia.
   Segnalato: «le foto non hanno il cursore pointer». Il livello del
   collegamento adesso e' dichiarato, e la scheda dice da se' che si clicca. */
.famiglia,
.altra { cursor: pointer; }

.famiglia h3 a::after,
.altra h3 a::after { z-index: 2; }


/* --- Le schede di rimando: carosello sul telefono ------------------------
   Tre schede in colonna sono tre schermate per dire «vedi anche». Qui
   diventano un nastro con i puntini, come le gallerie. */
@media (max-width: 47.99rem) {
  .altre {
    display: flex;
    gap: var(--s-4);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-inline: var(--shell-pad);
    margin-inline: calc(var(--shell-pad) * -1);
    scroll-padding-inline: var(--shell-pad);
  }

  .altre::-webkit-scrollbar { display: none; }

  .altre > .altra {
    flex: 0 0 min(78vw, 20rem);
    scroll-snap-align: start;
    min-width: 0;
  }
}


/* --- Il richiamo e' una fascia dritta ------------------------------------
   Segnalato: «ha una forma strana come sezione, e non metterei la curva
   sopra, altrimenti si vedono queste cose che stanno male». La fotografia
   aveva gli angoli arrotondati al 50% e saliva sotto la sezione prima: la
   fascia sembrava una lente, e dove la sezione sopra era colorata l'angolo
   tagliato lasciava vedere uno spicchio di fondo crema fra i due colori.
   Adesso la fotografia e' un rettangolo a tutta larghezza, e le vicine non
   disegnano la loro onda sopra: il confine e' un taglio netto. */
.richiamo.onda-su,
.richiamo.onda-giu {
  margin-block: 0;
  border-radius: 0;
}

.richiamo + .onda-su::before { content: none; }
.onda-giu:has(+ .richiamo)::after { content: none; }

/* Senza onda, gli spazi riservati all'onda diventano carta in piu'. */
.richiamo.onda-giu + .section { padding-top: var(--section); }
.section:has(+ .richiamo) { padding-bottom: var(--section); }

/* --- Sotto, invece, la curva torna ----------------------------------------
   Segnalato: «la curva sotto falla morbida, solo quella sopra netta come
   ora va bene». La fotografia arrotonda i due angoli bassi e scende sulla
   sezione dopo di quanto e' alta l'onda, cosi' la curva si legge contro la
   carta di quella sezione.
   Morbida vuol dire bassa e larga: il raggio verticale e' l'onda e basta,
   non 1,7 volte come prima, quando gli angoli sembravano tagliati.
   Solo se sotto c'e' una sezione su carta. Se c'e' una fascia colorata,
   l'angolo tagliato lascerebbe vedere il fondo crema fra la fotografia e il
   colore - lo stesso spicchio che c'era sopra - e il confine resta dritto. */
.richiamo.onda-giu:not(:has(+ :is(.section--oliva, .section--terra, .section--bosco))) {
  margin-bottom: calc(var(--onda) * -1);
  border-end-start-radius: 50% var(--onda);
  border-end-end-radius: 50% var(--onda);
}

.richiamo.onda-giu:not(:has(+ :is(.section--oliva, .section--terra, .section--bosco))) + .section {
  padding-top: calc(var(--section) + var(--onda));
}


/* --- Nelle schede, il titolo sta con la sua descrizione -------------------
   Segnalato: «diminuisci la distanza fra titolo e descrizione». Il gap
   della scheda e' uno solo, 16 px, e separava allo stesso modo la
   fotografia dal titolo e il titolo dalla sua riga: le due righe di testo
   sembravano due cose. Fra fotografia e titolo resta, fra titolo e
   descrizione scende a 4 px. */
.altra h3 + p,
.famiglia h3 + p { margin-top: calc(var(--s-4) * -1 + 0.25rem); }


/* --- Le fotografie di testata, piu' grandi --------------------------------
   Segnalato: «da desktop si puo' ingrandire un po' di piu', e' piccolina,
   vale per tutte le pagine». Misurato a 1440: 559 px nella testata
   accanto, 543 in quella grande, dentro una gabbia da 1296 con un titolo
   largo al massimo 14 caratteri. La colonna della fotografia prende lo
   spazio che il titolo non usava. */
@media (min-width: 60.01rem) {
  .testata--accanto .testata__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .testata:not(.testata--accanto):not(.testata--stesa) .testata__griglia { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
}


/* --- Il modulo nella chiusura ---------------------------------------------
   Segnalato: «non ha senso che vadano sotto per poi essere rimandati di
   nuovo o su whatsapp o su telefono». Sulle pagine dove si chiede un
   sopralluogo, un appuntamento o un'informazione, la chiusura contiene il
   modulo: il bottone della testata porta qui e qui si scrive. Telefono e
   WhatsApp restano, ma come riga secondaria sotto. */
.chiusura.modulo-sezione .modulo { margin-top: var(--s-6); text-align: left; }

/* La riga sta nella colonna del modulo, allineata a sinistra come il
   bottone che le sta sopra: centrata sotto un modulo allineato a sinistra
   finiva attaccata al margine della gabbia. */
.chiusura.modulo-sezione .chiusura__alternativa {
  max-width: 46rem;
  margin: var(--s-4) auto 0;
  text-align: left;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.chiusura__alternativa a { color: var(--azione); white-space: nowrap; }
.section--terra .chiusura__alternativa a { color: var(--azione-fonda, var(--azione)); }

/* --- Sopra, la curva dipende da cosa c'e' prima ---------------------------
   Segnalato su terrazzi e garden: «ha senso che qui abbia la curva pure
   sopra, in base alla posizione sai se la curva va solo sopra o sotto o
   entrambe». La regola e' la stessa del bordo basso, letta al contrario:
   se la sezione prima e' su carta, la fotografia sale a cupola dentro la
   carta; se e' una fascia colorata, il confine resta dritto, perche'
   l'angolo tagliato scoprirebbe lo spicchio crema fra i due colori (il
   difetto segnalato su casa e giardino). */
.section:not(.section--oliva, .section--terra, .section--bosco) + .richiamo.onda-su {
  margin-top: calc(var(--onda) * -1);
  border-start-start-radius: 50% var(--onda);
  border-start-end-radius: 50% var(--onda);
}

.section:not(.section--oliva, .section--terra, .section--bosco):has(+ .richiamo.onda-su) {
  padding-bottom: calc(var(--section) + var(--onda));
}


/* ==========================================================================
   LE VOCI IN SCHEDE, CON IL TITOLO A LATO
   Segnalato su prati e manutenzione: «un po' brutto visivamente, se sono 4
   fai 2 e 2», «cura un po' di piu' la pagina». Tre elenchi con la spunta
   uno dopo l'altro si leggevano tutti uguali, e quattro voci su tre colonne
   lasciavano l'ultima da sola.

   `.divisa` mette la testata della sezione a sinistra e il contenuto a
   destra: la gabbia si riempie senza allargare le righe di testo.
   `.comprende--schede` fa di ogni voce una scheda: icona nel tondo, titolo,
   e sotto la frase. Quattro voci fanno 2+2, otto fanno 4+4.
   ========================================================================== */

@media (min-width: 64rem) {
  .divisa {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  .divisa > .sec-head { position: sticky; top: 7rem; margin-bottom: 0; }
}

.comprende--schede {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.8vw, 1.25rem);
}

@media (min-width: 64rem) {
  .comprende--schede:has(> :nth-child(6)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .comprende--schede { grid-template-columns: minmax(0, 1fr); }
}

.comprende--schede li {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: 0 1px 2px rgb(22 48 29 / 0.04), 0 10px 26px rgb(22 48 29 / 0.05);
}

.comprende--schede .ico {
  position: static;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 0.6rem;
  margin-bottom: var(--s-2);
  border-radius: 100px;
  background: rgb(17 108 55 / 0.08);
  color: var(--azione);
}

.comprende--schede b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: var(--lh-title);
  color: var(--ink);
}

.comprende--schede li > span {
  font-size: var(--t-sm);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.section--oliva .comprende--schede li {
  background: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.14);
  box-shadow: none;
}

.section--oliva .comprende--schede .ico { background: rgb(255 255 255 / 0.1); color: var(--oro); }
.section--oliva .comprende--schede b { color: var(--white); }
.section--oliva .comprende--schede li > span { color: var(--terra); }

.divisa .comprende--schede + .nota-sezione { margin: var(--s-5) 0 0; }


/* --- I passaggi accanto a una fotografia ---------------------------------
   Prendono il posto della fotografia ponte, che stava sospesa in basso a
   destra e scavalcava la sezione dopo: «questa foto e' a caso, vola sopra
   alla sezione». La fotografia sta a sinistra, ferma mentre si leggono i
   passaggi, e i quattro passaggi fanno 2+2 alla sua destra. */
@media (min-width: 64rem) {
  .fasi-foto {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  .fasi-foto > .forma { position: sticky; top: 7rem; }
  .fasi-foto .fasi:has(> :nth-child(4)):not(:has(> :nth-child(5))) { max-width: none; }
}

.fasi-foto > .forma { aspect-ratio: 4 / 5; margin: 0; }
.fasi-foto > .forma img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 63.99rem) {
  .fasi-foto > .forma { aspect-ratio: 3 / 2; margin-bottom: var(--s-7); }
}

/* Le voci brevi - un nome e mezza riga - in schede sembrerebbero vuote.
   `.comprende--righe` le mette in fila come un indice: filetto sopra,
   icona nel tondo, testo normale. Da sei voci in su vanno su due colonne. */
.comprende--righe { grid-template-columns: minmax(0, 1fr); gap: 0; }

@media (min-width: 48rem) {
  .comprende--righe:has(> :nth-child(6)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

.comprende--righe li {
  padding: var(--s-4) 0 var(--s-4) calc(38px + var(--s-4));
  border-top: 1px solid var(--line);
  font-size: var(--t-md);
}

.comprende--righe .ico {
  top: calc(var(--s-4) - 0.3rem);
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 0.5rem;
  border-radius: 100px;
  background: rgb(17 108 55 / 0.08);
  color: var(--azione);
}

.section--oliva .comprende--righe li { border-color: rgb(255 255 255 / 0.16); color: var(--terra); }
.section--oliva .comprende--righe .ico { background: rgb(255 255 255 / 0.1); color: var(--oro); }


/* ==========================================================================
   LA LETTURA: PAGINE PER IL SEO E ARTICOLI
   Testo lungo, copiato dal sito vecchio e riordinato. La colonna del testo
   si ferma a 42rem (circa 70 caratteri); accanto, da scrivania, una
   fotografia che resta ferma mentre si legge.
   ========================================================================== */

.lettura { display: grid; gap: clamp(2rem, 5vw, 5rem); }

@media (min-width: 64rem) {
  .lettura {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }

  .lettura__aside { position: sticky; top: 7rem; }
}

.lettura__aside { display: grid; gap: var(--s-4); margin: 0; }
.lettura__aside .forma { aspect-ratio: 4 / 5; margin: 0; overflow: hidden; }
.lettura__aside img { width: 100%; height: 100%; object-fit: cover; display: block; }

.prosa { max-width: 42rem; }
.prosa > * { margin: 0; }
.prosa > * + * { margin-top: var(--s-4); }

.prosa h2 {
  margin-top: var(--s-8);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-title);
  color: var(--oliva-cupo);
}

.prosa h3 {
  margin-top: var(--s-6);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-title);
  color: var(--ink);
}

.prosa > h2:first-child,
.prosa > h3:first-child { margin-top: 0; }

.prosa p,
.prosa li {
  font-size: var(--t-md);
  line-height: var(--lh-lead);
  color: var(--ink-soft);
}

.prosa ul,
.prosa ol { padding-left: 1.25rem; }
.prosa li + li { margin-top: var(--s-2); }
.prosa li::marker { color: var(--oro); }
.prosa strong { font-weight: 600; color: var(--ink); }
.prosa a { color: var(--azione); text-underline-offset: 3px; }

/* La riga di servizio dell'articolo - data e categoria - sta nella testata,
   sopra il sommario: e' la stessa delle schede del diario. */
.testata__intro .voce__meta { margin-bottom: var(--s-3); }

/* La locandina in testata. Negli eventi vecchi e' spesso l'unica immagine,
   ed e' fatta di testo: dentro la forma organica le scritte finivano
   tagliate. Qui resta intera, con l'angolo smussato, e si apre ingrandita. */
.testata__foto--locandina,
.testata--accanto .testata__foto--locandina,
.testata--stesa .testata__foto--locandina {
  display: block;
  aspect-ratio: auto;
  align-self: start;
  justify-self: end;
  width: 100%;
  max-width: 32rem;
  margin-top: clamp(0.5rem, 1.4vw, 1.25rem);
}

.testata__foto--locandina img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
  box-shadow: 0 1px 2px rgb(22 48 29 / 0.05), 0 18px 40px rgb(22 48 29 / 0.12);
  cursor: zoom-in;
}

@media (max-width: 43.99rem) {
  .testata__foto--locandina,
  .testata--accanto .testata__foto--locandina { justify-self: stretch; max-width: none; }
}

/* --- Il prima e il dopo, in due riquadri uguali ------------------------
   Segnalato: «orribile, forse anche perche' hanno forme diverse». Stessa
   proporzione, stesso angolo smussato, l'etichetta dentro la foto: il
   confronto si fa a colpo d'occhio. */
.pd-uguali {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.875rem, 2.4vw, 2rem);
}

.pd-uguali figure { margin: 0; }
.pd-uguali .cornice-morbida { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.pd-uguali .cornice-morbida img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pd-uguali__etichetta {
  position: absolute;
  top: clamp(0.625rem, 1.6vw, 1rem);
  left: clamp(0.625rem, 1.6vw, 1rem);
  z-index: 1;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  background: var(--paper);
  color: var(--oliva-cupo);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
}

.section--oliva .pd-uguali figcaption .caption { color: var(--terra); }

.sec-head--dopo { margin-top: clamp(3rem, 6vw, 5rem); }
.sec-head--dopo h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-title);
  color: var(--white);
}

/* Le frecce del carosello quando la galleria segue un blocco che ha gia'
   il suo titolo: stanno da sole, a destra, sopra le foto. */
.sec-head--galleria { margin: clamp(2.5rem, 5vw, 4rem) 0 var(--s-5); display: flex; justify-content: flex-end; }
.sec-head--galleria::after { content: none; }

/* Dentro `.divisa` la colonna delle schede e' larga sette dodicesimi:
   quattro schede per riga li' diventano colonne di sei parole. Due, sempre. */
@media (min-width: 64rem) {
  .divisa .comprende--schede:has(> :nth-child(6)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sec-head.sec-head--galleria { display: flex; justify-content: flex-end; }
.sec-head.sec-head--galleria .caro__arrows { margin: 0; }
.sec-head.sec-head--galleria { max-width: none; }

/* ==========================================================================
   LE TAVOLE DEL WEDDING
   Sette linguette, un carosello per tavola. Le linguette sono pastiglie:
   quella aperta e' piena, le altre hanno il filetto. Dal telefono scorrono
   in orizzontale invece di andare a capo su tre righe.
   ========================================================================== */

.tavole__schede {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.tavole__schede button {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.tavole__schede button:hover { border-color: var(--azione); color: var(--azione); }
.tavole__schede button:focus-visible { outline: 2px solid var(--azione); outline-offset: 3px; }
.tavole__schede button[aria-selected="true"] { background: var(--azione); border-color: var(--azione); color: var(--white); }

.tavola__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

.tavola__testa p { margin: 0; display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.tavola__testa b { font-family: var(--serif); font-weight: 600; font-size: var(--t-2xl); line-height: var(--lh-title); color: var(--oliva-cupo); }
.tavola__testa span { font-size: var(--t-sm); color: var(--salvia-testo); }

@media (max-width: 47.99rem) {
  .tavole__schede {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--shell-pad) * -1);
    padding-inline: var(--shell-pad);
  }

  .tavole__schede::-webkit-scrollbar { display: none; }
  .tavole__schede button { flex: none; }
  .tavola__testa .caro__arrows { display: none; }
}

/* ==========================================================================
   I MAZZI DA SCEGLIERE
   Otto schede, quattro per riga da scrivania: foto quadrata, taglia, nome,
   prezzo, composizione. La foto si apre ingrandita.
   ========================================================================== */

.mazzi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.875rem, 1.8vw, 1.5rem);
}

@media (max-width: 64rem) { .mazzi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .mazzi { grid-template-columns: minmax(0, 1fr); } }

.mazzo {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  overflow: hidden;
}

.mazzo__foto { display: block; aspect-ratio: 1 / 1; overflow: hidden; }
.mazzo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }

.mazzo__corpo { display: grid; gap: var(--s-2); align-content: start; padding: clamp(1.1rem, 2vw, 1.5rem); }
.mazzo__corpo > * { margin: 0; }
.mazzo__taglia { font-size: var(--t-3xs); font-weight: 600; letter-spacing: var(--ls-maiusc); text-transform: uppercase; color: var(--salvia-testo); }
.mazzo h3 { font-family: var(--serif); font-weight: 600; font-size: var(--t-xl); line-height: var(--lh-title); color: var(--ink); }
.mazzo__prezzo { font-size: var(--t-lg); font-weight: 600; color: var(--azione); }
.mazzo__dati { display: grid; gap: var(--s-3); margin: var(--s-2) 0 var(--s-2); }
.mazzo__dati div { display: grid; gap: 0.15rem; }
.mazzo__dati dt { font-size: var(--t-3xs); font-weight: 600; letter-spacing: var(--ls-maiusc); text-transform: uppercase; color: var(--salvia-testo); }
.mazzo__dati dd { margin: 0; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--ink-soft); }
.mazzo .linea { justify-self: start; margin-top: auto; }

/* La riga data e categoria va a capo intera: con «Sinflora Kids» a 390 px
   ogni pezzo si spezzava dentro di se'. */
.voce__meta { flex-wrap: wrap; row-gap: 0.15rem; }
.voce__meta time, .voce__meta .voce__cat { white-space: nowrap; }

/* Gli elenchi dentro il testo lungo: il reset globale toglieva i pallini. */
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }

/* ==========================================================================
   IL DIARIO DEL BLOG
   Le schede degli articoli, nella grafica di «Corsi, laboratori ed eventi»
   della home. Tre per riga; le locandine non si ritagliano: stanno intere
   su un fondo chiaro. Oltre le prime sei si aprono a gruppi.
   ========================================================================== */

.diario--blog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 64rem) { .diario--blog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .diario--blog { grid-template-columns: minmax(0, 1fr); } }

.diario--blog > .voce[hidden] { display: none; }
.senza-js .diario--blog > .voce[hidden] { display: grid; }
.senza-js .blog__altri { display: none; }


.blog__altri { display: flex; justify-content: center; margin-top: var(--s-7); }
.blog__altri[hidden] { display: none; }
/* Le date lunghe («dal 18 ottobre al 6 gennaio») vanno a capo loro,
   non spingono la categoria in una colonna a parte. */
.voce__meta time { white-space: normal; }

/* Gli approfondimenti lunghi, sul telefono: le pagine per il SEO ne hanno
   fino a 27, cioe' 1500 px di pastiglie. Si vedono le prime otto e un
   bottone apre le altre. Senza script restano tutte. */
@media (max-width: 40rem) {
  .approfondimenti.is-chiusa > li:nth-child(n+9) { display: none; }
}
.approfondimenti__tutti { margin-top: var(--s-4); }
@media (min-width: 40.01rem) { .approfondimenti__tutti { display: none; } }

/* Nella testata stesa la locandina orizzontale prende la riga intera sotto
   titolo e sommario, allineata a sinistra: stretta a destra lasciava un
   vuoto sotto il titolo e si leggeva a fatica. */
@media (min-width: 60.01rem) {
  .testata--stesa .testata__foto--locandina {
    grid-column: 1 / -1;
    justify-self: start;
    max-width: 48rem;
    margin-top: clamp(1.25rem, 2.6vw, 2rem);
  }
}

/* I video dentro le cornici smussate, come le fotografie. */
.cornice-morbida > video { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ==========================================================================
   IL CONTENUTO DELL'EDITOR
   Articoli, realizzazioni e pagine per il SEO si scriveranno con l'editor
   di WordPress: qui ci sono solo i blocchi dell'editor, con le loro classi
   (wp-block-*, alignwide, alignfull, is-style-*). Niente componenti fatti a
   mano: quello che non si puo' fare con un blocco non va in questi corpi.
   ========================================================================== */

.contenuto { display: grid; gap: var(--s-5); }
.contenuto > * { margin: 0; max-width: 44rem; }
.contenuto > .alignwide { max-width: none; }
.contenuto > .alignfull { max-width: none; width: 100vw; margin-inline: calc(50% - 50vw); }

.contenuto > h2 {
  margin-top: var(--s-6);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: var(--lh-title);
  color: var(--oliva-cupo);
}

.contenuto > h3 {
  margin-top: var(--s-4);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: var(--lh-title);
  color: var(--ink);
}

.contenuto > :is(h2, h3):first-child { margin-top: 0; }

.contenuto p,
.contenuto li { font-size: var(--t-md); line-height: var(--lh-lead); color: var(--ink-soft); }
.contenuto ul { list-style: disc; padding-left: 1.25rem; }
.contenuto ol { list-style: decimal; padding-left: 1.25rem; }
.contenuto li + li { margin-top: var(--s-2); }
.contenuto li::marker { color: var(--oro); }
.contenuto strong { font-weight: 600; color: var(--ink); }
.contenuto a:not(.btn) { color: var(--azione); text-underline-offset: 3px; }

/* Immagine: normale nella colonna, larga quanto la gabbia, o a tutto schermo. */
.contenuto .wp-block-image { margin: 0; }
.contenuto .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
}
.contenuto .wp-block-image.alignfull img { border-radius: 0; max-height: 86vh; object-fit: cover; }
.contenuto .wp-element-caption { margin-top: var(--s-2); font-size: var(--t-sm); line-height: var(--lh-body); color: var(--salvia-testo); }
.contenuto .alignfull .wp-element-caption { padding-inline: var(--shell-pad); }

/* Elenco con lo stile «dati»: quando, dove, quanto. */
.contenuto .is-style-dati { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.contenuto .is-style-dati li { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.contenuto .is-style-dati strong {
  display: block;
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  color: var(--salvia-testo);
}

/* Galleria a griglia. Con lo stile «carosello» lo script la trasforma nel
   nastro con le frecce e i pallini, lo stesso delle pagine principali. */
.contenuto .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.2vw, 1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* due o quattro foto non lasciano un buco nella terza colonna */
.contenuto .wp-block-gallery:has(> :nth-child(2):last-child),
.contenuto .wp-block-gallery:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) {
  .contenuto .wp-block-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* sul telefono l'ultima foto dispari non resta da sola: prende la riga intera */
  .contenuto .wp-block-gallery:not(.is-style-carosello) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .contenuto .wp-block-gallery:not(.is-style-carosello) > :last-child:nth-child(odd) img { aspect-ratio: 16 / 10; }
}
.contenuto .wp-block-gallery > figure { margin: 0; }
.contenuto .wp-block-gallery:not(.is-style-carosello) img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(0.625rem, 1.2vw, 1rem);
  cursor: zoom-in;
}
.contenuto .carosello-blocco { max-width: none; }
.contenuto .carosello-blocco .caro__arrows { display: flex; justify-content: flex-end; gap: var(--s-2); margin-bottom: var(--s-4); }

/* Video: muto, in loop, parte quando si vede. */
.contenuto .wp-block-video { margin: 0; }
.contenuto .wp-block-video video { display: block; width: 100%; height: auto; border-radius: clamp(0.75rem, 1.6vw, 1.25rem); background: var(--terra-chiara); }
.contenuto .wp-block-video.is-style-verticale { max-width: 24rem; }
/* finche' il poster non arriva il video e' 300x150: il riquadro lo tiene la forma */
.contenuto .wp-block-video.is-style-verticale video { aspect-ratio: 9 / 16; object-fit: cover; }
.contenuto .wp-block-video.alignfull video { border-radius: 0; max-height: 86vh; object-fit: cover; }
/* anche il video orizzontale tiene la sua forma prima del poster, e la pagina non salta */
.contenuto .wp-block-video:not(.is-style-verticale) video { aspect-ratio: 16 / 9; object-fit: cover; }
/* un video verticale in colonna: la colonna e' larga quanto il video, il testo si prende il resto */
@media (min-width: 48.01rem) {
  /* il testo si ferma a una misura leggibile e parte dall'alto, accanto al
     video: niente corridoio vuoto fra i due */
  .contenuto .wp-block-columns:has(> .wp-block-column > .is-style-verticale) { justify-content: start; }
  .contenuto .wp-block-columns:has(> .wp-block-column:first-child > .is-style-verticale) { grid-template-columns: minmax(0, 22rem) minmax(0, 38rem); }
  .contenuto .wp-block-columns:has(> .wp-block-column:last-child > .is-style-verticale) { grid-template-columns: minmax(0, 38rem) minmax(0, 22rem); }
  /* due video verticali, uno per colonna: due colonne uguali, centrate */
  .contenuto .wp-block-columns:has(> .wp-block-column:first-child > .is-style-verticale):has(> .wp-block-column:last-child > .is-style-verticale) {
    grid-template-columns: repeat(2, minmax(0, 22rem));
    justify-content: center;
  }
}
.contenuto .wp-block-column > .wp-block-video.is-style-verticale { margin-inline: auto; }

/* Incorpora (YouTube): in WordPress il 16:9 lo danno le classi del blocco. */
.contenuto .wp-block-embed { margin: 0; }
.contenuto .wp-block-embed__wrapper {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
  background: var(--terra-chiara);
}
.contenuto .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Due colonne: foto e testo affiancati. */
.contenuto .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  /* in alto: accanto a una locandina o a un video verticale il testo centrato
     lasciava un vuoto sopra e uno sotto */
  align-items: start;
  max-width: none;
}
@media (max-width: 48rem) { .contenuto .wp-block-columns { grid-template-columns: minmax(0, 1fr); } }
.contenuto .wp-block-column > * { margin: 0; }
.contenuto .wp-block-column > * + * { margin-top: var(--s-4); }

.contenuto .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Il prima e il dopo: un'immagine sopra l'altra e un cursore da trascinare.
   Le due foto devono avere la stessa inquadratura e la stessa proporzione. */
.confronto {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: var(--rapporto, 4 / 3);
  border-radius: clamp(0.75rem, 1.6vw, 1.25rem);
  background: var(--terra-chiara);
  user-select: none;
  touch-action: pan-y;
}
.confronto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.confronto__prima { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
.confronto__maniglia {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
  pointer-events: none;
}
.confronto__maniglia::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23116c37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 24px no-repeat;
  box-shadow: 0 4px 14px rgb(22 48 29 / 0.25);
}
.confronto__etichetta {
  position: absolute;
  top: clamp(0.625rem, 1.6vw, 1rem);
  z-index: 1;
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  background: var(--paper);
  color: var(--oliva-cupo);
  font-size: var(--t-3xs);
  font-weight: 600;
  letter-spacing: var(--ls-maiusc);
  text-transform: uppercase;
  pointer-events: none;
}
.confronto__etichetta--prima { left: clamp(0.625rem, 1.6vw, 1rem); }
.confronto__etichetta--dopo { right: clamp(0.625rem, 1.6vw, 1rem); }
.confronto input[type="range"] {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.confronto:has(input:focus-visible) .confronto__maniglia::after { outline: 3px solid var(--azione); outline-offset: 2px; }

/* Gli approfondimenti dentro il contenuto sono un elenco con uno stile:
   niente pallini dell'elenco normale. */
.contenuto ul.approfondimenti { list-style: none; padding: 0; max-width: none; }
.contenuto .approfondimenti li + li { margin-top: 0; }

/* Correzioni ai blocchi dell'editor, dagli scatti delle pagine di riferimento. */
.contenuto .wp-block-gallery.is-style-carosello { display: flex; }
.contenuto .carosello-blocco .cornice-morbida > img { height: 100%; object-fit: cover; border-radius: 0; }
.contenuto > .confronto,
.contenuto > .wp-block-sinflora-prima-dopo { max-width: 48rem; }
/* piu' largo della colonna di testo, ma non tutta la gabbia: le foto del sito vecchio
   sono larghe 595 px e stirate a 1296 si sgranano */
.contenuto > .confronto.alignwide,
.contenuto > .wp-block-sinflora-prima-dopo.alignwide { max-width: 56rem; max-height: 80vh; }
/* il confronto in una pagina principale: foto verticali, non piu' largo di un telefono girato */
.confronto--pagina { max-width: 32rem; margin-inline: auto; }
/* la forma e' decisa qui, non dalla foto: sul computer orizzontale per non
   occupare tutto lo schermo, sul telefono verticale per avere peso */
.confronto.confronto--pagina { aspect-ratio: 4 / 3; }
@media (max-width: 40rem) { .confronto.confronto--pagina { aspect-ratio: 3 / 4; } }
.contenuto .wp-block-image.alignwide img { max-height: 78vh; object-fit: cover; }

.contenuto .wp-block-list { margin: 0; }

/* La colonna del contenuto non si allarga col contenuto: senza minmax(0,1fr)
   un'immagine larga o un nastro spingevano la griglia oltre la gabbia, e le
   frecce del carosello finivano fuori schermo. */
.contenuto { grid-template-columns: minmax(0, 1fr); }
.contenuto > * { min-width: 0; }

/* Sul telefono il cartiglio sta in basso. Quando il soggetto della foto e' in
   basso (un gruppo seduto per terra) lo si porta in alto. */
@media (max-width: 47.99rem) {
  .richiamo.richiamo--cartiglio-alto { align-items: start; }
}

/* I link interni sul telefono: approfondimenti a righe. Le pastiglie andavano a
   capo con larghezze e altezze diverse; qui ogni link prende la riga intera,
   testo a sinistra e freccia a destra. */
@media (max-width: 40rem) {
  .contenuto .approfondimenti { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .contenuto .approfondimenti li { width: 100%; }
  .contenuto .approfondimenti a {
    display: flex;
    width: 100%;
    min-height: 3rem;
    justify-content: space-between;
    align-items: center;
    border-radius: 0.9rem;
    text-align: left;
  }
}

/* Pagine per il SEO: il carosello sta subito sotto la testata. Fra il bottone
   e le foto restavano 300 px vuoti (96 della testata, 75 della sezione, la riga
   delle frecce): qui la testata chiude corta e la sezione non ha spazio sopra.
   Sul telefono le frecce non ci sono, e nemmeno la loro riga. */
.testata:has(+ .caro--subito) { padding-bottom: var(--s-6); }
.caro--subito { padding-top: 0; padding-bottom: var(--s-5); }
.caro--subito + .section { padding-top: var(--s-6); }
.caro--subito .sec-head--galleria { margin-bottom: var(--s-4); }
@media (max-width: 47.99rem) {
  .caro--subito .sec-head--galleria { display: none; }
  .testata:has(+ .caro--subito) { padding-bottom: var(--s-5); }
}

/* Le immagini dentro il testo: una foto verticale resta intera ma non supera
   una schermata, allineata al testo. Vale per qualunque foto caricata
   nell'editor, orizzontale o verticale. */
.contenuto .wp-block-image:not(.alignwide):not(.alignfull) img {
  width: auto;
  max-width: 100%;
  max-height: min(34rem, 80vh);
}

/* Pagine per il SEO: il testo a sinistra con la sua misura di lettura, i link
   interni in una colonna laterale che accompagna lo scorrimento. Sul telefono
   la colonna scende sotto il testo. In WordPress: contenuto dell'articolo a
   sinistra, i link generati dal template a destra. */
.seo-corpo__griglia { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7, 3rem); }
@media (min-width: 64rem) {
  .seo-corpo__griglia {
    grid-template-columns: minmax(0, 44rem) minmax(15rem, 21rem);
    justify-content: space-between;
    align-items: start;
    column-gap: clamp(2.5rem, 5vw, 5rem);
  }
  .seo-corpo__lato { position: sticky; top: 7rem; }
  /* con più di dodici link la colonna è più alta dello schermo: ferma, sennò
     gli ultimi link si vedono solo in fondo alla pagina */
  .seo-corpo__lato:has(li:nth-child(13)) { position: static; }
}
/* nel testo accanto alla colonna niente foto a tutta pagina: finirebbero sopra i link */
.seo-corpo .contenuto > .alignfull { width: auto; margin-inline: 0; }
.seo-corpo__titolo {
  margin: 0 0 var(--s-4);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-lg, 1.35rem);
  line-height: 1.2;
  color: var(--oliva, var(--ink));
}
.approfondimenti--lato { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.approfondimenti--lato li { width: 100%; }
.approfondimenti--lato a {
  display: flex;
  width: 100%;
  min-height: 2.75rem;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.95rem;
  border-radius: 0.8rem;
  font-size: var(--t-sm);
  line-height: 1.3;
  text-align: left;
}

/* Due video verticali affiancati restano affiancati anche sul telefono:
   uno sotto l'altro erano due schermate di video. */
@media (max-width: 48rem) {
  .contenuto .wp-block-columns:has(> .wp-block-column:first-child > .is-style-verticale):has(> .wp-block-column:last-child > .is-style-verticale) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-3);
  }
}

/* Pulsante WhatsApp fisso: in fondo alla pagina copriva i link legali del
   piede. La fascia legale lascia sotto lo spazio del pulsante. Sta qui perché
   home.css, caricato dopo struttura.css, ridefinisce il padding della fascia. */
.footer__legal { padding-bottom: calc(3.5rem + 2rem); }