@import url("caratteri/caratteri.css");

/* ============================================================
   antoninopolimeni.it — foglio di stile unico
   Palette dalla sua slide: corallo, inchiostro, avorio freddo, ardesia.
   Tre ruoli tipografici: Fraunces (display), IBM Plex Sans (testo),
   IBM Plex Mono (date e didascalie — il 1998 che torna).
   ============================================================ */

:root {
  --inchiostro:        #0E141B;
  --inchiostro-chiaro: #18212C;
  --corallo:           #E4523F;
  --corallo-chiaro:    #F07A69;
  --avorio:            #ECEDE8;
  --avorio-scuro:      #DCDED6;
  --ardesia:           #5D6773;
  --ardesia-chiara:    #97A1AC;

  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --testo:   "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  --misura: 68ch;
  --bordo:  1px solid color-mix(in srgb, var(--ardesia) 35%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;            /* rete di sicurezza: niente scorrimento laterale */
  background: var(--avorio);
  color: var(--inchiostro);
  font-family: var(--testo);
  font-size: 17px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--corallo);
  outline-offset: 3px;
}

.salta {
  position: absolute; left: -9999px;
  background: var(--corallo); color: #fff; padding: .75rem 1rem;
}
.salta:focus { left: 1rem; top: 1rem; z-index: 50; }

/* ---------- HERO ------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--inchiostro);
  color: var(--avorio);
  overflow: hidden;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

/* il mosaico: le stanze in cui è stato, dietro di lui */
.mosaico {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  z-index: -3;
}
.mosaico img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(.42);
}

/* tinta unica: le tessere diventano una texture sola, non un collage */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: var(--corallo);
  mix-blend-mode: color;
  opacity: .34;
}

.hero::after {                       /* velo che tiene leggibile il testo */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, var(--inchiostro) 40%, color-mix(in srgb, var(--inchiostro) 88%, transparent) 62%, color-mix(in srgb, var(--inchiostro) 62%, transparent) 100%),
    linear-gradient(to top, var(--inchiostro) 6%, transparent 30%);
}

/* ---------- MENU ------------------------------------------------------ */

.menu {
  position: relative; z-index: 2;
  max-width: 1280px; margin: 0 auto; width: 100%;
  padding: clamp(1.25rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) 0;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: baseline; justify-content: space-between;
}
/* Il logotipo. Non è più una riga di testo in monospaziato: è il nome
   scritto nel carattere dei titoli, con la seconda n in corallo. Quella
   lettera è la stessa che nel kit stampa spieghiamo che tutti sbagliano:
   messa qui, su ogni pagina, smette di essere una battuta e diventa un
   segno riconoscibile. */
.menu .nome {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: clamp(3rem, 4.6vw, 5.4rem);
  letter-spacing: -.015em;
  line-height: 1;
  color: var(--avorio); text-decoration: none;
  white-space: nowrap;
}
.menu .nome .enne { color: var(--corallo); }

/* Da schermo largo il logotipo si prende una riga tutta sua e il menu gli
   va sotto: una testata, non una barra di navigazione. Lo impongo invece
   di lasciarlo al caso, altrimenti su schermi molto larghi tornerebbe in
   linea e il sito cambierebbe faccia a seconda del monitor. */
@media (min-width: 701px) {
  .menu .nome { flex: 0 0 100%; margin-bottom: .1rem; }
}
/* Nella fascia intermedia le voci si stringono, così le icone restano
   sulla stessa riga del menu invece di scivolare su una terza. */
@media (min-width: 701px) and (max-width: 1100px) {
  .menu .voci-larghe { gap: .9rem 1.05rem; }
  .menu .voci-larghe a { font-size: .72rem; }
}
.menu .nome:hover .enne { color: var(--corallo-chiaro); }

/* Il menu esiste in due forme nel codice: la fila di voci per gli schermi
   larghi e la tendina <details> per il telefono. Ne è visibile una sola alla
   volta, l'altra è display:none e quindi sparisce anche per i lettori di
   schermo. Sembra ridondante, ma è l'unico modo di avere una tendina senza
   JavaScript che funzioni davvero su Chrome, Firefox e Safari: il CSS che
   riapre un <details> chiuso funziona solo su Chrome. */
.menu .tendina { display: none; }

.menu ul {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 1.25rem 1.75rem; margin: 0; padding: 0;
}
.menu a {
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ardesia-chiara); text-decoration: none;
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.menu a:hover { color: var(--avorio); border-color: var(--corallo); }

/* Le tre icone in alto a destra. Sono SVG scritti dentro la pagina: nessuna
   richiesta a un altro server, nessun font di icone da scaricare, e restano
   nitide a qualsiasi ingrandimento. Il colore lo prendono dal testo, così
   basta cambiare quello per cambiare anche loro. */
.menu .social-menu { gap: .9rem; align-items: center; }
.menu .social-menu a {
  display: inline-flex; padding: .35rem; border-bottom: 0;
  color: var(--ardesia-chiara);
}
.menu .social-menu a:hover,
.menu .social-menu a:focus-visible { color: var(--corallo); }
.menu .social-menu svg {
  width: 17px; height: 17px; display: block; fill: currentColor;
}

.hero-griglia {
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(1rem, 2.5vw, 2rem) clamp(1.25rem, 4vw, 3rem) 0;
  display: grid;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: end;
  flex: 1;
  min-height: 0;
  width: 100%;
}

.hero-testo { padding-bottom: clamp(2rem, 5vh, 3.5rem); }

.occhiello {
  font-family: var(--mono);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--corallo-chiaro);
  margin: 0 0 1.25rem;
}

.payoff {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: clamp(2.1rem, 4.4vw, 3.9rem);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0 0 1.5rem;
  max-width: 15ch;
  text-wrap: balance;
}
.payoff .virgolette { color: var(--corallo); }

.lede {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  color: color-mix(in srgb, var(--avorio) 88%, var(--ardesia-chiara));
  max-width: 48ch;
  margin: 0 0 1.5rem;
}

.prove {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--ardesia-chiara);
  border-top: 1px solid color-mix(in srgb, var(--ardesia) 45%, transparent);
  padding-top: .9rem;
  margin: 0 0 1.6rem;
  max-width: 52ch;
}
.prove b { color: var(--avorio); font-weight: 500; }

.azioni { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; }

.bottone {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 48px;
  padding: .8rem 1.6rem;
  background: var(--corallo);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: background 180ms ease;
}
.bottone:hover { background: var(--corallo-chiaro); }

.link-sobrio {
  font-family: var(--mono);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--avorio);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--corallo) 70%, transparent);
  padding: .5rem 0;
  min-height: 44px;
  display: inline-flex; align-items: center;
  transition: border-color 180ms ease;
}
.link-sobrio:hover { border-color: var(--corallo); }

.hero-ritratto { position: relative; display: flex; justify-content: center; align-items: end; }
.hero-ritratto img {
  width: min(100%, 620px);
  filter: drop-shadow(0 30px 60px rgb(0 0 0 / .55));
}

/* ---------- STRISCIA TESTATE ------------------------------------------ */

.testate {
  background: var(--avorio);
  border-bottom: var(--bordo);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3rem);
}
.testate-interno { max-width: min(1280px, 100%); margin: 0 auto; }

.testate h2 {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ardesia);
  margin: 0 0 2rem;
}

/* Da schermo grande: griglia a 5 colonne, cioè due righe pari da cinque.
   Le celle sono uguali e i marchi centrati dentro: l'occhio legge una
   tabella ordinata, non una fila che va a capo dove capita. */
.loghi {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.5rem);
  margin-bottom: 2.5rem;
}
.loghi .separatore { display: none; }
.loghi img { max-width: 100%; }
/* Niente filtri monocromatici: alcuni marchi sono bianchi su fondo colorato
   e diventavano rettangoli neri. Le altezze qui sotto sono calcolate una per
   una a parità di area ottica, non a parità di altezza: un marchio lungo e
   basso come "Corriere della Sera" e uno quadrato come "Rai 2" pesano uguale
   solo se il primo è più basso del secondo. */
.loghi img {
  /* due vincoli invece di uno: l'altezza ottica calcolata per ciascun
     marchio e un tetto alla larghezza. Senza il secondo, un marchio lungo
     come "Corriere della Sera" occupa il doppio dello spazio di "la
     Repubblica" pur avendo la stessa area di inchiostro. */
  height: auto; width: auto;
  max-height: calc(var(--h, 22px) * var(--scala, 1));
  max-width: 150px;
  opacity: .92;
}
.loghi img:hover { opacity: 1; }

.loghi .l-the-guardian { --h: 26px; }
.loghi .l-corriere-della-sera { --h: 16px; }
.loghi .l-repubblica { --h: 20px; }
.loghi .l-sole-24-ore { --h: 22px; }
.loghi .l-la-stampa { --h: 16px; }
.loghi .l-espresso { --h: 20px; }
.loghi .l-il-messaggero { --h: 19px; }
.loghi .l-il-fatto-quotidiano { --h: 38px; }  /* marchio su due righe: serve più altezza */
.loghi .l-italia-oggi { --h: 20px; }
.loghi .l-adnkronos { --h: 24px; }
.loghi .l-forbes { --h: 23px; }
.loghi .l-rai-2 { --h: 33px; }
.loghi .l-tgcom24 { --h: 28px; }

.loghi .separatore { width: 1px; align-self: stretch; background: var(--avorio-scuro); }

/* Tablet: la griglia rigida lascerebbe un marchio orfano nell'ultima riga
   (sono tredici: nessuna colonna li divide esatti). Quindi righe libere che
   vanno a capo da sole, centrate: l'ultima riga resta equilibrata comunque. */
@media (max-width: 1000px) {
  .loghi {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    gap: 2rem 2.75rem;
  }
}

/* Telefono: tutti i marchi visibili insieme, nessuno nascosto dietro uno
   scorrimento. Due colonne e misure ridotte: conta il colpo d'occhio —
   dieci testate viste tutte insieme dicono più di quattro viste grandi. */
@media (max-width: 700px) {
  .loghi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
    align-items: center; justify-items: center;
    justify-content: stretch;
    gap: 1.6rem 1rem;
    width: 100%; max-width: 100%;
    overflow: visible;
    -webkit-mask-image: none; mask-image: none;
  }
  .loghi img {
    height: auto; width: auto;
    max-height: calc(var(--h, 22px) * .8);
    max-width: 100%;
  }
  .loghi .separatore { display: none; }
  .testate p { max-width: 100%; }
}

.testate p { max-width: 100%; }
}

.testate p {
  font-size: .95rem;
  color: var(--ardesia);
  max-width: var(--misura);
  margin: 0;
}

/* ---------- CHI È ----------------------------------------------------- */

.chi-e {
  padding: clamp(4rem, 9vw, 8rem) clamp(1.25rem, 4vw, 3rem);
}
.chi-e-interno {
  max-width: 1280px; margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 5rem);
}
.chi-e h2 {
  font-family: var(--mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--corallo);
  margin: 0;
}
.chi-e p {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.42;
  max-width: 62ch;
  margin: 0 0 1.4em;
}
.chi-e p:last-of-type { margin-bottom: 0; }
.chi-e .data { font-family: var(--mono); font-size: .82em; color: var(--corallo); }

/* ---------- RESPONSIVE ------------------------------------------------ */

@media (min-width: 900px) {
  .hero-griglia { grid-template-columns: 1.15fr .85fr; }
  .chi-e-interno { grid-template-columns: 12rem 1fr; }
}

@media (max-width: 899px) {
  .mosaico { grid-template-columns: repeat(4, 1fr); }
  .hero-ritratto img { width: min(78%, 420px); }
  .hero-testo { padding-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- PAGINE INTERNE ------------------------------------------- */

.interno { max-width: 1000px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); }

/* il padding in alto lo mette il menu, così sta alla stessa altezza
   della home in ogni pagina: qui sopra deve restare zero */
.testata-pagina {
  /* Un gradino più chiara dell'inchiostro pieno: la fascia scura resta
     scura, ma smette di sembrare un buco nero sopra la pagina. */
  background: var(--inchiostro-chiaro);
  color: var(--avorio);
  padding: 0 0 clamp(3rem, 7vw, 5.5rem);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.occhiello-scuro a { color: var(--corallo-chiaro); text-decoration: none; border-bottom: 1px solid transparent; }
.occhiello-scuro a:hover { border-color: currentColor; }

.testata-pagina h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}
.sottotitolo {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: color-mix(in srgb, var(--avorio) 85%, var(--ardesia-chiara));
  max-width: 58ch;
  margin: 0;
}

.sezione { padding-bottom: clamp(3rem, 6vw, 5rem); }
.sezione + .sezione { border-top: var(--bordo); padding-top: clamp(2.5rem, 5vw, 4rem); }

.sezione h2 {
  font-family: var(--mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--corallo);
  margin: 0 0 1.5rem;
}
.sezione h3 {
  font-family: var(--mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ardesia);
  margin: 2rem 0 .75rem;
}
.sezione p { max-width: var(--misura); }

.nota { font-size: .9rem; color: var(--ardesia); }

.da-confermare {
  font-family: var(--mono); font-size: .85rem;
  background: color-mix(in srgb, var(--corallo) 10%, transparent);
  border-left: 3px solid var(--corallo);
  padding: 1rem 1.25rem;
}

.elenco-contatti { margin: 0 0 1.25rem; padding-left: 1.25rem; max-width: var(--misura); }
.elenco-contatti li { margin-bottom: .6rem; }

.qualifiche { margin: 0; max-width: var(--misura); }
.qualifiche dt {
  font-family: var(--mono); font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ardesia);
  margin-top: 1.5rem;
}
.qualifiche dd {
  margin: .4rem 0 0;
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.4;
}

.bio {
  margin: 0;
  border-left: 3px solid var(--avorio-scuro);
  padding-left: 1.5rem;
}
.bio p { margin: 0 0 1em; }
.bio p:last-child { margin-bottom: 0; }

/* I social nel piede: stessa misura del resto, un filo più staccati.
   Testo e non icone — costano zero byte e non invecchiano quando una
   piattaforma cambia logo. */
.pie .social { margin-top: .35rem; }

/* Una foto dentro il testo: larga quanto la colonna, didascalia sotto.
   Nessun ritaglio, si mostra l'inquadratura vera. */
.foto-nel-testo { margin: 2rem 0 2.5rem; }
.foto-nel-testo img { display: block; width: 100%; height: auto; }
.foto-nel-testo figcaption {
  font-family: var(--mono); font-size: .74rem;
  color: var(--ardesia); margin-top: .7rem;
}

/* Il colophon: i dati di legge di una testata registrata. Piccoli, in
   monospace, in fondo — si leggono solo se si stanno cercando. */
.colophon {
  margin-top: 2.5rem; padding-top: 1.25rem;
  border-top: var(--bordo);
  font-family: var(--mono); font-size: .74rem; line-height: 1.7;
  color: var(--ardesia);
}

/* La rubrica personale dentro la testata: un riquadro suo, staccato dal
   resto del testo. Risalto senza urlare — il logo è nero su bianco, quindi
   il fondo resta chiaro, altrimenti sparirebbe. */
.rubrica {
  margin: 3.5rem 0 0;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--avorio-scuro);
  border-left: 4px solid var(--corallo);
}
.rubrica h2 { margin-top: 1.25rem; }
.rubrica > :first-child { margin-top: 0; }
.rubrica p { max-width: 62ch; }
.rubrica .azioni { margin-top: 1.75rem; }
.marchio-rubrica { margin: 0; }
.marchio-rubrica img {
  display: block; width: 100%; max-width: 420px; height: auto;
  mix-blend-mode: multiply;   /* toglie il bianco intorno al tratto */
}

/* Il nome scritto grande, con la lettera che tutti sbagliano in evidenza.
   È un kit stampa: se una cosa deve entrare in testa a chi ha fretta,
   conviene farla vedere prima di spiegarla. */
.nome-esatto {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8vw, 4.5rem);
  line-height: 1; letter-spacing: -.02em;
  margin: 1.5rem 0 .6rem;
}
.nome-esatto span { color: var(--corallo); }
.nome-nota { max-width: 54ch; }

/* La galleria del kit stampa: niente slider, tutto in vista. Ogni riquadro
   ha la stessa altezza ma la foto ci sta dentro intera (contain, non cover):
   chi la deve pubblicare vuole vedere l'inquadratura vera, non un ritaglio. */
.galleria-stampa {
  list-style: none; margin: 2.5rem 0 0; padding: 0;
  display: grid; gap: 1.75rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.galleria-stampa a {
  display: block;
  padding: .55rem;                 /* il passe-partout intorno alla foto */
  background: var(--avorio-scuro);
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color .18s ease;
}
.galleria-stampa a:hover,
.galleria-stampa a:focus-visible { outline-color: var(--corallo); }
.galleria-stampa img {
  display: block; width: 100%;
  aspect-ratio: 4 / 5; object-fit: contain;
}
/* Lo scontornato ha lo sfondo trasparente: gli metto sotto una scacchiera,
   così si vede che è trasparente e non bianco. */
.galleria-stampa .scacchi img {
  background-color: #fff;
  background-image:
    linear-gradient(45deg, var(--avorio-scuro) 25%, transparent 25%, transparent 75%, var(--avorio-scuro) 75%),
    linear-gradient(45deg, var(--avorio-scuro) 25%, transparent 25%, transparent 75%, var(--avorio-scuro) 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.galleria-stampa .titolo-foto {
  margin: .7rem 0 .15rem;
  font-size: .95rem; font-weight: 600;
}
.galleria-stampa .dati-foto {
  margin: 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .02em;
  color: var(--ardesia);
}

.pie {
  border-top: var(--bordo);
  padding: 2rem 0 3rem;
  font-family: var(--mono); font-size: .8rem;
  color: var(--ardesia);
}

/* ---------- BLOCCHI DI SEZIONE ---------------------------------------- */

.blocco { padding: clamp(4rem, 8vw, 7rem) clamp(1.25rem, 4vw, 3rem); }
.blocco-scuro { background: var(--inchiostro); color: var(--avorio); }
.blocco-interno { max-width: 1280px; margin: 0 auto; }

.titolo-blocco {
  font-family: var(--mono);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--corallo);
  margin: 0 0 2.5rem;
}
.titolo-grande {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 1.25rem; max-width: 20ch;
}

/* --- i tre interventi --- */

.interventi { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 900px) { .interventi { grid-template-columns: repeat(3, 1fr); } }

.intervento { display: flex; flex-direction: column; }
.intervento .copertina {
  position: relative; display: block;
  border: 1px solid color-mix(in srgb, var(--ardesia) 40%, transparent);
}
.intervento .copertina img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.intervento .copertina::after {
  content: "▶ guarda il video";
  position: absolute; left: 0; bottom: 0;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  background: var(--corallo); color: #fff;
  padding: .5rem .8rem;
}
.intervento .copertina:hover::after { background: var(--corallo-chiaro); }
.intervento .dove {
  font-family: var(--mono); font-size: .75rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--corallo-chiaro);
  margin: 1.25rem 0 .5rem;
}
.intervento h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.5rem; line-height: 1.15; margin: 0 0 .75rem;
}
.intervento p { margin: 0 0 1rem; font-size: .98rem; color: color-mix(in srgb, var(--avorio) 82%, var(--ardesia-chiara)); }
.intervento .citazione {
  font-family: var(--display); font-size: 1.05rem; line-height: 1.45;
  border-left: 2px solid var(--corallo); padding-left: 1rem; color: var(--avorio);
}

/* --- perché lo chiamano: le porte --- */

.porte { display: grid; gap: 2px; background: var(--avorio-scuro); border: 1px solid var(--avorio-scuro); }
@media (min-width: 800px) { .porte { grid-template-columns: repeat(3, 1fr); } }
.porta { background: var(--avorio); padding: clamp(1.75rem, 3vw, 2.5rem); }
.porta h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.35rem; margin: 0 0 .75rem;
}
.porta p { font-size: .97rem; margin: 0 0 1.25rem; }
.porta .vai {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .04em;
  color: var(--corallo); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* --- libri --- */

/* I libri stanno come su uno scaffale: stessa altezza, larghezze diverse.
   Prima erano forzati tutti a 2:3 e ritagliati, e le quattro copertine
   hanno proporzioni diverse — a due di loro veniva tagliato un bordo.
   Qui nessuna viene toccata: si normalizza l'altezza, non la forma. */
.libri {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.libro { flex: 0 0 auto; max-width: 45%; }
.libro img {
  display: block; width: auto; max-width: 100%;
  height: clamp(190px, 20vw, 290px);
  box-shadow: 0 12px 28px -14px rgba(14, 20, 27, .55),
              0 0 0 1px color-mix(in srgb, var(--ardesia) 22%, transparent);
}
.libro h3 { font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin: 1rem 0 .25rem; line-height: 1.25; }
.libro p { font-family: var(--mono); font-size: .74rem; color: var(--ardesia); margin: 0; }

/* --- prosa lunga (pagine interne) --- */

.prosa p { font-size: 1.08rem; max-width: var(--misura); margin: 0 0 1.4em; }
.prosa h2 {
  font-family: var(--display); font-weight: 600; text-transform: none;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -.01em;
  color: var(--inchiostro); margin: 2.5em 0 .8em;
}
.prosa .data { font-family: var(--mono); font-size: .85em; color: var(--corallo); }

/* --- contatti: le cinque porte --- */

.cinque { display: grid; gap: 1px; background: var(--avorio-scuro); border: 1px solid var(--avorio-scuro); margin-top: 2rem; }
@media (min-width: 760px) { .cinque { grid-template-columns: repeat(2, 1fr); } }
.voce { background: var(--avorio); padding: clamp(1.5rem, 3vw, 2rem); }
.voce h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; }
.voce p { font-size: .95rem; margin: 0 0 1rem; }
.voce a { font-family: var(--mono); font-size: .8rem; color: var(--corallo); text-decoration: none; border-bottom: 1px solid currentColor; }
/* Quando una scheda ha due indirizzi, devono restare due cose distinte. */
.voce a + a { margin-left: 1.2rem; }

/* ============================================================
   TELEFONO — messo in fondo perché deve vincere sulle regole sopra
   ============================================================ */

@media (max-width: 700px) {

  /* Il menu: pulsante MENU in alto a destra, la tendina si apre sotto.
     È l'elemento <details> del browser, quindi funziona senza JavaScript,
     si apre da tastiera e i lettori di schermo lo annunciano da soli. */
  .menu { flex-direction: row; align-items: center; padding-top: 1rem; }
  .menu .nome { font-size: clamp(1.35rem, 5.4vw, 1.8rem); }
  .menu .voci-larghe { display: none; }
  .menu .tendina { display: block; }

  .menu .tendina { position: relative; }
  .menu .tendina > summary {
    display: inline-flex; align-items: center;
    list-style: none;
    font-family: var(--mono); font-size: .76rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--avorio);
    border: 1px solid color-mix(in srgb, var(--ardesia) 60%, transparent);
    padding: .6rem .9rem; min-height: 44px;
    cursor: pointer;
  }
  .menu .tendina > summary::-webkit-details-marker { display: none; }
  .menu .tendina > summary::after { content: " ▾"; margin-left: .5rem; color: var(--corallo); }
  .menu .tendina[open] > summary { border-color: var(--corallo); }

  .menu .tendina > ul {
    position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
    flex-direction: column; flex-wrap: nowrap; gap: 0;
    min-width: 14rem;
    background: var(--inchiostro-chiaro);
    border: 1px solid color-mix(in srgb, var(--ardesia) 45%, transparent);
    padding: .5rem 0;
    box-shadow: 0 18px 40px rgb(0 0 0 / .45);
  }
  .menu .tendina > ul li { width: 100%; }
  .menu .tendina > ul a {
    display: flex; align-items: center;
    min-height: 46px; padding: 0 1.1rem;
    font-size: .82rem; color: var(--avorio);
    border-bottom: 0;
  }
  .menu .tendina > ul a:hover { background: color-mix(in srgb, var(--corallo) 22%, transparent); }

  /* La hero non è più alta quanto lo schermo: sul telefono significava
     schiacciare il ritratto in una fessura. Ora il contenuto scorre e
     la faccia si vede intera. */
  .hero { min-height: auto; }
  .hero-griglia { padding-bottom: 0; }
  .hero-testo { padding-bottom: 2rem; }
  .hero-ritratto img { width: min(88%, 440px); }

  .payoff { font-size: clamp(2rem, 8.5vw, 2.6rem); max-width: 18ch; }
  .lede { font-size: 1rem; }
  .prove { font-size: .72rem; line-height: 1.7; }

  /* Il bottone principale a tutta larghezza: è il bersaglio più facile
     da colpire col pollice, e sul telefono conta. */
  .azioni { gap: 1rem; }
  .azioni .bottone { width: 100%; justify-content: center; }

  /* Titoli di pagina e blocchi: meno aria, stessa gerarchia */
  .blocco { padding-left: 1.25rem; padding-right: 1.25rem; }
  .titolo-grande { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .intervento h3 { font-size: 1.3rem; }
}

/* Riquadro in attesa della citazione vera: si vede che manca, così non
   può finire online per distrazione. */
.citazione.da-citare {
  font-family: var(--mono); font-size: .78rem; line-height: 1.6;
  color: var(--corallo-chiaro);
  border-left-style: dashed;
}

/* La hero ora è un blocco di prosa a più capoversi, non una riga sola:
   il primo capoverso resta un po' più grande, gli altri scendono di un
   gradino per non trasformare l'apertura in un muro di testo. */
.hero-testo .lede p { margin: 0 0 1rem; }
.hero-testo .lede p:first-child { font-size: 1.08em; }
.hero-testo .lede p:last-child { margin-bottom: 1.75rem; }
.lede { max-width: 54ch; }

/* Link che portano fuori dal sito: sottolineatura corallo, si aprono in
   una scheda nuova. */
.fuori {
  text-decoration: none;
  border-bottom: 1px solid var(--corallo);
  padding-bottom: 1px;
}
.fuori:hover { color: var(--corallo-chiaro); border-color: var(--corallo-chiaro); }

/* Lo scorrimento verso l'ancora è morbido, ma sparisce per chi ha chiesto
   al sistema operativo di ridurre le animazioni. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* l'ancora non finisce incollata al bordo alto */
#chi-sono { scroll-margin-top: 2rem; }

/* rimando discreto in coda a un blocco */
.rimando { margin-top: 2rem; }
.link-interno {
  font-family: var(--mono); font-size: .8rem; letter-spacing: .04em;
  color: var(--corallo); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ---------- CAROSELLO ------------------------------------------------- */

.carosello-sezione {
  background: var(--inchiostro);
  color: var(--avorio);
  padding: clamp(3rem, 6vw, 5rem) 0;
  margin: clamp(3rem, 6vw, 5rem) 0;
}
.carosello-sezione .titolo-blocco { color: var(--corallo-chiaro); margin-bottom: 1.75rem; }
.carosello-sezione .nota { color: var(--ardesia-chiara); margin-top: 1.5rem; }

/* Una fila che si scorre, con lo scatto che allinea una foto per volta.
   Nessun JavaScript: sono le frecce del browser, il dito e la rotella. */
.carosello {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 clamp(1.25rem, 4vw, 3rem) 1rem;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--corallo) 70%, transparent) transparent;
}
.carosello::-webkit-scrollbar { height: 6px; }
.carosello::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--corallo) 70%, transparent); }
.carosello:focus-visible { outline: 3px solid var(--corallo); outline-offset: 4px; }

.carosello figure {
  flex: 0 0 min(30vw, 416px);   /* un quinto più piccole */
  margin: 0;
  scroll-snap-align: center;
}
.carosello img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  background: var(--inchiostro-chiaro);
}
.carosello figcaption {
  font-family: var(--mono); font-size: .72rem; line-height: 1.5;
  color: var(--ardesia-chiara);
  margin-top: .7rem;
}

@media (max-width: 700px) {
  .carosello figure { flex-basis: 68vw; }
  .carosello { scroll-snap-type: x mandatory; }
}

/* ---------- PAGINA FORMAZIONE ---------------------------------------- */

.due-formati { display: grid; gap: 2rem; }
@media (min-width: 760px) { .due-formati { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.due-formati h3 {
  font-family: var(--display); font-weight: 600; font-size: 1.4rem;
  margin: 0 0 .6rem;
}
.due-formati p { margin: 0; }

/* Le schede dei temi: titolo, una riga, e tre cose che restano.
   Servono a chi deve spiegare a un collega perché invitarlo. */
.temi { display: grid; gap: 1px; background: var(--avorio-scuro); border: 1px solid var(--avorio-scuro); margin-top: 2.5rem; }
@media (min-width: 820px) { .temi { grid-template-columns: 1fr 1fr; } }
.tema { background: var(--avorio); padding: clamp(1.5rem, 3vw, 2.25rem); }
.tema h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.35rem; line-height: 1.2; margin: 0 0 .6rem;
}
.tema p { font-size: .97rem; margin: 0 0 1rem; }
.tema ul { margin: 0; padding-left: 1.1rem; }
.tema li {
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
  color: var(--ardesia); margin-bottom: .45rem;
}

/* Una fascia a tutta larghezza dentro una colonna di testo: esce dai
   margini del contenitore usando la larghezza della finestra. Serve a
   spezzare una pagina lunga con qualcosa di concreto. */
.fascia {
  margin: clamp(3rem, 6vw, 4.5rem) 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.fascia img { display: block; width: 100%; height: auto; }
.fascia figcaption {
  max-width: 1280px; margin: .8rem auto 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  font-family: var(--mono); font-size: .74rem; color: var(--ardesia);
}

/* La griglia dei temi disegna le righe sottili lasciando un pixel di
   sfondo tra una cella e l'altra. I temi sono sette, cioè dispari: su due
   colonne l'ottava casella resta vuota e mostra quel grigio di fondo.
   Questo pseudo-elemento è una cella finta del colore della pagina. */
@media (min-width: 820px) {
  .temi::after { content: ""; background: var(--avorio); }
}

/* Striscia dei marchi degli eventi. Finché mancano, riquadri tratteggiati
   con il nome dentro: si vede che manca qualcosa. */
.loghi-eventi {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem 2rem; margin: 2rem 0 1.5rem;
}
.loghi-eventi img { max-height: 34px; max-width: 150px; width: auto; opacity: .92; }
.logo-mancante {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  color: color-mix(in srgb, var(--corallo) 85%, var(--inchiostro));
  border: 1px dashed color-mix(in srgb, var(--corallo) 55%, transparent);
  padding: .7rem 1rem; display: inline-flex; align-items: center; min-height: 44px;
}

/* ---------- ELENCO PROGETTI ------------------------------------------- */

.progetti { display: grid; gap: 1px; background: var(--avorio-scuro); border: 1px solid var(--avorio-scuro); }
@media (min-width: 820px) { .progetti { grid-template-columns: 1fr 1fr; } }
.progetto { background: var(--avorio); padding: clamp(1.5rem, 3vw, 2.25rem); }
.progetto h2 {
  font-family: var(--display); font-weight: 600;
  font-size: 1.45rem; line-height: 1.15; margin: 0 0 .35rem;
  text-transform: none; letter-spacing: -.01em; color: var(--inchiostro);
}
.progetto h2 a { text-decoration: none; border-bottom: 2px solid var(--corallo); }
.progetto h2 a:hover { color: var(--corallo); }
.progetto .quando {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ardesia); margin: 0 0 .9rem;
}
.progetto p { font-size: .97rem; margin: 0; }

.recapito { font-family: var(--mono); font-size: .88rem; line-height: 1.9; }

/* ---------- MARCHI DEI PROGETTI --------------------------------------- */

.marchio-progetto { margin: 0 0 2.5rem; }
.marchio-progetto img { max-height: 62px; max-width: min(100%, 340px); width: auto; }

.marchio-scheda { max-height: 34px; max-width: 190px; width: auto; margin-bottom: .9rem; }

/* Con otto voci il menu è al limite: sotto i 1200px si stringe un po'
   invece di andare a capo in modo disordinato. */
@media (min-width: 701px) and (max-width: 1200px) {
  .menu ul { gap: 1rem 1.15rem; }
  .menu a { font-size: .72rem; }
  .menu .nome { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
}

/* ---------- ORDINE DELLA HERO SUL TELEFONO ---------------------------- */
/* Vuole: frase, foto, testo, e poi i due pulsanti. Payoff, testo e pulsanti
   stanno dentro .hero-testo mentre il ritratto è suo fratello: con
   "display: contents" i figli di .hero-testo diventano figli diretti della
   griglia, e a quel punto l'ordine si può rimescolare con "order". */
@media (max-width: 700px) {
  .hero-griglia {
    display: flex;
    flex-direction: column;
    /* in colonna, align-items lavora sull'orizzontale: senza questo
       eredita "end" dal desktop e spinge i pulsanti contro il bordo destro */
    align-items: stretch;
    gap: 0;
  }
  .hero-testo { display: contents; }

  .hero-testo .payoff    { order: 1; margin-bottom: 1.25rem; }
  .hero-ritratto         { order: 2; margin: 0 0 1.5rem; }
  .hero-testo .lede      { order: 3; }
  .hero-testo .azioni    { order: 4; padding-bottom: 2.5rem; }

  .hero-ritratto img { width: min(82%, 380px); }
}


/* L'elenco degli eventi: non è una tabella di marcia, è un colpo d'occhio.
   Nomi in colonna, ognuno su una riga sottile, quattro colonne da schermo
   grande e una sola dal telefono. Nessuna data: il titolo dice "alcuni",
   quindi l'elenco resta vero anche fra due anni senza toccarlo. */
.eventi {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: 0 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .eventi { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .eventi { grid-template-columns: repeat(3, 1fr); } }
.eventi li {
  padding: .6rem 0;
  border-top: 1px solid color-mix(in srgb, var(--ardesia) 22%, transparent);
  font-size: .94rem; line-height: 1.35;
}

/* La riga che dice come si usa il carosello: piccola, in monospace, con la
   freccia. Non è un'istruzione per l'uso, è un invito. */
.scorri {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ardesia-chiara);
  margin: 1.25rem 0 0;
}

/* Il secondo carosello, quello delle missioni, vive dentro il blocco scuro:
   stesse misure di quello dei palchi, ma senza il rientro laterale — qui il
   margine glielo dà gia il contenitore del blocco. */
.carosello-missioni {
  padding: 0 0 1rem;
  margin-top: 2.5rem;
}
.carosello-missioni figcaption {
  color: color-mix(in srgb, var(--avorio) 62%, var(--ardesia-chiara));
}
/* Da schermo largo le tre foto ci stanno tutte: l'invito a scorrere
   sarebbe una bugia, e sparisce. */
@media (min-width: 1100px) {
  .carosello-missioni ~ .scorri { display: none; }
}