/* Accademia dell'Abitare — foglio di stile del sito.
   Stessi colori e caratteri dei materiali a stampa:
   niente campiture: tutto su bianco velato #F9FAFB con testo scuro. Il grigio
   #92A2B1 resta il colore del marchio, dei filetti e degli accenti,
   Cormorant per i titoli, geometrico spaziato per le etichette. */

@font-face {
  font-family: "Cormorant";
  src: url("Cormorant-Light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("Cormorant-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  --grigio: #92a2b1;
  --carta: #f9fafb;
  /* TESTI IN NERO dall'8 agosto 2026 (richiesta dell'Accademia: sugli
     schermi il grigio scuro sembrava sbiadito). Prima: #363E47 e #4A525C */
  --testo: #000000;
  --testo2: #2f343a;
  --bianco: #ffffff;
  --chiaro2: #2f343a;
  --filetto: #aebac5;
  /* il colore dei link: vedi la regola "a" piu' sotto */
  --legame: #4c6478;
  --misura: 68rem;
  /* Century Gothic non e' licenziato per il web: chi non ce l'ha vede
     un geometrico simile, o in ultima istanza il sans di sistema */
  --geometrico: "Century Gothic", "Questrial", "Futura", "Trebuchet MS",
    system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* la misura di riferimento sta qui, non sul body: le etichette sono in
   rem e senza questo resterebbero ancorate ai 16 px del browser mentre
   il corpo del testo cresce. Le ore del programma finivano a 9,9 px. */
html { scroll-behavior: smooth; font-size: 118.75%; }   /* 19 px */

body {
  margin: 0;
  background: var(--carta);
  color: var(--testo);
  font-family: "Cormorant", Georgia, serif;
  font-size: 1.16rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

.dentro {
  max-width: var(--misura);
  margin: 0 auto;
  padding: 0 1.6rem;
}

/* ---------------------------------------------------------- etichette */
/* le etichette di sezione (PROGRAMMA, MANIFESTO, SALUTI DI...) erano
   piccole quanto le qualifiche sotto i nomi: dal 10 agosto 2026 sono
   piu' grandi, cosi' si vede che sono di un altro ordine */
.etichetta {
  font-family: var(--geometrico);
  font-size: 0.95rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--testo2);
  margin: 0 0 1.4rem;
}

.riga {
  width: 5rem;
  height: 2px;
  background: var(--grigio);
  border: 0;
  margin: 2.6rem auto;
}

h1, h2, h3 { font-weight: 300; margin: 0; }

h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
  line-height: 1.15;
  margin-bottom: 2.4rem;
}

h3 {
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}

p { margin: 0 0 1.1rem; }

/* testi giustificati (scelta del 2 agosto 2026). Solo i paragrafi di
   lettura: le righe brevi e le etichette resterebbero piene di buchi.
   hyphens spezza le parole a fine riga, altrimenti la giustificazione
   allarga troppo gli spazi in colonne strette come quelle del telefono. */
/* il programma NO, dal 15 settembre 2026: con l'ora su ogni voce le
   sue righe sono nomi e titoli brevi, e giustificate aprivano buchi
   fra le parole ("Prima    del    progetto"). Restano a sinistra. */
.manifesto p,
.partecipare p,
.luogo p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Le schede delle voci NO: sono tre colonne strette e, col testo
   ingrandito, la giustificazione apriva voragini fra le parole
   («Insegna    Psicologia    dell'Abitare») e spezzava le qualifiche
   («FONDA-ZIONE»). Righe libere a destra, come nella brochure. */
.voci .voce p { text-align: left; hyphens: manual; }

/* non si giustificano: etichette, orari, dati e righe brevi.
   p.etichetta e non .etichetta: la regola qui sopra e' piu' forte di una
   classe sola, e un'etichetta lunga andata a capo verrebbe distesa. */
p.etichetta, .etichetta, .ora, .ruolo, .intervento, .dato, .quota {
  text-align: left;
}
/* nei patrocini invece tutto e' centrato, loghi compresi: l'etichetta
   allineata a sinistra restava spaiata */
.patrocini p.etichetta { text-align: center; }

/* Righe brevi: il browser distribuisce le parole in modo che le righe
   risultino di lunghezza simile, invece di riempire la prima e lasciare
   una parola sola sull'ultima. Serve su titoli, qualifiche e sottotitoli,
   dove l'orfano si vede subito ("La cura come / metodo").
   Dove il browser non lo conosce non succede nulla. */
.sottotitolo, .ruolo, .intervento, .dove,
.apertura h1, .voci h3, .programma h3, h2 {
  text-wrap: balance;
}

/* I link si VEDONO (28 agosto 2026: «la gente non lo clicca se non e' in
   colore diverso»). Prima erano color: inherit, cioe' identici al testo:
   nessuno poteva capire che fossero cliccabili. Il colore e' la famiglia
   del grigio del marchio, scurita: #92A2B1 sulla carta chiara sta a
   2,6:1 e non si leggerebbe, questo sta intorno a 6:1. Il bottone e le
   righe minute del piede restano come sono (regole piu' sotto). */
a { color: var(--legame); }
a:hover, a:focus { color: var(--testo); }

/* ------------------------------------------------------------ apertura */
.apertura {
  background: var(--carta);
  color: var(--testo);
  text-align: center;
  padding: clamp(3rem, 7vw, 5.5rem) 1.6rem;
}

/* niente bordino stondato dal 7 agosto 2026: tolto da TUTTI i formati
   su richiesta dell'Accademia (qui era .apertura::before) */

.apertura .cornice {
  /* impostazione centrale: niente filo, niente filigrana */
  border: 0;
  padding: clamp(2.6rem, 6vw, 4.6rem) 1.6rem clamp(2.4rem, 5vw, 4rem);
  max-width: var(--misura);
  margin: 0 auto;
}

/* la tessera quadrata, in alto e centrata, piu' piccola */
.apertura img.marchio {
  width: min(130px, 30vw);
  height: auto;
  display: block;
  margin: 0 auto clamp(2rem, 5vw, 3.2rem);
}

.apertura h1 {
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 0.5rem;
}

.apertura .sottotitolo {
  font-family: var(--geometrico);
  font-size: 0.8rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--chiaro2);
  margin-bottom: 2.4rem;
}

.apertura .quando {
  font-family: var(--geometrico);
  font-size: clamp(1.1rem, 2.6vw, 1.4rem);
  letter-spacing: 0.22em;
  margin-bottom: 0.9rem;
}

.apertura .dove {
  font-family: var(--geometrico);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chiaro2);
  line-height: 1.9;
}

.apertura .riga { background: var(--grigio); }

/* ------------------------------------------------------------- sezioni */
section { padding: clamp(3.4rem, 8vw, 6rem) 0; }

section + section { border-top: 1px solid #e2e4e7; }

.due {
  display: grid;
  /* min(20rem, 100%): senza il min(), sul telefono la colonna non puo'
     scendere sotto i 380 px e il testo SFONDA il margine destro
     (misurato: 35 px oltre lo schermo a 375 px). Il min() dice: la
     colonna vorrebbe 20rem, ma mai piu' del contenitore. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}

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

.manifesto .frase {
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  margin-bottom: 2.2rem;
}

/* programma: le ore sono NUMERI e sono la voce piu' piccola della
   pagina. Sotto i 13 px si leggono male, quindi non scendono da qui. */
.ora {
  font-family: var(--geometrico);
  font-size: 0.76rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--testo2);
  margin: 1.5rem 0 0.15rem;
}

/* le voci del programma non hanno un'ora (8 agosto 2026: in sala si resta
   elastici): al posto dell'orario un filetto breve, cosi' la colonna
   tiene lo stesso ritmo delle righe che l'ora ce l'hanno */
.programma .voce-elenco { margin-top: 1.5rem; }
.programma .voce-elenco::before {
  content: "";
  display: block;
  width: 1.6rem;
  height: 2px;
  background: var(--filetto);
  margin-bottom: 0.55rem;
}

/* Titolo di sezione in veste di etichetta (8 agosto 2026): stampatello
   maiuscolo spaziato, non piu' grande di un'etichetta. Serve a spegnere
   le misure che h2 porta con se' (clamp fino a 3,1rem e margine 2,4rem). */
h2.titolo-sezione {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 2.1rem;
}

/* «Iscrizione» piu' piccolo degli altri titoli (10 agosto 2026) */
h2.titolo-medio { font-size: clamp(1.6rem, 3vw, 2.1rem); }

/* Parole troppo lunghe per la colonna (indirizzi email, soprattutto) si
   spezzano invece di sfondare il margine: sul telefono l'email della
   segreteria usciva dallo schermo di 28 px (misurato l'8 agosto 2026).
   break-word interviene SOLO quando la parola non ci sta comunque. */
p, li { overflow-wrap: break-word; }

/* il titolo dell'intervento va SEMPRE a capo sotto il nome (8 agosto
   2026), nel grigio secondario: si distingue senza gridare */
.programma .titolo-intervento { color: var(--testo2); }

.voce p:last-child { margin-bottom: 0; }

/* le voci */
.ruolo {
  font-family: var(--geometrico);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--testo2);
  margin-bottom: 0.9rem;
}

.intervento { font-weight: 500; font-size: 1.15rem; margin-bottom: 0.5rem; }

/* partecipare */
.quota {
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  line-height: 1;
  margin: 0.4rem 0 1.2rem;
}

.dato {
  font-family: var(--geometrico);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  word-break: break-word;
}

/* il pulsante verso il modulo d'iscrizione: e' l'unico elemento pieno
   rimasto, e proprio per questo si vede subito su tutta la pagina chiara */
a.bottone {
  display: inline-block;
  /* non il grigio del marchio: col testo bianco darebbe 2,62 a 1.
     Il colore del testo sta a 10,84 a 1 e non aggiunge tinte nuove */
  background: var(--testo);
  color: var(--bianco);
  text-decoration: none;
  font-family: var(--geometrico);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  padding: 1.05em 2.2em;
  border-radius: 2px;
  transition: background 0.15s ease;
}

a.bottone:hover, a.bottone:focus { background: #232a31; }

/* -------------------------------------------------------- i contributi
   I contributi di chi partecipa (28 agosto 2026): il racconto in prosa
   (testo di Carlotta), poi le proposte come SCHEDE — nome, qualifica,
   titolo, presentazione — con lo stesso vestito delle voci del
   programma (h3, .ruolo, .intervento: stili gia' definiti sopra).
   Giustificati solo i paragrafi del racconto, che sono figli diretti
   di .dentro: le schede dentro la griglia .due restano libere a
   destra, come le voci. L'invito in coda e' una riga breve, a
   sinistra. */
.contributi .dentro > p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.contributi .due { margin-top: 3rem; }
.contributi .voce p { text-align: left; hyphens: manual; }
.contributi .dentro > p.coda {
  margin-top: 3rem;
  color: var(--testo2);
  text-align: left;
  hyphens: manual;
}

/* ------------------------------------------------------------ chiusura */
.chiusura {
  background: var(--carta);
  color: var(--testo);
  text-align: center;
  padding: clamp(3rem, 7vw, 5rem) 1.6rem;
}

.chiusura .dentro-piede {
  max-width: var(--misura);
  margin: 0 auto;
}

.chiusura img.simbolo {
  width: min(110px, 26vw);
  height: auto;
  margin-bottom: 1.8rem;
}

.chiusura .frase {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  margin-bottom: 1.6rem;
}

.chiusura .dato { color: var(--testo); }

.chiusura .riga { background: var(--grigio); }

.chiusura .minuto {
  font-family: var(--geometrico);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--chiaro2);
  margin-top: 1.6rem;
}

/* I crediti in coda (18 agosto 2026): stessa famiglia e stesso colore
   delle righe minute, ma SENZA maiuscolo. Sono frasi con dentro dei nomi
   propri, e in maiuscoletto "Donatella Caprioglio" perdeva la maiuscola
   che la distingue; la spaziatura larga, giusta per un'etichetta di due
   parole, su due righe di testo affatica. La P. IVA resta .minuto. */
.chiusura .credito {
  font-family: var(--geometrico);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--chiaro2);
  margin-top: 1.6rem;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* patrocini: su fondo chiaro, perche' il logo dell'Ordine e' a colori */
.patrocini { background: var(--carta); text-align: center; padding: 3rem 1.6rem; }
.patrocini .loghi {
  display: flex;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
/* i loghi orizzontali e quello quadrato non possono avere la stessa
   altezza, altrimenti il quadrato sembra la meta' degli altri */
.patrocini img.orizzontale { height: 62px; width: auto; }
.patrocini img.quadrato { height: 84px; width: auto; }
/* GAPHS Italia e' compatto (proporzione 1,5) e HOME|Philosophy Academy e'
   un logotipo lunghissimo (5 a 1): alla stessa altezza degli altri il
   primo sembrerebbe piccolo e il secondo enorme (9 settembre 2026) */
.patrocini img.compatto { height: 76px; width: auto; }
.patrocini img.largo { height: 34px; width: auto; }

/* flex: 0 0 auto impedisce che la fila comprima i loghi quando lo spazio
   si stringe; object-fit li protegge comunque dallo schiacciamento */
.patrocini img {
  flex: 0 0 auto;
  object-fit: contain;
  max-width: 100%;
}

@media (max-width: 40rem) {
  /* TESTI PIU' GRANDI SUL TELEFONO (7 agosto 2026: «dal mobile non si
     legge»). Prima il corpo SCENDEVA a 1,08rem sul telefono, cioe' il
     testo era piu' piccolo proprio dove si legge peggio. Ora sale a
     1,22rem (circa 23 px) e crescono con lui le voci minori: ore,
     qualifiche, dati e titoli d'intervento, che restavano ai valori
     del computer. Il Cormorant ha l'occhio piccolo: a parita' di corpo
     si legge meno di un carattere di sistema, quindi serve piu' misura
     della media. Nessun valore scende sotto i 14 px. */
  html { font-size: 125%; }        /* 20 px di riferimento */
  body { font-size: 1.22rem; line-height: 1.66; }
  .ora { font-size: .82rem; }
  .ruolo { font-size: .8rem; }
  .intervento { font-size: 1.2rem; }
  .dato { font-size: .92rem; }
  .etichetta { font-size: .8rem; letter-spacing: .34em; }
  .apertura .sottotitolo { font-size: .84rem; }
  .apertura .dove { font-size: .84rem; }
  a.bottone { font-size: .8rem; }
  .chiusura .minuto { font-size: .78rem; }
  .chiusura .credito { font-size: .8rem; }
  /* sul telefono niente fila: griglia due per due. Le misure diventano
     dei TETTI (max-), mai altezze imposte, cosi' l'immagine si adatta
     al vincolo che scatta per primo e le proporzioni restano intatte */
  .patrocini .loghi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8rem 1.4rem;
    justify-items: center;
    align-items: center;
  }
  .patrocini img.orizzontale,
  .patrocini img.quadrato,
  .patrocini img.compatto,
  .patrocini img.largo {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 46px;
  }
  .patrocini img.quadrato { max-height: 62px; }
  .patrocini img.compatto { max-height: 56px; }
  .patrocini img.largo { max-height: 26px; }
}

/* ---------------------------------------------------- andate a capo
   Sul telefono (18 agosto 2026) le righe si spezzavano male: il puntino
   separatore restava appeso a fine riga, i titoli lasciavano una parola
   sola sull'ultima riga, il ruolo di una voce arrivava a quattro righe
   con "e", "·" e "di" appesi.

   1. il separatore diventa un A CAPO sotto i 700 px: le due informazioni
      si leggono una per riga e il puntino sparisce, invece di restare
      appeso;
   2. balance distribuisce le righe dei testi brevi (titoli, ruoli,
      etichette) in modo che siano lunghe uguali;
   3. pretty, nei paragrafi discorsivi, evita che l'ultima riga resti con
      una parola sola. Dove il browser non li conosce, non succede nulla:
      il testo resta come prima. */
h1, h2, h3, .etichetta, .ruolo, .intervento, .credito, .dove,
.voce-elenco, a.bottone { text-wrap: balance; }

p, .dato { text-wrap: pretty; }

@media (max-width: 700px) {
  .sep { display: block; height: 0; overflow: hidden; }
  /* i nomi delle voci scendono da 1,55 a 1,45 rem: al corpo pieno
     «Giovanna Bora Saracinelli» chiedeva 315 px e ne aveva 311, e andava
     a capo per QUATTRO pixel. Cosi' ogni nome sta su una riga sola, e la
     differenza a occhio non si vede. */
  h3 { font-size: 1.45rem; }
}