/* ════════════════════════════════════════════════════════════
   IL FOGLIO DEL LESSICO
   ════════════════════════════════════════════════════════════
   Questo stile viveva dentro il <style> di ognuna delle ottantotto
   pagine del lessico: l'elenco e le ottantasette voci. Erano 10,4 KB
   ripetuti ottantotto volte, cioe' 928 KB che il browser scaricava
   di nuovo a ogni voce aperta, e che invece puo' scaricare una volta
   sola e tenere per un anno, come athanor.css.

   Uscito di li' il 21 agosto 2026. La regola in _headers e' passata
   da /assets/athanor.css a /assets/*.css, quindi anche questo file
   viaggia con le stesse istruzioni: immutable per un anno, e il
   segnalibro nell'indirizzo che lo rinnova quando cambia.

   Chi lo scrive: nessuno. E' un file sorgente come athanor.css, si
   modifica a mano. tools/lessico_pagine.js non lo copia piu' dentro
   le pagine: ci mette un <link>.
   ════════════════════════════════════════════════════════════ */
/* ——— Stile proprio del Lessico ———
   Il foglio condiviso porta il sistema; qui c'è solo ciò che esiste
   soltanto in questa pagina.

   Prima ogni voce era un riquadro bordato con fondo bianco, e in
   fila ce n'erano settantasette: la forma di un catalogo di
   prodotti. Un dizionario non ha riquadri: ha una colonna, il
   termine che sporge a sinistra, e il bianco che separa. */

/* La barra dei controlli smette di sembrare un'applicazione: il
   campo è una riga con un filetto sotto, non una scatola bianca. */
.controlli{position:sticky;top:0;z-index:3;background:var(--carta);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--oro-velo);
  padding:var(--s2) 0;margin-top:var(--s4)}
.controlli .riga{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.cerca{flex:1 1 16em;padding:10px 4px;border:0;
  border-bottom:1px solid rgba(139,105,20,.35);background:none;
  font-family:var(--serif);font-size:var(--t-0);color:var(--inchiostro);
  outline:none;transition:border-color .25s}
.cerca:focus{border-bottom-color:var(--oro);box-shadow:none}
.cerca::placeholder{color:var(--tenue);font-style:italic}
.viste{display:flex;gap:var(--s3)}
.vista-btn{background:none;border:0;padding:8px 2px;font-family:var(--sans);
  font-size:var(--t--2);letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--tenue);cursor:pointer;
  border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.vista-btn:hover{border-color:transparent;color:var(--oro-scuro)}
.vista-btn.attiva{background:none;color:var(--inchiostro);border-bottom-color:var(--oro)}
.esito{margin-top:var(--s2);font-family:var(--sans);font-size:var(--t--2);
  letter-spacing:.1em;color:var(--tenue)}

/* L'alfabeto: settantasette voci in una pagina, e per arrivare alla
   P si scorreva. Ventisei caratteri risolvono. Le lettere senza voci
   restano, spente: dicono che il lessico non le ha. */
.alfabeto{display:flex;flex-wrap:wrap;gap:1px;margin-top:var(--s2)}
.alfabeto a{font-family:var(--serif);font-size:var(--t--1);color:var(--oro-scuro);
  text-decoration:none;padding:5px 7px;line-height:1;
  transition:background .2s,color .2s}
.alfabeto a:hover{background:var(--oro-velo);color:var(--inchiostro)}
.alfabeto span{font-family:var(--serif);font-size:var(--t--1);
  color:rgba(152,145,126,.42);padding:5px 7px;line-height:1}
@media(max-width:700px){.alfabeto a,.alfabeto span{padding:6px 5px;font-size:var(--t--2)}}
/* Al dito le lettere erano 18 per 24 pixel (misurato l'8 settembre
   2026): ognuna diventa un quadrato di 36, con lo stesso corpo.
   Sul telefono fanno tre righe di nove; quando la barra e' appiccicata
   in alto (classe posata dal motore) l'alfabeto si stringe a una riga
   sola che scorre di lato, cosi' la barra resta un filo. */
@media(pointer:coarse){
  .alfabeto{gap:2px}
  .alfabeto a,.alfabeto span{display:inline-flex;align-items:center;justify-content:center;
    min-width:36px;min-height:36px;padding:0}
}
@media(max-width:700px){
  .controlli.appiccicata .alfabeto{flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .controlli.appiccicata .alfabeto::-webkit-scrollbar{display:none}
  .controlli.appiccicata .esito{display:none}
  .controlli.appiccicata .alfabeto{margin-top:6px}
  /* Appiccicata, sul telefono, resta il filo: il campo e le lettere.
     Gli interruttori (ordine, esteso) si scelgono in cima, dove la
     barra e' intera; da meta' pagina servono la ricerca e il salto. */
  .controlli.appiccicata .riga .viste{display:none}
  .controlli.appiccicata .esito-riga{display:none}
}
/* Il conteggio a sinistra e l'interruttore «Per esteso» a destra,
   sulla stessa riga sotto l'alfabeto. */
.esito-riga{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin-top:var(--s2)}
.esito-riga .esito{margin-top:0;flex:1 1 auto}
.viste.estensione{flex:0 0 auto}
.viste.estensione .vista-btn{padding-top:4px;padding-bottom:4px}
@media(max-width:700px){
  .viste.estensione .lungo{display:none}
  .controlli.appiccicata .esito-riga{margin-top:6px}
}

/* ——— La piega (8 settembre 2026) ———
   Con JavaScript acceso (html.lessico-vivo) e senza «Per esteso»
   (#elenco.esteso), ogni voce mostra il capo e due righe della
   definizione; il resto del corpo aspetta un tocco. La voce aperta
   porta .aperta. Le pagine dei termini non passano di qui: non hanno
   ne' l'html.lessico-vivo ne' #elenco. */
html.lessico-vivo #elenco:not(.esteso) .voce{padding:var(--s3) 0}
html.lessico-vivo #elenco:not(.esteso) .v-capo{position:relative;padding-right:52px}
html.lessico-vivo #elenco:not(.esteso) .voce:not(.aperta) .v-corpo > :not(.def){display:none}
html.lessico-vivo #elenco:not(.esteso) .voce:not(.aperta) .def{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;cursor:pointer;color:var(--secondo)}
.v-apri{display:none}
html.lessico-vivo #elenco:not(.esteso) .v-apri{display:inline-flex;align-items:center;
  justify-content:center;position:absolute;right:-4px;top:-6px;width:44px;height:44px;
  background:none;border:0;cursor:pointer;color:var(--oro-scuro);
  font-family:var(--serif);font-weight:400;font-size:var(--t-1);line-height:1}
html.lessico-vivo #elenco:not(.esteso) .v-apri span{display:inline-block;
  transition:transform .25s ease}
html.lessico-vivo #elenco:not(.esteso) .v-apri:hover{color:var(--inchiostro)}
html.lessico-vivo #elenco:not(.esteso) .voce.aperta .v-apri span{transform:rotate(45deg)}
html.lessico-vivo #elenco:not(.esteso) .v-capo:hover h3 a{color:var(--oro-scuro)}
html.lessico-vivo #elenco:not(.esteso) .v-capo{cursor:pointer}
@media(prefers-reduced-motion:reduce){.v-apri span{transition:none}}

/* ——— Il dizionario ——— */
.lettera-testa{font-family:var(--serif);font-size:var(--t-2);color:var(--oro);
  max-width:var(--lettura);
  margin:var(--stacco) 0 var(--s2);padding-bottom:var(--s1);
  border-bottom:1px solid var(--oro-velo);font-variant-numeric:normal;
  scroll-margin-top:190px}
@media(max-width:700px){.lettera-testa{scroll-margin-top:130px}}
.lettera-testa:first-of-type{margin-top:var(--s4)}
.gruppo-testa{display:flex;align-items:baseline;gap:var(--s3);
  margin:var(--stacco) 0 var(--s2);max-width:var(--lettura)}
.gruppo-testa .label{white-space:nowrap}
.gruppo-testa hr{flex:1;height:1px;border:0;background:var(--oro-velo)}

/* Una colonna sola, a ogni larghezza. Le due colonne affiancate erano
   l'impianto dei dizionari a stampa, ma su schermo largo obbligavano
   l'occhio a un salto laterale a ogni voce, e la pagina cambiava forma
   a seconda della finestra: due letture diverse della stessa cosa.
   Con una colonna il termine sta sopra e la definizione sotto, sempre,
   e la colonna di lettura resta della misura giusta invece di
   allargarsi a riempire lo spazio disponibile. */
.voce{display:block;max-width:var(--lettura);
  padding:var(--s4) 0;margin:0;border:0;background:none;
  border-top:1px solid rgba(152,145,126,.16);scroll-margin-top:190px}
@media(max-width:700px){.voce{scroll-margin-top:130px}}
.voce:first-of-type{border-top:0}
/* Il capo della voce e la definizione hanno bisogno di uno stacco
   vero, altrimenti il senso in corsivo e la prima riga della
   definizione sembrano lo stesso paragrafo. */
.v-capo{padding-bottom:var(--s2)}
.voce h3{font-family:var(--serif);font-weight:500;font-size:var(--t-1);
  line-height:1.15;color:var(--inchiostro);margin-bottom:var(--s2)}
.voce h3 a{color:inherit;text-decoration:none}
.voce h3 a:hover{color:var(--oro-scuro)}

/* Il segno dell'anello sta accanto al termine, sulla sua riga:
   appartiene alla voce, non al margine. L'allineamento è ottico e
   non alla linea di base, altrimenti un cerchio accanto a una
   maiuscola sembra sempre caduto in basso. È la mappa delle
   tradizioni in diciannove pixel: quattro cerchi concentrici con
   acceso quello della voce, il sigillo per il registro della
   scuola. Prima era una pillola piena d'oro ripetuta settantasette
   volte, che pesava come un'etichetta di prezzo. */
.anello{display:inline-block;width:19px;height:19px;
  vertical-align:-.16em;margin-right:9px;flex:0 0 auto}
.anello circle{fill:none;stroke:rgba(152,145,126,.4);stroke-width:1}
.anello .acceso{stroke:var(--oro);stroke-width:1.8}
.anello .pieno{fill:var(--oro);stroke:none}

/* La grafia d'origine è la cosa più bella del lessico, e stava in
   grigio a 14,5px sotto il titolo. Ora: se la voce ha una parola in
   una scrittura non latina (λόγος, ब्रह्मन्, תיקון, فناء), quella
   parola *è* il termine in un altro alfabeto e va grande. Se c'è
   solo un'etimologia (Soglia da solea), darle risalto sposterebbe
   l'occhio sulla parola sbagliata: sta su una riga piccola. */
.grafia{margin-bottom:3px}
.v-scrittura{display:block;font-family:var(--serif);font-size:var(--t-2);
  line-height:1.5;color:var(--oro-scuro);letter-spacing:.01em;
  word-break:break-word;margin-bottom:7px}
/* Le scritture non latine hanno segni che salgono e scendono più dei
   nostri: a riga stretta si tosano contro la riga sopra. */
.v-scrittura:lang(ar),.v-scrittura:lang(he),.v-scrittura:lang(sa){line-height:1.8}
.v-etimo{display:block;font-family:var(--serif);font-style:italic;
  font-size:var(--t--1);color:var(--secondo);line-height:1.55}
.v-etimo .lingua{font-family:var(--sans);font-style:normal;font-size:var(--t--2);
  letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.v-etimo .lingua::after{content:" · ";letter-spacing:0}

.voce .def{font-family:var(--serif);font-size:var(--t-0);color:var(--testo);
  line-height:1.68}
.voce .def em{font-style:italic;color:var(--secondo)}

/* ——— Le quattro relazioni ———
   Il lessico distingue quattro modi in cui due voci si toccano:
   «vedi anche» (169 volte), «specchio» (45), «convergenza
   strutturale» (20), «per contrasto» (12). È la ricchezza
   intellettuale di tutto il lessico, e stava in grigio di dieci
   pixel fra parentesi tonde, dove nessuno la leggeva. Ora ogni
   relazione ha il suo segno, spiegato una volta sola in coda. */
.v-rete{margin-top:var(--s2);display:flex;flex-wrap:wrap;gap:6px 16px;
  font-family:var(--sans);font-size:var(--t--1)}
.rel{display:inline-flex;align-items:baseline;gap:6px;text-decoration:none;
  color:var(--secondo);border-bottom:1px solid transparent;transition:.25s}
.rel:hover{color:var(--inchiostro);border-bottom-color:var(--oro)}
.rel .segno{font-family:var(--serif);font-size:var(--t-0);color:var(--oro);
  width:1em;text-align:center;flex:0 0 auto}
.sez-min{margin-top:var(--s2);font-family:var(--sans);font-size:var(--t--1);
  color:var(--tenue);line-height:1.6}
.sez-min .mini-label{font-size:var(--t--2);letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--oro-scuro);
  display:block;margin-bottom:3px}
.sez-min a{color:var(--secondo);text-decoration:none;
  border-bottom:1px solid var(--oro-velo)}
.sez-min a:hover{color:var(--inchiostro);border-bottom-color:var(--oro)}

/* ——— Il rimando dentro l'anno ———
   Alcune voci hanno un seguito dentro un anno: la nota o la
   pratica che tratta quel tema, e che vive dietro la password.
   Qui si dice che c'è e in quale anno, non come si chiama: i
   titoli dietro la soglia restano dietro la soglia, come nel
   velo degli indici. */
.v-anni a.v-anno{display:inline-flex;align-items:center;gap:6px;
  margin-right:14px;border-bottom-color:transparent}
.v-anni a.v-anno:hover{border-bottom-color:var(--oro)}
.v-anno .v-lucchetto{width:9px;height:11px;flex:0 0 auto;
  color:var(--oro-scuro);opacity:.85}

/* ——— La stanza ———
   Pochissime voci hanno una pagina propria, e quella pagina non sta
   in nessun menu: la voce è la sua unica porta. Perciò il rimando non
   può somigliare alle voci correlate né alla riga «dove lavora», che
   sono servizio: sta sopra entrambe, in un blocco con il filetto
   d'oro a sinistra, perché chi legge la voce veda che di qui si
   passa. Il segno › è una porta socchiusa e nient'altro. */
.v-stanza{margin-top:var(--s3);padding:var(--s2) 0 var(--s2) var(--s3);
  border-left:2px solid var(--oro)}
.v-stanza a{display:inline-flex;align-items:baseline;gap:9px;
  font-family:var(--serif);font-size:var(--t--1);line-height:1.55;
  color:var(--oro-scuro);text-decoration:none;transition:color .25s}
.v-stanza a:hover{color:var(--inchiostro)}
.v-stanza .porta{font-family:var(--serif);font-size:var(--t-0);color:var(--oro);
  flex:0 0 auto;transition:transform .25s}
.v-stanza a:hover .porta{transform:translateX(3px)}

.voce.lampo{animation:lampo 2s ease}
@keyframes lampo{0%{background:rgba(201,168,76,.16)}100%{background:transparent}}
.vuoto{margin:var(--s6) 0;text-align:center;font-family:var(--serif);
  font-style:italic;color:var(--secondo)}

/* ——— La legenda dei segni ——— */
.legenda-segni{max-width:38em;margin:var(--stacco-forte) auto var(--stacco);
  padding:var(--s4);border:1px solid var(--oro-velo);background:var(--carta-scura)}
.legenda-segni .label{display:block;margin-bottom:var(--s3)}
.leg-riga{display:grid;grid-template-columns:2em 11em 1fr;gap:var(--s2);
  align-items:baseline;padding:7px 0;font-size:var(--t--1);color:var(--secondo)}
@media(max-width:640px){
  .leg-riga{grid-template-columns:2em 1fr}
  .leg-riga i{grid-column:2}
  .leg-riga em{grid-column:1/-1;padding-left:2.6em}
}
.leg-riga b{font-family:var(--serif);font-size:var(--t-1);color:var(--oro);
  text-align:center;font-weight:400}
.leg-riga i{font-style:normal;font-family:var(--sans);font-size:var(--t--2);
  letter-spacing:.16em;text-transform:uppercase;color:var(--oro-scuro);font-weight:700}
.leg-riga em{font-style:normal}
.leg-riga em a{color:var(--oro-scuro);text-decoration-color:rgba(139,105,20,.4);
  text-underline-offset:3px}
.leg-riga em a:hover{color:var(--oro)}
.leg-anelli{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid var(--oro-velo)}