/* ============================================================
   I CARATTERI
   Fraunces per i titoli — ha una personalità che i serif di
   sistema non hanno, e un corsivo che qui si usa molto.
   Newsreader per la lettura, disegnato per lo schermo.
   ⚠️ Ospitati sul nostro server, non chiamati da Google: una
   dipendenza esterna in meno e nessun collegamento da aprire.
   ⚠️ Ridotti ai soli caratteri che il sito usa — compresi i
   diacritici sanscriti, che stanno fuori dal latino di base e
   senza i quali «kuṇḍalinī» sarebbe uscita con un altro font.
   Da 740 KB a 208.
   ============================================================ */
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('/font/fraunces-roman.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:300 700;
  font-display:swap;src:url('/font/fraunces-italic.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:300 600;
  font-display:swap;src:url('/font/newsreader-roman.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:300 600;
  font-display:swap;src:url('/font/newsreader-italic.woff2') format('woff2');
}

/* ============================================================
   LA GUIDA — stesso mondo della home, ma qui si legge.
   Regola che governa tutto il foglio: la scena sta DIETRO alla
   testata e sparisce quando comincia il testo. Le particelle
   dietro duemila parole sono nemiche di chi legge.
   ============================================================ */

:root{
  /* ⚠️ Stessa palette della home: bruno e lacca, non più verde-museo.
     Le due parti del sito devono stare nello stesso mondo, o passando
     da una guida alla home si cambia pianeta. */
  --notte:#140A08;
  --bruno:#1F110D;
  --lacca:#8E2318;
  --lacca-viva:#A8342A;
  --verde:#2E4A38;        /* contrappunto raro */
  --crema:#F3E3CC;
  --sabbia:#E8B96F;
  --zafferano:#E0913C;
  --oro:#E8B96F;
  --ottone:#C98A44;
  --carta:#F7F1E4;        /* la carta si scalda: era grigia */
  --inchiostro:#2A1710;
  --inchiostro-tenue:#6B5344;
  --filo:rgba(42,23,16,.15);
  --serif:'Fraunces',"Iowan Old Style",Palatino,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --sans:'Newsreader',"Iowan Old Style",Georgia,serif;

  /* ⚠️ Stavano dentro `body.home`: da lì le vedeva solo la home, e le
     altre 116 pagine trovavano i calc() con variabili vuote — cioè
     nessuna trasformazione, in silenzio. Qui li vedono tutte.
     ⚠️ --px/--py vanno ridichiarati anche senza @property (Firefox
     più vecchi non registra la regola @property e i calc() saltano). */
  --px:0;--py:0;--sy:0;
  /* ombre calde, a due stadi: la vicinanza si legge dall'ombra */
  --ombra-1:0 1px 2px rgba(8,3,1,.42), 0 10px 28px rgba(8,3,1,.30);
  --ombra-2:0 2px 6px rgba(8,3,1,.5), 0 22px 54px rgba(8,3,1,.42), 0 46px 92px rgba(8,3,1,.24);
  /* ⚠️ E su fondo scuro le ombre nere NON SI VEDONO: nero su nero non
     è profondità, è niente. Misurato a occhio sulle schede in coda a un
     articolo — avevo dato loro `--ombra-1` e non cambiava un pixel.
     Su scuro il rilievo lo fa la LUCE: un filo chiaro sul bordo alto,
     dove batterebbe, più un alone nero sotto che stacca dal fondo. */
  --rilievo-1:inset 0 1px 0 rgba(243,227,204,.07), 0 14px 34px rgba(6,2,1,.5);
  --rilievo-2:inset 0 1px 0 rgba(243,227,204,.16), 0 0 0 1px rgba(232,185,111,.14), 0 24px 56px rgba(6,2,1,.64);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--notte);color:var(--crema);
  font-family:var(--sans);font-size:19.5px;line-height:1.72;font-weight:380;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.lenis.lenis-smooth{scroll-behavior:auto !important}
img{max-width:100%;height:auto;display:block}

.contenitore{width:100%;max-width:1240px;margin-inline:auto;padding-inline:clamp(22px,5vw,44px)}

/* ---------- barra di lettura ---------- */
#progresso{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:70;
  background:linear-gradient(90deg,var(--lacca-viva),var(--zafferano));
}

/* ---------- barra ---------- */
.barra-alta{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px clamp(22px,5vw,44px);
  transition:background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.barra-alta.posata{background:rgba(20,10,8,.8);backdrop-filter:blur(14px);border-bottom-color:rgba(243,227,204,.14)}

/* ---------- la tendina del menu, sotto i 900px ---------- */
.apri-menu{
  display:none;background:none;border:0;cursor:pointer;padding:10px 6px;
  flex-direction:column;gap:5px;width:38px;align-items:flex-end;
min-width:44px;min-height:44px;justify-content:center;}
.apri-menu span{
  display:block;height:1.5px;background:var(--crema);border-radius:2px;
  transition:transform .38s cubic-bezier(.16,1,.3,1),width .38s,opacity .3s;
}
.apri-menu span:nth-child(1){width:22px}
.apri-menu span:nth-child(2){width:15px}
.apri-menu[aria-expanded="true"] span{width:22px}
.apri-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(3.25px) rotate(45deg)}
.apri-menu[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.25px) rotate(-45deg)}
.barra-alta.su-chiaro .apri-menu span{background:#2A1710}

.marchio{font-family:var(--serif);font-size:21px;color:var(--crema);text-decoration:none}
.marchio span{color:var(--sabbia)}
.voci{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.voci a{display:block;padding:9px 16px;border-radius:100px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(243,227,204,.72);transition:background .35s,color .35s}
.voci a:hover{background:rgba(243,227,204,.12);color:var(--crema)}
.voci a[aria-current="page"]{background:rgba(232,185,111,.2);color:var(--crema)}

/* ---------- TESTATA CINEMATOGRAFICA ---------- */
.testata{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  padding-bottom:clamp(60px,10vh,120px);overflow:hidden;
}
.testata .sfondo{position:absolute;inset:0;z-index:0}
.testata .sfondo img,.testata .sfondo video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);will-change:transform;
}
.testata .velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(20,10,8,.68) 0%,rgba(20,10,8,.18) 34%,rgba(20,10,8,.88) 82%,var(--notte) 100%),
    radial-gradient(76% 62% at 22% 62%,rgba(20,10,8,.76),transparent 68%);
}
.testata .contenitore{position:relative;z-index:2}
.briciole{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,227,204,.6);margin:0 0 26px}
.briciole a{color:var(--sabbia);text-decoration:none}
.testata h1,.cap-titolo,.titolo,.stacco p,.voce dt,.altra h3,.scheda h3{
  font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
}
.testata h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.4rem,1.3rem + 4.6vw,5.4rem);line-height:1.03;letter-spacing:-.028em;
  margin:0 0 30px;max-width:17ch;
}
.testata h1 em{font-style:italic;color:var(--sabbia)}
.dati{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,227,204,.66);display:flex;flex-wrap:wrap;gap:20px;margin:0}
.dati a{color:var(--sabbia);text-decoration:none}
.riga{display:block;overflow:hidden}
.riga > span{display:block;will-change:transform}

/* ---------- CORPO: qui si legge, e basta ---------- */
.corpo{background:var(--carta);color:var(--inchiostro);position:relative;z-index:3}
.corpo-interno{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,760px) minmax(0,1fr);
  padding-block:clamp(60px,9vh,110px);
}
.corpo-interno > *{grid-column:2}
/* ⚠️ Circoscritto al corpo: nella home «sommario» è il paragrafo
   dell'apertura, e il filetto ci finiva sopra dopo l'unificazione. */
.corpo .sommario{
  font-size:1.28rem;line-height:1.62;color:var(--inchiostro-tenue);
  border-left:3px solid var(--sabbia);padding-left:26px;margin:0 0 50px;
}
.corpo p{margin:0 0 26px}
.corpo h2{font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 60;font-size:clamp(1.75rem,1.2rem + 1.8vw,2.7rem);
  line-height:1.18;letter-spacing:-.02em;margin:64px 0 22px;scroll-margin-top:100px}
.corpo h3{font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 36;font-size:1.5rem;line-height:1.3;margin:44px 0 15px}
.corpo ul,.corpo ol{margin:0 0 26px;padding-left:1.3em}
.corpo li{margin-bottom:11px}
.corpo a{color:var(--lacca);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ottone)}
.corpo a:hover{color:var(--zafferano)}
.corpo strong{font-weight:600}

/* ---------- IMMAGINI: escono dalla colonna ---------- */
/* ⚠️ Le figure NON vanno a tutta pagina: su un monitor da 2560px una
   figura a larghezza piena, per giunta ingrandita del 16% per il
   parallasse, arrivava a 2970px contro una colonna di testo di 760.
   Quattro volte il testo, e più larga della finestra. Qui la figura
   sta in proporzione a ciò che accompagna: al massimo una volta e
   mezza la colonna, e mai più alta di due terzi di schermo. */
.figura{
  grid-column:1 / -1;
  width:min(1080px, 100%);
  margin:64px auto;
  overflow:hidden;position:relative;border-radius:14px;
  aspect-ratio:16 / 9;
  max-height:66svh;
}
.figura img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.08);will-change:transform;
}
.figura.stretta{
  grid-column:2;width:100%;max-width:none;border-radius:14px;aspect-ratio:3 / 2;
}
/* ⚠️ La didascalia sta FUORI dal riquadro ritagliato, o l'overflow
   hidden della figura se la mangia. */
.figura + .didascalia,
.figura figcaption{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-tenue);margin:14px auto 0;width:min(1080px,100%);
}
.mascherata{clip-path:inset(0 0 100% 0)}

/* ---------- riquadri e citazioni ---------- */
.riquadro{background:#F0E4D2;border-radius:18px;padding:32px 34px;margin:48px 0}
.riquadro h4{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lacca);margin:0 0 14px;font-weight:700}
.riquadro p:last-child{margin-bottom:0}
.riquadro.caldo{background:#EFDCC4}

/* la citazione rompe la colonna e va sul fondo scuro */
.citazione-piena{
  grid-column:1 / -1;margin:88px 0;padding:clamp(70px,11vh,130px) clamp(22px,5vw,44px);
  background:var(--notte);color:var(--crema);text-align:center;position:relative;overflow:hidden;
}
.citazione-piena p{
  font-family:var(--serif);font-style:italic;font-size:clamp(1.55rem,1rem + 2.4vw,3rem);
  line-height:1.22;letter-spacing:-.02em;margin:0 auto 22px;max-width:20ch;
}
.citazione-piena cite{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;font-style:normal;color:var(--ottone)}

/* ---------- indice laterale ---------- */
.indice-lato{
  position:fixed;left:clamp(16px,2.4vw,34px);top:50%;transform:translateY(-50%);
  z-index:50;max-width:210px;opacity:0;pointer-events:none;transition:opacity .5s;
}
.indice-lato.acceso{opacity:1;pointer-events:auto}
.indice-lato ol{list-style:none;margin:0;padding:0;counter-reset:v}
.indice-lato li{margin-bottom:11px}
.indice-lato a{
  display:flex;gap:10px;align-items:baseline;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(42,23,16,.68);transition:color .35s;line-height:1.4;
}
.indice-lato a::before{counter-increment:v;content:"0" counter(v);color:var(--zafferano);flex:0 0 auto}
.indice-lato a:hover{color:var(--lacca)}
.indice-lato a.qui{color:var(--lacca);font-weight:600}
.indice-lato a.qui::before{color:var(--ottone)}
@media (max-width:1400px){.indice-lato{display:none}}

/* ---------- coda: le altre guide ---------- */
.coda{background:var(--notte);color:var(--crema);padding-block:clamp(80px,12vh,150px);position:relative;z-index:3}
.coda .etichetta{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ottone);margin:0 0 34px}
.altre{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px}
.altra{
  position:relative;display:block;text-decoration:none;color:var(--crema);
  padding:44px 34px;min-height:270px;overflow:hidden;
  background:rgba(243,227,204,.045);
  transition:background .5s;
}
.altra:hover{background:rgba(243,227,204,.09)}
.altra .sf{position:absolute;inset:0;opacity:0;transition:opacity .6s;z-index:0}
.altra .sf img{width:100%;height:100%;object-fit:cover;filter:brightness(.48) saturate(1.05)}
.altra:hover .sf{opacity:1}
.altra > *{position:relative;z-index:1}
.altra .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--ottone);margin:0 0 20px}
.altra h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;line-height:1.2;margin:0 0 14px}
.altra p{margin:0;font-size:.96rem;color:rgba(243,227,204,.7)}
.altra .vai{margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sabbia);display:flex;gap:9px;align-items:center}
.altra .vai::after{content:"→";transition:transform .45s cubic-bezier(.16,1,.3,1)}
.altra:hover .vai::after{transform:translateX(7px)}

.piede{background:var(--notte);color:rgba(243,227,204,.5);padding-block:40px;
  border-top:1px solid rgba(243,227,204,.12);position:relative;z-index:3;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em}
.piede .contenitore{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between}

/* ---------- cursore ---------- */
#cursore{position:fixed;top:0;left:0;width:24px;height:24px;border-radius:50%;
  border:1px solid rgba(232,185,111,.6);pointer-events:none;z-index:80;
  transform:translate(-50%,-50%);transition:width .35s,height .35s,background .35s,border-color .35s;
  mix-blend-mode:difference}
#cursore.grande{width:58px;height:58px;background:rgba(232,185,111,.16)}
@media (hover:none){#cursore{display:none}}

@media (max-width:900px){
  body{font-size:18px}
  .corpo-interno{grid-template-columns:1fr;padding-inline:clamp(22px,5vw,44px)}
  .corpo-interno > *{grid-column:1}
  /* ⚠️ `.corpo-interno > *` pesa (0,1,0): il selettore universale non conta.
     Ogni blocco che si pianta da sé in colonna 2 con una classe sola pesa
     uguale, sta più in basso nel file e quindi VINCE. Il risultato non è
     che quel blocco resta a destra: è che si apre una colonna implicita e
     TUTTO il testo si stringe a metà schermo. Chi aggiunge un blocco con
     grid-column va aggiunto anche qui. */
  .corpo-interno > .nota-margine,
  .corpo-interno > .ricerca,
  .corpo-interno > .figura.stretta{grid-column:1}
  .figura{margin-inline:calc(clamp(22px,5vw,44px) * -1)}
  .figura.stretta{margin-inline:0}
  .citazione-piena{margin-inline:calc(clamp(22px,5vw,44px) * -1)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .mascherata{clip-path:none !important}
}

/* ⚠️ Il video di testata pesa 3 MB: parte solo su schermi larghi e solo quando
   serve. Sotto c'è sempre la sua fotografia — senza, chi ha i dati contati
   o il video bloccato vede un buco nero. */
.testata .sfondo .riserva{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.testata .sfondo video{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.testata .sfondo video.acceso{opacity:1}

/* ============================================================
   PAGINE INDICE — stesso mondo, ma qui si sceglie invece di leggere.
   Testata più bassa delle guide: non c'è un articolo da introdurre.
   ============================================================ */
.testata.corta{min-height:64svh;padding-bottom:clamp(48px,7vh,86px)}
.testata.corta h1{font-size:clamp(2.2rem,1.3rem + 4vw,4.6rem)}
.testata .sommario-testata{
  font-size:clamp(1.02rem,.95rem + .5vw,1.28rem);color:rgba(243,227,204,.8);
  max-width:56ch;margin:0;
}

/* --- schede grandi con fotografia --- */
/* ⚠️ `auto-fit` con un numero fisso di schede produce un orfano a QUALCHE
   larghezza: con quattro schede e tre colonne veniva 3 + 1, cioè l'esatto
   contrario di quello che dice il testo del blocco («la prima spiega di
   cosa parliamo, le altre sono le sezioni»). Adesso le colonne sono
   dichiarate, e la prima scheda occupa tutta la riga: 1 + 4, che si divide
   sia in due che in quattro e non lascia mai nessuno solo in fondo. */
.schede{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;margin-top:12px}
.schede > :first-child{grid-column:1 / -1}
@media (min-width:700px){.schede{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.schede{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scheda{
  position:relative;display:flex;flex-direction:column;min-height:430px;
  border-radius:22px;overflow:hidden;text-decoration:none;color:var(--crema);
  background:rgba(243,227,204,.05);border:1px solid rgba(243,227,204,.12);
  transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .5s;
}
.scheda:hover{transform:translateY(-8px);border-color:rgba(232,185,111,.42)}
.scheda .foto{position:absolute;inset:0;z-index:0}
.scheda .foto img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  filter:brightness(.5) saturate(1.05)}
.scheda:hover .foto img{transform:scale(1.13)}
.scheda .foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,10,8,.3) 0%,rgba(20,10,8,.72) 58%,rgba(20,10,8,.94) 100%);
}
.scheda > *{position:relative;z-index:1}
.scheda .testa{padding:34px 32px 0}
.scheda .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--sabbia);margin:0 0 20px}
.scheda h3{font-family:var(--serif);font-weight:400;font-size:1.9rem;line-height:1.16;margin:0 0 14px}
.scheda p{margin:0;font-size:.98rem;color:rgba(243,227,204,.78);line-height:1.68}
.scheda .coda-scheda{
  margin-top:auto;padding:26px 32px 30px;display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sabbia);
}
.scheda .coda-scheda .freccia{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.scheda:hover .coda-scheda .freccia{transform:translateX(7px)}

/* --- sezione su fondo notte, per gli indici --- */
.blocco{background:var(--notte);color:var(--crema);padding-block:clamp(52px,6.5vh,88px);position:relative;z-index:3}
.blocco .etichetta{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ottone);margin:0 0 24px}
.blocco h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,1.2rem + 2.4vw,3.2rem);
  line-height:1.12;letter-spacing:-.022em;margin:0 0 20px;max-width:20ch}
.blocco h2 em{font-style:italic;color:var(--sabbia)}
.blocco .testo{font-size:1.05rem;color:rgba(243,227,204,.76);max-width:58ch;margin:0 0 44px}

/* --- elenco dei titoli in arrivo --- */
.in-arrivo{list-style:none;margin:0;padding:0;border-top:1px solid rgba(243,227,204,.14)}
.in-arrivo li{
  border-bottom:1px solid rgba(243,227,204,.14);padding:22px 0;
  display:flex;gap:22px;align-items:baseline;
}
.in-arrivo .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;color:var(--ottone);flex:0 0 auto}
.in-arrivo .tit{font-family:var(--serif);font-size:1.32rem;line-height:1.3;flex:1}
.in-arrivo .quando{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,227,204,.45);flex:0 0 auto}

/* --- pagina di testo semplice sul chiaro --- */
.corpo.semplice .corpo-interno{padding-block:clamp(56px,8vh,96px)}
.corpo blockquote{
  margin:44px 0;padding:30px 34px;background:#F0E4D2;border-radius:18px;border:1px solid var(--filo);
}
.corpo blockquote p{font-family:var(--serif);font-size:1.3rem;line-height:1.48;font-style:italic;margin:0}

@media (max-width:900px){
  .in-arrivo li{flex-wrap:wrap;gap:10px}
  .in-arrivo .quando{width:100%}
}

.bottone-chiaro{
  display:inline-block;padding:15px 30px;border-radius:100px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:transparent;color:var(--zafferano);border:1px solid rgba(224,145,60,.5);
  transition:background .4s,color .4s,transform .4s cubic-bezier(.16,1,.3,1);
}
.bottone-chiaro:hover{background:var(--zafferano);color:#2A1408;transform:translateY(-3px)}

/* ============================================================
   IL GLOSSARIO — un elenco, non un testo lungo.
   Le voci hanno bisogno di stacco fra loro e di un termine che
   si trovi con l'occhio scorrendo: la colonna di lettura da 760px
   qui diventerebbe un muro.
   ============================================================ */
.corpo .glossario{margin:0 0 60px;max-width:none}
.voce{
  display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:28px;
  padding:26px 0;border-top:1px solid var(--filo);align-items:start;
}
.voce:last-child{border-bottom:1px solid var(--filo)}
.voce dt{
  font-family:var(--serif);font-size:1.42rem;line-height:1.2;color:var(--lacca);
  margin:0;position:sticky;top:96px;
}
.voce dd{margin:0;font-size:1rem;line-height:1.75;color:var(--inchiostro)}
.voce dd em{color:var(--inchiostro-tenue)}
.corpo .glossario + h2{margin-top:12px}

/* l'indice del glossario, in cima */
.indice-glossario{
  display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0 0 56px;padding:0;
}
.indice-glossario a{
  display:block;padding:10px 18px;border-radius:100px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--lacca);background:rgba(142,35,24,.07);border:1px solid rgba(142,35,24,.18);
  transition:background .3s,color .3s;
}
.indice-glossario a:hover{background:var(--lacca);color:var(--carta)}

@media (max-width:820px){
  .voce{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .voce dt{position:static;font-size:1.3rem}
}

/* ============================================================
   ARTICOLI — più corti delle guide: niente indice laterale,
   testata più bassa, la data in evidenza perché qui conta.
   ============================================================ */
.testata.articolo{min-height:70svh;padding-bottom:clamp(50px,8vh,90px)}
.testata.articolo h1{font-size:clamp(2rem,1.3rem + 3.2vw,3.6rem);max-width:20ch}
.cluster{
  display:inline-block;padding:7px 15px;border-radius:100px;margin:0 0 22px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);background:rgba(232,185,111,.14);border:1px solid rgba(232,185,111,.3);
}
.corpo .rimando{
  margin:56px 0 0;padding:28px 32px;border-radius:18px;
  background:#F0E4D2;border:1px solid var(--filo);
}
.corpo .rimando h4{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lacca);margin:0 0 12px;font-weight:700;
}
.corpo .rimando p{margin:0}

/* elenco degli articoli */
.lista-articoli{list-style:none;margin:0;padding:0}
.lista-articoli li{border-top:1px solid rgba(243,227,204,.16)}
.lista-articoli li:last-child{border-bottom:1px solid rgba(243,227,204,.16)}
.lista-articoli a{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;
  padding:30px 0;text-decoration:none;color:var(--crema);transition:padding .45s cubic-bezier(.16,1,.3,1);
}
.lista-articoli a:hover{padding-left:18px}
.lista-articoli .tit{font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem);line-height:1.24}
.lista-articoli .sotto{display:block;margin-top:8px;font-size:.97rem;color:rgba(243,227,204,.7);max-width:60ch}
/* ⚠️ Era a 10px: sotto la soglia in cui un maiuscoletto spaziato si legge
   davvero. Sezione e durata sono le due cose che uno guarda per decidere se
   aprire — non sono una postilla. Stessa correzione fatta alla firma della
   citazione, per lo stesso motivo. */
.lista-articoli .meta{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ottone);white-space:nowrap;
}
@media (max-width:700px){
  .lista-articoli a{grid-template-columns:1fr;gap:10px}
}

/* ---------- piede completo: mappa del sito ---------- */
.piede-mappa{
  display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:40px;
  padding-block:56px 40px;
}
.piede-mappa h4{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);margin:0 0 18px;
}
.piede-mappa ul{list-style:none;margin:0;padding:0}
.piede-mappa li{margin-bottom:11px}
.piede-mappa a{color:rgba(243,227,204,.78);text-decoration:none;transition:color .3s;font-size:.97rem}
.piede-mappa a:hover{color:var(--oro)}
.piede-mappa .marchio{font-size:23px;display:inline-block;margin-bottom:14px}
.piede-mappa .nota{font-size:.94rem;line-height:1.7;color:rgba(243,227,204,.6);max-width:34ch;margin:0}
/* ⚠️ Il gradino a due colonne lasciava la terza da sola: tre colonne
   reggono fino a 640px, poi si impilano. */
@media (max-width:900px){.piede-mappa{gap:30px}}
@media (max-width:640px){.piede-mappa{grid-template-columns:1fr}}

/* ============================================================
   RIFINITURA EDITORIALE
   Il testo da solo, per quanto ben composto, resta un documento.
   Quello che segue serve a dargli il ritmo di una rivista: cose
   che spezzano, cose che sporgono, e una carta che non sia piatta.
   ============================================================ */

/* la carta prende una luce appena accennata dall'alto, non è un
   campo uniforme: su schermi grandi la differenza si sente */
.corpo{
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,252,246,.85), transparent 62%),
    var(--carta);
}

/* ---------- la frase che si stacca ---------- */
.stacco{
  grid-column:1 / -1;
  width:min(980px,100%);margin:64px auto;padding:0 clamp(20px,4vw,60px);
  text-align:center;position:relative;
}
.stacco p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.45rem,1.05rem + 1.7vw,2.5rem);line-height:1.28;
  letter-spacing:-.015em;color:var(--lacca);margin:0;max-width:24ch;margin-inline:auto;
}
.stacco::before,.stacco::after{
  content:"";display:block;width:52px;height:1px;margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--ottone),transparent);
}
.stacco::before{margin-bottom:30px}
.stacco::after{margin-top:30px}

/* ---------- la nota che sta a margine ----------
   ⚠️ Su schermi larghi la colonna di lettura lascia due fasce vuote
   di centinaia di pixel. Qui ci va la nota, come in un libro. */
.nota-margine{
  /* ⚠️ Due tentativi falliti prima di questo: grid-column 3 la manda SOTTO
     il testo (in griglia si occupa la prima riga libera), e float viene
     ignorato sui figli diretti di una griglia. Quello che funziona è
     tenerla nella colonna e darle un peso visivo diverso. */
  grid-column:2;
  margin:34px 0;padding:22px 26px;
  background:rgba(232,185,111,.13);
  border-left:3px solid var(--ottone);border-radius:0 14px 14px 0;
  font-size:.95rem;line-height:1.68;color:var(--inchiostro-tenue);
}
.nota-margine b{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--lacca);margin-bottom:9px;font-weight:700;
}
.nota-margine em{font-style:italic;color:var(--inchiostro)}

/* ⚠️ La tendina scatta a 1150px, non a 900 come il resto del sito.
   La soglia di un menu NON si eredita dal breakpoint generale: si
   misura su quanto è largo il menu, e cambia a ogni voce aggiunta.
   Storia: con sei voci servivano 896px e a 920 andavano a capo —
   barra alta 93px invece di 60, senza che niente desse errore.
   Portata a 1000. Poi è arrivata la settima voce (Occidente) e ne
   servono ~1010: la soglia è stata rialzata a 1150 per avere
   margine. ⚠️ Chi aggiunge una voce controlli di nuovo questo
   numero, o il menu si spezzerà in silenzio in una fascia stretta
   di larghezze che da scrivania non si vede mai. */
@media (max-width:1250px){
  /* ⚠️ Prima qui c'era `.voci{display:none}` e basta: sotto i 900px il menu
     spariva e NON veniva sostituito da niente — niente tendina, niente
     pulsante. Su telefono restava il solo marchio, e si navigava solo
     dai link dentro al testo. Su un sito che prende quasi tutto il
     traffico da ricerca mobile è un difetto grosso, e da scrivania non
     si vede. Con cinque voci in barra non ci stanno: tendina vera.
     ⚠️ La tendina è `absolute`, non `fixed`: `.barra-alta.posata` ha
     backdrop-filter, che rende la barra il containing block di ogni
     discendente fisso — un `fixed` qui dentro si aggancerebbe a lei
     invece che alla finestra. L'absolute non ha quel problema. */
  .barra-alta{gap:12px;padding-inline:clamp(16px,4vw,44px);flex-wrap:wrap}
  .barra-alta .marchio{font-size:18px}
  .apri-menu{display:flex}
  html.js .voci{
    display:block;position:absolute;top:100%;left:0;right:0;
    background:rgba(20,10,8,.97);border-bottom:1px solid rgba(243,227,204,.14);
    padding:10px clamp(16px,4vw,44px) 22px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .32s,transform .32s cubic-bezier(.16,1,.3,1),visibility .32s;
  }
  html.js .voci.aperto{opacity:1;visibility:visible;transform:none}
  .voci li{border-top:1px solid rgba(243,227,204,.1)}
  .voci li:first-child{border-top:0}
  .voci a{padding:15px 2px;font-size:11px;letter-spacing:.15em;border-radius:0}
  .voci a[aria-current="page"]{background:none;color:var(--oro)}
  html.menu-aperto{overflow:hidden}
}

/* ---------- i link che nessuno aveva vestito ----------
   ⚠️ Trovato solo guardando la pagina: il link dentro .sommario-testata
   usciva BLU, il colore di default del browser. Nessuna misura numerica
   lo avrebbe rivelato — i contrasti erano a posto, la struttura pure.
   Stessa situazione in .cap-testo, .rimando e .semplice: contenitori
   nati senza link dentro, a cui i link sono stati aggiunti dopo.
   La regola generale sta in fondo: qualunque <a> dentro al contenuto
   eredita il trattamento di casa, così un contenitore nuovo non può
   più ripresentare il problema. */

/* rete di sicurezza: nessun link deve mai uscire azzurro.
   ⚠️ Scritta la prima volta come `main a:not([class])…`, che pesa (0,1,2)
   e quindi BATTEVA `.sommario-testata a` (0,1,1): il link smetteva di
   essere blu e diventava crema, perdendo la distinzione. Una regola di
   sicurezza deve pesare MENO di quelle che protegge, non di più —
   altrimenti non è una rete, è un tappeto. Qui `main a` pesa (0,0,2)
   e sta prima, così chiunque la voglia sovrascrivere ci riesce. */
main a{color:inherit}

.sommario-testata a,
.cap-testo a,
.rimando a,
.semplice a,
.blocco .testo a{
  color:var(--oro);text-decoration:none;
  border-bottom:1px solid rgba(232,185,111,.4);
  padding-bottom:1px;transition:color .3s,border-color .3s;
}
.sommario-testata a:hover,
.cap-testo a:hover,
.rimando a:hover,
.semplice a:hover,
.blocco .testo a:hover{color:var(--crema);border-bottom-color:var(--crema)}

/* sul fondo chiaro degli articoli il colore è quello della lacca */
.corpo .rimando a,
.corpo .semplice a{
  color:var(--lacca);border-bottom-color:rgba(142,35,24,.35);
}
.corpo .rimando a:hover,
.corpo .semplice a:hover{color:var(--lacca-viva);border-bottom-color:var(--lacca-viva)}


/* ---------- «questo non viene dai tantra» ----------
   ⚠️ Il sito ha cento articoli che sostengono una tesi: il tantra non è
   una tecnica sessuale, e chi lo presenta così sta vendendo qualcosa.
   Dal momento in cui si aggiunge la parte pratica — sessuologia,
   anatomia, ricerca clinica — serve un segnale che dica, senza che il
   lettore debba dedurlo: QUESTO viene da un'altra parte. Senza il
   segnale il sito diventerebbe la cosa che ha passato cento articoli
   a smontare. Il .dalla-pratica marca l'esperienza personale, questo
   marca la ricerca contemporanea: due voci diverse, entrambe non-testi. */
.ricerca{
  grid-column:2;margin:52px 0;padding:28px 32px 30px;
  background:rgba(107,131,164,.07);
  border:1px solid rgba(107,131,164,.28);border-radius:16px;
}
.ricerca > b:first-child{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#41597B;margin-bottom:14px;font-weight:700;
}
.ricerca p{margin:0 0 14px;font-size:1.02rem;line-height:1.72;color:var(--inchiostro)}
.ricerca p:last-child{margin-bottom:0}
.ricerca .fonte{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(107,131,164,.22);
  font-size:.9rem;line-height:1.6;color:var(--inchiostro-tenue);
}
.ricerca a{color:#4A6488;border-bottom-color:rgba(74,100,136,.35)}
@media (max-width:900px){.ricerca{grid-column:1;padding:22px 22px 24px}}

/* ---------- la scheda del pilastro, in cima a ogni sezione ----------
   È il pezzo da cui si parte: deve pesare visivamente più della lista
   che lo segue, senza diventare un banner. Foto a sinistra, testo a
   destra, e sotto i 720px si impila. */
.scheda-pilastro{
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  /* ⚠️ Le righe vanno DICHIARATE: senza, `grid-row:1 / -1` sulla foto non
     fa niente, perché `-1` è l'ultima riga della griglia ESPLICITA e senza
     righe esplicite coincide con la prima. Il mio primo tentativo di
     chiudere il vuoto sotto la foto è passato senza effetto e senza errori. */
  grid-template-rows:1fr auto;
  gap:0;text-decoration:none;color:inherit;
  border:1px solid rgba(243,227,204,.16);border-radius:18px;overflow:hidden;
  background:rgba(243,227,204,.03);
  transition:border-color .45s,background .45s,transform .45s cubic-bezier(.16,1,.3,1);
}
.scheda-pilastro:hover{
  border-color:rgba(232,185,111,.45);background:rgba(232,185,111,.06);
  transform:translateY(-3px);
}
/* ⚠️ La scheda è una griglia a due colonne con TRE figli: foto, testo e
   «Leggi →». Il terzo sta in colonna 2, riga 2 — e sotto la foto restava
   una cella vuota di 53px di fondo, su tutte e cinque le sezioni.
   La foto deve occupare tutte le righe. */
.scheda-pilastro .foto{position:relative;min-height:230px;overflow:hidden;grid-row:1 / -1}
.scheda-pilastro .foto img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(.62) saturate(1.05);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
.scheda-pilastro:hover .foto img{transform:scale(1.06)}
.scheda-pilastro .testa{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.scheda-pilastro .n{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ottone);margin:0 0 14px;
}
.scheda-pilastro h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.2rem);
  line-height:1.16;letter-spacing:-.02em;margin:0 0 14px;color:var(--crema);max-width:22ch;
}
/* ⚠️⚠️ `.scheda-pilastro .testa > p` pesa (0,2,1) e scavalcava
   `.scheda-pilastro .n` (0,2,0): la sopralinea, progettata come
   maiuscoletto, veniva resa a 16,32px come il paragrafo. Nessun errore,
   solo un maiuscoletto sparito. Il `:not(.n)` dichiara chi è il bersaglio. */
.scheda-pilastro .testa > p:not(.n){
  margin:0;font-size:1.02rem;line-height:1.65;color:rgba(243,227,204,.7);max-width:46ch;
}
.scheda-pilastro .coda-scheda{
  grid-column:2;display:flex;align-items:center;gap:12px;
  padding:0 40px 34px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);
}
.scheda-pilastro .freccia{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.scheda-pilastro:hover .freccia{transform:translateX(6px)}
@media (max-width:720px){
  .scheda-pilastro{grid-template-columns:1fr;grid-template-rows:auto}
  .scheda-pilastro .foto{min-height:190px;grid-row:auto}
  .scheda-pilastro .testa{padding:28px 26px 0}
  .scheda-pilastro .coda-scheda{grid-column:1;padding:20px 26px 26px}
}

/* ---------- i filtri dell'archivio ----------
   Con dieci articoli una lista sola bastava. Da trenta in su serve
   poter dire «solo Tradizione» senza scorrere tutto. I numeri accanto
   a ogni voce li scrive il generatore dagli articoli veri. */
.filtri{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 38px;
}
/* ============================================================
   ⚠️⚠️ CHI NAVIGA DA TASTIERA NON VEDEVA DOVE SI TROVAVA.
   Misurato: `outline: none` su tutto, nessun box-shadow di ricambio.
   Con il Tab il fuoco esiste ma è invisibile — il sito diventa
   inutilizzabile senza mouse, e non se ne accorge nessuno perché
   con il mouse non si vede niente di rotto.
   `:focus-visible` compare solo con la tastiera: il mouse non lo attiva.
   ============================================================ */
:focus-visible{
  outline:2px solid var(--sabbia);
  outline-offset:3px;
  border-radius:3px;
}
.chiaro :focus-visible,.ng-vai:focus-visible{outline-color:var(--lacca)}

/* ⚠️ Bersagli a misura di dito: la soglia comoda è 44px. L'hamburger
   ne misurava 28 in altezza e i filtri 33 — su telefono si sbaglia. */
.filtro{
  appearance:none;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:100px;
  background:transparent;border:1px solid rgba(243,227,204,.2);
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,227,204,.72);
  transition:background .3s,border-color .3s,color .3s;
}
.filtro span{
  font-size:11px;letter-spacing:.06em;color:var(--ottone);
  padding-left:8px;border-left:1px solid rgba(243,227,204,.18);
}
.filtro:hover{border-color:rgba(232,185,111,.45);color:var(--crema)}
.filtro.attivo{
  background:rgba(232,185,111,.16);border-color:rgba(232,185,111,.5);color:var(--crema);
}
.filtro.attivo span{color:var(--oro);border-left-color:rgba(232,185,111,.35)}
/* ⚠️ le voci nascoste usano l'attributo hidden: senza questa riga il
   display:grid della lista lo scavalca e restano visibili lo stesso. */
.lista-articoli li[hidden]{display:none}
@media (max-width:560px){
  .filtri{gap:6px}
  .filtro{padding:9px 13px;font-size:11px;letter-spacing:.1em}
}

/* ---------- «dalla pratica»: la voce dell'esperienza, marcata ----------
   ⚠️ Deve essere IMPOSSIBILE confonderlo con una fonte. Il .riquadro è
   crema e discreto: serve a mettere in rilievo un ragionamento. Questo
   invece deve interrompere la lettura e dichiararsi — fondo in lacca
   tenue, etichetta in alto, e un bordo pieno su tutti i lati. È l'unica
   cosa che permette al sito di ospitare due voci senza mescolarle. */
.dalla-pratica{
  grid-column:2;margin:52px 0;padding:30px 32px 32px;
  background:rgba(142,35,24,.055);
  border:1px solid rgba(142,35,24,.22);border-radius:16px;
  position:relative;
}
.dalla-pratica > b:first-child{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lacca);margin-bottom:14px;font-weight:700;
}
.dalla-pratica p{margin:0 0 14px;font-size:1.02rem;line-height:1.72;color:var(--inchiostro)}
.dalla-pratica p:last-child{margin-bottom:0}
.dalla-pratica .avviso{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(142,35,24,.18);
  font-size:.92rem;line-height:1.6;color:var(--inchiostro-tenue);
}
@media (max-width:900px){.dalla-pratica{grid-column:1;padding:24px 22px 26px}}

/* ---------- «il gesto»: la pagina che si trasforma in una cosa da fare ----------
   Terza voce, e deve restare distinguibile dalle altre due: .ricerca è
   blu e riporta studi, .dalla-pratica è lacca e dichiara l'esperienza di
   chi scrive. Questo è ottone, chiude l'articolo, e contiene una cosa
   sola: il gesto che il pezzo permette al lettore di fare domani.
   ⚠️ Il titolo è su misura per ogni articolo. Un'etichetta fissa
   ripetuta cento volte diventa un'intestazione da manuale scolastico. */
.gesto{
  grid-column:2;margin:56px 0 0;padding:28px 32px 30px;
  background:rgba(201,138,68,.075);
  border:1px solid rgba(201,138,68,.32);border-radius:16px;
}
.gesto > b:first-child{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:#7A4E1A;margin-bottom:14px;font-weight:700;
}
.gesto p{margin:0 0 14px;font-size:1.02rem;line-height:1.72;color:var(--inchiostro)}
.gesto p:last-child{margin-bottom:0}
.gesto em{font-style:normal;font-weight:600;color:var(--lacca)}
@media (max-width:900px){.gesto{grid-column:1;padding:24px 22px 26px}}

/* ---------- i link dentro al testo: la riga si scrive sotto ---------- */
.corpo p a:not(.bottone):not(.bottone-chiaro),
.corpo li a{
  text-decoration:none;
  background-image:linear-gradient(var(--lacca),var(--lacca));
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .45s cubic-bezier(.16,1,.3,1), color .3s;
  padding-bottom:1px;
}
.corpo p a:not(.bottone):hover,.corpo li a:hover{
  background-size:0 1px;background-position:100% 100%;color:var(--zafferano);
}

/* ---------- il primo paragrafo dopo un titolo respira di più ---------- */
.corpo h2 + p{font-size:1.06rem}

/* ---------- gli elenchi ---------- */
.corpo ul{list-style:none;padding-left:0}
.corpo ul li{position:relative;padding-left:26px}
.corpo ul li::before{
  content:"";position:absolute;left:2px;top:.72em;width:7px;height:1px;background:var(--ottone);
}
.corpo ol{counter-reset:passo;list-style:none;padding-left:0}
.corpo ol li{position:relative;padding-left:38px;counter-increment:passo}
.corpo ol li::before{
  content:counter(passo,decimal-leading-zero);position:absolute;left:0;top:.15em;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--lacca);
}

/* ---------- il passaggio dalla carta al buio, sfumato ---------- */
.corpo::after{
  content:"";display:block;grid-column:1 / -1;height:120px;margin-bottom:-1px;
  background:linear-gradient(180deg,transparent,var(--notte));
}
.coda{margin-top:-1px}

.corpo .didascalia{
  grid-column:1 / -1;width:min(1080px,100%);margin:14px auto 64px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--inchiostro-tenue);max-width:min(1080px,100%);
}
.figura + .didascalia{margin-top:14px}


/* ============================================================
   ============  DA QUI IN GIÙ: SOLO LA HOME  =================
   Prima stava dentro index.html. Averlo separato significava
   riscrivere due volte ogni cosa condivisa — ed è così che
   l'elenco degli articoli è finito online senza stile.
   ⚠️ Le regole comuni (palette, barra, cursore, piede, marchio,
   lista degli articoli) NON si ripetono qui: stanno sopra.
   ============================================================ */

html{-webkit-text-size-adjust:100%}
/* Lenis possiede lo scroll: niente scroll-behavior CSS */
html.lenis,html.lenis body{height:auto}

.contenuto{position:relative;z-index:2}

/* ---------- velo di caricamento ---------- */
#velo{
  position:fixed;inset:0;z-index:100;background:var(--notte);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
}
#velo .parola{font-family:var(--serif);font-size:clamp(28px,5vw,46px);letter-spacing:.02em;opacity:.9}
#velo .barra{width:min(240px,54vw);height:1px;background:rgba(243,227,204,.18);overflow:hidden}
#velo .barra i{display:block;height:100%;width:0;background:var(--zafferano)}

/* ============================================================
   I CAPITOLI — ogni snodo è una stanza con la sua fotografia.
   Il pattern viene dai siti premiati: capitoli numerati a piena
   pagina invece di un elenco di sezioni tutte uguali.
   ============================================================ */
/* ⚠️ Era min-height:100svh. Misurato: 900px di altezza per 57-72 parole,
   con il testo che occupava il 25-29% — il resto vuoto. Tre capitoli di
   seguito così fanno scorrere tre schermate per leggere due paragrafi.
   A schermo pieno resta l'apertura, che è il colpo d'occhio. */
.capitolo{
  position:relative;min-height:min(72svh,760px);display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
.cap-foto{position:absolute;inset:0;z-index:0}
.cap-foto img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform}
.cap-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,10,8,.95) 0%,rgba(20,10,8,.74) 40%,rgba(20,10,8,.14) 74%,rgba(31,17,13,.46) 100%),
    linear-gradient(180deg,var(--notte) 0%,transparent 24%,transparent 74%,var(--notte) 100%);
}
.cap-testo{position:relative;z-index:2;max-width:1240px}
/* ⚠️ Si chiama ancora «num» per storia: prima conteneva «Capitolo I…V».
   Adesso porta il tema del blocco — questo è un portale, non un libro:
   chi arriva da una ricerca atterra a metà pagina e deve capire dov'è. */
.cap-num{
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sabbia);margin:0 0 28px;display:flex;align-items:center;gap:16px;
}
.cap-num::after{content:"";height:1px;width:74px;background:rgba(232,185,111,.5)}
.cap-titolo{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,1.3rem + 3.6vw,4.4rem);line-height:1.06;letter-spacing:-.026em;
  margin:0 0 26px;max-width:16ch;
}
.cap-titolo em{font-style:italic;color:var(--sabbia)}
.cap-corpo{font-size:clamp(1rem,.95rem + .4vw,1.2rem);color:rgba(243,227,204,.84);max-width:50ch;margin:0 0 34px}
.cap-vai{
  display:inline-flex;align-items:center;gap:14px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--oro);padding-bottom:8px;border-bottom:1px solid rgba(232,185,111,.45);
  transition:border-color .4s,color .4s;
}
.cap-vai:hover{color:var(--crema);border-bottom-color:var(--crema)}
.cap-vai .fr{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.cap-vai:hover .fr{transform:translateX(7px)}

/* --- le tre schede, ora con la fotografia --- */
/* ⚠️ Tre schede in due colonne fanno 2 + 1. Con un numero dispari si passa
   da una colonna a tre, senza fermarsi in mezzo. */
.schede-home{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:60px}
@media (min-width:860px){.schede-home{grid-template-columns:repeat(3,minmax(0,1fr))}}
.scheda-h{
  position:relative;display:flex;flex-direction:column;min-height:440px;
  border-radius:22px;overflow:hidden;text-decoration:none;color:var(--crema);
  border:1px solid rgba(243,227,204,.12);background:rgba(243,227,204,.04);
  transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .5s;
}
.scheda-h:hover{transform:translateY(-9px);border-color:rgba(232,185,111,.5)}
.scheda-h .foto{position:absolute;inset:0;z-index:0}
.scheda-h .foto img{width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform 1.1s cubic-bezier(.16,1,.3,1);
  filter:brightness(.52) saturate(1.05)}
.scheda-h:hover .foto img{transform:scale(1.13)}
.scheda-h .foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,10,8,.28) 0%,rgba(20,10,8,.7) 56%,rgba(20,10,8,.94) 100%)}
.scheda-h > *{position:relative;z-index:1}
.scheda-h .testa{padding:34px 32px 0}
.scheda-h .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--sabbia);margin:0 0 20px}
.scheda-h h3{font-family:var(--serif);font-weight:400;font-size:1.95rem;line-height:1.14;margin:0 0 14px}
.scheda-h p{margin:0;font-size:.98rem;color:rgba(243,227,204,.8);line-height:1.68}
.scheda-h .coda-scheda{margin-top:auto;padding:26px 32px 30px;display:flex;justify-content:space-between;
  align-items:center;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sabbia)}
.scheda-h .freccia{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.scheda-h:hover .freccia{transform:translateX(7px)}

/* ============================================================
   LO STACCO CHIARO — la pagina esce dal buio per una fascia sola.
   È quello che dà ritmo: senza, tutto lo scroll sta nella stessa
   penombra e l'occhio non ha dove riposare.
   ============================================================ */
.chiaro{
  position:relative;z-index:3;background:var(--crema-carta);color:#2A1710;
  padding-block:clamp(56px,7vh,96px);
}
.etichetta-scura{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--lacca);margin:0 0 60px}
.numeri-grandi{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
@media (min-width:780px){.numeri-grandi{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ng .cifra{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(3.4rem,2rem + 5.4vw,7rem);line-height:.92;letter-spacing:-.04em;
  color:var(--lacca);display:block;margin-bottom:22px;
}
.ng .cifra small{font-size:.34em;letter-spacing:0;color:var(--zafferano);vertical-align:middle}
.ng p{margin:0;font-size:1rem;line-height:1.72;color:#5A4034;max-width:34ch;
  padding-top:20px;border-top:1px solid rgba(42,23,16,.2)}

/* ⚠️ `.cifra` è tarata su numeri corti — «V–VI», «1969» — e arriva a 7rem.
   Con una parola al posto della cifra («Il desiderio») a quel corpo sfonda
   la colonna. Le idee hanno la loro misura. */
.ng.idea .cifra{font-size:clamp(1.9rem,1.3rem + 2vw,2.9rem);line-height:1.06;letter-spacing:-.025em}
.ng-vai{
  display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--lacca);text-decoration:none;
  border-bottom:1px solid rgba(42,23,16,.28);padding-bottom:3px;
  transition:color .35s,border-color .35s;
}
.ng-vai::after{content:" \2192"}
.ng-vai:hover{color:#2A1710;border-bottom-color:currentColor}

@media (max-width:900px){
  .capitolo{min-height:auto;padding-block:clamp(90px,16vh,150px)}
  .cap-velo{background:linear-gradient(180deg,rgba(20,10,8,.9) 0%,rgba(20,10,8,.7) 50%,rgba(20,10,8,.95) 100%)}
  .numeri-grandi{gap:40px}
}

/* ============================================================
   L'APERTURA — una fotografia a tutta pagina che respira.
   Prima c'era un campo di particelle in WebGL: bello da guardare
   una volta, freddo da guardare due. La materia funziona meglio,
   pesa 300 KB invece di mezzo megabyte di libreria, e va a
   sessanta fotogrammi anche su un telefono stanco.
   ============================================================ */
.apertura{
  position:relative;min-height:100svh;display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
.apertura-foto{position:absolute;inset:0;z-index:0}
.apertura-foto img{
  width:100%;height:100%;object-fit:cover;
  transform-origin:62% 45%;
  animation:respiro 34s ease-in-out infinite alternate;
  will-change:transform;
}
/* il respiro: nessun listener, nessun frame calcolato a mano */
@keyframes respiro{
  from{transform:scale(1.04)}
  to{transform:scale(1.13)}
}
.apertura-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(92deg,rgba(20,10,8,.96) 0%,rgba(20,10,8,.82) 34%,rgba(20,10,8,.28) 68%,rgba(20,10,8,.58) 100%),
    linear-gradient(180deg,rgba(20,10,8,.78) 0%,transparent 26%,transparent 62%,var(--notte) 100%);
}
.apertura .contenitore{position:relative;z-index:2}

/* la citazione: la fotografia dietro si allarga mentre leggi */
.citazione{position:relative;overflow:hidden;isolation:isolate}
.cit-foto{position:absolute;inset:0;z-index:0}
.cit-foto img{width:100%;height:100%;object-fit:cover;opacity:.2;will-change:transform}
.citazione::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(64% 54% at 50% 50%,rgba(20,10,8,.9),rgba(20,10,8,.55) 62%,var(--notte) 92%);
}
.citazione .contenitore{position:relative;z-index:2}

@media (prefers-reduced-motion:reduce){
  .apertura-foto img{animation:none;transform:scale(1.04)}
}
.lista-articoli a:hover .sotto{color:rgba(243,227,204,.8)}
@media (max-width:760px){
}
.barra-alta.su-chiaro{background:rgba(242,230,210,.92) !important;border-bottom-color:rgba(42,23,16,.16) !important}
.barra-alta.su-chiaro .marchio{color:#2A1710}
.barra-alta.su-chiaro .marchio span{color:var(--lacca)}
.barra-alta.su-chiaro .voci a{color:rgba(42,23,16,.72)}
.barra-alta.su-chiaro .voci a:hover{background:rgba(42,23,16,.09);color:#2A1710}

/* ---------- apertura ---------- */
.apertura{min-height:100svh;display:flex;align-items:center;position:relative}
.occhiello{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--sabbia);margin:0 0 30px}
.apertura h1,.cap-titolo,.titolo,.citazione p,.ng .cifra,.scheda-h h3{font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120}
.apertura h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.7rem,1.4rem + 5.4vw,6.4rem);line-height:1.02;letter-spacing:-.03em;
  margin:0 0 30px;max-width:15ch;
}
.apertura h1 em{font-style:italic;color:var(--sabbia)}
.apertura .sommario{font-size:clamp(1.02rem,.95rem + .5vw,1.3rem);color:rgba(243,227,204,.78);max-width:52ch;margin:0}
/* la riga di promessa sotto il sommario: è il posto dove starebbe un
   «numero uno». Ci sta un fatto controllabile, e pesa meno del sommario
   perché è una postilla, non il messaggio. */
.apertura .promessa{
  margin:22px 0 0;max-width:52ch;
  font-family:var(--mono);font-size:clamp(.72rem,.68rem + .18vw,.82rem);
  letter-spacing:.04em;line-height:1.85;color:rgba(243,227,204,.6);
}
.apertura .promessa strong{color:var(--ottone);font-weight:500}
.scendi{
  position:absolute;bottom:38px;left:clamp(22px,5vw,44px);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(243,227,204,.5);display:flex;align-items:center;gap:12px;
}
.scendi::after{content:"";width:52px;height:1px;background:rgba(243,227,204,.3);transform-origin:left}

/* ---------- sezioni ---------- */
.sezione{padding-block:clamp(56px,7vh,96px);position:relative}
/* il testo lungo ha bisogno di staccarsi dal campo, o si legge a fatica */
.sezione .contenitore > *{position:relative;z-index:1}
.sezione::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background:radial-gradient(78% 62% at 26% 50%,rgba(20,10,8,.88),rgba(20,10,8,.5) 46%,transparent 74%);
}
.citazione::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 48% at 50% 50%,rgba(20,10,8,.86),transparent 72%);
}
.citazione{position:relative}
.etichetta{font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ottone);margin:0 0 26px}
.titolo{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,1.3rem + 3vw,4rem);
  line-height:1.08;letter-spacing:-.024em;margin:0 0 24px;max-width:19ch}
.titolo em{font-style:italic;color:var(--sabbia)}
.testo{font-size:1.06rem;color:rgba(243,227,204,.76);max-width:58ch;margin:0}

/* ---------- le tre vie ---------- */
.vie{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:64px}
.via{
  position:relative;display:flex;flex-direction:column;min-height:400px;
  padding:36px 32px;border-radius:24px;text-decoration:none;color:inherit;overflow:hidden;
  background:rgba(243,227,204,.045);
  border:1px solid rgba(243,227,204,.12);
  transition:transform .7s cubic-bezier(.16,1,.3,1),border-color .5s,background .5s;
}
.via::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s;
  background:radial-gradient(120% 90% at 50% 0%,rgba(168,52,42,.28),transparent 62%);
}
.via:hover{transform:translateY(-8px);border-color:rgba(232,185,111,.45);background:rgba(243,227,204,.07)}
.via:hover::before{opacity:1}
.via .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--ottone);margin:0 0 22px;position:relative}
.via h3{font-family:var(--serif);font-weight:400;font-size:1.95rem;line-height:1.16;margin:0 0 16px;position:relative}
.via p{margin:0;font-size:.99rem;color:rgba(243,227,204,.7);line-height:1.7;position:relative}
.via .vai{
  margin-top:auto;padding-top:28px;font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sabbia);display:flex;align-items:center;gap:10px;position:relative;
}
.via .vai::after{content:"→";transition:transform .45s cubic-bezier(.16,1,.3,1)}
.via:hover .vai::after{transform:translateX(7px)}

/* ---------- citazione a tutta pagina ---------- */
.citazione{padding-block:clamp(64px,7vh,110px);text-align:center}
/* ⚠️⚠️ `max-width:22ch` stava sul BLOCKQUOTE, e i `ch` si calcolano sul
   font EREDITATO (~17px), non sui 58px della citazione. Veniva fuori una
   colonna di 236px con dentro un carattere da 58px: una frase di trentun
   caratteri finiva su TRE righe e la firma si spezzava a metà. Il blocco
   sembrava buttato lì perché era malformato, non perché fosse brutto.
   La misura va data all'elemento che ha quel corpo, non al suo contenitore. */
.citazione blockquote{margin:0}
.citazione p{font-family:var(--serif);font-size:clamp(1.8rem,1.1rem + 3.2vw,4rem);line-height:1.16;
  letter-spacing:-.02em;font-style:italic;margin:0 0 34px;color:var(--crema);
  max-width:17ch;margin-inline:auto}
/* la firma è la fonte, e su questo sito la fonte non è mai una postilla:
   10,5px la rendevano illeggibile e la mandavano a capo */
.citazione cite{
  display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;font-style:normal;color:var(--sabbia);
}
.citazione cite::before{
  content:"";display:block;width:44px;height:1px;margin:0 auto 20px;
  background:linear-gradient(90deg,transparent,var(--ottone),transparent);
}

/* ---------- numeri ---------- */
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:44px;margin-top:60px}
.numero .cifra{font-family:var(--serif);font-size:clamp(2.6rem,1.6rem + 3.4vw,4.6rem);line-height:1;
  color:var(--sabbia);display:block;margin-bottom:14px}
.numero p{margin:0;font-size:.95rem;color:rgba(243,227,204,.66);max-width:26ch}

/* ---------- chiusura ---------- */
.chiusura{padding-block:clamp(90px,15vh,180px);border-top:1px solid rgba(243,227,204,.12)}
.bottone{
  display:inline-block;padding:16px 34px;border-radius:100px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;
  background:var(--zafferano);color:#2A1408;border:1px solid var(--zafferano);
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .4s;
}
.bottone:hover{background:var(--oro);transform:translateY(-3px)}
@media (hover:none){}

@media (max-width:860px){
  .vie{margin-top:44px}
  .via{min-height:auto}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}


/* ---------- la ricerca dell'archivio ----------
   Con 103 articoli i filtri per sezione non bastano più: chi cerca
   «kundalini» non sa in quale sezione stia. Filtra in pagina, senza
   rete, e si compone con il filtro di sezione già presente. */
.cerca{margin:0 0 26px;position:relative}
.cerca input{
  width:100%;max-width:520px;box-sizing:border-box;
  min-height:52px;padding:14px 18px 14px 46px;
  background:rgba(243,227,204,.05);
  border:1px solid rgba(243,227,204,.2);border-radius:100px;
  font-family:var(--sans,inherit);font-size:1rem;color:var(--crema);
  transition:border-color .3s,background .3s;
}
.cerca input::placeholder{color:rgba(243,227,204,.45)}
.cerca input:focus{outline:none;border-color:rgba(232,185,111,.55);background:rgba(243,227,204,.08)}
.cerca input:focus-visible{outline:2px solid var(--sabbia);outline-offset:3px}
.cerca::before{
  content:"";position:absolute;left:18px;top:18px;width:16px;height:16px;
  border:1.6px solid rgba(243,227,204,.5);border-radius:50%;pointer-events:none;
}
.cerca::after{
  content:"";position:absolute;left:31px;top:31px;width:8px;height:1.6px;
  background:rgba(243,227,204,.5);transform:rotate(45deg);
  transform-origin:left center;pointer-events:none;
}
.cerca-esito{
  margin:12px 0 0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ottone);min-height:1em;
}
.niente-trovato{
  margin:40px 0;padding:28px 30px;border:1px dashed rgba(243,227,204,.22);
  border-radius:16px;color:rgba(243,227,204,.75);
}
.niente-trovato b{display:block;margin-bottom:8px;color:var(--crema)}

/* ---------- salta al contenuto ----------
   ⚠️ Il primo Tab su ogni pagina finiva nelle sette voci del menu,
   ripetute su tutte le pagine. Adesso la prima fermata è il testo. */
.salta{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--notte);color:var(--crema);
  padding:14px 22px;border:1px solid var(--ottone);border-radius:0 0 12px 0;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;
}
.salta:focus{left:0}


/* ---------- bersagli a misura di dito ----------
   ⚠️ Misurati su telefono: le briciole erano alte 13px e il marchio 31.
   Su un link alto 13px si sbaglia mira, e sono i due link che stanno
   in cima a OGNI pagina — cioè quelli che si usano per tornare indietro.
   L'area cliccabile cresce, il testo resta identico. */
.briciole a{display:inline-block;padding:9px 2px;margin:-9px 0}
.marchio{display:inline-flex;align-items:center;min-height:44px}
.piede-mappa a{display:inline-block;padding:5px 0}
.dati a{display:inline-block;padding:7px 0;margin:-7px 0}

/* ============================================================
   LA HOME — «la scena»
   Ricostruita il 6 settembre 2026 sopra l'impianto editoriale
   di Codex (apertura corta, tre porte, due voci, sei letture),
   riportata però dentro la palette del sito.

   ⚠️ PERCHÉ NON È AVORIO. Il resto del portale vive su
   `--notte`: le testate, le sezioni, le code, il piede, la
   tendina del menu. Una home su fondo chiaro obbligava a
   riverniciare barra, menu e piede uno per uno, e soprattutto
   faceva cambiare pianeta a ogni clic verso un articolo. È lo
   stesso avvertimento scritto sopra a `:root`. La home resta
   scura; il passaggio alla carta avviene una volta sola, dove
   comincia l'orientamento, esattamente come dentro un articolo.

   ⚠️ LA PROFONDITÀ NON DIPENDE DA NESSUNA LIBRERIA. Qui gira
   solo `menu.js`: niente GSAP, niente Lenis (li carica solo
   `guida.js`, e la home non lo chiama — la vecchia home aveva
   marcature animate senza il motore che le muove). Quindi:
   – i piani si spostano leggendo due variabili, `--px/--py`
     (puntatore) e `--sy` (scorrimento), scritte da poche righe
     in fondo alla pagina. Se quel codice non parte, valgono 0
     e ogni strato resta al suo posto: si perde il movimento,
     non si perde niente da vedere;
   – le comparse in scorrimento usano `animation-timeline`
     dentro un `@supports`. Dove non è supportato la regola non
     entra proprio, e lo stato visibile è quello naturale.
     Nessun `opacity:0` può restare appeso: è il difetto che ha
     già costretto a mettere reti di sicurezza altrove.
   ============================================================ */

@property --px{syntax:'<number>';inherits:true;initial-value:0}
@property --py{syntax:'<number>';inherits:true;initial-value:0}
@property --sy{syntax:'<number>';inherits:true;initial-value:0}

body.home{background:var(--notte)}

/* ---------- l'apertura: cinque piani e un testo fermo ----------
   ⚠️ Il testo NON si muove con lo scorrimento. Muovere ciò che si
   legge fa perdere la riga e sposta i bersagli da toccare: la
   profondità la fanno i piani intorno, non le parole. */
.scena{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:clamp(120px,17vh,190px) clamp(60px,9vh,110px);
  overflow:hidden;overflow:clip;isolation:isolate;
}
.strati{position:absolute;inset:0;z-index:0;pointer-events:none}
.strati > *{position:absolute;will-change:transform}

.fondale{inset:0}
.fondale img{width:100%;height:100%;object-fit:cover;object-position:68% 46%}
/* ⚠️ La traslazione va PRIMA della scala, o verrebbe moltiplicata
   per 1.14 e il fondale scoprirebbe i bordi ai lati. */
.fondale{transform:translate3d(calc(var(--px) * 9px),calc(var(--py) * 9px + var(--sy) * 64px),0) scale(1.14)}

/* ⚠️ IL FONDALE CHE RESPIRA. Il fotogramma fermo (`img`) resta SEMPRE
   sotto ed è quello che si vede al primo colpo d'occhio: il video si
   sovrappone e si accende solo se è riuscito a partire davvero. Se non
   parte — rete lenta, formato rifiutato, risparmio dati, telefono —
   non si perde niente, resta la fotografia. È lo stesso schema già in
   uso per il video delle testate, poco sopra in questo foglio.
   Chi carica il file è lo script in fondo alla home, non l'HTML: così
   su schermo stretto il video non viene proprio scaricato. */
.fondale video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:68% 46%;
  opacity:0;transition:opacity .9s ease;
}
.fondale video.acceso{opacity:1}

/* il velo resta incollato alla cornice: è la lettura dei toni,
   non un piano. Se si muovesse, il buio sotto al titolo ballerebbe. */
.velo-scena{
  inset:0;
  background:
    linear-gradient(180deg,rgba(20,10,8,.74) 0%,rgba(20,10,8,.22) 26%,rgba(20,10,8,.78) 76%,var(--notte) 100%),
    radial-gradient(88% 78% at 16% 54%,rgba(20,10,8,.9),transparent 68%);
}

.alone{
  right:4%;bottom:10%;width:min(60vw,700px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,185,111,.26),rgba(224,145,60,.09) 52%,transparent 72%);
  transform:translate3d(calc(var(--px) * 17px),calc(var(--py) * 17px + var(--sy) * -34px),0);
}
/* il cerchio inciso: un piano sottile fra alone e oggetto */
.cerchio{
  right:6%;bottom:8%;width:min(42vw,470px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(232,185,111,.22);
  transform:translate3d(calc(var(--px) * 24px),calc(var(--py) * 20px + var(--sy) * -60px),0);
}

/* ⚠️ `translate` e `transform` sono proprietà distinte e si compongono:
   il respiro possiede la prima, la parallasse la seconda. Scritti
   entrambi dentro `transform` si cancellerebbero a vicenda. */
.oggetto{
  right:9%;bottom:13%;width:min(30vw,330px);
  transform:translate3d(calc(var(--px) * 40px),calc(var(--py) * 32px + var(--sy) * -108px),0) rotate(-2.4deg);
  filter:drop-shadow(-16px 30px 34px rgba(6,2,1,.72)) drop-shadow(0 3px 8px rgba(6,2,1,.55));
  animation:respiro 9.5s ease-in-out infinite alternate;
}
.oggetto img{width:100%;height:auto}
@keyframes respiro{from{translate:0 -9px}to{translate:0 9px}}

/* pulviscolo in primo piano: si muove al contrario di tutto il resto,
   ed è la ragione per cui il fondale sembra lontano davvero. */
.pulviscolo{
  inset:-10%;opacity:.55;
  transform:translate3d(calc(var(--px) * -24px),calc(var(--py) * -16px + var(--sy) * -26px),0);
  background-image:
    radial-gradient(1.6px 1.6px at 14% 22%,rgba(243,227,204,.55),transparent),
    radial-gradient(1.2px 1.2px at 63% 11%,rgba(232,185,111,.5),transparent),
    radial-gradient(1.9px 1.9px at 82% 64%,rgba(243,227,204,.4),transparent),
    radial-gradient(1.1px 1.1px at 37% 78%,rgba(232,185,111,.45),transparent),
    radial-gradient(1.4px 1.4px at 91% 31%,rgba(243,227,204,.35),transparent),
    radial-gradient(1px 1px at 51% 44%,rgba(232,185,111,.4),transparent);
  background-size:560px 460px;
  animation:deriva 34s linear infinite;
}
.pulviscolo::before{
  content:'';position:absolute;inset:0;opacity:.7;
  background-image:
    radial-gradient(1.3px 1.3px at 26% 58%,rgba(243,227,204,.45),transparent),
    radial-gradient(1.7px 1.7px at 74% 19%,rgba(224,145,60,.4),transparent),
    radial-gradient(1px 1px at 8% 86%,rgba(243,227,204,.4),transparent);
  background-size:330px 290px;
  animation:deriva 21s linear infinite reverse;
}
@keyframes deriva{to{background-position:560px -460px}}

/* la grana: toglie il piatto dalle campiture scure */
.scena::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.34;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

.scena .contenitore{position:relative;z-index:2}
.scena-testo{transform:translate3d(calc(var(--px) * -5px),0,0);max-width:44rem}
.scena .occhiello{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sabbia);margin:0 0 26px;
}
.scena h1{
  font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
  font-size:clamp(2.6rem,1.35rem + 5vw,5.5rem);line-height:1.03;letter-spacing:-.03em;
  margin:0 0 28px;max-width:15ch;
}
.scena h1 em{font-style:italic;color:var(--sabbia)}
.scena .sommario{font-size:clamp(1.05rem,.98rem + .35vw,1.24rem);color:rgba(243,227,204,.86);max-width:38ch;margin:0 0 36px}
.scena .nota-patto{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(243,227,204,.55);margin:34px 0 0}

/* ---------- i due inviti dell'apertura ---------- */
.inviti{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.invito{
  display:inline-flex;align-items:center;gap:20px;padding:15px 24px;
  background:var(--lacca);color:var(--crema);text-decoration:none;border:1px solid var(--lacca);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  box-shadow:var(--ombra-1);
  transition:background .35s,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s;
}
.invito:hover{background:var(--lacca-viva);transform:translateY(-3px);box-shadow:var(--ombra-2)}
.invito .fr{font-size:15px;line-height:1;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.invito:hover .fr{transform:translateX(5px)}
.invito-piano{
  display:inline-flex;align-items:center;gap:12px;padding:9px 2px;color:var(--sabbia);text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid rgba(232,185,111,.4);transition:border-color .35s,color .35s;
}
.invito-piano:hover{color:var(--crema);border-bottom-color:var(--crema)}

/* ---------- la fascia del patto ---------- */
.patto{
  position:relative;z-index:3;background:var(--bruno);
  border-block:1px solid rgba(243,227,204,.1);
}
.patto .contenitore{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 32px;
  padding-block:20px;
}
.patto p{margin:0;font-size:1rem;color:rgba(243,227,204,.8)}
.patto a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sabbia);text-decoration:none;border-bottom:1px solid rgba(232,185,111,.4);padding-bottom:4px}
.patto a:hover{color:var(--crema);border-bottom-color:var(--crema)}

/* ============================================================
   LA CARTA — qui si sceglie, e si legge.
   Un solo passaggio di mondo in tutta la pagina, come dentro
   un articolo: testata scura, corpo di carta, coda scura.
   ============================================================ */
.carta{background:var(--carta);color:var(--inchiostro);position:relative;z-index:3}
.carta .etichetta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lacca);margin:0 0 22px}
.carta h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
  font-size:clamp(1.9rem,1.3rem + 2.3vw,3.2rem);line-height:1.09;letter-spacing:-.028em;margin:0;
}
.carta h2 em{font-style:italic;color:var(--lacca)}
.carta .testo{font-size:1.05rem;color:var(--inchiostro-tenue);max-width:52ch}
.tratto{padding-block:clamp(64px,9vh,112px)}
.testa-sezione{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:22px 40px;margin-bottom:44px}
.testa-sezione > div{min-width:min(100%,30ch)}

/* ---------- le tre porte ---------- */
.porte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.porta{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#FCF8EE;border:1px solid var(--filo);box-shadow:var(--ombra-1);
  transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s;
}
.porta:hover{transform:translateY(-9px);box-shadow:var(--ombra-2)}
.porta-foto{position:relative;aspect-ratio:1.5;overflow:hidden}
.porta-lastra{position:absolute;inset:-6% 0}
.porta-lastra img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.16,1,.3,1)}
.porta:hover .porta-lastra img{transform:scale(1.07)}
.porta-foto .n{
  position:absolute;left:0;bottom:0;z-index:1;margin:0;
  background:var(--carta);padding:8px 13px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--lacca);
}
.porta-testo{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.porta-testo h3{
  font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
  font-size:1.5rem;line-height:1.18;letter-spacing:-.02em;margin:0 0 14px;
}
.porta-testo p{font-size:1rem;line-height:1.62;color:var(--inchiostro-tenue);margin:0 0 24px}
.porta-vai{
  margin-top:auto;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lacca);
}
.porta-vai .fr{transition:transform .45s cubic-bezier(.16,1,.3,1)}
.porta:hover .porta-vai .fr{transform:translateX(6px)}

/* ---------- le altre strade ---------- */
.strade{
  display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;
  margin-top:34px;padding-top:28px;border-top:1px solid var(--filo);
}
.strade > span{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--inchiostro-tenue);margin-right:auto}
.strade a{font-size:1rem;color:var(--lacca);text-decoration:none;border-bottom:1px solid rgba(142,35,24,.3);padding-bottom:3px}
.strade a:hover{border-bottom-color:var(--lacca)}

/* ---------- due voci: due fogli, uno sopra l'altro ----------
   La distinzione fra fonti e pratica è il patto editoriale del
   sito. Qui non è scritta soltanto: i due fogli stanno su piani
   diversi, e si vede da quale ombra cade su quale. */
.due-voci{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:center}
.fogli{position:relative;padding:8px 14px 8px 0}
.foglio{
  position:relative;background:#FCF8EE;border:1px solid var(--filo);padding:30px 32px 32px;
  box-shadow:var(--ombra-1);
}
.foglio h3{font-family:var(--serif);font-weight:400;font-size:1.42rem;line-height:1.2;margin:0 0 14px;letter-spacing:-.02em}
.foglio p{font-size:1rem;line-height:1.62;color:var(--inchiostro-tenue);margin:0 0 20px}
.foglio .etichetta{margin-bottom:16px}
.foglio a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lacca);text-decoration:none;border-bottom:1px solid rgba(142,35,24,.35);padding-bottom:4px}
.foglio a:hover{border-bottom-color:var(--lacca)}
.foglio-fonti{transform:rotate(-1.1deg)}
/* ⚠️ Il secondo foglio è quello vicino: ombra più profonda, rotazione
   opposta, e un margine negativo che lo fa poggiare sopra al primo. */
.foglio-pratica{
  margin:-26px 0 0 clamp(24px,4vw,56px);transform:rotate(1.4deg);
  background:#F1E7D4;border-color:rgba(142,35,24,.22);box-shadow:var(--ombra-2);
}
.foglio-pratica .etichetta{color:var(--lacca-viva)}

/* ============================================================
   LA SOGLIA — la lettura da cui cominciare.
   Torna il buio, e torna con una fotografia che ha una
   prospettiva vera dentro: tre porte in fila e una luce in
   fondo. La profondità qui è nel soggetto, non negli strati.
   ============================================================ */
.soglia{position:relative;z-index:3;background:var(--notte);color:var(--crema);overflow:hidden;overflow:clip}
.soglia-sfondo{position:absolute;inset:0;z-index:0}
.soglia-sfondo img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.soglia-velo{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,10,8,.94) 0%,rgba(20,10,8,.8) 38%,rgba(20,10,8,.34) 70%,rgba(20,10,8,.6) 100%),
    linear-gradient(180deg,var(--notte),transparent 18%,transparent 82%,var(--notte));
}
.soglia .contenitore{position:relative;z-index:2;padding-block:clamp(84px,13vh,150px)}
.soglia-testo{max-width:40rem}
.soglia .etichetta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sabbia);margin:0 0 22px}
.soglia h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3.3rem);line-height:1.07;letter-spacing:-.03em;margin:0 0 24px;
}
.soglia h2 em{font-style:italic;color:var(--sabbia)}
.soglia p{font-size:1.06rem;color:rgba(243,227,204,.82);max-width:44ch;margin:0 0 18px}
.soglia .inviti{margin-top:20px}

/* ---------- il quaderno: le ultime letture ---------- */
.quaderno{position:relative;z-index:3;background:var(--notte);color:var(--crema)}
.quaderno .etichetta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sabbia);margin:0 0 22px}
.quaderno h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
  font-size:clamp(1.9rem,1.3rem + 2.3vw,3.2rem);line-height:1.09;letter-spacing:-.028em;margin:0;
}
.quaderno h2 em{font-style:italic;color:var(--sabbia)}
.quaderno .testa-sezione{margin-bottom:0}
.quaderno .cap-vai{margin-top:0}

/* ---------- il commiato ---------- */
.commiato{
  position:relative;z-index:3;background:var(--notte);color:var(--crema);text-align:center;
  padding-block:clamp(72px,11vh,130px) clamp(80px,12vh,140px);
  border-top:1px solid rgba(243,227,204,.1);
}
.commiato .etichetta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sabbia);margin:0 0 24px}
.commiato h2{
  font-family:var(--serif);font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120;
  font-size:clamp(1.9rem,1.35rem + 2.2vw,3.1rem);line-height:1.08;letter-spacing:-.03em;margin:0 0 34px;
}
.commiato h2 em{font-style:italic;color:var(--sabbia)}
.commiato .inviti{justify-content:center}

/* ============================================================
   COMPARSE IN SCORRIMENTO
   ⚠️ Doppio recinto: `@supports` e `prefers-reduced-motion`.
   Dove `animation-timeline` non esiste la regola non entra
   nemmeno, e lo stato visibile è quello naturale.

   ⚠️⚠️ E NESSUNA COMPARSA TOCCA L'OPACITÀ. Misurato: con un
   `opacity:0` di partenza, a scheda appena aperta otto blocchi
   della pagina risultavano invisibili — in attesa di uno
   scorrimento che, per l'ultimo blocco prima del piede, può
   anche non arrivare mai, perché la pagina finisce prima che
   il suo intervallo si chiuda. È lo stesso difetto che ha già
   costretto a mettere una rete di sicurezza dentro menu.js.
   Qui si muove e basta: se l'animazione non parte o si ferma a
   metà, il peggio che succede è un blocco spostato di trenta
   pixel. Un testo spostato si legge; un testo trasparente no.
   ============================================================ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .home .sale{
      animation:sale-su linear both;
      animation-timeline:view();animation-range:entry 4% cover 26%;
    }
    @keyframes sale-su{from{transform:translateY(30px)}to{transform:none}}

    /* dentro alla cornice la fotografia scorre più lenta della pagina */
    .home .porta-lastra,.home .soglia-sfondo{
      animation:piu-lenta linear both;
      animation-timeline:view();animation-range:cover;
    }
    @keyframes piu-lenta{from{transform:translateY(-4%)}to{transform:translateY(4%)}}
  }
}

/* ============================================================
   MISURE
   ⚠️ Il menu a tendina scatta a 1150px (vedi il commento sopra
   alla sua media query): le soglie qui sotto non lo toccano.
   ============================================================ */
@media (max-width:1100px){
  .porte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .porta:last-child{grid-column:1/-1}
  .porta:last-child{flex-direction:row}
  .porta:last-child .porta-foto{flex:0 0 42%;aspect-ratio:auto}
  .porta:last-child .porta-testo{flex:1}
  .due-voci{grid-template-columns:1fr;gap:40px}
  .fogli{max-width:34rem}
  .scena .sommario{max-width:34ch}
  /* ⚠️ Da qui in giù il testo dell'apertura non ha più una colonna sua:
     l'oggetto gli sta accanto, non di fianco a una griglia. Se il blocco
     resta largo quanto la pagina il suo riquadro finisce sotto allo
     yantra — misurato a 768px, dove non si vedeva a occhio perché le
     righe di testo sono più corte del blocco che le contiene. */
  .scena-testo{max-width:min(60%,34rem)}
}
@media (max-width:820px){
  .oggetto{width:min(34vw,240px);right:6%;bottom:9%}
  .cerchio{width:min(50vw,320px)}
  .scena h1{max-width:13ch}
}
@media (max-width:700px){
  /* ⚠️ L'apertura si allunga apposta. Sotto i 700px l'oggetto non ha
     più una colonna sua: sale nell'angolo in alto a destra, per metà
     fuori campo, e il testo comincia SOTTO di lui. Misurato: con
     `top:12%` e meno spazio sopra, lo yantra tagliava a metà la riga
     «Il portale italiano sul tantra». I due riquadri non devono
     sovrapporsi — c'è un controllo apposta nello script di misura. */
  .scena{min-height:auto;padding-block:232px clamp(64px,10vh,90px)}
  .scena h1{max-width:none}
  .scena .sommario{max-width:none}
  .scena-testo{max-width:none}
  .oggetto{width:42vw;right:-9%;bottom:auto;top:60px}
  .cerchio{width:72vw;right:-22%;bottom:auto;top:14px}
  .alone{width:92vw;right:-20%;bottom:auto;top:-40px}
  .pulviscolo{display:none}
  .inviti{gap:16px 20px}
  .invito{width:100%;justify-content:space-between}
  .porte{grid-template-columns:1fr;gap:20px}
  .porta:last-child{flex-direction:column}
  .porta:last-child .porta-foto{flex:none;aspect-ratio:1.5}
  .foglio-pratica{margin-left:18px}
  .testa-sezione{margin-bottom:34px}
}
@media (prefers-reduced-motion:reduce){
  .oggetto,.pulviscolo,.pulviscolo::before{animation:none}
  .home *{transition-duration:.01ms!important}
}

/* ============================================================
   L'ARIA NELLE TESTATE — la profondità della home, portata
   sulle altre 116 pagine.  (6 settembre 2026)

   ⚠️⚠️ NON SI TOCCANO `.testata .sfondo`, `.testata .velo` NÉ
   `.testata .contenitore`: quei tre li muove già guida.js con
   GSAP. Due animazioni sullo stesso elemento è il difetto che
   ha già lasciato 195 buchi bianchi su questo sito.
   Qui si aggiungono DUE PIANI NUOVI, che GSAP non conosce e
   non può incrociare: un alone caldo dietro al titolo e una
   grana in primo piano.

   ⚠️ E si muovono col PUNTATORE (--px/--py), non con lo
   scorrimento: la parallasse verticale è già di GSAP, e due
   sistemi che leggono lo stesso scorrimento litigherebbero.
   Se il puntatore non scrive niente, le variabili valgono 0 e
   i due piani restano fermi al loro posto — non spariscono.
   ============================================================ */
.testata::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:-12%;bottom:-24%;width:min(84vw,940px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(232,185,111,.15),rgba(224,145,60,.055) 52%,transparent 72%);
  transform:translate3d(calc(var(--px) * 17px),calc(var(--py) * 17px),0);
}
/* la grana: toglie il piatto dalle campiture scure, come sulla home */
.testata::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- il rilievo delle schede ----------
   Sulla home le schede stanno su un piano più vicino e si vede
   dall'ombra. Qui la stessa cosa, con gli stessi due token. */
.scheda-pilastro{box-shadow:var(--rilievo-1)}
.scheda-pilastro:hover{box-shadow:var(--rilievo-2)}
.altra{
  box-shadow:var(--rilievo-1);
  transition:background .5s,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s;
}
.altra:hover{transform:translateY(-6px);box-shadow:var(--rilievo-2)}
.scheda{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s,border-color .45s;box-shadow:var(--rilievo-1)}
.scheda:hover{transform:translateY(-6px);box-shadow:var(--rilievo-2)}

@media (prefers-reduced-motion:reduce){
  .testata::before{transform:none}
  .altra:hover,.scheda:hover{transform:none}
}

/* ============================================================
   «ARDERE» — il momento della home
   La fiamma non cresce e basta: cresce e SI FERMA.
   --f va da 0 a 1 con lo scorrimento. Vale 1 di partenza, così
   senza JavaScript si vede la fiamma finita, ferma e leggibile.
   ============================================================ */
@property --f   {syntax:'<number>';inherits:true;initial-value:1}
@property --agit{syntax:'<number>';inherits:true;initial-value:0}

.ardere{ position:relative; height:200vh; background:var(--notte); }

/* il palco resta fermo mentre la sezione scorre: sticky, non pin.
   ⚠️ Una sezione bloccata per cinque schermate fa pensare che il sito
   sia rotto. Qui il blocco dura poco più di una schermata. */
.palco{
  position:sticky; top:0; height:100vh;
  display:grid; grid-template-rows:1fr auto; align-items:center;
  overflow:hidden;
}

/* --- il fondo: il buio si scalda man mano --- */
.palco::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 50% 62%, rgba(142,35,24,calc(.05 + .34 * var(--f))) 0%, transparent 70%),
    radial-gradient(34% 26% at 50% 58%, rgba(224,145,60,calc(.03 + .22 * var(--f))) 0%, transparent 72%);
}

/* la grana: toglie l'aria da «template», costa un'immagine sola */
.palco::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* --- la lampada --- */
.lampada{
  position:relative; justify-self:center; align-self:center;
  width:clamp(210px, 26vw, 420px); aspect-ratio:1 / 1.35;
  display:grid; place-items:end center;
  /* l'agitazione è l'inverso della crescita: più sale --f, più si ferma */
  --agit:calc(1 - var(--f));
  animation:guizzo 2.6s ease-in-out infinite;
  transform-origin:50% 100%;
}

/* ⚠️ Il guizzo NON è guidato dallo scorrimento: è a tempo, costo fisso.
   Dallo scorrimento arriva solo --agit, che ne riduce l'ampiezza a zero.
   Così non si anima mai un filtro sullo scroll — la trappola che fa
   «tremare» la pagina. */
@keyframes guizzo{
  0%,100%{ transform:translateX(calc(-1.1px * var(--agit))) skewX(calc(1.6deg * var(--agit))) scaleY(calc(1 - .05 * var(--agit))); }
  28%    { transform:translateX(calc(1.4px * var(--agit)))  skewX(calc(-2.1deg * var(--agit))) scaleY(calc(1 + .06 * var(--agit))); }
  55%    { transform:translateX(calc(-.6px * var(--agit)))  skewX(calc(2.4deg * var(--agit)))  scaleY(calc(1 - .08 * var(--agit))); }
  78%    { transform:translateX(calc(1px * var(--agit)))    skewX(calc(-1.2deg * var(--agit))) scaleY(calc(1 + .04 * var(--agit))); }
}

/* l'alone caldo dietro: cresce con la fiamma */
.brace{
  position:absolute; left:50%; bottom:4%; translate:-50% 0;
  width:calc(150% * (.45 + .55 * var(--f)));
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,
     rgba(232,185,111,calc(.30 * var(--f))) 0%,
     rgba(224,145,60,calc(.16 * var(--f))) 34%,
     rgba(142,35,24,calc(.10 * var(--f))) 58%,
     transparent 72%);
  pointer-events:none;
}

/* la fiamma: due copie sovrapposte.
   «.viva» passa dal filtro che la deforma, «.ferma» è pulita.
   Crescendo --f la prima si spegne e la seconda prende il suo posto:
   è così che si legge il calmarsi, senza animare nessun filtro. */
.fiamma{
  position:relative; width:100%; height:100%;
  transform-origin:50% 100%;
  transform:scaleY(calc(.16 + .84 * var(--f))) scaleX(calc(.52 + .48 * var(--f)));
}
.fiamma .viva { opacity:calc(1 - var(--f)); }
.fiamma .ferma{ opacity:var(--f); }

/* il bordo d'ottone della ciotola: un filo, non un disegno */
.orlo{
  position:absolute; left:50%; bottom:0; translate:-50% 0;
  width:52%; height:14px; border-radius:50%;
  background:linear-gradient(180deg, rgba(232,185,111,.58), rgba(201,138,68,.16) 55%, transparent);
  box-shadow:0 0 calc(26px * var(--f)) rgba(224,145,60,calc(.5 * var(--f)));
}

/* --- il detto: due frasi che si danno il cambio --- */
/* ⚠️ Misurato a 1680: le parole attraversavano il bordo inferiore del
   diagramma e la porta a ore sei. Alzare l'assieme non basta a tutte le
   proporzioni di finestra: sotto il testo ci vuole un velo, come già
   fa `.corpo::after` dove la carta scende nel fondo scuro. */
.detto::before{
  content:''; position:absolute; inset:-40% -50% -70%; z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(20,10,8,.55) 38%, rgba(20,10,8,.9) 70%);
}
.detto{
  position:relative; z-index:2; text-align:center;
  padding:0 24px calc(6vh + 20px);
  min-height:9.5rem; display:grid; place-items:center;
}
.detto p{
  grid-area:1/1; margin:0; max-width:26ch;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.35rem,3.4vw,2.1rem); line-height:1.28;
  letter-spacing:-.01em; color:var(--crema); text-wrap:balance;
}
.detto em{ font-style:italic; color:var(--sabbia); }
/* la prima se ne va presto, la seconda arriva tardi: in mezzo c'è
   solo la fiamma, ed è il punto in cui la pagina tace */
.detto .prima{ opacity:clamp(0, calc(1 - var(--f) * 3.2), 1); }
.detto .dopo { opacity:clamp(0, calc(var(--f) * 3.1 - 2.1), 1); }

/* --- chi non vuole animazioni vede la fiamma finita, ferma --- */
@media (prefers-reduced-motion:reduce){
  .lampada{ animation:none; }
  .ardere{ height:auto; }
  .palco{ position:static; height:auto; padding:14vh 0; }
  .detto .prima{ display:none; }
  .detto .dopo { opacity:1; }
}

/* --- telefono: la scena è più bassa, la fiamma più stretta --- */
@media (max-width:640px){
  .ardere{ height:172vh; }
  .lampada{ width:min(62vw,240px); }
  .detto{ min-height:11rem; }
}

/* --- lo yantra, quando c'è: sta DIETRO la fiamma, che lo illumina ---
   La classe «con-yantra» la mette ardere.js solo dopo che la scena è
   davvero in piedi. Finché non c'è, qui sotto non cambia niente: la
   fiamma resta larga e la sezione è quella verificata senza 3D. */
.tela-yantra{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.ardere .palco > .lampada{position:relative;z-index:1}
.ardere.con-yantra .lampada{width:clamp(120px,11vw,190px)}
.ardere.con-yantra .brace{width:calc(190% * (.45 + .55 * var(--f)))}

/* ============================================================
   IL DIZIONARIO (16/9/2026) — /dizionario/, scritto da dizionario.py.
   L'indice riusa .lista-articoli, la ricerca e i filtri dell'archivio
   (menu.js li fa già funzionare); le voci riusano la pagina articolo.
   Qui solo quello che manca.
   ============================================================ */
/* ⚠️ la forma senza segni («shakti») sta dentro il link per la ricerca, ma non si vede */
.nascosto-vista{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lista-voci .tit{font-size:clamp(1.25rem,1rem + .9vw,1.7rem)}
.testata.corta-voce{min-height:56svh}
.testata .dati span[lang="sa"]{font-family:system-ui,sans-serif;letter-spacing:0;text-transform:none;font-size:1.05rem}
.corpo .rimando ul{margin:0;padding-left:1.1em}
.corpo .rimando li{margin:6px 0}
.torna-dizionario{margin-top:48px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.corpo .torna-dizionario a{color:var(--lacca);text-decoration:none}
/* ⚠️ i pulsanti delle «voci vicine» ereditavano il trattino degli elenchi del corpo */
.corpo .corpo-interno .indice-glossario li{padding-left:0;margin:0}
.corpo .corpo-interno .indice-glossario li::before{content:none}
/* ⚠️ il ritorno all'indice finiva attaccato al riquadro degli articoli */
.corpo .corpo-interno .torna-dizionario{margin-top:52px}
/* ⚠️ e la sottolineatura dei link del testo dentro i pulsanti */
.corpo .corpo-interno .indice-glossario a{text-decoration:none;background-image:none;border-bottom:1px solid rgba(142,35,24,.18)}