/* ============================================================
   tempio.css — il mondo «tempio» delle pagine interne (14/9/2026).
   Estratto da sito.css senza cambiare una regola: si carica SUBITO DOPO
   sito.css, così l'ordine della cascata resta quello di prima (verificato
   confrontando le schermate pixel per pixel). La home non lo carica: ha
   home.css. Semplificarlo è un lavoro separato, da verificare a parte.
   ============================================================ */
/* === TEMPIO: inizio === */
/* Pagine interne ambientate nel tempio. Base scritta da Codex, ripulita:
   restano fuori (1) lo spegnimento con !important delle animazioni nel
   corpo, (2) la riscrittura del vetro della barra, (3) la sostituzione
   dell'alone della testata che segue il puntatore. Tutto sotto un prefisso
   :where() a peso zero, che esclude la home (non ha main#contenuto). */
:where(body:has(> main#contenuto header.testata)) .testata{
  padding-top:clamp(176px, calc(11vw + 112px), 302px);
}
/* La gronda del tempio: un angolo di tetto appeso in alto a destra, sopra
   la fotografia e lontano dal titolo. Prende il posto della grana.
   ⚠️ A tutta larghezza non funziona: il PNG è 21:9, e una scatola bassa
   mostrava solo la sua parte trasparente (nessun errore, nessuna gronda).
   Qui la scatola ha le proporzioni del PNG; il taglio sinistro sfuma. */
:where(body:has(> main#contenuto header.testata)) .testata::after{
  --gronda-h:clamp(150px, 24vw, 340px);
  inset:auto 0 auto auto;top:calc(81px - var(--gronda-h) * .12);
  width:calc(var(--gronda-h) * 2.356);height:var(--gronda-h);
  z-index:1;opacity:1;transform:none;
  background:url('/img/tempio/gronda.png') right top / 100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%);
  mask-image:linear-gradient(90deg, transparent 0, #000 22%);
}
:where(body:has(> main#contenuto header.testata)) .barra-alta{
  border-bottom-color:color-mix(in srgb, var(--ottone) 24%, transparent);
}
/* Carta di gelso coperta al 97% dal colore originale: la lettura non cambia. */
:where(body:has(> main#contenuto header.testata)) .corpo{
  background-color:var(--carta);
  background-image:
    linear-gradient(color-mix(in srgb, var(--carta) 88%, transparent), color-mix(in srgb, var(--carta) 88%, transparent)),
    url('/img/tempio/carta.jpg');
  background-size:auto, 480px 480px;
}
:where(body:has(> main#contenuto header.testata)) .corpo :where(a:hover){--zafferano:var(--lacca)}
/* Stacco testata → lettura: il foglio di gelso ha il bordo strappato e sale
   sulla fotografia. .corpo è già relative e sopra la testata (z-index 3). */
:where(body:has(> main#contenuto header.testata)) .corpo::before{
  content:"";position:absolute;left:0;right:0;top:-88px;height:90px;pointer-events:none;
  background:var(--carta);
  -webkit-mask:url('/img/tempio/bordo-carta.png') left bottom / 1600px 90px repeat-x;
  mask:url('/img/tempio/bordo-carta.png') left bottom / 1600px 90px repeat-x;
}
:where(body:has(> main#contenuto header.testata)) .dalla-pratica{box-shadow:inset 3px 0 var(--lacca), inset 0 1px var(--carta)}
:where(body:has(> main#contenuto header.testata)) .gesto{box-shadow:inset 3px 0 var(--ottone), inset 0 1px var(--carta)}
:where(body:has(> main#contenuto header.testata)) .ricerca{box-shadow:inset 0 1px var(--carta)}
:where(body:has(> main#contenuto header.testata)) :is(.blocco, .coda){
  background:radial-gradient(ellipse at 0 45%, color-mix(in srgb, var(--lacca) 14%, transparent), transparent 52%), var(--notte);
}
:where(body:has(> main#contenuto header.testata)) :is(.scheda, .scheda-pilastro, .altra){
  border-color:color-mix(in srgb, var(--ottone) 28%, transparent);border-radius:4px;
}
:where(body:has(> main#contenuto header.testata)) .piede{
  position:relative;border-top-color:color-mix(in srgb, var(--ottone) 40%, transparent);
  background:radial-gradient(ellipse at 90% 0, color-mix(in srgb, var(--lacca) 25%, transparent), transparent 55%), var(--notte);
}
:where(body:has(> main#contenuto header.testata)) .piede::before{
  content:"";position:absolute;top:8px;right:clamp(22px,5vw,44px);
  width:40px;height:72px;pointer-events:none;
  background:url('/img/tempio/lanterna.png') center / contain no-repeat;
}
/* Stacco testata → fascia successiva: un velo di fumo sulla giunta, così la
   linea dritta fra la fotografia e il fondo non si legge come un taglio.
   Sta su .velo, che guida.js non muove. Fisso, nessuna animazione. */
:where(body:has(> main#contenuto header.testata)) .testata .velo::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:clamp(120px, 18vw, 260px);
  background:url('/img/tempio/fumo.png') center bottom / 100% auto no-repeat;opacity:.3;pointer-events:none;
}

/* ===== Le pagine interne come la home (14/9, terzo passaggio) ===== */
/* La soglia: testate alte come l'apertura della home, titoli grandi nelle
   sezioni, il ramo di pino in primo piano che si muove appena (a tempo, non
   allo scorrimento). Il ramo sta su .velo, che guida.js non muove. */
:where(body:has(> main#contenuto header.testata)) .testata.corta{min-height:100svh}
:where(body:has(> main#contenuto header.testata)) .testata.articolo:not(.corta){min-height:64svh}
:where(body:has(> main#contenuto header.testata)) .testata.corta h1{font-size:clamp(3rem, 1.4rem + 5.6vw, 6.8rem);line-height:.98}
:where(body:has(> main#contenuto header.testata)) .testata .velo::before{
  content:"";position:absolute;top:81px;left:-7%;width:min(56vw,980px);aspect-ratio:1600/893;
  background:url('/img/tempio/pino.png') left top / contain no-repeat;opacity:.92;pointer-events:none;transform-origin:0 0;
}
@media (prefers-reduced-motion:no-preference){ :where(body:has(> main#contenuto header.testata)) .testata .velo::before{animation:tempio-ramo 16s ease-in-out infinite alternate} }
@keyframes tempio-ramo{to{transform:rotate(1.4deg) translate3d(-.6%,.8%,0)}}
@media (max-width:900px){ :where(body:has(> main#contenuto header.testata)) .testata .velo::before{width:110vw;top:72px;left:-30%} }
/* Il video di testata lo aggiunge menu.js; qui prende lo stesso ingrandimento della foto. */
:where(body:has(> main#contenuto header.testata)) .testata .sfondo video{object-fit:cover;width:100%;height:100%}

/* Stacchi fra le fasce: ogni passaggio è un oggetto del tempio, come nella home. */
:where(body:has(> main#contenuto header.testata)) :is(.blocco, .coda){position:relative}
/* carta → buio, in fondo all'articolo: la grata a cavallo (la dissolvenza della carta non serve più) */
:where(body:has(> main#contenuto header.testata)) article > .corpo::after{content:none}
:where(body:has(> main#contenuto header.testata)) article + :is(.blocco, .coda){padding-top:calc(clamp(52px,6.5vh,88px) + clamp(44px,6.5vw,105px))}
:where(body:has(> main#contenuto header.testata)) article + :is(.blocco, .coda)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:clamp(88px,13vw,210px);transform:translateY(-50%);z-index:4;pointer-events:none;
  background:url('/img/tempio/grata.png') center / auto 100% repeat-x;filter:drop-shadow(0 18px 24px rgba(20,10,8,.35));
}
/* testata → prima fascia (sezioni, archivio, 404): si entra sotto la gronda, che lascia l'angolo in alto */
:where(body:has(> main#contenuto header.testata + .blocco)) .testata::after{content:none}
/* ⚠️ .testata.corta e non .testata: .testata.corta{padding-bottom} pesa (0,2,0) e vinceva, il sommario finiva sotto la gronda */
:where(body:has(> main#contenuto header.testata + .blocco)) .testata.corta{padding-bottom:clamp(200px, 24vw, 360px)}
:where(body:has(> main#contenuto header.testata)) header.testata + .blocco{padding-top:calc(clamp(52px,6.5vh,88px) + var(--inserto-pad))}
/* ⚠️ 14/9 (Luca): la gronda grande a ogni stacco «si ripete troppo». Ora l'oggetto a cavallo
   cambia con la sezione, e un articolo prende quello della sua sezione (dalle briciole).
   Ogni inserto dichiara: sfondo, proporzioni (o altezza), quanto sale sulla fascia sopra
   e quanto spazio chiede sotto. La gronda resta per Fondamenta, la 404 e le pagine senza sezione. */
:where(:root){
  --inserto:url('/img/tempio/gronda.png') left top / 100% 100% no-repeat;
  --inserto-ar:1920/815;--inserto-h:auto;--inserto-y:-40%;--inserto-pad:13vw;--inserto-op:1;--inserto-filtro:none;--inserto-maschera:none;
}
:where(:root:has(link[rel="canonical"][href$="/sezioni/filosofia.html"], .briciole a[href="/sezioni/filosofia.html"])){
  /* nuvole: la foschia passa sulla giunta, niente oggetto duro */
  --inserto:url('/img/tempio/nuvole.png') center top / 100% 100% no-repeat;
  --inserto-y:-58%;--inserto-pad:14vw;--inserto-op:.55;
  /* ⚠️ il PNG delle nuvole è pieno fino al bordo basso: senza sfumatura si vedeva una riga dritta sul riquadro */
  --inserto-maschera:linear-gradient(to bottom, transparent 0, #000 45%, #000 66%, transparent 96%);
}
:where(:root:has(link[rel="canonical"][href$="/sezioni/tradizione.html"], .briciole a[href="/sezioni/tradizione.html"])){
  /* la trave con le spirali d'incenso: la trave sta sulla giunta, le spirali pendono nel buio */
  --inserto:url('/img/tempio/incenso.png') left top / 100% 100% no-repeat;
  --inserto-ar:1920/333;--inserto-y:-14%;--inserto-pad:12vw;
}
:where(:root:has(link[rel="canonical"][href$="/sezioni/sessualita.html"], .briciole a[href="/sezioni/sessualita.html"])){
  /* cinque lanterne a altezze diverse (la stessa lanterna del piede, composta qui) */
  --inserto:
    url('/img/tempio/lanterna.png') 7% 0 / auto 62% no-repeat,
    url('/img/tempio/lanterna.png') 27% 0 / auto 100% no-repeat,
    url('/img/tempio/lanterna.png') 52% 0 / auto 54% no-repeat,
    url('/img/tempio/lanterna.png') 74% 0 / auto 86% no-repeat,
    url('/img/tempio/lanterna.png') 94% 0 / auto 66% no-repeat;
  --inserto-ar:auto;--inserto-h:clamp(190px, 24vw, 420px);--inserto-y:-34%;--inserto-pad:clamp(110px, 15vw, 270px);
  --inserto-filtro:drop-shadow(0 0 34px rgba(226,110,52,.32));
}
:where(:root:has(link[rel="canonical"][href$="/sezioni/occidente.html"], .briciole a[href="/sezioni/occidente.html"])){
  /* la trave con le campane di bronzo */
  --inserto:url('/img/tempio/campane.png') left top / 100% 100% no-repeat;
  --inserto-ar:1920/635;--inserto-y:-22%;--inserto-pad:20vw;
}
:where(:root:has(link[rel="canonical"][href$="/sezioni/strumenti.html"], .briciole a[href="/sezioni/strumenti.html"])){
  /* la corda dei nastri rossi e delle tavolette votive */
  --inserto:url('/img/tempio/nastri.png') left top / 100% 100% no-repeat;
  --inserto-ar:1920/627;--inserto-y:-26%;--inserto-pad:18vw;
}
:where(body:has(> main#contenuto header.testata)) :is(header.testata + .blocco, .blocco + .coda)::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:4;pointer-events:none;
  aspect-ratio:var(--inserto-ar);height:var(--inserto-h);transform:translateY(var(--inserto-y));
  background:var(--inserto);opacity:var(--inserto-op);filter:var(--inserto-filtro);
  -webkit-mask-image:var(--inserto-maschera);mask-image:var(--inserto-maschera);
}
/* blocco → coda, in fondo all'articolo: di nuovo l'inserto della sezione, prima dei suggerimenti */
:where(body:has(> main#contenuto header.testata)) .blocco + .coda{padding-top:calc(clamp(80px,12vh,150px) + var(--inserto-pad))}
/* ⚠️ 14/9: qui c'era il piede-terrazza (cielo, nuvole, lanterna grande). Tolto: in fondo alle
   pagine interne si leggeva come un secondo footer vuoto. Il piede è tornato compatto. */
/* Testate senza fotografia (404, privacy): anche loro in una stanza del tempio. */
:where(body:has(> main#contenuto header.testata)) .testata:not(:has(.sfondo)){
  background:linear-gradient(90deg, rgba(20,10,8,.9) 0%, rgba(20,10,8,.55) 55%, rgba(20,10,8,.35) 100%), linear-gradient(0deg, var(--notte) 0%, transparent 40%), url('/img/porta-v2.jpg') center / cover no-repeat;
}
/* Testata seguita dalla carta: il bordo strappato sale di 88px, e sul telefono mordeva
   l'ultima riga del titolo. :is() prende il peso di .testata.corta (0,2,0) e vince. */
:where(body:has(header.testata + .corpo)) :is(.testata.corta, .testata.articolo){padding-bottom:clamp(120px, 15vw, 180px)}
/* La barra è sempre la stessa: scura, col filo, dall'inizio della pagina. Prima era
   trasparente in cima (con pino e gronda dietro) e marrone scorrendo: sembrava un menu
   diverso a ogni pagina. Stessa barra anche nella home (home.css). */
:where(body) .barra-alta{background:rgba(20,10,8,.92);border-bottom-color:rgba(243,227,204,.14)}
/* ⚠️ .barra-alta.posata (0,2,0) la rimetteva a .8 con il vetro: sopra la carta diventava grigio-marrone. */
:where(body) .barra-alta.posata{background:rgba(20,10,8,.96)}
/* Il piede delle pagine interne: i margini che mancavano (nome e link toccavano il bordo). */
:where(body) .piede-mappa{max-width:1240px;margin-inline:auto;padding-inline:clamp(22px,5vw,44px);box-sizing:border-box}
/* «Salta al contenuto» deve passare SOPRA la barra fissa (z-index 60) e il cursore (80). */
:where(body) .salta:focus{z-index:90}
/* L'archivio si usa, non si attraversa: testata bassa, niente gronda a cavallo,
   la ricerca nella prima schermata. La gronda torna nell'angolo in alto. */
:where(body:has(#cerca-articoli)) .testata.corta{min-height:50svh;padding-top:clamp(110px, 6vw + 70px, 160px);padding-bottom:clamp(40px, 6vh, 70px)}
:where(body:has(#cerca-articoli)) .testata::after{content:""}
:where(body:has(#cerca-articoli)) header.testata + .blocco{padding-top:clamp(40px, 5vh, 64px)}
:where(body:has(#cerca-articoli)) header.testata + .blocco::before{content:none}
/* === TEMPIO: fine === */