/* =========================================================================
   Ichnos, foglio di base.

   La prima sezione e' copiata alla lettera dal blocco <style> del prototipo
   (il prototipo in design/, righe 18-28). Non va modificata: e' il design
   congelato. Tutto cio' che segue esiste perche' il prototipo girava dentro
   l'host di Claude Design e una pagina vera deve provvedere da se'.

   impeccable-disable overused-font

   Il rilevatore segnala Inter come font troppo diffuso, ed e' una regola
   contro la monocultura tipografica, non un difetto di questa pagina. Resta
   Inter, per due motivi scritti: la regola 3 del CLAUDE.md lo impone come
   font unico con tre pesi e otto corpi, e il sito preso a riferimento il
   19 settembre 2026 (napolidevfest.it) usa Inter su ogni elemento, quindi
   cambiarlo porterebbe la pagina lontano dal riferimento invece che vicino.
   Decisione presa, non dimenticanza: se un giorno si cambia idea, si toglie
   questa riga e la segnalazione torna.
   ========================================================================= */

/* --- dal prototipo, alla lettera ---------------------------------------- */

html,body{margin:0;background:#2b241c;color:#F2EBDD;font-family:Inter,system-ui,sans-serif;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:#F2EBDD;text-decoration:none}a:hover{color:#C9A96A}
::selection{background:#C9A96A;color:#1B1916}
canvas,img{display:block}
:focus-visible{outline:2px solid #A98245;outline-offset:3px}
@keyframes ar-rise{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes ar-fade{from{opacity:0}to{opacity:1}}
@keyframes ar-plate{from{filter:blur(16px) brightness(0.72);transform:scale(1.09)}to{filter:blur(0) brightness(1);transform:scale(1)}}
@keyframes ar-spec{from{transform:translateX(-135%)}to{transform:translateX(135%)}}
@keyframes ar-cue{0%,100%{transform:scaleY(0.15);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* --- fine del prototipo ------------------------------------------------- */


/* La pill di navigazione.

   Nel prototipo stava dentro <sc-if value="{{ isDesktop }}">, quindi compariva
   e spariva secondo una misura letta da JavaScript al mount e a ogni resize.
   Qui la decide una media query, che e' la stessa soglia (1024px) presa dallo
   stesso posto ma applicata prima del primo paint: nessun salto di layout, e
   la pill non esiste per chi non ha JavaScript invece di comparire e sparire.

   L'!important non e' pigrizia: la pill porta display:flex nell'attributo
   style, che e' il design congelato e non si tocca. Uno stile inline batte
   sempre un foglio, quindi questa e' l'unica dichiarazione che puo' vincere. */
@media (max-width:1023px){
  [data-part="pill"]{display:none!important}
}

/* Salto al contenuto. Non e' nel design perche' e' invisibile finche' non
   serve: appare solo quando arriva il focus da tastiera, cioe' esattamente
   per la persona a cui serve. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:14px 22px;border-radius:0 0 6px 0;
  background:#1B1916;color:#F2EBDD;
  font-size:14px;font-weight:500;letter-spacing:0.02em;
}
.skip:focus{left:0}

/* Il tier statico, senza JavaScript.

   Il prototipo dava alle sezioni in scrub un'altezza di 180vh-280vh e faceva
   scorrere il contenuto al loro interno. Senza JavaScript quelle altezze
   diventano viewport vuoti, quindi finche' <html> non ha la classe "js" le
   sezioni tornano ad altezza naturale e le lastre stanno ferme. E' lo stesso
   tier che il prototipo usa gia' per reduced motion e per i viewport bassi. */
html:not(.js) [data-scrub]{height:auto!important}
html:not(.js) [data-part="plate"],
html:not(.js) [data-part="pic"],
html:not(.js) [data-part="sheen"]{transform:none!important}
html:not(.js) [data-plate]{opacity:1}
html:not(.js) [data-plate="quarry"] [data-part="dim"]{opacity:0.55}

/* Le fotografie fisse sono un ambiente, non un contenuto: dietro a tre sale
   che si sovrappongono, senza JavaScript resterebbero tutte accese insieme.
   Senza JS si tiene solo la cava, che e' l'ambiente della pagina intera. */
html:not(.js) [data-plate]:not([data-plate="quarry"]){opacity:0}

/* Lo stesso tier, con JavaScript acceso.

   `cinemaOn()` in motion.js spegne il movimento con reduced motion e sotto i
   680px di altezza, ma nessuno toccava le altezze: le sezioni restavano alte
   180vh-280vh con dentro uno stage sticky che non cambia piu'. Misurato a
   1440x600: l'Opening restava 1680px, le tre sale 1320px l'una, e dal 0% al
   70% della sezione lo schermo mostra gli stessi diciotto elementi fermi.
   Circa 1100px di scorrimento a vuoto per sezione, e una pagina lunga venti
   viewport invece di otto.

   Il README §6.8 dice `height: auto` per tutti e due i casi, ed e' la stessa
   regola che il tier senza JavaScript applica gia' due righe piu' su: qui
   cambia solo la condizione che la fa scattare.

   679px e non 680 perche' motion.js confronta con `< 680`: a esattamente
   680px il foglio e lo script devono dire la stessa cosa. */
@media (prefers-reduced-motion:reduce){
  [data-scrub]{height:auto!important}
}
@media (max-height:679px){
  [data-scrub]{height:auto!important}
}

/* =========================================================================
   Correzioni al prototipo.

   Il template e' una copia alla lettera del prototipo e non si tocca, perche'
   quando il design cambia va ri-estratto e una modifica fatta li' andrebbe
   persa. Le correzioni stanno qui, una per volta, ognuna con scritto che cosa
   correggono e come si e' stabilito che fosse un errore e non una scelta.

   L'!important e' inevitabile: quello che si corregge sta in un attributo
   style, e uno stile inline batte sempre un foglio. Non e' pigrizia, e' il
   solo modo di vincere senza riscrivere il markup.

   Se una di queste correzioni viene accolta nel prototipo, la voce qui si
   cancella e la pagina non cambia di un pixel.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. La pill di navigazione non era centrata.

   Il suo attributo style dichiara position due volte:

     position:absolute; left:50%; ... ; position:relative; ...

   In CSS vince l'ultima, quindi la pill risultava relative. Con position
   relative, left:50% sposta di meta' della larghezza dell'header mentre
   translateX(-50%) riporta indietro di meta' della larghezza della pill: due
   misure diverse, che non si annullano. Misurato a 1440px: centro della pill
   a 798px contro un centro pagina di 720px, cioe' 78px fuori asse a destra.

   Che sia un errore e non una scelta lo dicono tre cose: left:50% con
   translateX(-50%) e' l'idioma del centraggio e funziona solo con absolute;
   il direction contract della versione precedente diceva "tutto centrato
   sullo stesso asse, la pill compresa"; e position:relative arriva subito
   prima di isolation:isolate, che e' il contesto di sovrapposizione che
   serve al vetro, gia' creato da absolute.
   ---------------------------------------------------------------------- */

[data-part="pill"]{position:absolute!important}


/* -------------------------------------------------------------------------
   2. Il testo dell'Opening saliva addosso al menu.

   Lo stage dell'Opening e' sticky con top:0, quindi quando si aggancia il
   contenuto risale al bordo superiore e resta appeso alla sua sola
   spaziatura. Con align-content:start finiva a 126px dal bordo, contro una
   pill che finisce a 88px: 38px di distanza, e il blocco di testo sembrava
   incastrato sotto il menu invece che composto nella pagina.

   Che sia un'incoerenza e non una scelta lo dice il resto del design: delle
   cinque sezioni sticky, le altre quattro (le tre sale e il 2026) usano gia'
   padding:88px e align-content:center. L'Opening e' l'unica diversa. Qui
   viene allineata alle altre quattro, non inventata da capo.

   88px non e' un numero tondo per caso: e' esattamente l'altezza dell'header,
   quindi e' la distanza minima che garantisce che nulla passi sotto il menu
   quando il contenuto e' piu' alto del viewport. Sopra quella soglia decide
   align-content, che tiene il blocco al centro dell'altezza disponibile.
   ---------------------------------------------------------------------- */

#opening [data-part="stage"]{
  padding-top:88px!important;
  align-content:center!important;
}


/* -------------------------------------------------------------------------
   3. La colonna di lettura non stava al centro della pagina.

   Il modulo editoriale (README §3) mette la rail a sinistra e la colonna di
   lettura dopo: la rail occupa un lato solo, quindi la colonna non puo'
   essere centrata. Misurato a 1440px: 293px di margine a sinistra contro 58px
   a destra, il centro del blocco 118px piu' a destra del centro pagina.

   Il punto e' che non vale per tutta la pagina. Hero, 2026 e footer sono
   centrati sull'asse (scarto misurato: 7px). Le altre sette sezioni no. La
   pagina quindi oscilla fra due assi diversi mentre si scorre, ed e' questo
   che si vede: non la rail, ma il fatto che a volte c'e' e a volte no.

   Si rimette un contrappeso della stessa misura dall'altra parte, come
   ultimo elemento della riga. La rail resta dov'e' e con la sua funzione, e
   la colonna torna al centro dell'asse che hero e footer dichiarano.

   La soglia e' 72rem e non 46rem, ed e' una misura, non un numero tondo. Il
   contrappeso e' un terzo elemento sulla riga: perche' ci stia servono la
   rail (14rem), la colonna alla sua misura di lettura (34rem), il
   contrappeso (14rem) e i due vuoti in mezzo, cioe' circa 1150px. Sotto,
   la riga non lo regge e il contrappeso va a capo da solo, lasciando la
   colonna esattamente dove stava: a 1024px si misuravano 264px a sinistra
   contro 46px a destra, cioe' la correzione che non correggeva niente.

   Quindi sotto i 72rem non si applica affatto, e fra i 46rem e i 72rem la
   pagina resta quella di prima, asimmetrica. Renderla simmetrica anche li'
   vuol dire mandare la rail sopra la colonna come cartellino, che e' il
   trattamento che il design usa gia' sotto i 46rem: e' una decisione di
   disegno, non una correzione, e va presa da chi firma il design.
   ---------------------------------------------------------------------- */

@media (min-width:72rem){
  main > section > div[style*="max-width:90rem"]::after,
  main > div > div[style*="max-width:90rem"]::after{
    content:"";
    flex:1 1 12rem;
    max-width:14rem;
  }
}


/* -------------------------------------------------------------------------
   4. Le didascalie lunghe erano in maiuscoletto.

   Il ruolo micro del README §5.2 (0.6875rem, maiuscolo, tracking 0.16em) e'
   fatto per le etichette: 01, SALA I, IL PRIMO FALLIMENTO, MISURAZIONE. Su
   quelle resta, ed e' giusto che resti.

   Ma lo stesso ruolo era finito anche su cinque blocchi che etichette non
   sono, perche' sono frasi intere. Misurati in pagina:

     89  Copia in marmo da un bronzo greco. Studio renderizzato. Non ...
     87  Il Battesimo di Cristo. c. 1470 a 1475. Olio e tempera su tavola ...
     81  Rendering della Key in fase di progetto. Design industriale ...
     76  Artheia. Una piattaforma tecnologica contemporanea per il mercato ...
     73  Esame tecnico. Studio diagnostico di un'opera di attribuzione ...

   A undici pixel, tutto in maiuscolo e con 0.16em fra una lettera e l'altra,
   una frase di ottantanove caratteri si decifra invece di leggersi: le
   maiuscole tolgono le aste e le code, che sono la forma con cui si
   riconosce una parola senza compitarla.

   Cambia il trattamento, non la scala: stesso corpo, stesso peso, stesso
   colore, stessa interlinea. Cadono il maiuscolo e il tracking largo, che
   serviva a dare aria fra le maiuscole e in minuscolo le allontanerebbe e
   basta. Il confine e' netto e passa fra i 47 e i 73 caratteri: sotto sono
   etichette, sopra sono frasi. I selettori seguono il significato, non lo
   stile: <figcaption> e' la didascalia di una figura per definizione.
   ---------------------------------------------------------------------- */

figcaption,
footer p[style*="text-transform:uppercase"]{
  text-transform:none!important;
  letter-spacing:0.02em!important;
}


/* -------------------------------------------------------------------------
   6. Il footer, stretto, aveva quattro allineamenti diversi.

   Il colophon e' pensato su due colonne: a sinistra il wordmark e la chiusa,
   a destra la riga che descrive la societa'. Sotto i ~540px la riga va a capo
   e diventa una fascia a tutta larghezza, ma si porta dietro il
   text-align:right e il suo max-width di 24em: il testo resta appeso al bordo
   destro di una scatola piu' stretta della riga, e a schermo sembra centrato.
   Misurato a 390px: scatola da 20 a 284, testo a destra dentro di essa,
   contro un wordmark e una chiusa allineati a 20. Nella barra legale succede
   lo stesso con `.entity`, che ha margin-left:auto e finisce spinta a destra
   su una riga tutta sua.

   Quattro blocchi, quattro allineamenti: sinistra, sinistra, destra dentro
   una scatola stretta, destra. Da qui l'impressione di composizione che non
   torna.

   Sotto i 36rem il footer si impila per scelta invece che per caso, e tutto
   si allinea a sinistra, come ogni altro blocco della pagina a quella
   larghezza. La soglia sta sopra il punto in cui il footer andava a capo da
   solo (misurato fra 520 e 560px), cosi' non esiste una fascia in cui il
   foglio dice una cosa e il flex ne fa un'altra.
   ---------------------------------------------------------------------- */

@media (max-width:36rem){
  footer > div{
    flex-direction:column!important;
    align-items:flex-start!important;
  }
  footer > div > p:last-of-type{
    text-align:left!important;
    max-width:34em!important;
  }
}
/* La barra legale non e' del prototipo, quindi la sua meta' di questa
   correzione sta in chrome.css, insieme al resto delle sue regole. */


/* -------------------------------------------------------------------------
   7. In Sala II l'immagine arrivava dopo il testo.

   Sala II e' specchiata rispetto alle altre due: la fotografia sta a destra
   invece che a sinistra. Il prototipo lo ottiene con order:2 sulla figura e
   order:1 sul testo, che e' un rispecchiamento orizzontale finche' le colonne
   sono due. Quando ne resta una sola, pero', order non specchia piu' niente:
   riordina in verticale, e la fotografia scende sotto il testo mentre in Sala
   I e Sala III resta sopra. Lo stesso racconto, letto in due ordini diversi.

   Non succede solo sul telefono. La griglia interna e' auto-fit su
   minmax(19rem,1fr), quindi il numero di colonne dipende da quanto e' larga
   la colonna di lettura, non dal viewport: verificato a una colonna sia a
   390px sia a 900px, e a due colonne a 700, 800 e 1000. Una media query sul
   viewport prenderebbe la fascia sbagliata.

   Quindi il rispecchiamento passa dalla direzione invece che dall'ordine. In
   RTL il primo elemento del DOM, che e' la figura, va nella colonna di
   destra: stesso risultato di prima quando le colonne sono due. Quando ce
   n'e' una sola la direzione non riordina niente, e la figura torna sopra il
   testo come nelle altre due sale. I figli tornano a LTR, cosi' il testo si
   compone normalmente.
   ---------------------------------------------------------------------- */

[data-screen-label="Room II"] [style*="display:grid"]{direction:rtl}
[data-screen-label="Room II"] [style*="display:grid"] > *{direction:ltr;order:0!important}


/* -------------------------------------------------------------------------
   8. L'indice delle tre sale andava a capo due piu' una.

   Le tre voci sono un elenco in riga con wrap. I loro ingombri sono 114, 133
   e 136px piu' due vuoti da 32: 447px in tutto, contro una colonna che a
   402px di viewport ne ha 362. Quindi le prime due stanno in riga e la terza
   scende da sola, e un indice di tre voci si legge come un blocco di due piu'
   un avanzo.

   Sotto i 31rem va a capo ognuna: tre righe uguali, che e' la forma che un
   indice ha quando non sta in una riga sola. La soglia sta sopra il punto in
   cui l'elenco si spezza da solo (misurato: una riga a 500px, due a 470).
   Sopra, dove le tre voci ci stanno, non cambia niente.
   ---------------------------------------------------------------------- */

@media (max-width:31rem){
  #failures ol{flex-direction:column;gap:10px 0}
}


/* Le voci 5 e 9 non ci sono piu', e i numeri restano quelli: le altre
   sono citate per numero altrove. La 5 toglieva l'ultimo filetto delle tre
   domande, uscite dalla pagina l'8 ottobre 2026; la 9 faceva spazio alla
   riga "Art of Theia" sotto il logotipo della hero, uscita lo stesso giorno. */

/* =========================================================================
   Quello che il design non copre: l'avviso sui cookie, il footer legale e le
   due pagine di policy.

   Il prototipo non li conteneva perche' l'host di Claude Design non aveva
   modo di renderizzarli, quindi qui non si sta reinterpretando niente: si sta
   scrivendo qualcosa che prima non esisteva. Le regole di casa valgono lo
   stesso, e sono l'unico modo perche' queste parti sembrino della stessa
   mostra: un solo font, tre pesi (200 titoli, 300 lettura, 500 etichette e
   controlli), filetti da un pixel invece di riquadri, oro come inchiostro e
   mai come riempimento, nessuna icona.
   ========================================================================= */

/* --- avviso sulla misurazione ------------------------------------------- */

/* Un pannello in un angolo, non una fascia a tutta larghezza.

   La fascia funzionava ma pesava: occupava tutto il bordo inferiore e su un
   telefono copriva il titolo dell'hero, cioe' la prima cosa che la pagina
   deve mostrare. Un pannello stretto dice le stesse cose, lascia vedere la
   cava, e somiglia a una nota a margine invece che a un ingombro di sistema.

   Le proporzioni sono quelle di casa: raggio come le lastre, filetto da un
   pixel al posto del bordo, oro solo come inchiostro, i tre pesi di Inter. */
.notice{
  position:fixed;z-index:70;
  left:clamp(16px,3vw,40px);
  bottom:clamp(16px,3vh,40px);
  width:min(25rem,calc(100vw - 2 * clamp(16px,3vw,40px)));
  border-radius:16px;
  background:rgb(18 13 6 / 0.86);
  border:1px solid rgb(242 235 221 / 0.16);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 24px 70px rgb(0 0 0 / 0.46),0 1px 0 rgb(255 255 255 / 0.06) inset;
  animation:ar-notice 0.9s cubic-bezier(0.16,1,0.3,1) 0.5s both;
}

/* Entra dopo che la scena e' partita, e da sotto: e' una nota che arriva,
   non un pannello che appare. L'attesa di mezzo secondo lascia allo hero il
   suo ingresso. */
@keyframes ar-notice{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

.notice-in{display:flex;flex-direction:column}
.notice-copy{padding:20px 22px 18px;display:flex;flex-direction:column;gap:9px}
.notice-title{
  margin:0;font-size:0.625rem;font-weight:500;letter-spacing:0.2em;
  text-transform:uppercase;color:#C9A96A;
}
.notice-body{
  margin:0;font-weight:300;font-size:0.8125rem;line-height:1.55;
  color:rgb(242 235 221 / 0.74);text-wrap:pretty;
}

/* Il filetto separa il dire dal fare. E' l'unico divisore del pannello:
   nel resto del sito i filetti fanno lo stesso mestiere. */
.notice-acts{
  display:flex;align-items:center;gap:10px;
  padding:13px 22px 15px;
  border-top:1px solid rgb(242 235 221 / 0.14);
}
.notice-more{
  margin-right:auto;
  font-size:0.75rem;font-weight:300;color:rgb(242 235 221 / 0.56);
  border-bottom:1px solid rgb(242 235 221 / 0.24);padding-bottom:1px;
  transition:color 0.4s,border-color 0.4s;
}
.notice-more:hover{color:#C9A96A;border-bottom-color:#C9A96A}

/* I due comandi hanno lo stesso peso: stessa altezza, stesso corpo, stessa
   forma, stesso contrasto. Un rifiuto che costa piu' fatica
   dell'accettazione non e' una scelta libera, ed e' anche il motivo per cui
   qui non c'e' una X che chiude senza rispondere. L'oro sull'accettazione e'
   un filetto, non un riempimento: distingue senza pesare di piu'. */
.notice-btn{
  height:36px;padding:0 17px;border-radius:999px;
  border:1px solid rgb(242 235 221 / 0.3);
  background:transparent;color:#F2EBDD;
  font:inherit;font-size:0.8125rem;font-weight:500;letter-spacing:0.01em;
  cursor:pointer;white-space:nowrap;
  transition:border-color 0.4s,color 0.4s,background 0.4s;
}
.notice-btn:hover{border-color:rgb(242 235 221 / 0.62)}
.notice-btn-yes{border-color:rgb(201 169 106 / 0.6);color:#C9A96A}
.notice-btn-yes:hover{border-color:#C9A96A;background:rgb(201 169 106 / 0.1)}

/* Sotto i 420px il pannello prende la larghezza utile e i due comandi si
   dividono la riga, cosi' restano raggiungibili col pollice. */
/* Su schermo stretto tutto su una riga sola.

   Mandare "Cookie policy" a capo costava una terza riga, cioe' una trentina
   di pixel che in 812px di telefono servono altrove: fra il wordmark, la
   didascalia e il pannello lo spazio e' contato. I comandi restano larghi
   abbastanza per il pollice. */
@media (max-width:700px){
  .notice-copy{padding:16px 17px 14px;gap:7px}
  .notice-acts{padding:11px 17px 13px;gap:8px}
  .notice-more{font-size:0.6875rem;white-space:nowrap}
  .notice-btn{height:35px;padding:0 14px;font-size:0.78125rem}
}

@media (prefers-reduced-motion:reduce){
  .notice{animation:none}
}

/* --- footer legale ------------------------------------------------------ */

/* Sta sotto il footer del design, separato da un filetto: non ne fa parte,
   e fingere il contrario significherebbe ritoccare il disegno. */
.legalbar{
  max-width:90rem;margin:clamp(32px,4.5vh,56px) auto 0;padding:20px 0 0;
  border-top:1px solid rgb(242 235 221 / 0.12);
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;
  font-size:0.75rem;font-weight:300;color:rgb(242 235 221 / 0.56);
}
.legalbar a,.legalbar button{
  color:rgb(242 235 221 / 0.72);
  font:inherit;background:none;border:0;padding:0;cursor:pointer;
  border-bottom:1px solid rgb(242 235 221 / 0.22);
}
.legalbar a:hover,.legalbar button:hover{color:#C9A96A;border-bottom-color:#C9A96A}
.legalbar .sep{color:rgb(242 235 221 / 0.3)}
.legalbar .entity{margin-left:auto;text-align:right}

/* Su schermo stretto la barra va a capo e l'entita' finisce da sola su una
   riga: con margin-left:auto veniva spinta a destra, contro i tre link che
   restano a sinistra. Misurato a 390px: i link a 20, l'entita' a 157. Sotto
   i 36rem, dove anche il footer sopra si impila e si allinea a sinistra
   (vedi la correzione 6), l'auto si toglie e la riga segue le altre. */
@media (max-width:36rem){
  .legalbar .entity{margin-left:0;text-align:left}
}

/* --- pagine legali ------------------------------------------------------- */

/* Nessuna fotografia dietro: sono documenti, non sale. Il fondo resta quello
   della mostra, cosi' non sembrano un altro sito. */
.legal{max-width:44rem;margin:0 auto;padding:clamp(96px,14vh,180px) clamp(20px,3vw,48px) clamp(64px,9vh,110px)}
.legal-back{
  display:inline-block;margin-bottom:clamp(32px,5vh,56px);
  font-size:0.6875rem;font-weight:500;letter-spacing:0.16em;text-transform:uppercase;
  color:#C9A96A;
}
.legal-back:hover{color:#F2EBDD}
.legal h1{
  margin:0 0 18px;font-weight:200;letter-spacing:-0.02em;line-height:1.0;
  font-size:clamp(2.25rem,5.2vw,3.75rem);text-wrap:balance;
}
.legal-intro{
  margin:0 0 clamp(36px,5vh,56px);font-weight:300;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.5;
  color:rgb(242 235 221 / 0.82);text-wrap:pretty;
}
.legal h2{
  margin:clamp(34px,5vh,52px) 0 14px;font-weight:200;letter-spacing:-0.01em;
  font-size:clamp(1.375rem,2.4vw,1.75rem);line-height:1.15;
  padding-top:20px;border-top:1px solid rgb(242 235 221 / 0.18);
}
.legal p{margin:0 0 14px;font-weight:300;line-height:1.62;color:rgb(242 235 221 / 0.82);text-wrap:pretty}
.legal ul{margin:0 0 14px;padding-left:1.1em;display:flex;flex-direction:column;gap:10px}
.legal li{font-weight:300;line-height:1.62;color:rgb(242 235 221 / 0.82)}
.legal li::marker{color:rgb(242 235 221 / 0.4)}

/* Le tabelle sono l'unico posto del sito con dei dati incolonnati, e
   scorrono per conto proprio invece di far scorrere la pagina di lato. */
.legal-table{overflow-x:auto;margin:0 0 18px}
.legal table{border-collapse:collapse;width:100%;min-width:32rem;font-size:0.875rem}
.legal th,.legal td{
  text-align:left;vertical-align:top;padding:11px 16px 11px 0;
  border-bottom:1px solid rgb(242 235 221 / 0.12);
}
.legal th{
  font-size:0.6875rem;font-weight:500;letter-spacing:0.14em;text-transform:uppercase;
  color:#C9A96A;border-bottom-color:rgb(242 235 221 / 0.24);white-space:nowrap;
}
.legal td{font-weight:300;color:rgb(242 235 221 / 0.82);line-height:1.5}
.legal td:first-child{color:#F2EBDD}

/* Chi siamo, nella pagina della startup: il nome nel corpo del lead, il
   ruolo in occhiello d'oro, e i profili come i pulsanti della pagina, con
   il bordo invece del vetro. */
.legal .persona{margin:0 0 14px}
.legal .persona-nome{margin:0;font-weight:300;font-size:clamp(1.3rem,2.1vw,1.875rem);line-height:1.14;color:#F2EBDD}
.legal .persona-ruolo{
  margin:8px 0 18px;font-size:0.6875rem;font-weight:500;letter-spacing:0.16em;
  text-transform:uppercase;color:#C9A96A;
}
.legal .persona-link{list-style:none;margin:0;padding:0;flex-direction:row;flex-wrap:wrap;gap:12px}
.legal .persona-link a{
  display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;
  border:1px solid rgb(242 235 221 / 0.24);border-radius:999px;
  font-size:0.875rem;font-weight:500;color:#F2EBDD;
  transition:color 0.4s,border-color 0.4s;
}
.legal .persona-link a:hover{color:#C9A96A;border-color:#C9A96A}
.legal .persona-link svg{display:block;flex:none}

.legal-updated{
  margin-top:clamp(40px,6vh,64px);padding-top:20px;
  border-top:1px solid rgb(242 235 221 / 0.18);
  font-size:0.75rem;font-weight:300;color:rgb(242 235 221 / 0.56);
}

/* Un segnaposto non riempito non deve poter passare inosservato fino alla
   pubblicazione. Il build lo blocca gia' in produzione; questo e' il
   promemoria visibile mentre si lavora. */
.todo{color:#D0705A;border-bottom:1px dotted currentColor}

/* L'avviso su schermi stretti.

   Su un telefono il testo integrale copriva mezzo viewport e nascondeva la
   cava, che e' la prima cosa che la pagina deve mostrare. Stessa sostanza,
   stesse due opzioni con lo stesso peso, meno spazio: corpo piu' piccolo,
   interlinea piu' stretta, e un tetto oltre il quale il testo scorre per
   conto suo invece di spingere i comandi fuori dallo schermo. */
@media (max-width:680px){
  .notice-in{padding:16px 20px 18px;gap:14px}
  .notice-body{font-size:0.8125rem;line-height:1.45;max-height:8.7em;overflow-y:auto}
  .notice-acts{gap:8px 12px}
  .notice-btn{height:42px;padding:0 18px;font-size:0.8125rem}
  .notice-more{margin-right:0;flex:1 1 100%;order:3;padding-top:2px}
}

/* Lo spazio che la domanda si prende.

   Vedi il commento in notice.js: la didascalia dell'hero e il pannello
   stanno tutti e due in fondo, quindi si sovrappongono. Finche' la domanda
   e' aperta la didascalia sale di quanto serve, e quando arriva la risposta
   torna al suo posto con lo stesso easing di tutto il resto del sito.

   Solo sotto una certa altezza di viewport: su uno schermo molto alto il
   pannello non arriva a toccare il testo e alzarlo sarebbe un movimento
   senza motivo.

   E mai piu' di quanto lo spazio conceda. La salita chiedeva l'altezza del
   pannello e basta, e sopra i 700px di larghezza il wordmark non si sposta:
   da quando la hero ha anche un occhiello, la didascalia arrivava a stamparsi
   dentro il logotipo. Misurato prima della correzione, con l'avviso aperto:
   86px dentro il wordmark a 1366x768, 77px a 1100x768, 72px a 900x768, 29px a
   1440x900. Non e' un caso di bordo: e' ogni portatile, alla prima visita.

   `--hero-cap` e' il tetto, e lo misura notice.js sulla composizione a
   riposo: oltre quel valore la didascalia entrerebbe nel logotipo, quindi si
   ferma li' e il pannello le copre l'ultima riga invece del contrario. Fra un
   logotipo illeggibile e una riga di didascalia sotto un pannello che
   sparisce alla risposta, il danno minore e' il secondo. */
/* Animare una spaziatura invece di una trasformazione e' una scelta, non una
   svista, ed e' la sola possibile: `transform` su questi due elementi e' gia'
   di motion.js, che ci scrive la parallasse della hero a ogni frame di
   scorrimento, e una seconda scrittura la cancellerebbe. Il template non puo'
   ricevere un involucro da trasformare al posto loro, perche' e' il design
   congelato. Sono due transizioni, su due elementi, una volta per visita. */
#hero [data-part="lines"]{
  /* impeccable-disable-next-line layout-transition */
  transition:padding-bottom 0.9s cubic-bezier(0.16,1,0.3,1);
}
@media (max-height:1100px){
  html.asking #hero [data-part="lines"]{
    /* !important perche' la didascalia porta lo shorthand `padding` nello
       style inline, e uno shorthand inline batte una longhand da foglio. */
    padding-bottom:min(
      calc(var(--notice-h,210px) + clamp(32px,5vh,56px)),
      var(--hero-cap,100vh)
    )!important;
  }
}
/* Su uno schermo basso serve anche l'altra meta' dello spazio.

   Alzare la sola didascalia non basta: a 812px finiva addosso al wordmark.
   Il wordmark e' centrato nel suo riquadro, quindi aumentare la spaziatura
   in basso lo fa salire, e i due si fanno spazio a vicenda invece che uno
   solo. Vale finche' la domanda e' aperta: appena c'e' una risposta, l'hero
   torna esattamente alla composizione del design. */
#hero [data-part="type"]{
  /* impeccable-disable-next-line layout-transition */
  transition:padding-bottom 0.9s cubic-bezier(0.16,1,0.3,1);
}
@media (max-height:900px) and (max-width:700px){
  html.asking #hero [data-part="type"]{padding-bottom:38vh!important}
}

@media (prefers-reduced-motion:reduce){
  #hero [data-part="lines"],
  #hero [data-part="type"]{transition:none}
}

/* =========================================================================
   Ichnos in scena. 8 ottobre 2026.

   Tre pezzi del frontend di Ichnos (Koba27k/Ichnos, frontend/app/home.css e
   primitive.css), portati nella landing su richiesta di Eugenio:

     il sipario     "Ogni opera ha un autore.", che si sgretola in polvere
                    e compone il nome (sipario.js, cinema.js)
     il nome        che si inclina verso il puntatore, con la lampada che
                    illumina la cava e il metallo che segue la luce
     la scheda      il telefono, la lastra d'oro e il tap (scena.js,
                    scena-verifica.js)

   Le regole della scena e della lastra sono copiate alla lettera e usano i
   token del frontend, che qui sotto sono dichiarati con gli stessi valori:
   sono gli stessi numeri della landing (#2b241c, #F2EBDD, #A98245, #C9A96A,
   un solo easing), scritti una volta come variabili.
   ========================================================================= */

:root{
  --ease:cubic-bezier(0.16,1,0.3,1);
  --ground:#2b241c;
  --ink:#F2EBDD;
  --ink-88:rgb(242 235 221 / 0.88);
  --ink-82:rgb(242 235 221 / 0.82);
  --ink-64:rgb(242 235 221 / 0.64);
  --accent:#A98245;
  --accent-bright:#C9A96A;
  --rule:rgb(242 235 221 / 0.18);
  --rule-strong:rgb(242 235 221 / 0.4);
  --rule-soft:rgb(242 235 221 / 0.12);
  --panel:rgb(18 13 6 / 0.86);
  --panel-edge:rgb(242 235 221 / 0.16);
  --gold-plate:linear-gradient(118deg,#6d5836 0%,#a98245 18%,#d9bd85 34%,#8f7040 52%,#c2a065 70%,#6f5a38 88%,#4c3d26 100%);
  --gold-edge:linear-gradient(180deg,#c2a065 0%,#8f7040 40%,#4c3d26 100%);
  --schermo:#0a0703;
  --w-read:300;
  --w-label:500;
  --col-gap:clamp(24px,4vw,64px);
  --nav-h:88px;
  --r-plate:1.5rem;
  --plate-edge:1px solid rgb(255 255 255 / 0.28);
  --shadow-plate:inset 0 1px 0 0 rgb(255 244 214 / 0.35),0 44px 90px -34px rgb(0 0 0 / 0.7),0 4px 10px -4px rgb(0 0 0 / 0.5);
  --shadow-panel:0 24px 70px rgb(0 0 0 / 0.46),0 1px 0 rgb(255 255 255 / 0.06) inset;
}


/* --- Il sipario e il nome ---------------------------------------------------

   Tutto l'ingresso della hero parte da `--inizio`, che il template usa nei
   ritardi: 0.62s senza sipario (i numeri di prima), 1.55s con il sipario CSS
   che si alza da solo, 2.85s quando la polvere compone il nome, 0.15s quando
   lo si salta. */

#hero{--inizio:1.55s}
html[data-sipario="no"] #hero,
#hero[data-fase="assente"]{--inizio:0.62s}
#hero[data-cine="intro"],
#hero[data-cine="fatto"]{--inizio:2.85s}
#hero[data-rapido="si"]{--inizio:0.15s}

.home-sipario{
  position:fixed;inset:0;z-index:55;
  display:flex;align-items:center;justify-content:center;
  padding:0 clamp(20px,3vw,48px);
  background:var(--ground);
  animation:ar-sipario 0.9s var(--ease) 1.45s both;
}
html[data-sipario="no"] .home-sipario{display:none}
/* Con JavaScript il sipario CSS e' solo la riserva: si alza da solo dopo
   3,6s, se il motore non arriva. Il motore lo prende prima (cinema.js), o lo
   alza subito se non puo' fare la polvere (sipario.js). */
html.js .home-sipario{animation-delay:3.6s}
#hero[data-rapido="si"] .home-sipario{animation:ar-sipario 0.45s var(--ease) both}
/* Con il cinema il sipario non si alza: si apre, e lo apre cinema.js. */
#hero[data-cine="intro"] .home-sipario{animation:none}

/* Il corpo dei titoli minori della landing: clamp(1.625rem,3.2vw,2.875rem),
   peso 300. */
.home-sipario-frase{
  margin:0;text-align:center;text-wrap:balance;
  font-weight:300;font-size:clamp(1.625rem,3.2vw,2.875rem);line-height:1.04;letter-spacing:-0.01em;
  color:var(--ink);
}
.home-sipario-frase span{
  display:inline-block;
  animation:ar-rise 0.8s var(--ease) calc(0.15s + var(--i) * 0.11s) both;
}
@keyframes ar-sipario{to{transform:translateY(-100%);visibility:hidden}}

/* La barra entra con l'apertura: il sipario sta dentro <main>, sotto la
   barra, e non la potrebbe coprire. */
body:has(.home-sipario) header[data-ref="navRef"]{animation:ar-fade 0.9s var(--ease) 1.35s both}
body:has(#hero[data-cine="intro"] .home-sipario) header[data-ref="navRef"]{animation-delay:2.9s}
body:has(#hero[data-rapido="si"] .home-sipario) header[data-ref="navRef"]{animation-delay:0s}
html.js body:has(.home-sipario) header[data-ref="navRef"]{animation-delay:3.5s}
html[data-sipario="no"] body header[data-ref="navRef"]{animation:none!important}

/* Con il cinema il nome non sale dal fuoco: lo compone la polvere. */
#hero[data-cine="intro"] .home-nome,
#hero[data-cine="fatto"] .home-nome{animation:none!important}
#hero[data-cine] [data-part="type"]{perspective:1100px}

/* Il riflesso che segue la lampada: la stessa luce del riflesso, una banda
   piu' stretta. Posizione e opacita' le scrive cinema.js. */
.home-riflesso-luce{
  position:absolute;top:-50%;bottom:-50%;left:-50%;width:200%;
  opacity:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 40%,rgb(255 244 214 / 0.55) 50%,transparent 60%);
  will-change:transform,opacity;
}

/* La lampada dietro al testo, la polvere davanti. Fisse, e fuori dagli
   involucri che lo scorrimento trasforma. */
.home-lampada{
  position:fixed;top:0;left:0;z-index:-1;
  width:60rem;height:60rem;margin:-30rem 0 0 -30rem;border-radius:50%;
  background:radial-gradient(closest-side,rgb(255 244 214 / 0.1),rgb(255 244 214 / 0.04) 45%,transparent);
  opacity:0;pointer-events:none;will-change:transform,opacity;
}
.home-polvere{
  position:fixed;inset:0;z-index:56;
  width:100%;height:100%;pointer-events:none;
}


/* --- La scheda in scena: dal frontend, alla lettera ------------------------ */

/* ── Il binario e il palco, §6.3 ────────────────────────────────────────────
 *
 * In `pin`, quando il palco sta nella finestra: il binario si allunga, il
 * palco resta fermo e alto quanto la finestra, e sotto l'intestazione. In
 * `segui`, quando non ci sta (il telefono): il palco ha la sua altezza, e si
 * ferma dove la figura e' al centro (il `top` lo scrive lib/scena.js); dopo
 * il palco il binario ha la stessa corsa di `pin`, in una coda vuota. Senza
 * JavaScript sono due involucri qualunque. */

/* Le figure escono di scena di lato (la lastra d'oro se ne va a destra), e
   una trasformazione conta come sforamento: a 375px la pagina era larga 531,
   misurato. `clip` e non `hidden`: `hidden` farebbe della sezione un
   contenitore di scorrimento, e il palco smetterebbe di restare fermo. */
.scena {
    overflow-x: clip;
}

.scena-binario {
    position: relative;
}

.scena[data-scena='pin'] {
    padding-block: 0;
}

.scena[data-scena='pin'] .scena-binario {
    height: var(--corsa, 300vh);
}

.scena[data-scena='pin'] .scena-palco {
    position: sticky;
    top: 0;
    box-sizing: border-box;
    height: 100vh;
    height: 100svh;
    padding: calc(var(--nav-h) + 8px) 0 clamp(16px, 3vh, 32px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.scena[data-scena='segui'] .scena-palco {
    position: sticky;
}

.scena[data-scena='segui'] .scena-binario::after {
    content: '';
    display: block;
    height: calc(var(--corsa, 300vh) - 100vh);
}

.scena-verifica {
    --corsa: 340vh;
}

.scena-artista {
    --corsa: 300vh;
}

.scena-focus {
    --corsa: 250vh;
}

/* ── I due pezzi che tornano in ogni scena ──────────────────────────────── */

/* Il punto di stato di §9.6: 4px d'oro chiaro, e una parola accanto. */
.tel-punto {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-bright);
}

/* Le onde del tap: tre cerchi da 1px che si allargano dal contatto. Fermi,
   non ci sono: sono un istante, non uno stato. */
.sv-onda {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid var(--accent-bright);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ══ La verifica ═══════════════════════════════════════════════════════════ */

.sv-griglia {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--col-gap);
}

.sv-testo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sv-riga {
    max-width: 38rem;
    color: var(--ink-88);
}

.sv-modi {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 3vh, 28px);
    margin-top: clamp(12px, 2.4vh, 24px);
}

.sv-modo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 38rem;
    padding-top: 16px;
    border-top: 1px solid var(--rule-strong);
}

.sv-modo p {
    text-wrap: pretty;
}

/* Il filetto che si stende quando tocca a quel modo: d'oro per il chip, che
   e' cio' che Ichnos da', d'inchiostro per il codice. */
.sv-modo-filo {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent);
    transform-origin: left;
}

.sv-modo-codice .sv-modo-filo {
    background: var(--ink-82);
}

/* La figura. Le posizioni sono in percentuali della figura, e ogni pezzo e'
   assoluto: la regia li sposta con `transform`, che non tocca il layout. */
.sv-set {
    position: relative;
    height: min(calc(100svh - var(--nav-h) - 72px), 640px);
    min-height: 420px;
    perspective: 1600px;
    /* Il contenitore delle misure della pergamena e delle onde: `cqw` si
       riferisce a un contenitore ANTENATO, mai all'elemento stesso, e un
       padding in `cqw` sulla pergamena finiva misurato sulla finestra. */
    container-type: inline-size;
}

/* Il telefono di §5.4: il metallo della lastra d'oro, i tasti, lo schermo. */
.sv-telefono {
    position: absolute;
    top: 3%;
    left: 12%;
    z-index: 2;
    height: 94%;
    aspect-ratio: 9 / 19.5;
    border-radius: 13% / 6%;
    background-image: var(--gold-plate);
    box-shadow:
        inset 0 1px 0 0 rgb(255 244 214 / 0.55),
        inset 0 -1px 0 0 rgb(0 0 0 / 0.4),
        inset 0 0 0 1px rgb(0 0 0 / 0.22),
        0 44px 90px -34px rgb(46 34 16 / 0.62),
        0 4px 10px -4px rgb(46 34 16 / 0.5);
    transform: rotateX(6deg) rotateY(-16deg) rotateZ(-3deg);
    will-change: transform, opacity;
}

.tel-tasto {
    position: absolute;
    width: 1.7%;
    border-radius: 1px 0 0 1px;
    background-image: var(--gold-edge);
}

.tel-tasto-1 { left: -1%; top: 18.5%; height: 4.4%; }
.tel-tasto-2 { left: -1%; top: 26%; height: 7.6%; }
.tel-tasto-3 { left: -1%; top: 35.5%; height: 7.6%; }
.tel-tasto-4 { right: -1%; top: 29%; height: 10.6%; border-radius: 0 1px 1px 0; }

/* Lo schermo: il sito in miniatura, la cava sotto il velo. */
.tel-schermo {
    position: absolute;
    inset: 1.2% 2.6%;
    overflow: hidden;
    isolation: isolate;
    border-radius: 11% / 5.2%;
    background:
        linear-gradient(180deg, rgb(20 14 6 / 0.72), rgb(20 14 6 / 0.9)),
        url('/media/quarry-640.jpg') 45% 40% / cover,
        var(--schermo);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.55);
    container-type: inline-size;
    font-weight: var(--w-read);
    color: var(--ink);
}

.tel-isola {
    position: absolute;
    top: 1.7%;
    left: 50%;
    z-index: 5;
    width: 27%;
    height: 3.1%;
    border-radius: 999px;
    background: var(--schermo);
    transform: translateX(-50%);
}

.tel-vista {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 3.4cqw;
    padding: 17cqw 7cqw 8cqw;
    will-change: opacity, transform;
}

/* In attesa: il nome, un anello, l'invito. Fermo non si vede: la figura
   ferma mostra la scheda gia' aperta. */
.tel-vista-attesa {
    align-items: center;
    justify-content: center;
    gap: 9cqw;
    opacity: 0;
}

.tel-marchio {
    display: block;
    width: 46cqw;
    height: auto;
}

.tel-vista-codice .tel-marchio {
    width: 34cqw;
    margin: 4cqw 0 6cqw;
}

.tel-anello {
    width: 28cqw;
    aspect-ratio: 1;
    border: 1px solid var(--accent-bright);
    border-radius: 50%;
    box-shadow: 0 0 0 4cqw rgb(201 169 106 / 0.1);
}

.tel-micro,
.tel-stato,
.tel-esempio,
.tel-fatti > :nth-child(odd) {
    font-size: 3.1cqw;
    font-weight: var(--w-label);
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.tel-micro {
    color: var(--ink-82);
    text-align: center;
}

.tel-vista-codice .tel-micro {
    text-align: left;
}

.tel-esempio {
    position: absolute;
    top: 8cqw;
    right: 7cqw;
    padding: 0.4cqw 2.2cqw;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    color: var(--ink-82);
    font-size: 2.6cqw;
}

/* La scheda completa, aperta dal chip. */
.tel-stato {
    display: flex;
    align-items: center;
    gap: 2cqw;
    color: var(--accent-bright);
}

.tel-stato .tel-punto {
    width: 1.6cqw;
    height: 1.6cqw;
}

.tel-foto {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 4cqw;
    background: url('/media/quarry-640.jpg') 44% 36% / cover;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.tel-titolo {
    font-size: 7.4cqw;
    line-height: 1.12;
}

.tel-autore {
    margin-top: -1.6cqw;
    font-size: 4.4cqw;
    color: var(--ink-82);
}

.tel-fatti {
    display: grid;
    grid-template-columns: 30% 1fr;
    font-size: 3.9cqw;
}

.tel-fatti > * {
    padding: 2cqw 0;
    border-bottom: 1px solid var(--rule-soft);
}

.tel-fatti > :nth-child(odd) {
    color: var(--ink-64);
    font-size: 2.7cqw;
    align-self: center;
}

.tel-fatti > :nth-last-child(-n + 2) {
    border-bottom: 0;
}

/* Il campo del codice: un filetto, le lettere, il cursore. */
.tel-vista-codice {
    opacity: 0;
}

.tel-campo {
    position: relative;
    display: block;
    padding: 2.6cqw 0;
    border-bottom: 1px solid var(--ink-82);
    font-size: 6.2cqw;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tel-campo-testo {
    display: inline-flex;
}

.tel-cursore {
    position: absolute;
    top: 22%;
    left: 0;
    width: 1px;
    height: 56%;
    background: var(--accent-bright);
    opacity: 0;
}

.tel-bottone {
    align-self: flex-start;
    margin-top: 5cqw;
    padding: 2.8cqw 6cqw;
    border: 1px solid rgb(201 169 106 / 0.7);
    border-radius: 999px;
    font-size: 4cqw;
    font-weight: var(--w-label);
    box-shadow: 0 0 calc(var(--acceso, 0) * 7cqw) rgb(201 169 106 / 0.55);
}

/* Il lampo del tap: una luce che attraversa lo schermo dall'alto. */
.tel-lampo {
    position: absolute;
    inset: -20% 0;
    z-index: 4;
    background: linear-gradient(180deg, transparent 20%, rgb(255 244 214 / 0.42) 50%, transparent 80%);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

/* La lastra d'oro dietro il telefono, in alto a destra: il punto dove il
   telefono la tocca. */
.sv-chiave {
    position: absolute;
    top: 8%;
    left: 56%;
    z-index: 1;
    width: 46%;
    transform: translate3d(-8%, 0, 0) rotateY(-8deg) rotateX(10deg) rotateZ(-6deg) scale(0.9);
    will-change: transform, opacity;
}

.sv-onde {
    position: absolute;
    top: 19%;
    left: 60%;
    z-index: 3;
    width: 0;
    height: 0;
}

.sv-onda {
    width: 42cqw;
    height: 42cqw;
    margin: -21cqw 0 0 -21cqw;
    left: 0;
    top: 0;
}

/* La pergamena: la scheda ridotta, in un pannello di §6.9. Porta solo cio'
   che porta quella vera, e la riga che dice che cosa non dice. */
.sv-scheda {
    position: absolute;
    right: 0;
    bottom: 5%;
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 1.35cqw;
    width: 56%;
    box-sizing: border-box;
    padding: 3.9cqw 3.9cqw 3.4cqw;
    border: 1px solid var(--panel-edge);
    border-radius: var(--r-plate);
    background: var(--panel);
    box-shadow: var(--shadow-panel);
    font-weight: var(--w-read);
    transform: rotateY(-10deg);
    will-change: transform, opacity;
}

.sv-scheda-esempio,
.sv-scheda-stato,
.sv-scheda-fatti > :nth-child(odd) {
    font-size: 1.9cqw;
    font-weight: var(--w-label);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sv-scheda-esempio {
    position: absolute;
    top: 3.4cqw;
    right: 3.4cqw;
    padding: 0.2cqw 1.35cqw;
    border: 1px solid var(--rule-strong);
    border-radius: 999px;
    color: var(--ink-82);
    font-size: 1.6cqw;
}

.sv-scheda-stato {
    max-width: 70%;
    color: var(--accent-bright);
    line-height: 1.5;
}

.sv-scheda-titolo {
    margin-top: 0.6cqw;
    font-size: 4.7cqw;
    line-height: 1.1;
}

.sv-scheda-autore {
    font-size: 2.8cqw;
    color: var(--ink-82);
}

.sv-scheda-fatti {
    display: grid;
    grid-template-columns: 30% 1fr;
    margin-top: 0.8cqw;
    font-size: 2.5cqw;
    font-variant-numeric: tabular-nums;
}

.sv-scheda-fatti > * {
    padding: 1.25cqw 0;
    border-top: 1px solid var(--rule-soft);
}

.sv-scheda-fatti > :nth-child(odd) {
    color: var(--ink-82);
    font-size: 1.7cqw;
    align-self: center;
}

.sv-scheda-nota {
    padding-top: 1.35cqw;
    border-top: 1px solid var(--accent);
    font-size: 2.35cqw;
    line-height: 1.45;
    color: var(--ink-88);
}


/* --- La lastra d'oro: dal frontend, alla lettera --------------------------- */

.lastra {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    aspect-ratio: var(--proporzione, 16 / 10);
    border-radius: var(--r-plate);
    transform-style: preserve-3d;
    background: var(--ground);
    border: var(--plate-edge);
    box-shadow: var(--shadow-plate);
}


.lastra-luce {
    position: absolute;
    top: -50%;
    bottom: -50%;
    left: -60%;
    width: 46%;
    pointer-events: none;
    transform: translateX(170%) rotate(14deg);
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgb(255 250 232 / 0.1) 34%,
        rgb(255 252 240 / 0.34) 50%,
        rgb(255 250 232 / 0.1) 66%,
        transparent 100%
    );
    mix-blend-mode: screen;
}

/* ── La lastra d'oro, §5.3 ──────────────────────────────────────────────── */

.lastra-oro {
    aspect-ratio: 8 / 5;
    border: 0;
    /* la spazzolatura a 99 gradi sopra il metallo */
    background-image: repeating-linear-gradient(
            99deg,
            rgb(255 255 255 / 0.055) 0px,
            rgb(255 255 255 / 0.055) 1px,
            rgb(0 0 0 / 0.03) 1px,
            rgb(0 0 0 / 0.03) 2.5px
        ),
        var(--gold-plate);
    box-shadow:
        inset 0 1px 0 0 rgb(255 244 214 / 0.55),
        inset 0 -1px 0 0 rgb(0 0 0 / 0.4),
        inset 0 0 0 1px rgb(0 0 0 / 0.22),
        0 44px 90px -34px rgb(46 34 16 / 0.62),
        0 4px 10px -4px rgb(46 34 16 / 0.5);
}

/* L'incisione e' DOPPIA MASCHERA sul logotipo, mai un colore e mai un testo
   (§8): un'ombra scura mezzo pixel piu' su, una luce chiara un pixel piu' giu'.
   Il logotipo resta l'immagine oro e non si ricolora mai. */
.oro-incisione {
    position: absolute;
    inset: 0;
    pointer-events: none;
    -webkit-mask-image: url('/media/ichnos-wordmark.webp');
    mask-image: url('/media/ichnos-wordmark.webp');
    -webkit-mask-size: 62% auto;
    mask-size: 62% auto;
    -webkit-mask-position: center 42%;
    mask-position: center 42%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.oro-incisione-ombra {
    background-color: rgb(28 18 6 / 0.62);
    transform: translateY(-0.5px);
}

.oro-incisione-luce {
    background-color: rgb(255 240 206 / 0.42);
    transform: translateY(1px);
    mix-blend-mode: screen;
}

/* Sul metallo la luce radente e' piu' forte: 0.16 e 0.62 invece di 0.1 e 0.34 */
.oro-luce {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgb(255 250 232 / 0.16) 34%,
        rgb(255 252 240 / 0.62) 50%,
        rgb(255 250 232 / 0.16) 66%,
        transparent 100%
    );
}

.oro-seriale {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: rgb(28 18 6 / 0.5);
    text-shadow: 0 1px 0 rgb(255 240 206 / 0.36);
}


/* --- La scena dentro la landing ---------------------------------------------

   Il testo della scena usa i corpi della landing: l'occhiello, il titolo di
   sezione, il lead, il corpo e la riga dei fatti. */

.scena-verifica{padding:clamp(72px,10vh,140px) clamp(20px,3vw,48px)}
.scena-verifica[data-scena="pin"]{padding-block:0}
.sv-griglia{max-width:90rem;margin:0 auto}
.sv-testo h2,.sv-testo h3,.sv-testo p{margin:0}
.sv-occhiello{font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;color:#C9A96A}
.sv-titolo{font-weight:200;font-size:clamp(2.125rem,4.75vw,4.25rem);line-height:0.98;letter-spacing:-0.015em;text-wrap:balance}
.sv-riga{font-weight:300;font-size:clamp(1.3rem,2.1vw,1.875rem);line-height:1.14}
.sv-modo-nome{font-weight:300;font-size:clamp(1.3rem,2.1vw,1.875rem);line-height:1.14}
.sv-modo-riga{font-weight:300;font-size:clamp(1rem,0.8rem + 0.36vw,1.1875rem);line-height:1.55}
.sv-modo-esito{font-weight:300;font-size:0.9375rem;line-height:1.5;color:var(--ink-82)}
.sv-azione{margin-top:clamp(24px,4vh,44px)}
.oro-seriale{font-size:0.6875rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;line-height:1.6}

/* Sotto i 64rem una colonna sola: prima il testo, poi la figura. */
@media (width < 64rem){
  .sv-griglia{grid-template-columns:minmax(0,1fr)}
  .sv-set{width:min(100%,30rem);height:auto;aspect-ratio:10 / 11;min-height:0;margin:8px auto 0}
}
@media (width < 48rem){
  .sv-onda{width:120px;height:120px;margin:-60px 0 0 -60px}
}

/* Movimento ridotto: niente sipario, niente lampada, niente polvere, e la
   scena e' gia' conclusa. */
@media (prefers-reduced-motion:reduce){
  .home-sipario,.home-riflesso-luce,.home-lampada,.home-polvere{display:none}
}

/* L'avviso sui cookie aspetta che il sipario se ne vada: sopra il buio
   dell'intro coprirebbe la frase, e toccarlo la salterebbe. Nessun tag parte
   comunque prima del consenso, quindi aspettare non cambia niente. */
body:has(#hero .home-sipario) .notice{visibility:hidden}


/* --- generato da scripts/dsl.mjs a partire dagli style-hover del prototipo --- */
[data-hv="1"]:hover{background:rgb(255 250 240 / 0.28)}
[data-hv="2"]:hover{color:#C9A96A}