/* VERSIONE 2026-08-20a · Il corpo sottile · foglio di stile condiviso.
   Questa riga sta qui per una ragione pratica: aprendo
   corpo.athanor.school/assets/corpo.css da qualunque telefono si legge
   subito quale foglio e' davvero online, senza strumenti e senza
   fidarsi della cache. Se la data qui sopra non e' quella dell'ultima
   modifica, quello che si sta guardando e' una copia vecchia.
   ============================================================

   IL SISTEMA IN QUATTRO RIGHE
   Impianto di famiglia con Athanor, colori propri.
   · una sola scala per i corpi (rapporto 1.25 da 18px): nove misure,
     due taglie, 21px sulla scrivania e 20px nella mano
   · una sola progressione per gli spazi (Fibonacci), usata attraverso
     stacchi che hanno un nome e una funzione
   · quattro neutri caldi, ciascuno con un compito preciso
   · serif nel corpo del testo, sans soltanto nei segnali di servizio

   I DUE COLORI, e i loro due mestieri
   · rame  = le soglie. Stemma, filetti, ornamenti, inviti.
   · indaco = le intestazioni. Etichette, numeri romani, titoli delle
     tavole, didascalie.
   Non si mescolano. Se una cosa nuova e' un'etichetta va in indaco, se
   e' una soglia va in rame.

   Se cerchi un valore da cambiare, sta quasi sempre in :root.
   ============================================================ */

/* ============================================================
   IL CARATTERE · EB Garamond, servito da questo dominio
   Otto facce variabili divise per alfabeto piu' la nona, statica, per
   il maiuscoletto, che e' una famiglia a parte e non una variante.
   Una pagina di solo italiano scarica 44 kB e basta.
   Licenza SIL Open Font License, copia in assets/font/.
   ============================================================ */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-latino.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-latino-corsivo.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-latino-esteso.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-latino-esteso-corsivo.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-greco.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-greco-corsivo.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-greco-esteso.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+1F00-1FFF}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 800;font-display:swap;
  src:url(/assets/font/ebgaramond-greco-esteso-corsivo.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+1F00-1FFF}
@font-face{font-family:"EB Garamond SC";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/font/ebgaramond-maiuscoletto.woff2?v=2026-08-20a) format("woff2");
  unicode-range:U+0000-00FF,U+0100-017F,U+2000-206F,U+2122,U+2190-2193}

:root{
  /* ——— Materia ——— */
  --carta:#FDFCF4;
  --carta-scura:#F6F3E6;
  --notte:#171512;

  /* ——— I due colori ———
     Il rame e' l'ornamento: lo stemma, i filetti, i rombi, gli inviti.
     Non porta mai testo piccolo, e per questo puo' stare a 3,68:1.
     Il rame scuro e' la sua faccia leggibile, 6,62:1 su carta, e va
     su ogni collegamento dentro il testo.
     L'indaco e' l'intestazione: tutte le .label, i numeri romani, i
     titoli delle tavole. Misurato 9,54:1 su carta e 8,83:1 su carta
     scura, quindi regge anche a corpo piccolo. */
  --rame:#B87333;
  --rame-scuro:#8A4A22;
  --rame-velo:rgba(184,115,51,.22);
  --indaco:#2E4272;
  --indaco-velo:rgba(46,66,114,.14);

  /* ——— I quattro neutri, ognuno con un mestiere ——— */
  --inchiostro:#171512;   /* titoli, massimo contrasto */
  --testo:#2E2A22;        /* corpo del testo */
  --secondo:#5C5546;      /* glosse, didascalie, testo di servizio */
  --tenue:#746E60;        /* segni discreti, filetti, stati spenti (4,93:1) */

  /* ——— Caratteri ———
     EB Garamond sta davanti; quelle che seguono restano come rete di
     sicurezza per i pochi secondi in cui il file non e' ancora
     arrivato, e per chi naviga con i caratteri esterni spenti. */
  --serif:"EB Garamond","Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --maiuscoletto:"EB Garamond SC","EB Garamond",var(--serif);

  /* ——— Scala dei corpi · rapporto 1.25 ———
     La scala si trasporta INTERA, sempre: cambiare solo --t-0 sfascia
     i rapporti fra testo, titoli ed etichette. */
  --t--2:12.7px;
  --t--1:16.8px;
  --t-0:21px;
  --t-1:26.3px;
  --t-2:32.8px;
  --t-3:41px;
  --t-4:51.3px;
  --t-5:64.1px;
  --t-6:clamp(51px,8.8vw,97px);

  /* ——— Scala degli spazi · Fibonacci ——— */
  --s1:8px; --s2:13px; --s3:21px; --s4:34px;
  --s5:55px; --s6:89px; --s7:144px;

  /* ——— Gli stacchi, per funzione e non per grandezza ———
     Lo spazio e' punteggiatura: un a capo dove il discorso continua,
     un salto di pagina dove cambia. Messo ovunque uguale, lo spazio
     grande smette di dire qualcosa. */
  --stacco:var(--s5);
  --stacco-forte:96px;
  --apertura:104px;

  /* ——— Misure ———
     --colonna e' in em di proposito: si allarga insieme al corpo,
     quindi la riga resta di circa 66 caratteri e il testo cresce
     senza allungare la riga. Non convertirla mai in px. */
  --colonna:33em;
  --lettura:32em;
  --foglio:1180px;
}

/* ——— Una misura per la scrivania, una per la mano ———
   Sotto i 1024px tutte e nove le misure si moltiplicano per 20/21.
   Il confine 1024 e' l'unico numero da toccare se un giorno va
   spostato. Le altre soglie del foglio (560, 700, 900) riguardano la
   forma delle cose, non il corpo del testo. */
@media(max-width:1024px){
 :root{
  --t--2:12.1px;
  --t--1:16px;
  --t-0:20px;
  --t-1:25.1px;
  --t-2:31.2px;
  --t-3:39px;
  --t-4:48.9px;
  --t-5:61px;
  --t-6:clamp(49px,8.4vw,92px);
  --apertura:72px;
  --stacco-forte:72px;
 }
 .filetto span{font-size:13.7px}
}

/* ============================================================
   FONDAMENTA
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* Respiro delle ancore: chi arriva a una sezione da un rimando non
   deve trovarsela incollata al bordo dello schermo. */
[id]{scroll-margin-top:32px}

body{
  background:var(--carta);
  color:var(--testo);
  font-family:var(--serif);
  font-size:var(--t-0);
  line-height:1.7;
  font-variant-numeric:oldstyle-num proportional-nums;
  hanging-punctuation:first last;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip;
}

/* Rete di sicurezza: nessuna immagine puo' essere piu' larga della
   colonna che la contiene, qualunque cosa dica il resto del foglio. */
img{max-width:100%;height:auto}

::selection{background:var(--rame-velo);color:var(--inchiostro)}
:focus-visible{outline:2px solid var(--rame);outline-offset:3px;border-radius:1px}

/* Rete di sicurezza sui collegamenti: nessun link puo' cadere sul blu
   del browser, nemmeno se nasce in una pagina nuova senza classe. */
a{color:var(--rame-scuro);text-decoration-color:var(--rame-velo);text-underline-offset:3px}
a:hover{text-decoration-color:var(--rame)}

/* I comandi non ereditano il serif del corpo: il testo si legge, i
   comandi si usano. I campi in cui si scrive fanno eccezione. */
button,input[type=submit]{
  font-family:var(--sans);font-size:var(--t--1);letter-spacing:.06em;color:inherit;
  background:none;border:0;cursor:pointer}

/* ============================================================
   SALTO, NAVIGAZIONE, PIE'
   ============================================================ */
a.salta{position:absolute;left:-9999px;top:0;background:var(--carta);
  color:var(--inchiostro);padding:var(--s2) var(--s3);z-index:99;
  font-family:var(--sans);font-size:var(--t--1)}
a.salta:focus{left:var(--s3);top:var(--s2)}

.navbar{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0 var(--s4);
  padding:var(--s3) var(--s3) 0;
  font-family:var(--sans);font-size:var(--t--2);letter-spacing:.11em;
  text-transform:uppercase}
.navbar a{color:var(--secondo);text-decoration:none;padding:6px 0;white-space:nowrap}
.navbar a:hover,.navbar a[aria-current=page]{color:var(--indaco)}
.navbar a[aria-current=page]{box-shadow:inset 0 -1px 0 var(--rame)}

footer{
  border-top:1px solid rgba(152,145,126,.3);
  margin-top:var(--stacco-forte);
  padding:var(--s5) var(--s3) var(--s5);
  text-align:center}
/* LE DUE RIGHE DEL PIE' SONO LO STESSO COMPONENTE, e devono avere la
   stessa spaziatura intorno al punto di separazione.
   La trappola, trovata il 20 agosto 2026: nel sorgente, fra il link e il
   punto, non c'e' nessuno spazio. La riga di sopra e' una flex e il suo
   `gap` lo mette; la riga minore era un <p> in flusso normale, dove
   niente lo aggiunge, e le voci si toccavano: «Colophon·Athanor». Adesso
   le due righe condividono la stessa regola e lo stesso gap.
   Le larghezze sono in px e non in em di proposito: qui il corpo del
   testo e' piu' piccolo di quello della pagina, e `em` si misura su
   quello dell'elemento, quindi 52em qui non sono 52em altrove.
   900px e' misurato: la riga di nove voci, distesa, ne occupa 893, e
   sopra i 900 di finestra sta su una riga sola. Sotto va a capo, ed e'
   giusto cosi'; l'unico effetto e' che il punto di separazione puo'
   restare in fondo alla prima riga. */
footer .f-link,
footer .f-riga-minore{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:0 6px;max-width:900px;margin-left:auto;margin-right:auto;
  font-family:var(--sans);letter-spacing:.06em}
footer .f-link,footer .f-link a,footer .f-link span,
footer .f-riga-minore,footer .f-riga-minore a,footer .f-riga-minore span{
  font-size:var(--t--2)}
footer .f-riga-minore{margin-top:var(--s3);color:var(--tenue)}
footer a{color:var(--secondo);text-decoration:none}
footer a:hover{color:var(--rame-scuro);text-decoration:underline;
  text-decoration-color:var(--rame-velo);text-underline-offset:3px}
.f-sep{color:var(--tenue)}
.f-firma{display:block;margin-top:var(--s4);
  font-family:var(--maiuscoletto);font-size:var(--t--1);
  letter-spacing:.12em;color:var(--tenue)}

/* ============================================================
   IMPAGINAZIONE
   ============================================================ */
.wrap{max-width:var(--foglio);margin:0 auto;padding:0 var(--s4)}
.wrap.narrow{max-width:calc(var(--colonna) + var(--s5) * 2)}
main{display:block}

.testata{text-align:center;padding:var(--apertura) 0 var(--s5)}
.testata h1{margin-top:var(--s3)}

/* Lo stemma: gli involucri e il centro. Quattro anelli concentrici e
   un punto pieno, che e' il solo elemento che non e' un involucro.
   Regge a 24px e in un colore solo. */
.crest{width:64px;height:64px;display:block;margin:0 auto}
.crest-sm{width:28px;height:28px}

h1{
  font-size:var(--t-4);line-height:1.08;font-weight:500;
  color:var(--inchiostro);letter-spacing:-.012em;text-wrap:balance}
h1 .sub{display:block;font-size:var(--t-1);font-style:italic;font-weight:400;
  color:var(--secondo);letter-spacing:0;margin-top:var(--s2)}
.sottotitolo{
  font-size:var(--t-1);font-style:italic;color:var(--secondo);
  margin-top:var(--s2);text-wrap:balance}

h2{font-size:var(--t-2);line-height:1.16;font-weight:500;color:var(--inchiostro);
  letter-spacing:-.008em;text-wrap:balance}
h3{font-size:var(--t-1);line-height:1.24;font-weight:500;color:var(--inchiostro)}
h4{font-size:var(--t-0);font-weight:600;color:var(--inchiostro)}

/* L'etichetta: maiuscoletto disegnato, non maiuscolo di bastone.
   Il testo si scrive NORMALE, con la sola maiuscola iniziale: il
   maiuscoletto vive di quella differenza, e scriverlo gia' tutto
   maiuscolo lo fa tornare un blocco di capitali. */
.label{
  display:inline-block;
  font-family:var(--maiuscoletto);font-size:var(--t--1);
  letter-spacing:.12em;color:var(--indaco);line-height:1.4}
.label-tenue{color:var(--tenue)}

/* Il filetto col rombo, che separa senza gridare. */
hr.rule{border:0;height:1px;background:linear-gradient(to right,
  transparent,rgba(152,145,126,.45) 18%,rgba(152,145,126,.45) 82%,transparent);
  margin:var(--stacco) auto}
.filetto{display:flex;align-items:center;gap:var(--s3);
  margin:var(--stacco-forte) 0 var(--stacco);color:var(--tenue)}
.filetto::before,.filetto::after{content:"";flex:1;height:1px;
  background:rgba(152,145,126,.4)}
.filetto span{font-family:var(--sans);font-size:var(--t--2);
  letter-spacing:.2em;color:var(--rame)}

/* ============================================================
   IL TESTO
   ============================================================ */
.prosa{max-width:var(--colonna);margin-left:auto;margin-right:auto}
.prosa p{margin-top:var(--s3)}
.prosa p:first-child{margin-top:0}
.prosa h2{margin-top:var(--stacco-forte)}
.prosa h3{margin-top:var(--stacco);color:var(--indaco)}
.prosa h4{margin-top:var(--s4)}
.prosa ul,.prosa ol{margin-top:var(--s3);padding-left:1.4em}
.prosa li{margin-top:var(--s1)}
.prosa strong{font-weight:600;color:var(--inchiostro)}
.prosa em{font-style:italic}

.intro{font-size:var(--t-1);line-height:1.55;color:var(--secondo);
  margin-bottom:var(--stacco)}

/* Il rimando e' tipografico. Il bottone pieno e' raro: uno per pagina. */
.rimando{color:var(--rame-scuro);text-decoration:underline;
  text-decoration-color:var(--rame-velo);text-underline-offset:3px}
.rimando:hover{text-decoration-color:var(--rame)}

.cta-btn{display:inline-block;font-family:var(--sans);font-size:var(--t--1);
  letter-spacing:.08em;text-decoration:none;padding:var(--s2) var(--s4);
  background:var(--rame-scuro);color:var(--carta);border-radius:1px}
.cta-btn:hover{background:var(--inchiostro)}
.cta-btn.ghost{background:none;color:var(--rame-scuro);
  box-shadow:inset 0 0 0 1px var(--rame-velo)}
.cta-btn.ghost:hover{background:none;color:var(--inchiostro);
  box-shadow:inset 0 0 0 1px var(--rame)}

/* ============================================================
   LE CITAZIONI E I TRE REGISTRI
   Tre generi di riquadro, e si distinguono a colpo d'occhio:
   · blockquote nudo   = il testo dell'autore, alla lettera
   · .curatore         = la voce del curatore, filetto tratteggiato
   · .avvertenza       = quello che il sito dichiara di se'
   ============================================================ */
blockquote{
  margin:var(--s4) 0;padding-left:var(--s3);
  border-left:2px solid var(--rame-velo)}
blockquote p{margin-top:var(--s2)}
blockquote p:first-child{margin-top:0;font-size:var(--t-0);color:var(--inchiostro)}
blockquote p:last-child:not(:first-child){
  font-family:var(--sans);font-size:var(--t--2);letter-spacing:.03em;
  color:var(--secondo);line-height:1.6;margin-top:var(--s2)}

blockquote.curatore{
  border-left:2px dashed rgba(46,66,114,.35);background:none}
blockquote.curatore p:first-child{color:var(--testo);font-style:italic}
blockquote.curatore::before{
  content:"La voce del curatore";display:block;
  font-family:var(--maiuscoletto);font-size:var(--t--1);letter-spacing:.12em;
  color:var(--indaco);margin-bottom:var(--s1)}

.avvertenza{
  margin:var(--stacco) auto;max-width:var(--colonna);
  padding:var(--s3) var(--s4);background:var(--carta-scura);
  border-left:2px solid var(--rame);
  line-height:1.65;color:var(--secondo)}
.avvertenza{--corpo-piccolo:var(--t--1)}
.avvertenza p,.avvertenza li,.avvertenza a,.avvertenza>*{font-size:var(--t--1)}
/* il testo nudo, senza <p>, dentro il riquadro */
.avvertenza{font-size:var(--t-0)}
.avvertenza{line-height:1.65}
.avvertenza p+p{margin-top:var(--s2)}
.avvertenza .label{display:block;margin-bottom:var(--s1);font-size:var(--t--1)}

/* Il marchio del passo non verificato: sta accanto alla fonte e dice
   che quel passo viene da una scheda di lettura e non da un'edizione
   aperta. Non è una nota a piè di pagina, perché una nota si salta. */
.senza-pagina{display:block;margin-top:4px;font-style:italic;
  color:var(--rame-scuro)}

/* L'indice interno di una pagina lunga: un sommario, non una barra. */
.indice-pagina{margin:var(--stacco) 0;padding:var(--s3) 0;
  border-top:1px solid rgba(152,145,126,.3);
  border-bottom:1px solid rgba(152,145,126,.3)}
.indice-pagina .label{display:block;margin-bottom:var(--s2)}
.indice-pagina ol{list-style:none;padding:0;counter-reset:ip}
.indice-pagina li{counter-increment:ip;margin-top:var(--s1);
  font-size:var(--t--1)}
.indice-pagina li::before{content:counter(ip,upper-roman) ".";
  display:inline-block;width:2.4em;font-family:var(--maiuscoletto);
  letter-spacing:.08em;color:var(--indaco)}
.indice-pagina a{text-decoration:none;color:var(--testo)}
.indice-pagina a:hover{color:var(--rame-scuro)}

/* Le domande: numerate, larghe, con aria intorno. Una domanda
   stipata sembra retorica. */
.domande-el{list-style:none;padding:0;counter-reset:dm;
  margin-top:var(--s4)}
.domande-el > li{counter-increment:dm;position:relative;
  padding:var(--s3) 0 var(--s3) var(--s5);
  border-bottom:1px solid rgba(152,145,126,.22)}
.domande-el > li::before{content:counter(dm);position:absolute;left:0;
  top:var(--s3);font-size:var(--t-1);color:var(--rame);
  font-variant-numeric:oldstyle-num}

/* La nota di servizio, in fondo alle pagine.
   ATTENZIONE: --colonna e' in em, quindi si misura sul corpo
   DELL'ELEMENTO. Se il corpo piccolo si mette qui, il blocco si
   restringe del 20% e non si allinea piu' al testo sopra. Il corpo
   piccolo va sui figli. */
.nota{
  margin:var(--stacco) auto 0;max-width:var(--colonna);
  padding:var(--s3) 0 0;border-top:1px solid rgba(152,145,126,.3);
  line-height:1.65;color:var(--secondo)}
.nota p,.nota li,.nota a,.nota>*{font-size:var(--t--1)}
.nota .label{display:block;margin-bottom:var(--s1);font-size:var(--t--1)}

/* ============================================================
   IL SOMMARIO DA LIBRO
   Numeri romani, puntini di guida, niente riquadri.
   ============================================================ */
.sommario{list-style:none;padding:0;margin:var(--stacco) auto 0;
  max-width:var(--colonna)}
.sommario li{margin:0;padding:var(--s2) 0;
  border-bottom:1px solid rgba(152,145,126,.22)}
.sommario li:first-child{border-top:1px solid rgba(152,145,126,.22)}
.sommario a{display:flex;align-items:baseline;gap:var(--s2);
  text-decoration:none;color:var(--testo)}
.sommario a:hover .sm-t{color:var(--rame-scuro)}
.sm-n{flex:0 0 2.6em;font-family:var(--maiuscoletto);font-size:var(--t--1);
  letter-spacing:.1em;color:var(--indaco)}
.sm-t{font-size:var(--t-0);color:var(--inchiostro)}
.sm-p{flex:1;border-bottom:1px dotted rgba(152,145,126,.5);
  transform:translateY(-.28em)}
.sm-d{flex:0 0 auto;font-family:var(--sans);font-size:var(--t--2);
  letter-spacing:.05em;color:var(--tenue);white-space:nowrap}
.sm-sub{display:block;font-size:var(--t--1);color:var(--secondo);
  margin-top:2px;padding-left:calc(2.6em + var(--s2))}

/* ============================================================
   IL REGISTRO
   Le righe delle mappe: un numero in filigrana, un titolo, una riga
   di descrizione. Non sono riquadri e non si alzano al passaggio.
   ============================================================ */
.registro{list-style:none;padding:0;margin:var(--stacco) auto 0;
  max-width:var(--colonna)}
.registro > li{position:relative;padding:var(--s4) 0;
  border-bottom:1px solid rgba(152,145,126,.22)}
.registro > li:first-child{border-top:1px solid rgba(152,145,126,.22)}
.reg-n{position:absolute;right:0;top:var(--s3);
  font-size:var(--t-4);line-height:1;color:var(--rame);opacity:.16;
  font-variant-numeric:oldstyle-num;pointer-events:none}
.registro h3{font-size:var(--t-1);margin:0}
.registro h3 a{text-decoration:none;color:var(--inchiostro)}
.registro h3 a:hover{color:var(--rame-scuro)}
.reg-fonte{display:block;font-family:var(--maiuscoletto);font-size:var(--t--1);
  letter-spacing:.12em;color:var(--indaco);margin-bottom:4px}
.reg-d{margin-top:var(--s2);color:var(--secondo);font-size:var(--t--1);
  line-height:1.6;max-width:30em}

/* ============================================================
   I GRADINI DI UNA MAPPA
   Il piano piu' denso in alto, il piu' sottile in fondo. La riga di
   sinistra e' la scala, e si assottiglia salendo.
   ============================================================ */
.gradini{list-style:none;padding:0;margin:var(--stacco) auto 0;
  max-width:var(--colonna)}
.gradini > li{position:relative;padding:var(--s3) 0 var(--s3) var(--s4);
  border-left:2px solid var(--rame-velo)}
.gradini > li::before{content:"";position:absolute;left:-5px;top:calc(var(--s3) + .6em);
  width:8px;height:8px;border-radius:50%;background:var(--rame)}
.gradini .g-nome{font-size:var(--t-1);color:var(--inchiostro);line-height:1.3}
.gradini .g-orig{font-style:italic;color:var(--secondo)}
.gradini .g-et{display:block;font-family:var(--sans);font-size:var(--t--2);
  letter-spacing:.04em;color:var(--tenue);margin-top:4px}
.gradini .g-d{margin-top:var(--s2);color:var(--testo)}
.gradini .g-eco{margin-top:var(--s2);font-size:var(--t--1);color:var(--secondo);
  padding-left:var(--s3);border-left:1px dashed rgba(46,66,114,.3)}

/* ============================================================
   LA TAVOLA COMPARATA
   Su schermo largo e' una tabella. Sotto i 900px diventa un elenco
   di blocchi, uno per riga, perche' una tabella di sei colonne su un
   telefono non e' una tabella: e' un rebus.
   ============================================================ */
.tavola-wrap{margin:var(--stacco) 0}
table.comparata{width:100%;border-collapse:collapse;font-size:var(--t--1)}
table.comparata caption{
  font-family:var(--maiuscoletto);font-size:var(--t--1);letter-spacing:.12em;
  color:var(--indaco);text-align:left;padding-bottom:var(--s2)}
table.comparata th,table.comparata td{
  text-align:left;vertical-align:top;padding:var(--s2) var(--s2);
  border-bottom:1px solid rgba(152,145,126,.25)}
table.comparata thead th{
  font-family:var(--maiuscoletto);font-weight:400;letter-spacing:.1em;
  color:var(--indaco);border-bottom:1px solid var(--rame-velo);
  font-size:var(--t--1)}
table.comparata tbody th{
  font-family:var(--maiuscoletto);font-weight:400;letter-spacing:.08em;
  color:var(--indaco);white-space:nowrap}
table.comparata td em{font-style:italic;color:var(--secondo)}
table.comparata .vuoto{color:var(--tenue)}
table.comparata tbody tr:hover{background:var(--carta-scura)}

@media(max-width:900px){
  table.comparata,table.comparata thead,table.comparata tbody,
  table.comparata th,table.comparata td,table.comparata tr{display:block}
  table.comparata thead{position:absolute;left:-9999px}
  table.comparata tbody tr{
    border-bottom:1px solid rgba(152,145,126,.3);
    padding:var(--s3) 0;margin:0}
  table.comparata tbody tr:hover{background:none}
  table.comparata tbody th{padding:0 0 var(--s2);white-space:normal;
    font-size:var(--t-0)}
  table.comparata td{padding:4px 0 4px calc(9.5em + var(--s2));
    position:relative;border:0}
  table.comparata td::before{
    content:attr(data-col);position:absolute;left:0;top:4px;width:9.5em;
    font-family:var(--maiuscoletto);letter-spacing:.08em;color:var(--indaco)}
}

/* ============================================================
   IL LESSICO
   ============================================================ */
/* min(20em,100%) e non 20em: a 390px di schermo una colonna da 20em
   e' piu' larga della finestra, la griglia non si stringe e la pagina
   scorre di lato. Il min() la lascia rientrare. */
.termini{list-style:none;padding:0;margin:var(--stacco) auto 0;
  max-width:var(--foglio);
  display:grid;grid-template-columns:repeat(auto-fill,minmax(min(20em,100%),1fr));
  gap:0 var(--s5)}
.termini > li{padding:var(--s3) 0;border-bottom:1px solid rgba(152,145,126,.22)}
.termini h3{font-size:var(--t-0);margin:0;line-height:1.3}
.termini h3 a{text-decoration:none;color:var(--inchiostro)}
.termini h3 a:hover{color:var(--rame-scuro)}
.t-g{display:block;font-size:var(--t--1);font-style:italic;color:var(--tenue);
  margin-top:2px}
.t-d{margin-top:var(--s1);font-size:var(--t--1);line-height:1.6;color:var(--secondo)}

.voce-et{font-style:italic;color:var(--secondo);margin-top:var(--s2)}
.voce-rel{list-style:none;padding:0;margin:var(--s3) 0 0}
.voce-rel li{margin-top:var(--s1);font-size:var(--t--1)}
.voce-rel .rel-t{font-family:var(--maiuscoletto);letter-spacing:.1em;
  color:var(--indaco);margin-right:.5em}

/* ============================================================
   LE SCHEDE DEI LIBRI
   ============================================================ */
.schede{list-style:none;padding:0;margin:var(--stacco) auto 0;
  max-width:var(--colonna)}
.schede > li{padding:var(--s4) 0;border-bottom:1px solid rgba(152,145,126,.22)}
.schede > li:first-child{border-top:1px solid rgba(152,145,126,.22)}
.schede h3{font-size:var(--t-1);margin:0;line-height:1.25}
.schede h3 a{text-decoration:none;color:var(--inchiostro)}
.schede h3 a:hover{color:var(--rame-scuro)}
.sc-aut{display:block;font-family:var(--maiuscoletto);font-size:var(--t--1);
  letter-spacing:.12em;color:var(--indaco);margin-bottom:4px}
.sc-d{margin-top:var(--s2);color:var(--secondo);font-size:var(--t--1);
  line-height:1.6}
.scheda-dati{list-style:none;padding:0;margin:var(--s4) 0 0;
  font-size:var(--t--1);color:var(--secondo)}
.scheda-dati li{display:flex;gap:var(--s2);padding:6px 0;
  border-bottom:1px solid rgba(152,145,126,.18)}
.scheda-dati .dt{flex:0 0 9em;font-family:var(--maiuscoletto);
  letter-spacing:.1em;color:var(--indaco)}

/* ============================================================
   LA TAVOLA ILLUSTRATA
   Una per pagina al massimo, e la didascalia deve dire perche'
   l'immagine sta in quel punto.
   ============================================================ */
.figura{margin:var(--stacco) auto;max-width:var(--colonna)}
.figura img{display:block;width:100%;filter:sepia(.18) contrast(1.02)}
.figura figcaption{margin-top:var(--s2);font-size:var(--t--1);
  line-height:1.6;color:var(--secondo)}
.figura figcaption b{display:block;font-family:var(--maiuscoletto);
  font-weight:400;letter-spacing:.12em;color:var(--indaco)}

/* ============================================================
   CODA DI PAGINA
   ============================================================ */
.prossimo{margin:var(--stacco-forte) auto 0;max-width:var(--colonna);
  padding-top:var(--s4);border-top:1px solid rgba(152,145,126,.3)}
.prossimo .label{display:block;margin-bottom:var(--s2)}
.prossimo p{color:var(--secondo);margin-bottom:var(--s3)}
.torna{margin:var(--stacco) auto 0;max-width:var(--colonna);
  font-family:var(--sans);letter-spacing:.06em;color:var(--tenue)}
.torna a,.torna>*{font-size:var(--t--2)}
.torna a{color:var(--secondo);text-decoration:none}
.torna a:hover{color:var(--rame-scuro)}

.vicine{list-style:none;padding:0;margin:var(--s3) 0 0}
.vicine li{margin-top:var(--s1);font-size:var(--t--1)}

/* ============================================================
   LA CARTA
   ============================================================ */
@media print{
  .navbar,.salta,footer .f-link,.prossimo,.torna,.cta-btn{display:none}
  body{background:#fff;font-size:11pt}
  .wrap{max-width:none;padding:0}
  blockquote{break-inside:avoid}
  a{text-decoration:none;color:inherit}
  .prosa a::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* LE CIFRE NEL MAIUSCOLETTO, e una trappola verificata.
   EB Garamond ha le cifre antiche come predefinite, e nel maiuscoletto
   una cifra antica ha la stessa altezza delle piccole capitali: «Piano 1»
   si legge «Piano i». La via d'uscita ovvia, `font-variant-numeric:
   lining-nums`, NON funziona: controllate le tavole GSUB dei woff2, la
   faccia del maiuscoletto ha solo calt, liga e locl, e nemmeno la faccia
   normale ha `lnum`. Le cifre allineate in questo carattere non esistono.
   Quindi: nel maiuscoletto i numeri si scrivono in lettere. Vale per le
   etichette, le didascalie e le intestazioni delle tabelle. Nel corpo del
   testo, in tondo, le cifre antiche vanno benissimo. */

/* Il titolo di un elenco lungo: c'è per la scala dei titoli, non per
   la voce. Un h1 seguito da una fila di h3 salta un gradino, e chi usa
   un lettore di schermo lo sente. */
.titolo-elenco{margin-top:var(--stacco);font-size:var(--t-1);
  color:var(--indaco);text-align:center}