/* Studio di Psicologia e Psicoterapia, Fermo — foglio di stile unico.
   Carta e inchiostro, impianto da libro: titoletto in margine (colonne 1-4), testo nel corpo (5-12).
   Colore pieno solo dove si sceglie la persona. Niente schede, niente icone decorative, niente riquadri.
   UNA scala sola per spazi, altezze e raggi, e UNA griglia di 12 colonne (skill griglia-e-misura). */

/* 5/11/2026: Literata VARIABILE con la dimensione ottica (asse opsz 7-72). Prima era il taglio 72pt, da titolo:
   a 19 px le aste erano troppo sottili (visto da Seba). Ora il browser sceglie il taglio giusto per ogni grandezza. */
@font-face{font-family:"Literata";src:url("fonts/Literata-opsz-wght.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Literata";src:url("fonts/Literata-Italic-opsz-wght.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("fonts/InstrumentSans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --gutter:48px;          /* bordo di pagina */
  --fra:24px;             /* fra le colonne */
  --dentro:48px;          /* dentro i blocchi a colore pieno */
  --misura:34em; --max:1200px;
  --h-riga:48px; --h-bottone:56px; --r1:4px; --r-tondo:24px;
  --h-testata:80px;       /* la testata fissa in alto */

  --carta:#f5f0e8; --inchiostro:#1f2629; --tenue:#5a6468; --filo:#d9d0c1;
  --verde:#a9b8a3; --blu:#4a6a80; --su-colore:#f8f5ef;
  --cornice:#fcfaf5;       /* il passepartout dei quadri */
  --tinta-verde:#e2eae3; --tinta-blu:#dfe7ed; --sabbia:#ebe2d2; --scuro:#1f2629;
  --verde-chiaro:#7fa58f; --blu-chiaro:#7f9fb5;   /* verde e blu leggibili sul fondo scuro */
  --filo-chiaro:rgba(248,245,239,.28); --tenue-chiaro:rgba(248,245,239,.86);

  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-optical-sizing:auto;background:var(--carta);color:var(--inchiostro);font-family:var(--serif);font-size:19px;line-height:32px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-underline-offset:var(--s1);text-decoration-thickness:1px}
.icona{width:var(--s4);height:var(--s4);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* la griglia: 12 colonne. margine = 1-4, corpo = 5-12 */
.griglia{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--fra)}
.tutta{grid-column:1 / -1}
.margine{grid-column:1 / 5}
.corpo{grid-column:5 / 13}
.corpo > p,.corpo > ul,.corpo > dl{max-width:var(--misura)}

/* testata e piede */
.testata{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:var(--h-testata);padding:0 var(--gutter);
  background:var(--carta);border-bottom:1px solid var(--filo)}
[id]{scroll-margin-top:var(--h-testata)}
.marchio{position:relative;z-index:32;display:flex;align-items:center;gap:var(--s3);text-decoration:none}
.marchio svg{width:var(--s6);height:var(--s6);flex:none}
.marchio span{font-family:var(--sans);font-size:14px;line-height:20px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.marchio b,.marchio i{font-weight:inherit;font-style:normal}
.menu{display:flex;gap:var(--s5);font-family:var(--sans);font-size:15px;line-height:20px;white-space:nowrap}
.menu a{text-decoration:none;color:var(--tenue)}
.menu a:hover,.menu a[aria-current]{color:var(--inchiostro)}

/* il pulsante: pillola, due linee di lunghezza diversa che diventano una X */
.menu-piccolo{display:none}
.menu-piccolo summary{position:relative;z-index:32;display:inline-flex;align-items:center;gap:var(--s3);height:var(--h-riga);padding:0 var(--s4) 0 var(--s5);
  border:1px solid var(--inchiostro);border-radius:var(--r-tondo);font-family:var(--serif);font-style:italic;font-size:17px;line-height:24px;cursor:pointer;list-style:none;
  transition:background .2s,color .2s,border-color .2s}
.menu-piccolo summary::-webkit-details-marker{display:none}
.menu-piccolo summary:hover{background:var(--inchiostro);color:var(--carta)}
.dicitura{display:grid}
.dicitura > *{grid-area:1 / 1}
.dicitura .chiudi{visibility:hidden}
.linee{position:relative;width:var(--s5);height:var(--s3)}
.linee i{position:absolute;left:0;height:1.5px;background:currentColor;border-radius:1px;transition:transform .25s,width .25s,top .25s}
.linee i:first-child{top:2px;width:var(--s5)}
.linee i:last-child{top:9px;width:var(--s4)}
.menu-piccolo[open] summary{background:var(--su-colore);color:var(--inchiostro);border-color:var(--su-colore)}
.menu-piccolo[open] .apri{visibility:hidden}
.menu-piccolo[open] .chiudi{visibility:visible}
.menu-piccolo[open] .linee i{top:5px;width:var(--s5)}
.menu-piccolo[open] .linee i:first-child{transform:rotate(45deg)}
.menu-piccolo[open] .linee i:last-child{transform:rotate(-45deg)}

/* il menu aperto: tutto schermo, fondo scuro, voci grandi */
.menu-pieno{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:space-between;gap:var(--s7);overflow-y:auto;
  padding:calc(var(--h-testata) + var(--s7)) var(--gutter) var(--s7);background:var(--scuro);color:var(--su-colore);animation:menu-entra .25s ease-out}
@keyframes menu-entra{from{opacity:0;transform:translateY(calc(-1 * var(--s3)))}to{opacity:1;transform:none}}
.menu-pieno ul{list-style:none;border-top:1px solid var(--filo-chiaro)}
.menu-pieno li a{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);padding:var(--s4) 0;border-bottom:1px solid var(--filo-chiaro);text-decoration:none}
.voce-grande{position:relative;font-family:var(--serif);font-size:40px;line-height:48px}
.voce-spiega{font-family:var(--sans);font-size:15px;line-height:24px;color:var(--tenue-chiaro);text-align:right}
.menu-pieno li a:hover .voce-grande{font-style:italic}
.menu-pieno a[aria-current] .voce-grande{padding-left:var(--s6)}
.menu-pieno a[aria-current] .voce-grande::before{content:"";position:absolute;left:0;top:50%;width:var(--s3);height:var(--s3);margin-top:calc(-1 * var(--s3) / 2);border-radius:50%;background:var(--su-colore)}
.menu-pieno a[aria-current][data-colore="verde"] .voce-grande::before{background:var(--verde-chiaro)}
.menu-pieno a[aria-current][data-colore="blu"] .voce-grande::before{background:var(--blu-chiaro)}
.menu-fondo{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6);font-family:var(--sans);font-size:15px;line-height:24px;color:var(--tenue-chiaro)}
.menu-fondo a{color:var(--su-colore);text-decoration:none}
.menu-fondo a:hover{text-decoration:underline}
.punto{display:inline-block;width:var(--s2);height:var(--s2);border-radius:50%;margin-right:var(--s2);vertical-align:1px}
.punto.verde{background:var(--verde-chiaro)}
.punto.blu{background:var(--blu-chiaro)}
.menu-indirizzo{flex-basis:100%}
/* col menu aperto: la testata diventa parte del fondo scuro, la pagina sotto non scorre */
html:has(.menu-piccolo[open]){overflow:hidden}
.testata:has(.menu-piccolo[open]){background:transparent;border-bottom-color:transparent}
.testata:has(.menu-piccolo[open]) .marchio{color:var(--su-colore)}
.testata:has(.menu-piccolo[open]) .marchio path{stroke:var(--verde-chiaro)}
.testata:has(.menu-piccolo[open]) .marchio rect{fill:var(--blu-chiaro)}
.piede{padding:var(--s7) 0;border-top:1px solid var(--filo);font-family:var(--sans);font-size:14px;line-height:20px;color:var(--tenue)}
.piede a{text-decoration:none}
.piede a:hover{text-decoration:underline}

/* apertura: titolo a tutta larghezza, sotto margine e corpo */
.apertura{padding:var(--s9) 0 var(--s8)}
.apertura .griglia{row-gap:var(--s6)}
h1{font-weight:400;font-size:72px;line-height:80px;letter-spacing:-.015em}
h1 em{font-style:italic;color:var(--tenue)}
.attacco{font-size:24px;line-height:36px}
.apertura .corpo > * + *{margin-top:var(--s5)}
.ruolo{font-family:var(--sans);font-size:14px;line-height:20px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.nota{font-family:var(--sans);font-size:15px;line-height:24px;color:var(--tenue)}

.bottone{display:inline-flex;align-items:center;gap:var(--s3);min-height:var(--h-bottone);padding:0 var(--s5);border-radius:var(--r1);
  background:var(--inchiostro);color:var(--carta);font-family:var(--sans);font-size:16px;font-weight:600;text-decoration:none;line-height:24px}
.bottone:hover{opacity:.88}
.bottone.chiaro{background:var(--su-colore);color:var(--inchiostro)}

/* sezioni: titoletto in margine, testo nel corpo */
.sezione{padding:var(--s8) 0;border-top:1px solid var(--filo)}
.sezione h2{font-weight:400;font-size:24px;line-height:32px}
.sezione .margine .nota{margin-top:var(--s2)}
.corpo p+p,.corpo .grande+p{margin-top:var(--s4)}
.grande{font-size:32px;line-height:44px}
/* le parole di chi chiama: citazioni a righe, stessa misura dell'attacco */
.frasi{list-style:none;max-width:var(--misura);margin-top:var(--s5);border-top:1px solid rgba(31,38,41,.14)}
.frasi li{padding:var(--s4) 0;border-bottom:1px solid rgba(31,38,41,.14);font-size:24px;line-height:36px}
.frasi a{text-decoration:none}
.frasi a:hover{text-decoration:underline}
.frasi + p{margin-top:var(--s5)}
.da-scrivere{color:var(--tenue);font-style:italic}
.corpo * + .da-scrivere{margin-top:var(--s6)}

/* illustrazioni: nel margine, sotto il titoletto */
.illustrazione{margin-top:var(--s5);width:100%;max-width:calc(var(--s10) * 2 + var(--s8))}
.illustrazione:has(video){max-width:300px}
.illustrazione :is(img,video){display:block;width:100%;height:auto;border:var(--s2) solid var(--cornice);box-shadow:0 var(--s1) var(--s5) rgba(31,38,41,.16)}
.fondo-verde .illustrazione figcaption,.fondo-blu .illustrazione figcaption,.fondo-scuro .illustrazione figcaption{color:var(--tenue-chiaro)}
.illustrazione figcaption{margin-top:var(--s2);font-family:var(--sans);font-size:14px;line-height:20px;color:var(--tenue);font-style:italic}

/* indice (home) */
.indice{list-style:none;border-top:1px solid var(--inchiostro)}
.indice a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) var(--s4);gap:var(--fra);align-items:center;min-height:var(--s8);padding:var(--s3) 0;border-bottom:1px solid var(--filo);text-decoration:none}
.indice .voce{font-size:24px;line-height:32px}
.indice-secco li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--fra);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--filo-chiaro)}
.indice .spiega{font-family:var(--sans);font-size:15px;line-height:24px;color:var(--tenue)}
.indice a:hover .voce{text-decoration:underline}

/* formazione ed esperienza: righe, l'anno in testa */
.righe{list-style:none;border-top:1px solid var(--inchiostro)}
.righe li{display:grid;grid-template-columns:var(--s8) minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--filo)}
.righe .anno{font-family:var(--sans);font-size:15px;color:var(--tenue)}

/* colofone: i dati pratici, come in fondo a un libro */
.colofone{border-top:1px solid var(--inchiostro)}
.colofone div{display:grid;grid-template-columns:var(--s10) minmax(0,1fr);gap:var(--s4);padding:var(--s3) 0;border-bottom:1px solid var(--filo)}
.colofone dt{font-family:var(--sans);font-size:15px;color:var(--tenue)}
.colofone a{overflow-wrap:anywhere}

/* le due persone: l'unico colore pieno del sito */
/* a tutta larghezza; il testo parte da una linea della griglia + --dentro (il 100% qui e' mezza pagina) */
.persone{display:grid;grid-template-columns:1fr 1fr}
.persone > :first-child{padding-left:calc(max(0px, 100% - var(--max) / 2) + var(--gutter) + var(--dentro));padding-right:calc(var(--fra) / 2 + var(--dentro))}
.persone > :last-child{padding-left:calc(var(--fra) / 2 + var(--dentro));padding-right:calc(max(0px, 100% - var(--max) / 2) + var(--gutter) + var(--dentro))}
.persona{padding-top:var(--s9);padding-bottom:var(--s9);color:var(--su-colore);display:flex;flex-direction:column;gap:var(--s5);min-height:620px}
.persona.verde,.riga-azione.verde,.scheda-contatto.verde{background:var(--verde)}
.persona.blu,.riga-azione.blu,.scheda-contatto.blu{background:var(--blu)}
.persona .nome{font-size:40px;line-height:48px;font-weight:400;margin-top:var(--s5)}
.persona .nome a{text-decoration:none}
.persona .nome a:hover{text-decoration:underline}
.persona .ruolo{color:var(--tenue-chiaro)}
.persona p{max-width:26em}
.persona .spinta{margin-top:auto}
.ritratto{width:var(--s10);height:var(--s10);border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--serif);font-size:48px;line-height:56px;border:1px solid rgba(248,245,239,.35);background:rgba(248,245,239,.08);position:relative}
.ritratto small{position:absolute;bottom:calc(-1 * var(--s6));font-family:var(--sans);font-size:12px;line-height:16px;letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.ritratto-foto{object-fit:cover;border:1px solid var(--filo-chiaro);background:none;font-size:0}
.foto-studio{display:grid;grid-template-columns:1fr 1fr;gap:var(--fra)}
.foto-studio figure{aspect-ratio:3 / 2}
.foto-studio figure:first-child{aspect-ratio:16 / 10}
.foto-studio figure:first-child{grid-column:1 / -1}
.foto-studio img{display:block;width:100%;height:100%;object-fit:cover;border:var(--s2) solid var(--cornice);box-shadow:0 var(--s1) var(--s5) rgba(31,38,41,.14)}
.sezione-foto .corpo > *{max-width:none}
.ritratto-verde{background:rgba(169,184,163,.2);border-color:rgba(169,184,163,.8);color:var(--inchiostro)}
.ritratto-blu{background:rgba(74,106,128,.1);border-color:rgba(74,106,128,.4);color:var(--blu)}
.ritratto-verde small,.ritratto-blu small{color:var(--tenue)}

/* contatti */
.persone-contatti .scheda-contatto{padding-top:var(--s8);padding-bottom:var(--s8)}
.scheda-contatto{color:var(--su-colore);display:flex;flex-direction:column;gap:var(--s3)}
.scheda-contatto h2{font-weight:400;font-size:32px;line-height:40px}
.scheda-contatto .ruolo{color:var(--tenue-chiaro)}
.contatti{list-style:none;display:flex;flex-direction:column;margin-top:var(--s2);max-width:26em}
.contatti li{display:flex;align-items:center;gap:var(--s3);min-height:var(--h-riga);border-top:1px solid rgba(248,245,239,.25)}
.contatti li:first-child{border-top:none}
.contatti a{text-decoration:none;overflow-wrap:anywhere}
.contatti a:hover{text-decoration:underline}

/* articoli */
.elenco-articoli{list-style:none}
.elenco-articoli li + li{margin-top:0}
.elenco-articoli li > *{padding:var(--s5) 0;border-bottom:1px solid var(--filo)}
.elenco-articoli li:first-child > *{border-top:1px solid var(--inchiostro)}
.firma{display:block;margin-top:var(--s1);font-family:var(--sans);font-size:15px;line-height:24px;color:var(--tenue)}
.firma a{text-decoration:none}
.firma a:hover{text-decoration:underline}
.firma-grande .firma{margin-top:0}
.elenco-articoli .data{font-family:var(--sans);font-size:15px;line-height:24px;color:var(--tenue)}
.elenco-articoli a.corpo{display:flex;flex-direction:column;gap:var(--s2);text-decoration:none}
.elenco-articoli .titolo-articolo{font-size:24px;line-height:32px}
.elenco-articoli .estratto{color:var(--tenue);max-width:var(--misura)}
.elenco-articoli a.corpo:hover .titolo-articolo{text-decoration:underline}
.sezione-articolo .margine .nota + .nota{margin-top:var(--s1)}
.testo-articolo p{max-width:var(--misura)}
.testo-articolo .chiusa{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--filo);color:var(--tenue)}

/* riga d'azione a colore pieno */
.riga-azione{color:var(--su-colore);padding:var(--s8) 0}
.nome-azione{font-size:24px;line-height:32px}
.azioni{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s5)}

/* fasce di colore: pieno (verde, blu, scuro) o tinta (tinta-verde, tinta-blu, sabbia).
   Una fascia colorata non ha il filetto sopra: il cambio di fondo fa gia' da separazione. */
.fondo-verde,.fondo-blu,.fondo-scuro,.fondo-tinta-verde,.fondo-tinta-blu,.fondo-sabbia{border-top:none}
.fondo-verde{background:var(--verde)}
.fondo-blu{background:var(--blu)}
.fondo-scuro{background:var(--blu)}  /* 26/10 Teresa: la banda nera di un altro colore -> il blu dello studio */
.fondo-tinta-verde{background:var(--tinta-verde)}
.fondo-tinta-blu{background:var(--tinta-blu)}
.fondo-sabbia{background:var(--sabbia)}
.fondo-verde,.fondo-blu,.fondo-scuro{color:var(--su-colore)}
.fondo-verde :is(.nota,.ruolo,.da-scrivere,.spiega,.anno,dt,h1 em),
.fondo-blu :is(.nota,.ruolo,.da-scrivere,.spiega,.anno,dt,h1 em),
.fondo-scuro :is(.nota,.ruolo,.da-scrivere,.spiega,.anno,dt,h1 em){color:var(--tenue-chiaro)}
.fondo-verde :is(.righe,.colofone,.indice),.fondo-blu :is(.righe,.colofone,.indice),.fondo-scuro :is(.righe,.colofone,.indice){border-top-color:var(--su-colore)}
.fondo-verde :is(.righe li,.colofone div,.indice a,.frasi,.frasi li),.fondo-blu :is(.righe li,.colofone div,.indice a,.frasi,.frasi li),.fondo-scuro :is(.righe li,.colofone div,.indice a,.frasi,.frasi li){border-color:var(--filo-chiaro)}
.fondo-scuro .bottone,.fondo-verde .bottone,.fondo-blu .bottone{background:var(--su-colore);color:var(--inchiostro)}
.fondo-tinta-verde :is(.righe li,.colofone div,.indice a),.fondo-sabbia :is(.righe li,.colofone div,.indice a),.fondo-tinta-blu :is(.righe li,.colofone div,.indice a){border-bottom-color:rgba(31,38,41,.14)}
/* un filetto fra due fasce di carta resta; fra carta e colore no */
.apertura + .sezione:not([class*="fondo-"]){border-top:none}
.apertura:not([class*="fondo-"]) + .sezione:not([class*="fondo-"]){border-top:1px solid var(--filo)}

/* tablet: il menu lungo non ci sta, va nel pulsante */
@media (max-width:1400px){   /* 5/11: era 1100, ma con 8 voci il menu pieno usciva dal bordo fino a 1370 px */
  .menu{display:none}
  .menu-piccolo{display:block}
}
/* telefono: una colonna sola, il margine va sopra il corpo */
@media (max-width:860px){
  :root{--gutter:24px;--dentro:24px}
  .griglia{grid-template-columns:minmax(0,1fr)}
  .foto-studio{grid-template-columns:minmax(0,1fr)}
  .foto-studio figure,.foto-studio figure:first-child{aspect-ratio:3 / 2}
  .griglia > *{grid-column:1 / -1}
  :root{--h-testata:64px}
  .voce-grande{font-size:32px;line-height:40px}
  .menu-pieno li a{flex-direction:column;gap:var(--s1)}
  .voce-spiega{text-align:left}
  /* sul telefono il marchio sta su una riga: in tondo, senza «Fermo» */
  .marchio span{font-family:var(--serif);font-size:17px;line-height:24px;letter-spacing:0;text-transform:none}
  .marchio i{display:none}
  .testata{gap:var(--s3)}
  .marchio{gap:var(--s2)}
  .menu-piccolo summary{gap:var(--s2);padding:0 var(--s3) 0 var(--s4)}
  .menu-pieno{padding-top:calc(var(--h-testata) + var(--s5));padding-bottom:var(--s5);gap:var(--s5)}
  .menu-pieno li a{padding:var(--s3) 0}
  .apertura{padding:var(--s8) 0 var(--s7)}
  h1{font-size:44px;line-height:52px}
  .attacco{font-size:21px;line-height:32px}
  .frasi li{font-size:21px;line-height:32px}
  .grande{font-size:24px;line-height:36px}
  .sezione{padding:var(--s7) 0}
  .sezione .margine{margin-bottom:var(--s4)}
  .indice a{grid-template-columns:minmax(0,1fr) var(--s4)}
  .indice-secco li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--fra);align-items:baseline;padding:var(--s3) 0;border-bottom:1px solid var(--filo-chiaro)}
.indice .spiega{grid-column:1;grid-row:2}
  .indice a .icona{grid-column:2;grid-row:1 / 3}
  .indice a{row-gap:var(--s1)}
  .persone{grid-template-columns:minmax(0,1fr)}
  .persone > :first-child,.persone > :last-child{min-height:0;padding:var(--s8) var(--gutter)}
  .elenco-articoli li:first-child > .corpo{border-top:none}
  .elenco-articoli li > .data{padding-bottom:0;border-bottom:none}
  .elenco-articoli li > .corpo{padding-top:var(--s2)}
  .nome-azione{margin-bottom:var(--s3)}
}
/* telefoni molto stretti: il pulsante resta solo con le due linee */
@media (max-width:360px){
  .dicitura{display:none}
  .menu-piccolo summary{padding:0 var(--s3)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 22/10: il verde di Teresa e' chiaro (salvia #a9b8a3, scelto da Seba sulla scelta di Teresa del 20/10):
   sopra il verde il testo e' scuro, non chiaro come sul blu. Contrasto inchiostro su salvia: 7,4. */
.persona.verde,.riga-azione.verde,.scheda-contatto.verde,.fondo-verde{color:var(--inchiostro)}
.persona.verde .ruolo,.scheda-contatto.verde .ruolo,
.fondo-verde :is(.nota,.ruolo,.da-scrivere,.spiega,.anno,dt,h1 em){color:rgba(31,38,41,.8)}
.fondo-verde :is(.righe,.colofone,.indice){border-top-color:var(--inchiostro)}
.fondo-verde :is(.righe li,.colofone div,.indice a,.frasi,.frasi li){border-color:rgba(31,38,41,.2)}
.fondo-verde .illustrazione figcaption{color:rgba(31,38,41,.8)}
:is(.persona.verde,.riga-azione.verde,.scheda-contatto.verde) .bottone.chiaro,.fondo-verde .bottone{background:var(--inchiostro);color:var(--su-colore)}
.persona.verde .ritratto-foto{border-color:rgba(31,38,41,.2)}

/* 22/10: il ritratto di Teresa e' una foto buona (840 px): nella sua pagina si vede piu' grande */
.ritratto-grande{width:calc(var(--s10) * 2);height:calc(var(--s10) * 2)}

/* 22/10: le illustrazioni come fasce a tutta larghezza, senza cornice (Seba: «sembrano buttate li'») */
.fascia{margin-top:calc(-1 * var(--s8))}
.fascia img{display:block;width:100%;height:auto}
@media (max-width:760px){
  .fascia{margin-top:calc(-1 * var(--s6))}
  .fascia img{height:280px;object-fit:cover;object-position:78% 100%}
}

/* 22/10: i due blocchi della home devono stare interi nello schermo, cosi' «Scegli con chi parlare» li centra
   con lo stesso margine sopra e sotto. Altezza dal contenuto, non piu' minima fissa; respiro che segue lo schermo. */
.persone .persona{min-height:0;padding-top:clamp(var(--s6),6vh,var(--s9));padding-bottom:clamp(var(--s6),6vh,var(--s9));gap:var(--s4)}
@media (max-height:860px){.persone .persona .ritratto-grande{width:200px;height:200px}}

/* 22/10: fasce discrete, larghe quanto la colonna del testo, bordi sfumati nel fondo della sezione */
.fascia-sezione{display:block;width:100%;height:auto;margin-bottom:var(--s5)}
.fascia-colonna{padding-bottom:var(--s6)}
.fascia-colonna .fascia-sezione{margin:0}
.fascia-tra{margin-top:0}
@media (max-width:760px){.fascia img[src*="fascia-larga"]{height:220px;object-position:50% 100%}}
/* 24/10: i titoletti dentro gli articoli riadattati (il campione «La crisi di coppia») */
.testo-articolo h2{font-weight:400;font-size:28px;line-height:36px;margin:var(--s7) 0 var(--s3);max-width:var(--misura)}
.testo-articolo p + p{margin-top:var(--s4)}

/* 26/10: la pagina dei video. Video verticali: larghi quanto un telefono, non quanto la colonna. */
.video-grande{max-width:360px}
.video-grande video{display:block;width:100%;height:auto;border:var(--s2) solid var(--cornice);box-shadow:0 var(--s1) var(--s5) rgba(31,38,41,.16)}
.video-grande figcaption{margin-top:var(--s3);font-family:var(--sans);font-size:14px;line-height:20px;color:var(--tenue)}

/* 7/11: la pagina Video a griglia (Seba: «in elenco su desktop sono troppi»).
   Desktop: 5 colonne, due video grandi 2x2 (presentazione in alto a sinistra, trauma in basso a destra):
   14 video = 12 piccoli + 2 grandi = 20 caselle = 4 righe piene. Fino a 1100: 4 colonne coi due grandi; fino a 860: 2 colonne; telefono 1. */
.video-griglia{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s6) var(--fra);grid-auto-flow:dense}
.video-carta{display:flex;flex-direction:column;min-width:0}
.video-carta video{display:block;width:100%;height:auto;aspect-ratio:9 / 16;object-fit:cover;background:var(--scuro);
  border:var(--s2) solid var(--cornice);box-shadow:0 var(--s1) var(--s5) rgba(31,38,41,.16)}
.video-carta h2{margin-top:var(--s3);font-weight:400;font-size:20px;line-height:28px}
.video-carta p{margin-top:var(--s1);font-family:var(--sans);font-size:14px;line-height:20px;color:var(--tenue)}
.video-carta.grande{grid-column:span 2;grid-row:span 2}
.video-carta.grande video{flex:1 1 0;min-height:0;aspect-ratio:auto}
.video-carta.grande h2{font-size:28px;line-height:36px}
#presentazione-teresa{grid-column:1 / 3;grid-row:1 / 3}
#cos-e-un-trauma{grid-column:4 / 6;grid-row:3 / 5}
@media (max-width:1100px){   /* 4 colonne: 12 piccoli + 2 grandi = 20 caselle = 5 righe piene */
  .video-griglia{grid-template-columns:repeat(4,minmax(0,1fr))}
  #cos-e-un-trauma{grid-column:3 / 5;grid-row:3 / 5}
}
@media (max-width:860px){    /* 2 colonne, tutti uguali */
  .video-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}
  .video-carta.grande,#presentazione-teresa,#cos-e-un-trauma{grid-column:auto;grid-row:auto}
  .video-carta.grande video{flex:none;aspect-ratio:9 / 16}
  .video-carta.grande h2{font-size:20px;line-height:28px}
}
@media (max-width:600px){
  .video-griglia{grid-template-columns:minmax(0,360px)}
}

/* 7/11: apertura col margine vuoto: il testo parte dal bordo del titolo, niente scalino */
.apertura .corpo.sotto-titolo{grid-column:1 / 10}
.apertura .corpo.sotto-titolo > p{max-width:var(--misura)}
@media (max-width:860px){.apertura .corpo.sotto-titolo{grid-column:1 / -1}}

/* 7/11: partita IVA di tutti e due nel piede, una riga sotto l'indirizzo; sul telefono una per riga */
.piede .griglia{row-gap:var(--s2)}
.piede .piva span{display:inline-block;margin-right:var(--s5)}
.piede .piva span:last-child{margin-right:0}