/* Sicilia Chill — IL SISTEMA · ritmo, sezioni, ruoli tipografici
═══════════════════════════════════════════════════════════════════════════════════
COSA STA QUI, E COSA NO.
Qui sta come si IMPAGINA una pagina: quanta aria fra le sezioni, dove cadono le linee
di separazione, e i nove RUOLI del testo. Non ci stanno i colori e i caratteri — quelli
vivono in `tokens.css`, che è la sorgente unica del marchio e va caricato PRIMA:
═══════════════════════════════════════════════════════════════════════════════════
PERCHÉ ESISTE. Ordine della Titolare, 17 agosto 2026:
«tra la fine di una sezione e l'inizio dell'altra ci deve essere una linea di
separazione e lo stesso spazio tra i testi … non un'accozzaglia di corpi caratteri,
grassetti e corsivi … le varie parti di ogni sezione devono essere scritte nello
stesso modo e con le stesse caratteristiche.»
La misura del problema, contata prima di intervenire: la home aveva **33 corpi di
carattere diversi**. Non per capriccio — uno alla volta, ognuno ragionevole nel momento
in cui è stato scritto. È così che nasce l'accozzaglia: non da una decisione sbagliata,
da trenta decisioni prese separatamente.
═══════════════════════════════════════════════════════════════════════════════════
LA REGOLA DA CUI DISCENDE TUTTO IL RESTO — vale più di ogni riga qui sotto:
SI NOMINA IL RUOLO, MAI IL POSTO.
Si scrive `.t-sottotitolo`, non «il paragrafo dentro l'hero». Il 17/8/2026 lo stesso
errore è stato commesso due volte nello stesso blocco: `.hero img` prendeva anche il
medaglione, e `.hero p` prendeva anche il credito della fotografia, stampandolo grande
come un sottotitolo. Descrivere il posto cattura cose che non c'entrano — e un selettore
per posto è più specifico di una classe, quindi vince e rompe in silenzio.
═══════════════════════════════════════════════════════════════════════════════════
COME SI USA, in pratica. Una sezione si scrive così, e non c'è altro da decidere:
Etichetta
Titolo
Una riga che spiega.
…
Linea di separazione, aria sopra e sotto, centraggio: arrivano da soli. Chi aggiunge
una sezione domani non deve ricordarsi niente, e non può disattendere la regola per
distrazione. È il punto: le regole che dipendono dalla memoria di qualcuno non reggono.
═══════════════════════════════════════════════════════════════════════════════════ */
/* ─────────────────────────── 1. IL RITMO — un valore solo ───────────────────────────
L'aria sopra e sotto OGNI sezione è la stessa. Su schermo grande cresce, ma resta la
stessa decisione: per questo è una variabile che cambia valore, non una regola nuova.
Telefono per primo (Regola #19): il valore base è quello del telefono, il desktop è
l'eccezione dichiarata sotto. Chi parte dal desktop e poi «adatta» produce il difetto
dell'11 agosto 2026. */
:root{
--ritmo:52px;
--gap-titolo:10px; /* occhiello → titolo */
--gap-lead:14px; /* titolo → sottotitolo */
--gap-blocco:30px; /* testa → contenuto */
--gap-riga:22px; /* fra elementi in griglia */
--gap-etichetta:12px; /* etichetta → testo, ovunque ricorra quel motivo.
Esisteva in due posti con due numeri diversi (8px nei passi
numerati, 12px nelle colonne con foto): stesso motivo, due
valori, cioè la differenza fra sezioni che non deve esserci. */
--filo:1px solid var(--line);
--misura:36em; /* larghezza massima di una colonna di testo: oltre, l'occhio
perde la riga tornando a capo. */
}
@media (min-width:760px){
:root{ --ritmo:88px; --gap-titolo:12px; --gap-lead:18px; --gap-blocco:44px; --gap-riga:30px }
}
/* ⚠ IL CONTENITORE NON STA QUI, ED È UNA CORREZIONE DEL 18/8/2026.
Questo foglio definiva `.wrap`, e `.wrap` nel sito esiste già da sempre — anzi due
volte: `.wrap{max-width:var(--maxw)}` con `--maxw:1200px`, e una terza versione dentro
l'hero. Caricando il sistema nella home, quale delle due avrebbe vinto sarebbe dipeso
dall'ordine dei fogli: una lite silenziosa su OGNI contenitore di OGNI pagina.
È lo stesso errore di `.bottone`, commesso lo stesso giorno: dare al sistema un nome
che il sito usava già. La regola che ne esce, e che vale per chiunque tocchi questo
file: **prima di battezzare una classe si guarda se il sito ha già il suo nome.**
Il sistema si occupa di ritmo e ruoli; il contenitore lo mette la pagina. Se un giorno
servisse un contenitore di sistema, si chiamerà `.sc-contenitore` e non `.wrap`. */
/* ─────────────────────── 2. LA SEZIONE — linea e altezza ───────────────────────
LA LINEA NON SI AGGIUNGE A UNA SEZIONE: si dichiara una volta che due sezioni adiacenti
sono divise. Chi ne inserisce una in mezzo eredita la linea senza saperlo, e chi ne
toglie una non lascia una linea orfana.
QUANTO È ALTA. La Direzione ha chiesto tre cose che insieme non stanno in piedi:
(1) ogni sezione una schermata · (2) tipografia identica ovunque · (3) niente vuoto.
Misurato il 17/8/2026 a schermata intera: una sezione di tre righe aveva 164px di
contenuto dentro 778px di schermo — il 79% vuoto, col centraggio che funzionava
benissimo. Non era un difetto di esecuzione: è l'aritmetica.
I siti a schermate intere lo risolvono ingrandendo il testo delle sezioni corte, cioè
violando la (2) — ed è proprio l'accozzaglia che la Titolare non vuole. Si tengono la
(2) e la (3) e si ammorbidisce la (1): 62svh è un PAVIMENTO, non una schermata.
`min-height` e non `height`: una sezione con molte schede deve crescere, non tagliare.
`svh` e non `vh`: sul telefono `vh` conta anche la barra degli indirizzi.
`align-content:center`: il vuoto si divide in parti uguali sopra e sotto, così una
sezione con due righe e una con dieci hanno lo stesso respiro. */
.sez{min-height:62svh;display:grid;align-content:center;padding-block:var(--ritmo);
border-top:var(--filo)}
@supports not (min-height:62svh){ .sez{min-height:62vh} }
/* ⚠ LA LINEA STA SU OGNI SEZIONE, NON SU `.sez + .sez`. Corretto il 18/8/2026 misurando
la home vera: le linee erano CINQUE invece di nove.
`.sez + .sez` significa «una sezione preceduta IMMEDIATAMENTE da un'altra sezione», e
nella home fra una sezione e l'altra ci sono dei `