/* =====================================================================
   UITUIT - RACCOLTE E RICERCA  (categoria.html, cerca.html)
   Carta calda e ritmo da rivista: intestazione grande col nome che arriva
   in profondità e, nelle raccolte principali, il pannello animato con il
   video della raccolta (js/pannello.js); poi un UIT in evidenza e le schede.
   Le raccolte con il film (oggi Ricette) hanno invece una hero a schermo
   intero sopra il film (#testa.con-film, più sotto; il film è css/film.css).
   Sul telefono: schede a tutta larghezza, testi mai minuscoli, tutto comodo
   da toccare (almeno 44 px).
   Riusa da stile.css: variabili, .btn, .occhiello, .lead, .scorri,
   le schede .articolo .inclina, le comparse [data-compari] e il .pannello.
   ===================================================================== */

/* Al tocco su Android niente riquadro azzurro: la risposta la danno le schede stesse (si abbassano un poco) */
.pillola, .filtro, .articolo, .tessera, .tipo-special, .r-freccia, .campo-svuota, .ev-foto { -webkit-tap-highlight-color: transparent; }

/* ---------- Cambio di raccolta senza ricaricare: dissolvenza breve ---------- */
.raccolta { transition: opacity .22s ease; }
.raccolta.r-esce { opacity: 0; }
main:focus { outline: none; }

/* ---------- Scheletri: forme che respirano mentre arrivano i dati ---------- */
.scheletro { display: block; position: relative; overflow: hidden; background: rgba(29, 26, 23, .07); border-radius: 8px; }
.ev-foto.scheletro, .foto.scheletro { background: linear-gradient(135deg, #EADCCD, #E2D0BE); }
.scheletro::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 20%, rgba(255, 253, 249, .75) 50%, transparent 80%);
  animation: luccichio 1.6s var(--muovi) infinite;
}
@keyframes luccichio { to { transform: translateX(100%); } }
.scheletro.riga { height: 1em; width: 100%; margin: 0 0 .75em; }
.scheletro.riga.corta { width: 42%; }
.scheletro.riga.titolo { height: 1.7em; width: 90%; }
.scheletro.riga.meta { width: 34%; height: .8em; }
html:not(.js) .scheletro, html:not(.js) .r-scheletro, html:not(.js) .evidenza-attesa, html:not(.js) .r-dati,
html:not(.js) .r-evidenza, html:not(.js) .r-elenco { display: none; }
.risultati .r-senza-js { margin-left: 0; }
.r-senza-js {
  position: relative; z-index: 2; width: min(640px, calc(100% - 40px)); margin: 24px auto 0; padding: 18px 22px; border-radius: 16px;
  background: var(--foglio); border: 1px solid var(--c-linea);
}
.r-senza-js a { color: var(--rosso); }

/* =====================================================================
   INTESTAZIONE
   ===================================================================== */
.r-testa {
  position: relative; display: flex; flex-direction: column; background: var(--carta); overflow-x: clip;
  padding: 14px 0 clamp(40px, 6vw, 84px);
}
/* Il blocco del titolo; con il pannello animato diventa due colonne (testo | video) */
.r-testa-dentro {
  flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
  padding-top: clamp(30px, 5vh, 64px); perspective: 1100px; transform-origin: 30% 0;
}
.r-testa-dentro > * { max-width: min(46rem, 100%); }
.r-testa-dentro.con-pannello {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); column-gap: clamp(32px, 5vw, 80px);
  min-height: min(calc(100svh - var(--alto) - 120px), 680px);
}
.r-testa-dentro.con-pannello > :not(.r-pannello) { grid-column: 1; }
.r-pannello { grid-column: 2; grid-row: 1 / span 8; align-self: center; max-width: none !important; }
.r-pannello[hidden] { display: none; }
.r-occhiello { margin-bottom: 16px; }
.r-nome {
  font-size: clamp(3.5rem, 1.5rem + 7.6vw, 9.6rem); line-height: .9; letter-spacing: -.02em;
  max-width: none !important; margin: 0 0 .2em; transform-origin: 0 60%;
  text-wrap: balance;
}
.con-pannello .r-nome { font-size: clamp(3.2rem, 1.4rem + 5.4vw, 7.4rem); }
.r-nome.lungo { font-size: clamp(2.9rem, 1.3rem + 5.6vw, 7rem); line-height: .94; }
.con-pannello .r-nome.lungo { font-size: clamp(2.7rem, 1.2rem + 4.4vw, 5.8rem); }
.r-nome.lunghissimo { font-size: clamp(2.5rem, 1.2rem + 4vw, 5.4rem); line-height: 1; }
.r-nome:focus { outline: none; }
.r-nome-lettere { display: inline; }
.r-nome .parola { display: inline-block; white-space: nowrap; perspective: 620px; }
.r-nome .lettera { display: inline-block; }
/* Le lettere arrivano dal fondo, una dopo l'altra, ruotando come pagine */
.r-nome.entra .lettera { animation: in-profondita 1.15s var(--entra) both; animation-delay: calc(var(--i) * 40ms + 60ms); }
@keyframes in-profondita {
  from { opacity: 0; transform: translate3d(0, .3em, -280px) rotateX(-62deg); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.r-sotto {
  font: italic 500 clamp(1.45rem, 1.1rem + 1.2vw, 2.2rem)/1.25 var(--titoli);
  color: var(--rosso); margin: 0 0 .7em;
}
.r-descrizione { min-height: 0; }
/* mentre arriva la descrizione si tiene il suo posto (niente salti) */
.r-descrizione:has(.scheletro) { min-height: 5.6em; }
.r-descrizione .lead { margin: 0; color: var(--c-testo-2); }
.r-descrizione.vuota { min-height: 0; }
.r-descrizione .scheletro.riga { height: .9em; max-width: 40rem; margin-bottom: .85em; }
.r-lento { margin: 18px 0 0; font: italic 500 1.25rem/1.4 var(--titoli); color: var(--rosso); }
.r-lento[hidden] { display: none; }
.r-dati { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 40px; margin-top: clamp(26px, 4vw, 46px); }
.r-quanti { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.r-quanti[hidden] { display: none; }
.r-numero {
  min-width: 1.2ch;
  font: italic 600 clamp(3.2rem, 2.3rem + 2.8vw, 4.8rem)/.9 var(--titoli); font-variant-numeric: lining-nums tabular-nums;
  color: var(--rosso);
}
.r-numero-cosa { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--c-tenue); }
.r-scorri { margin: 0; }
.r-scorri[hidden] { display: none; }

/* ---------- Barra delle raccolte: pillole che scorrono in orizzontale ---------- */
.r-barra {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 6px;
  width: min(1200px, 100% - 2 * clamp(20px, 5vw, 64px)); margin-inline: auto;
}
.r-barra-lista {
  flex: 1; min-width: 0; display: flex; gap: 8px; padding: 8px 2px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent);
}
.r-barra-lista::-webkit-scrollbar { display: none; }
.r-barra.inizio .r-barra-lista { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.r-barra.fine .r-barra-lista { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px); mask-image: linear-gradient(90deg, transparent 0, #000 28px); }
.r-barra.inizio.fine .r-barra-lista { -webkit-mask-image: none; mask-image: none; }
.r-barra-lista li { flex: none; scroll-snap-align: start; }
.r-barra-lista li.prima-altra { position: relative; margin-left: 8px; padding-left: 16px; }
.r-barra-lista li.prima-altra::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px;
  background: linear-gradient(transparent, rgba(29, 26, 23, .3), transparent);
}
/* position: relative tiene dentro la pillola i testi nascosti per i lettori di schermo (.vh): se no allargavano la pagina */
.pillola, .filtro {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(29, 26, 23, .16); background: var(--foglio);
  color: #3b322b; font: 400 .9375rem/1 var(--testo); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .16s var(--entra), box-shadow .3s ease;
}
.pillola .n, .filtro .n { font: 500 .75rem/1 var(--mono); letter-spacing: .04em; color: var(--c-tenue); }
@media (hover: hover) and (pointer: fine) {
  .pillola:hover, .filtro:hover { border-color: var(--rosso); color: var(--rosso); }
}
.pillola:active, .filtro:active { transform: scale(.96); }
.pillola[aria-current="page"], .filtro[aria-pressed="true"] {
  color: var(--carta); font-weight: 500; border-color: transparent; background: var(--inchiostro);
}
.filtro[aria-pressed="true"] { box-shadow: 0 10px 22px -14px rgba(29, 26, 23, .6); }
.pillola[aria-current="page"] .n, .filtro[aria-pressed="true"] .n { color: rgba(255, 248, 242, .72); }
.filtro svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); }
.r-freccia {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(29, 26, 23, .18); background: var(--foglio); color: var(--inchiostro);
  transition: border-color .2s ease, color .2s ease;
}
.r-freccia[hidden] { display: none; }
.r-freccia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .r-freccia:hover { border-color: var(--rosso); color: var(--rosso); } }

/* =====================================================================
   INTESTAZIONE CON IL FILM (le raccolte con «film» in TEMI di categoria.js)
   La hero è a schermo intero e passa sotto la testata; dietro c'è il film
   (js/film.js + css/film.css). In alto la barra delle raccolte con le
   pillole su vetro scuro; in basso a sinistra (sul telefono in basso, a
   tutta larghezza) occhiello, nome, la descrizione del WordPress come
   sottotitolo (sempre intera, mai tagliata con «…»: sul telefono anche 4-5
   righe), il pulsante e il numero di UIT.
   Niente «Scorri»: c'è il pulsante. Sul computer il testo sta nel 40% di
   sinistra dello schermo, dove il velo del film è più scuro; sul telefono
   sta sul velo dal basso. Nell'angolo lontano dal testo film.js mette la
   scritta «Video generato con l'IA» e il pulsante «Ferma il movimento».
   Le classi con-film e tema-scuro le mette categoria.js; per le raccolte
   con il film già lo script dentro #testa, prima degli altri script: così
   la hero ha subito la sua forma e la pagina non salta.
   ===================================================================== */
#testa.con-film {
  min-height: 100vh; min-height: 100svh;
  margin-top: calc(-1 * var(--alto)); padding: calc(var(--alto) + 8px) 0 0;   /* sotto la testata, come la hero del film */
  background: var(--notte);                     /* finché lo strato del film non c'è: scura, mai la carta */
}
.film-strato ~ main #testa.con-film { background: transparent; }   /* da qui si vede il film */
/* La barra delle raccolte, allineata al testo: pillole su vetro scuro */
#testa.con-film .r-barra { width: auto; margin-inline: max(clamp(20px, 6vw, 96px), env(safe-area-inset-left)); }
#testa.con-film .pillola { border-color: rgba(255, 246, 234, .22); background: rgba(10, 12, 18, .64); color: #F3E9DC; }
#testa.con-film .pillola .n { color: rgba(243, 233, 220, .72); }
#testa.con-film .pillola[aria-current="page"] { color: #17110a; background: #FFF6EA; border-color: transparent; }
#testa.con-film .pillola[aria-current="page"] .n { color: rgba(23, 17, 10, .68); }
#testa.con-film .r-freccia { border-color: rgba(255, 246, 234, .26); background: rgba(10, 12, 18, .64); color: #F3E9DC; }
#testa.con-film .r-barra-lista li.prima-altra::before { background: linear-gradient(transparent, rgba(255, 246, 234, .36), transparent); }
@media (hover: hover) and (pointer: fine) {
  #testa.con-film .pillola:hover, #testa.con-film .r-freccia:hover { border-color: var(--oro-chiaro); color: #fff; }
  #testa.con-film .pillola[aria-current="page"]:hover { color: #17110a; }
}
/* Il testo: in basso a sinistra; il pulsante e il numero di UIT sulla stessa riga */
.r-azione[hidden] { display: none; }            /* .btn vincerebbe sull'attributo hidden */
#testa.con-film .r-testa-dentro {
  width: auto; max-width: none; margin: 0;
  grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-content: end;
  padding: 28px max(clamp(20px, 6vw, 96px), env(safe-area-inset-left)) clamp(48px, 11vh, 120px);
}
#testa.con-film .r-testa-dentro > * { grid-column: 1 / -1; max-width: min(34rem, 34vw); order: 0; }
#testa.con-film .r-testa-dentro > .r-lento { order: 1; }
#testa.con-film .r-testa-dentro > .r-azione { grid-column: 1; order: 2; justify-self: start; margin-top: 26px; }
#testa.con-film .r-testa-dentro > .r-dati { grid-column: 2; order: 2; align-self: center; justify-content: flex-start; margin-top: 26px; }
#testa.con-film .r-occhiello { color: var(--oro-chiaro); margin-bottom: 14px; }
#testa.con-film .r-nome {
  font-size: clamp(3.4rem, 1.4rem + 5.4vw, 7.4rem); margin-bottom: .14em; padding-bottom: 0; border-bottom: 0;
  max-width: min(36rem, 34vw) !important;       /* .r-nome ha max-width: none !important */
}
#testa.con-film .r-nome.lungo { font-size: clamp(2.8rem, 1.3rem + 4vw, 5.6rem); }
#testa.con-film .r-nome.lunghissimo { font-size: clamp(2.4rem, 1.2rem + 3vw, 4.4rem); }
#testa.con-film .r-sotto { color: var(--oro-chiaro); }
/* Il sottotitolo (la descrizione del WordPress): sempre intero, mai tagliato. Mentre arriva, il suo posto è già
   tenuto dagli scheletri, alto quante righe fa di solito, così il titolo sopra non salta quando arriva
   (descrizione di Ricette: 3 righe sul computer largo, 4 su quello piccolo, 5 sul telefono girato; più sotto
   2 sul tablet in verticale e 4 sul telefono) */
#testa.con-film .r-descrizione { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.7; min-height: 0; }
#testa.con-film .r-descrizione:has(.scheletro) { min-height: 5.1em; }                          /* 3 righe da 1,7 */
@media (max-width: 1199px) { #testa.con-film .r-descrizione:has(.scheletro) { min-height: 6.8em; } }   /* 4 righe */
@media (max-width: 879px) { #testa.con-film .r-descrizione:has(.scheletro) { min-height: 8.5em; } }    /* 5 righe */
#testa.con-film .r-descrizione .lead { font-size: 1em; line-height: inherit; color: #F3E9DC; font-weight: 400; }
#testa.con-film .r-descrizione .scheletro.riga { height: .8em; margin: 0 0 .9em; }
#testa.con-film .scheletro { background: rgba(255, 246, 234, .12); }
#testa.con-film .scheletro::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 246, 234, .2) 50%, transparent 80%); }
#testa.con-film .r-lento { color: var(--oro-chiaro); }
#testa.con-film .r-scorri { display: none; }
/* Il numero di UIT: il suo posto c'è già mentre arriva (niente salti), poi sale da zero */
#testa.con-film .r-quanti[hidden] { display: flex; visibility: hidden; }
#testa.con-film .r-quanti { gap: 12px; }
#testa.con-film .r-numero { color: var(--oro-chiaro); font-size: clamp(2.4rem, 1.9rem + 1.3vw, 3.4rem); }
#testa.con-film .r-numero-cosa { color: #E6DBCD; letter-spacing: .16em; }
@media (hover: hover) and (pointer: fine) { #testa.con-film .r-azione:hover svg { transform: translateY(3px); } }
/* Dopo la hero scura il foglio di carta dell'ultimo UIT ha un po' d'aria in cima (la foto non tocca il bordo del film) */
#testa.con-film ~ .r-evidenza { padding-top: clamp(32px, 4.5vw, 64px); }
/* Telefono e tablet in verticale: tutto in basso, a tutta larghezza (come il velo del film, dal basso) */
@media (max-aspect-ratio: 3/4) {
  /* Il blocco del testo è alto quanto il suo contenuto e sta in fondo alla hero. In cima tiene il posto della
     nota dell'IA e del pulsante di pausa (stanno in alto, sotto la barra): una descrizione lunga allunga la
     hero invece di finire sotto di loro. Il velo scuro sta sul blocco stesso: sale con il testo fin sopra
     l'occhiello, qualunque sia la lunghezza della descrizione, e sfuma proprio nel posto tenuto per la nota. */
  #testa.con-film .r-testa-dentro {
    flex: 0 0 auto; margin-top: auto; grid-template-columns: minmax(0, 1fr);
    padding-top: 84px;          /* 12 px fino alla nota + la nota (al massimo 2 righe: 54 px) + 18 px d'aria */
    padding-bottom: max(30px, calc(env(safe-area-inset-bottom) + 20px));
    background: linear-gradient(180deg, rgba(7, 8, 12, 0) 0, rgba(7, 8, 12, .62) 84px, rgba(7, 8, 12, .62) 100%);
  }
  /* il velo di tutta la hero (film.css, con le soglie fisse) qui resta leggero: il buio dietro il testo lo dà il suo velo */
  #testa.con-film::before { background: linear-gradient(0deg, rgba(7, 8, 12, .5) 0%, rgba(7, 8, 12, .24) 45%, rgba(7, 8, 12, 0) 72%); }
  #testa.con-film .r-descrizione:has(.scheletro) { min-height: 3.4em; }                        /* 2 righe (tablet) */
  #testa.con-film .r-testa-dentro > * { max-width: 40rem; }
  #testa.con-film .r-nome { max-width: none !important; }
  #testa.con-film .r-testa-dentro > .r-azione { grid-column: 1; margin-top: 22px; }
  #testa.con-film .r-testa-dentro > .r-dati { grid-column: 1; margin-top: 16px; }
  /* la scritta dell'IA e «Ferma il movimento» stanno in alto (il testo è in basso): sotto la barra delle raccolte,
     dentro i margini anche sui telefoni di 320 px (lì la scritta va su due righe) */
  #testa.con-film .film-hero-angolo { top: calc(var(--alto) + 8px + 60px + 12px); left: max(16px, env(safe-area-inset-left)); pointer-events: none; }
  #testa.con-film .film-pausa { pointer-events: auto; }
}
@media (max-width: 760px) {
  #testa.con-film .r-barra { margin-inline: 0; }
  /* sul telefono, sopra il film, nessun testo sotto i 16 px */
  #testa.con-film .pillola, #testa.con-film .pillola .n { font-size: 1rem; }
  #testa.con-film .r-occhiello { font-size: 1rem; letter-spacing: .18em; margin-bottom: 10px; }
  #testa.con-film .r-descrizione { font-size: 1.0625rem; line-height: 1.6; }
  #testa.con-film .r-descrizione:has(.scheletro) { min-height: 6.4em; }                        /* 4 righe da 1,6 */
  #testa.con-film .r-descrizione .scheletro.riga { margin-bottom: .8em; }
  #testa.con-film .r-numero { font-size: 2.6rem; }
  #testa.con-film .r-numero-cosa { font-size: 1rem; letter-spacing: .12em; }
}

/* ---------- Il finale del film: l'ultima scena con un titolo, una frase e l'invito ----------
   (la finestra, il velo, la didascalia e la nota dell'IA li danno css/film.css e js/film.js) */
.film-finale h2 { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.8rem); line-height: .98; letter-spacing: -.012em; margin: 0 0 .32em; }
.film-finale #filmFinaleTesto { color: #F3E9DC; font-weight: 400; font-size: clamp(1.0625rem, 1rem + .4vw, 1.3rem); line-height: 1.6; margin: 0 0 1.6em; text-wrap: balance; }
/* Sulla carta stampata il film non c'è: la hero torna un'intestazione normale (testo scuro), le finestre spariscono */
@media print {
  #testa.con-film { min-height: 0; margin-top: 0; padding-top: 0; background: none; text-shadow: none;
    --c-titolo: #1d1a17; --c-testo: #2a231e; --c-testo-2: #4d4037; color: #2a231e; }
  #testa.con-film::before, #testa.con-film .r-barra, #testa.con-film .r-azione, .film-finestra { display: none !important; }
  #testa.con-film .r-testa-dentro { background: none; padding-top: 0; }
  #testa.con-film .r-occhiello, #testa.con-film .r-numero { color: #AA0000; }
  #testa.con-film .r-descrizione .lead, #testa.con-film .r-numero-cosa { color: #4d4037; }
}

/* =====================================================================
   IN EVIDENZA: l'ultimo UIT, grande
   ===================================================================== */
.r-evidenza { position: relative; padding: clamp(10px, 2vw, 30px) 0 clamp(40px, 5vw, 70px); background: var(--carta); }
.evidenza { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(28px, 4.5vw, 72px); align-items: center; }
.evidenza .ev-foto { order: 2; }
.ev-foto {
  position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: calc(var(--raggio) - 2px);
  background: linear-gradient(135deg, #EADCCD, #DCC6B1);
  box-shadow: 0 60px 90px -60px rgba(66, 40, 18, .75), 0 18px 36px -28px rgba(66, 40, 18, .4);
}
.ev-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--entra); }
/* bordo di luce sottile sopra la foto */
.ev-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
@media (hover: hover) and (pointer: fine) { a.ev-foto:hover img { transform: scale(1.04); } }
/* Entrata da cinema: la foto si apre dal centro, l'immagine si assesta */
.anima .evidenza[data-compari] .ev-foto { clip-path: inset(10% 8% 10% 8% round 28px); transition: clip-path 1.4s var(--entra) .1s; }
.anima .evidenza[data-compari] .ev-foto img { transform: scale(1.14); }
.anima .evidenza.visto .ev-foto { clip-path: inset(0 round calc(var(--raggio) - 2px)); }
.anima .evidenza.visto .ev-foto img { transform: none; }
@media (hover: hover) and (pointer: fine) { .anima .evidenza.visto a.ev-foto:hover img { transform: scale(1.04); } }
.ev-testo { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.ev-testo .occhiello { margin-bottom: 12px; }
.ev-testo .cat { display: block; margin: 0 0 12px; font-size: .75rem; }
.ev-titolo { font-size: clamp(2.1rem, 1.25rem + 2.3vw, 3.5rem); line-height: 1.04; margin: 0 0 .45em; }
.ev-titolo a {
  text-decoration: none; color: inherit;
  background: linear-gradient(var(--rosso), var(--rosso)) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--entra), color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .ev-titolo a:hover { background-size: 100% 1px; color: var(--rosso); } }
.ev-estratto { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); color: var(--c-testo-2); max-width: 36em; margin: 0 0 1.5em; }
.ev-piede { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; }
.ev-piede time, .r-griglia time, .risultati-griglia time { font: 400 .8125rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-tenue); }
.btn svg, .tipo-azione svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--entra); }
@media (hover: hover) and (pointer: fine) { .btn:hover svg { transform: translateX(3px); } }
/* Scheletro dell'evidenza: stesse misure del vero, niente salti */
.evidenza-attesa .ev-foto { box-shadow: none; }
.evidenza-attesa .ev-testo { width: 100%; }
.evidenza-attesa .ev-testo .scheletro.riga { margin-bottom: 1em; }
.evidenza-attesa .ev-testo .titolo { height: 2.4em; }

/* =====================================================================
   SPECIAL UIT: i tre tipi, la frase «Esplora!» e i filtri
   ===================================================================== */
.r-tipi { position: relative; padding: clamp(6px, 2vw, 24px) 0 clamp(50px, 7vw, 100px); background: var(--carta); }
.r-tipi-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.tipo-special { position: relative; display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; border-radius: 16px; }
.tipo-foto { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; background: var(--carta-3); box-shadow: var(--ombra-foto); -webkit-mask-image: -webkit-radial-gradient(white, black); }
.tipo-foto img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.03); transition: transform .9s var(--entra), filter .6s ease; }
@media (hover: hover) and (pointer: fine) { .tipo-special:hover .tipo-foto img { transform: scale(1.05); filter: saturate(1.05); } }
.tipo-testo { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 18px 2px 4px; }
.tipo-nome { font-size: clamp(1.8rem, 1.5rem + .8vw, 2.2rem); margin: 0; }
.tipo-descr { font-size: 1rem; line-height: 1.6; color: var(--c-testo-2); }
.tipo-azione { margin-top: auto; padding-top: 12px; display: inline-flex; align-items: center; gap: 10px; font: 500 .9375rem/1.2 var(--testo); color: var(--rosso); min-height: 32px; }
@media (hover: hover) and (pointer: fine) { .tipo-special:hover .tipo-azione svg { transform: translateX(4px); } }
.r-esplora {
  text-align: center; margin: clamp(44px, 6vw, 76px) auto 0; max-width: 30ch;
  font: italic 500 clamp(1.55rem, 1.1rem + 1.5vw, 2.4rem)/1.28 var(--titoli); color: var(--c-titolo); text-wrap: balance;
}
.r-filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.r-filtri[hidden] { display: none; }
.r-filtro-nota { max-width: 62ch; margin: 0 0 24px; color: var(--c-testo-2); font-size: 1.0625rem; }

/* =====================================================================
   CITAZIONE E CHIUSURA (testi delle pagine originali)
   ===================================================================== */
.r-citazione { position: relative; padding: clamp(50px, 7vw, 100px) 0; background: var(--carta-2); }
.r-citazione figure { margin: 0 auto; max-width: 920px; text-align: center; }
.r-citazione blockquote { margin: 0; }
.r-citazione blockquote p { font: italic 500 clamp(2rem, 1.3rem + 2.8vw, 3.8rem)/1.12 var(--titoli); color: var(--c-titolo); margin: 0 0 .55em; text-wrap: balance; }
.r-citazione figcaption {
  display: inline-flex; align-items: center; gap: 14px;
  font: 500 .8125rem/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--rosso);
}
.r-citazione figcaption::before, .r-citazione figcaption::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .8; }

.r-chiusura { position: relative; padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 110px); background: var(--carta-2); }
.r-chiusura-scheda {
  max-width: 820px; margin-inline: auto; text-align: center; position: relative; overflow: hidden;
  padding: clamp(38px, 6vw, 76px) clamp(22px, 5vw, 66px); border-radius: 6px;
  border: 1px solid rgba(29, 26, 23, .08); background: var(--foglio);
  box-shadow: 0 40px 70px -50px rgba(66, 40, 18, .5);
}
.r-chiusura-scheda::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--rosso); }
.r-chiusura-scheda .r-chiusura-sopra { font: 500 .8125rem/1.5 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--rosso); margin-bottom: 18px; }
.r-chiusura-scheda h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); margin-bottom: .55em; }
.r-chiusura-scheda h2 .riga-titolo { display: block; }
.r-chiusura-scheda p { max-width: 52ch; margin-inline: auto; color: var(--c-testo-2); }
.r-chiusura-elenco-titolo { font: 600 1.45rem/1.2 var(--titoli); color: var(--c-titolo) !important; margin-top: 1.5em; }
.r-chiusura-elenco { display: grid; gap: 10px; max-width: 46ch; margin: 0 auto 1.8em; text-align: left; }
.r-chiusura-elenco li { position: relative; padding-left: 28px; color: var(--c-testo-2); }
.r-chiusura-elenco li::before { content: ""; position: absolute; left: 4px; top: .72em; width: 7px; height: 7px; background: var(--oro); transform: rotate(45deg); }
.r-chiusura-scheda .btn { margin-top: 14px; }

/* =====================================================================
   ELENCO: le schede e «Carica altri»
   ===================================================================== */
.r-elenco, .risultati { position: relative; padding: clamp(46px, 6vw, 90px) 0 clamp(70px, 9vw, 130px); background: var(--carta-2); }
.risultati { background: var(--carta); }
.r-elenco-testa {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px;
  margin-bottom: clamp(24px, 3vw, 40px); padding-bottom: 18px; border-bottom: 1px solid rgba(29, 26, 23, .16);
}
.r-elenco-testa h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); margin: 0; }
.r-elenco-conto { margin: 0; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c-tenue); }
.r-griglia, .risultati-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(30px, 3.4vw, 48px) clamp(18px, 2.4vw, 32px); }
.r-griglia > li, .risultati-griglia > li { min-width: 0; }
.r-griglia .articolo, .risultati-griglia .articolo { flex-direction: column; }
.r-griglia .articolo .foto, .risultati-griglia .articolo .foto { flex: none; aspect-ratio: 16 / 10; min-height: 0; }
.r-griglia .testo-articolo, .risultati-griglia .testo-articolo { padding: 18px 2px 4px; gap: 10px; }
.r-griglia .cat, .risultati-griglia .cat { font-size: .75rem; }
.r-griglia .titolo-articolo, .risultati-griglia .titolo-articolo { margin: 0; font-size: clamp(1.5rem, 1.25rem + .5vw, 1.8rem); line-height: 1.1; }
.r-estratto {
  font-size: 1rem; line-height: 1.6; color: var(--c-testo-2);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.r-griglia time, .risultati-griglia time { margin-top: auto; padding-top: 4px; }
.articolo mark { background: rgba(217, 164, 65, .32); color: var(--inchiostro); border-radius: 3px; padding: 0 .08em; box-shadow: 0 1px 0 var(--oro); }
/* Scheda finta durante il caricamento */
.r-scheletro .articolo { pointer-events: none; }
.r-scheletro .testo-articolo .riga { margin-bottom: .4em; }

.r-altri { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.r-altri[hidden] { display: none; }
.r-progresso { width: 180px; height: 2px; border-radius: 2px; background: rgba(29, 26, 23, .12); overflow: hidden; }
.r-progresso span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--rosso), var(--oro)); transition: transform .9s var(--entra); }
.r-conta { margin: 0; font: 500 .8125rem/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--c-tenue); }
.r-carica { min-width: 240px; min-height: 54px; margin-top: 6px; font-size: 1.0625rem; }
.r-carica:disabled { cursor: progress; opacity: .75; }
.r-fine { text-align: center; margin: clamp(32px, 5vw, 56px) auto 0; max-width: 34ch; font: italic 500 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.4 var(--titoli); color: var(--c-testo-2); }
.r-fine a { display: inline-flex; align-items: center; min-height: 44px; color: var(--rosso); text-underline-offset: 4px; }
.r-errore-piccolo { margin: 8px 0 0; color: #8C1A00; font-size: 1rem; list-style: none; }

/* =====================================================================
   AVVISI E TESSERE DELLE RACCOLTE
   ===================================================================== */
.r-avviso { position: relative; padding: clamp(10px, 2vw, 30px) 0 clamp(70px, 9vw, 130px); background: var(--carta); }
.r-avviso-testa { max-width: 46rem; margin-bottom: clamp(26px, 4vw, 44px); }
.r-avviso-testa h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
.r-avviso-testa .bottoni { margin-top: 22px; }
.r-avviso-testa .bottoni:empty { display: none; }
.r-tessere { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.r-tessere[hidden] { display: none; }
.tessera {
  position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 200px; overflow: hidden;
  padding: 24px 26px 26px; border-radius: 14px; text-decoration: none; color: inherit;
  border: 1px solid rgba(29, 26, 23, .1); background: var(--foglio);
  box-shadow: 0 30px 50px -40px rgba(66, 40, 18, .55);
  transition: border-color .25s ease;
}
.tessera.principale { border-top: 3px solid var(--rosso); }
@media (hover: hover) and (pointer: fine) { .tessera:hover { border-color: rgba(170, 0, 0, .35); } }
/* Negli avvisi l'intestazione non occupa tutto lo schermo: le tessere arrivano subito */
.r-testa.corta { min-height: 0; }
.r-testa.corta .r-testa-dentro { padding-bottom: 10px; }
.tessera-n { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; }
.tessera-cifra { font: italic 600 2.7rem/1 var(--titoli); font-variant-numeric: lining-nums; color: var(--rosso); }
.tessera-cosa { font: 500 .75rem/1 var(--mono); letter-spacing: .2em; color: var(--c-tenue); }
.tessera-nome { font: 600 clamp(1.7rem, 1.5rem + .5vw, 2rem)/1.08 var(--titoli); color: var(--c-titolo); padding-right: 40px; text-wrap: balance; }
.tessera-descr { font-size: .9375rem; line-height: 1.55; color: var(--c-testo-2); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tessera-freccia {
  position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(29, 26, 23, .18); color: var(--inchiostro);
  transition: background-color .25s ease, color .25s ease, transform .35s var(--entra), border-color .25s ease;
}
.tessera-freccia svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .tessera:hover .tessera-freccia { background: var(--rosso); border-color: var(--rosso); color: var(--carta); transform: scale(1.06); } }

/* =====================================================================
   RICERCA (cerca.html)
   ===================================================================== */
.c-testa { position: relative; padding: clamp(36px, 7vh, 90px) 0 clamp(26px, 4vw, 48px); background: var(--carta); }
.c-testa h1 { font-size: clamp(3rem, 1.6rem + 5.4vw, 7rem); line-height: .94; letter-spacing: -.015em; margin: 0 0 .25em; }
.c-testa .lead { margin-bottom: 0; }
.campo-cerca { position: relative; margin-top: clamp(26px, 4vw, 44px); max-width: 920px; }
.campo-riga {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 8px 8px 22px; border-radius: 999px;
  background: var(--foglio); border: 1px solid rgba(29, 26, 23, .22);
  box-shadow: 0 30px 60px -44px rgba(66, 40, 18, .6), inset 0 1px 0 #fff;
  transition: border-color .25s ease, box-shadow .35s ease;
}
.campo-riga:focus-within { border-color: var(--rosso); box-shadow: 0 30px 60px -44px rgba(66, 40, 18, .6), 0 0 0 4px rgba(170, 0, 0, .12); }
.campo-lente { flex: none; width: 26px; height: 26px; color: var(--rosso); }
.campo-lente svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.campo-riga input {
  flex: 1; min-width: 0; height: 60px; border: 0; background: transparent; color: var(--inchiostro); outline: none;
  font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1.2 var(--titoli); letter-spacing: .005em;
  -webkit-appearance: none; appearance: none;
}
.campo-riga input::placeholder { color: #8a7766; font-style: italic; }
.campo-riga input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.campo-svuota {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(29, 26, 23, .06); color: var(--inchiostro);
  display: grid; place-items: center; transition: background-color .2s ease;
}
.campo-svuota[hidden] { display: none; }
.campo-svuota svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (hover: hover) { .campo-svuota:hover { background: rgba(29, 26, 23, .12); } }
.campo-vai { flex: none; min-height: 56px; padding: 0 28px; }
.campo-aiuto { margin: 14px 0 0 24px; font-size: .9375rem; color: var(--c-tenue); }
.c-stato { min-height: 1.6em; margin: 0 0 18px; font: 500 .875rem/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c-tenue); }
.c-stato strong { color: var(--rosso); font-weight: 600; }
.c-filtro {
  display: inline-flex; align-items: center; gap: 12px; margin: 0 0 22px; padding: 6px 6px 6px 18px; border-radius: 999px;
  background: var(--foglio); border: 1px solid rgba(170, 0, 0, .3);
}
.c-filtro[hidden] { display: none; }
.c-filtro span { font: 500 .75rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--rosso); }
.c-filtro strong { font: 600 1.4rem/1.1 var(--titoli); color: var(--c-titolo); }
.c-filtro a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--carta); background: var(--inchiostro); }
.c-filtro a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.c-gruppo { margin-top: clamp(40px, 5vw, 64px); }
.c-gruppo:first-child { margin-top: 0; }
.c-gruppo > h2 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); margin: 0 0 18px; }
.c-gruppo > .occhiello { margin-bottom: 10px; }
.argomenti { display: flex; flex-wrap: wrap; gap: 8px; }
.argomenti a { text-transform: none; }
.c-vuoto { max-width: 44rem; margin-bottom: clamp(24px, 4vw, 40px); }
.c-vuoto h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); }
.c-vuoto p:not(.occhiello) { color: var(--c-testo-2); }

/* =====================================================================
   TABLET E TELEFONO
   ===================================================================== */
@media (max-width: 1080px) {
  .r-griglia, .risultati-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-tipi-lista { gap: 14px; }
}
/* Raccolte senza video: una «apertura di sezione» tipografica, il nome sopra un filo, sotto descrizione e numero */
@media (min-width: 901px) {
  .r-testa-dentro:not(.con-pannello) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 80px); padding-bottom: 8px; }
  .r-testa-dentro:not(.con-pannello) > * { grid-column: 1 / -1; }
  .r-testa-dentro:not(.con-pannello) > .r-nome { padding-bottom: .12em; margin-bottom: .32em; border-bottom: 1px solid rgba(29, 26, 23, .16); }
  .r-testa-dentro:not(.con-pannello) > .r-descrizione { grid-column: 1; }
  .r-testa-dentro:not(.con-pannello) > .r-dati { grid-column: 2; justify-content: flex-end; margin-top: 0; align-self: start; }
}
@media (max-width: 900px) {
  /* Una colonna: nome, poi il pannello animato, poi la descrizione */
  .r-testa-dentro.con-pannello { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .r-testa-dentro.con-pannello > :not(.r-pannello) { grid-column: 1; }
  .r-pannello { grid-column: 1; grid-row: auto; order: 3; margin: 6px 10px 26px 0; }
  .r-testa-dentro > .r-occhiello { order: 0; }
  .r-testa-dentro > .r-nome { order: 1; }
  .r-testa-dentro > .r-sotto { order: 2; }
  .r-testa-dentro > .r-descrizione { order: 4; }
  .r-testa-dentro > .r-lento { order: 5; }
  .r-testa-dentro > .r-dati { order: 6; }
}
@media (max-width: 760px) {
  /* Intestazione: niente schermo intero, la copertina sotto si intravede */
  .r-testa { padding: 8px 0 30px; }
  .r-testa-dentro { padding-top: 22px; }
  .r-barra { width: 100%; }
  .r-barra-lista { padding: 8px 20px; scroll-padding-inline: 20px; }
  .r-barra-lista { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 36px), transparent); }
  .r-barra.inizio .r-barra-lista { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .r-barra.fine .r-barra-lista { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px); mask-image: linear-gradient(90deg, transparent 0, #000 16px); }
  .r-nome, .con-pannello .r-nome { font-size: clamp(3.1rem, 15vw, 4.6rem); }
  .r-nome.lungo, .con-pannello .r-nome.lungo { font-size: clamp(2.6rem, 11.5vw, 3.6rem); }
  .r-nome.lunghissimo { font-size: clamp(2.3rem, 9.5vw, 3rem); }
  .r-sotto { font-size: 1.45rem; }
  .r-descrizione { min-height: 0; }
  .r-descrizione .lead { font-size: 1.0625rem; line-height: 1.65; }
  .r-dati { margin-top: 24px; gap: 10px 26px; }
  .r-numero { font-size: 3.3rem; }
  .r-pannello .pannello-schermo { border-radius: 18px; }

  /* L'ultimo UIT: foto grande e tonda negli angoli, il testo sotto, sulla carta */
  .r-evidenza { padding-top: 0; }
  .evidenza { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .evidenza .ev-foto { order: 0; }
  .ev-foto { aspect-ratio: 4 / 3; border-radius: 16px; }
  .anima .evidenza[data-compari] .ev-foto { clip-path: inset(6% 4% 6% 4% round 16px); }
  .anima .evidenza.visto .ev-foto { clip-path: inset(0 round 16px); }
  .ev-testo { margin-top: 22px; }
  .ev-titolo { font-size: clamp(2.1rem, 1.5rem + 2.8vw, 2.6rem); }
  .ev-estratto { font-size: 1.0625rem; margin-bottom: 1.2em; display: -webkit-box; -webkit-line-clamp: 6; line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
  .ev-piede { width: 100%; justify-content: space-between; }
  .evidenza-attesa .ev-testo { margin-top: 22px; }

  /* Special: i tre tipi in un carosello che si sfoglia col dito */
  .r-tipi-lista {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
    margin-inline: calc(50% - 50vw); padding: 4px 20px 18px; scroll-padding-inline: 20px;
  }
  .r-tipi-lista::-webkit-scrollbar { display: none; }
  .r-tipi-lista > li { flex: 0 0 min(80%, 330px); scroll-snap-align: start; }
  .r-esplora { margin-top: 30px; }

  .r-elenco-testa { padding-bottom: 14px; }
  .r-citazione blockquote p { font-size: clamp(1.8rem, 1.3rem + 2.6vw, 2.3rem); }
  .r-chiusura-scheda { text-align: left; }
  .r-chiusura-scheda p, .r-chiusura-elenco { margin-inline: 0; }
  .r-tessere { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* Tessere compatte sul telefono: numero a sinistra, nome e descrizione, freccia a destra */
  .tessera { display: grid; grid-template-columns: 58px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; min-height: 84px; padding: 14px 64px 14px 16px; }
  .tessera-n { grid-row: span 2; flex-direction: column; align-items: center; gap: 2px; margin: 0; }
  .tessera-cifra { font-size: 2.3rem; }
  .tessera-cosa { font-size: .75rem; letter-spacing: .14em; }
  .tessera-nome { font-size: 1.5rem; padding-right: 0; }
  .tessera-descr { -webkit-line-clamp: 1; line-clamp: 1; font-size: .9375rem; }
  .tessera-freccia { top: 50%; right: 12px; margin-top: -22px; }

  .campo-riga { padding: 6px 6px 6px 18px; }
  .campo-riga input { height: 52px; font-size: 1.5rem; }
  .campo-lente { width: 22px; height: 22px; }
  .campo-vai { display: none; }
  /* Sul telefono i risultati devono arrivare presto: intestazione più raccolta */
  .c-testa { padding: 22px 0 18px; }
  .c-testa h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .c-testa .lead { font-size: 1.0625rem; line-height: 1.6; }
  .campo-cerca { margin-top: 20px; }
  .campo-aiuto { display: none; }
  .c-filtro strong { font-size: 1.25rem; }
}
@media (max-width: 640px) {
  .r-griglia, .risultati-griglia { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .r-griglia .articolo, .risultati-griglia .articolo { flex-direction: column; gap: 0; align-items: stretch; }
  .r-griglia .articolo .foto, .risultati-griglia .articolo .foto { flex: none; aspect-ratio: 16 / 9; border-radius: 14px; }
  .r-griglia .testo-articolo, .risultati-griglia .testo-articolo { padding: 14px 2px 0; gap: 8px; }
  .r-griglia .titolo-articolo, .risultati-griglia .titolo-articolo { font-size: 1.55rem; }
  .r-griglia > li + li, .risultati-griglia > li + li { border-top: 0; }
  .r-griglia > li, .risultati-griglia > li { padding: 0; }
  .r-estratto { -webkit-line-clamp: 2; line-clamp: 2; }
  .r-carica { width: 100%; }
}

/* Chi preferisce meno movimento: niente lettere che volano, niente luccichii */
@media (prefers-reduced-motion: reduce) {
  .raccolta { transition: none; }
  .r-nome.entra .lettera { animation: none; }
  .scheletro::after { animation: none; }
  .anima .evidenza[data-compari] .ev-foto { clip-path: none; transition: none; }
  .anima .evidenza[data-compari] .ev-foto img { transform: none; }
}

/* =====================================================================
   RICETTE IMMERSIVA (sito_3d/PROGETTO.md, PARTE 5)
   Le raccolte con il film continuo (oggi Ricette): niente fogli di carta,
   tutta la pagina sta sopra il film, che si vede e va avanti dalla hero al
   finale. main ha le classi .immersiva e .tema-scuro: le mette categoria.js
   (per Ricette già lo script dentro #testa) e le toglie se il film non c'è.
   Ciò che si legge sta su VETRO FUMÉ, scuro abbastanza da restare AA anche
   se sotto ci fosse il bianco pieno: la leggibilità non dipende dal film
   (il conto è in prove/prova_ricette_film.py). Vetro: l'ultimo UIT, il
   titolo dell'elenco, le schede, «Carica altri». Tra un vetro e l'altro si
   vede il film; la finestra dopo l'ultimo UIT è un capitolo con il nome
   del momento in grande. Il momento in basso a sinistra lo mette film.js.
   ===================================================================== */
main.immersiva {
  --vetro: rgba(12, 10, 8, .9);                /* senza sfocatura: quasi pieno, il film sotto non disturba i testi */
  --vetro-bordo: rgba(255, 238, 214, .14);
  --vetro-ombra: 0 50px 90px -50px rgba(0, 0, 0, .85), 0 18px 40px -26px rgba(0, 0, 0, .65);
  background: var(--notte);                    /* finché lo strato del film non c'è: scuro, mai la carta */
}
.film-strato ~ main.immersiva { background: transparent; }   /* da qui si vede il film */
main.immersiva .r-evidenza, main.immersiva .r-elenco, main.immersiva .r-citazione,
main.immersiva .r-chiusura, main.immersiva .r-tipi { background: transparent; }
/* Sul vetro le date, le note e le etichette d'oro piccole un po' più chiare: AA con margine anche se sotto il
   vetro ci fosse il bianco pieno (e con la grana del sito sopra) */
main.immersiva .evidenza, main.immersiva .r-elenco-testa, main.immersiva .r-griglia,
main.immersiva .r-altri, main.immersiva .r-fine { --c-tenue: #C2B6A6; --c-accento: var(--oro-chiaro); }

/* ---------- Il vetro ---------- */
main.immersiva .evidenza, main.immersiva .r-elenco-testa, main.immersiva .r-griglia .articolo,
main.immersiva .r-altri, main.immersiva .r-fine, main.immersiva .r-chiusura-scheda {
  background: var(--vetro); border: 1px solid var(--vetro-bordo); box-shadow: var(--vetro-ombra);
}
/* Vetro sfocato (più trasparente: sotto si vede il film, morbido) dove il browser lo sa fare e la grafica non è
   al livello più basso (qualita.js: telefoni piccoli, computer lenti o pagina che non regge). Il conto AA della
   prova si fa con questo vetro, il più chiaro dei due. */
@media screen { @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html:not([data-qualita="bassa"]) main.immersiva { --vetro: rgba(12, 10, 8, .78); }
  html:not([data-qualita="bassa"]) main.immersiva .evidenza, html:not([data-qualita="bassa"]) main.immersiva .r-elenco-testa,
  html:not([data-qualita="bassa"]) main.immersiva .r-griglia .articolo, html:not([data-qualita="bassa"]) main.immersiva .r-altri,
  html:not([data-qualita="bassa"]) main.immersiva .r-fine {
    -webkit-backdrop-filter: blur(16px) saturate(118%); backdrop-filter: blur(16px) saturate(118%);
  }
} }
/* La sfocatura vede il film solo se la scheda non è «ritagliata»: la comparsa delle schede qui non ritaglia */
.anima main.immersiva .r-griglia > [data-compari].visto { clip-path: none; }
main.immersiva .scheletro { background: rgba(255, 246, 234, .09); }
main.immersiva .scheletro::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 246, 234, .16) 50%, transparent 80%); }
main.immersiva .ev-foto.scheletro, main.immersiva .foto.scheletro { background: linear-gradient(135deg, rgba(255, 246, 234, .1), rgba(255, 246, 234, .04)); }

/* ---------- L'ultimo UIT: una grande lastra di vetro, con aria intorno ---------- */
main.immersiva .r-evidenza, main.immersiva #testa.con-film ~ .r-evidenza { padding: clamp(48px, 10vh, 120px) 0 clamp(36px, 7vh, 80px); }
main.immersiva .evidenza { padding: clamp(16px, 2.2vw, 30px); border-radius: 28px; }
main.immersiva .ev-foto { background: rgba(255, 246, 234, .06); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8); }
main.immersiva .ev-testo { padding: clamp(6px, 1.4vw, 20px) clamp(4px, 1.2vw, 16px); }
main.immersiva .ev-titolo a { background-image: linear-gradient(var(--oro-chiaro), var(--oro-chiaro)); }
@media (hover: hover) and (pointer: fine) {
  main.immersiva .ev-titolo a:hover { color: var(--oro-chiaro); }
  main.immersiva .articolo:hover .titolo-articolo { color: var(--oro-chiaro); }
}

/* ---------- Il capitolo: la finestra dopo l'ultimo UIT, con il momento del film in grande ---------- */
main.immersiva #filmFinestra { min-height: 92vh; min-height: 92svh; padding-bottom: clamp(44px, 10vh, 120px); }
main.immersiva #filmFinestra::before {           /* velo morbido solo dove sta il titolo, dal basso */
  content: ""; position: absolute; inset: auto 0 0 0; height: 72%; z-index: -1; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 8, 12, .8) 0%, rgba(7, 8, 12, .46) 46%, rgba(7, 8, 12, 0) 100%);
}
main.immersiva #filmFinestra .film-didascalia {
  max-width: 13ch; padding: 0; border-radius: 0; background: none;
  font: italic 500 clamp(3.2rem, 1.5rem + 6.2vw, 8.6rem)/.95 var(--titoli); letter-spacing: -.015em; text-transform: none;
  color: #FFF6EA; text-shadow: 0 2px 4px rgba(7, 8, 12, .6), 0 12px 54px rgba(7, 8, 12, .6); text-wrap: balance;
}
main.immersiva #filmFinestra .film-ia { margin-top: 20px; }

/* ---------- Gli altri UIT: il titolo su una striscia di vetro, le schede di vetro ---------- */
main.immersiva .r-elenco { padding: clamp(36px, 9vh, 120px) 0 clamp(70px, 14vh, 160px); }
main.immersiva .r-elenco-testa { padding: clamp(18px, 2.4vw, 28px) clamp(20px, 3vw, 38px); border-radius: 24px; margin-bottom: clamp(26px, 4.5vh, 48px); }
main.immersiva .r-griglia { gap: clamp(24px, 2.8vw, 40px); }
main.immersiva .r-griglia .articolo { padding: 10px 10px 18px; border-radius: 22px; }
main.immersiva .r-griglia .articolo .foto { border-radius: 15px; background: rgba(255, 246, 234, .06); box-shadow: none; }
main.immersiva .r-griglia .testo-articolo { padding: 16px 10px 2px; }
main.immersiva .inclina::after { background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 0%), rgba(255, 236, 200, .13), transparent 45%); }
/* Il riflesso che segue il mouse passa SOTTO i testi della scheda (sopra li schiarirebbe e toglierebbe contrasto) */
main.immersiva .r-griglia .articolo { isolation: isolate; }
main.immersiva .r-griglia .inclina::after { z-index: -1; }
/* L'avviso se «Carica altri» non riesce: chiaro sul vetro (il rosso scuro della carta qui non si leggerebbe) */
main.immersiva .r-errore-piccolo { color: #FFB4A3; }
main.immersiva .r-altri { width: fit-content; max-width: 100%; margin-inline: auto; padding: 22px clamp(20px, 3vw, 36px) 24px; border-radius: 26px; }
main.immersiva .r-progresso { background: rgba(255, 246, 234, .16); }
main.immersiva .r-fine { padding: 18px 26px; border-radius: 22px; }
main.immersiva .r-fine a { color: var(--oro-chiaro); }
@media (max-width: 760px) {
  /* sul telefono, sopra il film, nessun testo sotto i 16 px: anche date, etichette e conti sul vetro */
  main.immersiva .cat, main.immersiva .occhiello, main.immersiva .r-griglia time, main.immersiva .ev-piede time,
  main.immersiva .r-elenco-conto, main.immersiva .r-conta, main.immersiva .r-errore-piccolo { font-size: 1rem; letter-spacing: .08em; }
}
@media (max-width: 640px) {
  main.immersiva .r-griglia .testo-articolo { padding: 14px 8px 4px; }
  main.immersiva .r-altri { width: 100%; }
}

/* ---------- Animazioni legate allo scorrimento (dove il browser le sa fare) ----------
   Le foto scorrono un po' dentro la loro cornice mentre attraversano lo schermo; il capitolo
   sale dal profondo ed è pieno appena è tutto nello schermo (si legge sempre intero). Solo trasformazioni e trasparenza (leggere per il browser); con «riduci
   movimento» niente. Dove il browser non le conosce restano le comparse in profondità. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main.immersiva .r-griglia .articolo .foto img, main.immersiva .ev-foto img {
      animation: immersiva-foto linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    main.immersiva #filmFinestra .film-didascalia {
      animation: immersiva-capitolo linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
    }
  }
}
/* translate e scale, non transform: lo zoom al passaggio del mouse e l'assestamento della comparsa (che usano
   transform) continuano a funzionare e si sommano */
@keyframes immersiva-foto { from { translate: 0 -6%; scale: 1.14; } to { translate: 0 6%; scale: 1.14; } }
@keyframes immersiva-capitolo { from { opacity: 0; transform: translate3d(0, 64px, 0) scale(.9); } to { opacity: 1; transform: none; } }

/* Sulla carta stampata il film non c'è: testo scuro, niente vetri */
@media print {
  main.immersiva { background: none; --c-titolo: #1d1a17; --c-testo: #2a231e; --c-testo-2: #4d4037; --c-tenue: #6b5a4c; --c-accento: #AA0000; color: #2a231e; }
  main.immersiva .evidenza, main.immersiva .r-elenco-testa, main.immersiva .r-griglia .articolo,
  main.immersiva .r-altri, main.immersiva .r-fine { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  main.immersiva .evidenza, main.immersiva .r-elenco-testa, main.immersiva .r-griglia,
  main.immersiva .r-altri, main.immersiva .r-fine { --c-tenue: #6b5a4c; --c-accento: #AA0000; }
  main.immersiva .r-fine a, main.immersiva .r-errore-piccolo { color: #AA0000; }
}