/* =========================================================================
   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  Ichnos. 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;
}


/* -------------------------------------------------------------------------
   5. La pagina finiva con due filetti identici e niente in mezzo.

   L'ultima domanda chiude con il border-bottom del suo <li>, che e' il
   filetto con cui ogni domanda si separa dalla successiva. Subito dopo il
   footer apre con il proprio border-top, dello stesso spessore e dello
   stesso colore. Fra i due non c'e' niente: misurato a 390px, il filetto
   della lista a 16451 e quello del footer a 16612, cioe' 161px di vuoto fra
   due righe uguali. Su schermo stretto sono larghe uguale e si leggono per
   quello che sono, una ripetizione.

   Cade quello della lista, non quello del footer: e' l'ultimo di una serie,
   e un elenco di voci separate da filetti non ha bisogno di un filetto dopo
   l'ultima quando c'e' gia' qualcos'altro a chiudere. Il filetto del footer
   invece un mestiere ce l'ha, e lo tiene: apre il footer.
   ---------------------------------------------------------------------- */

#questions ol > li:last-child{border-bottom:0!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}
}



/* -------------------------------------------------------------------------
   9. Sotto il logotipo c'e' una riga in piu', e sugli schermi bassi tocca.

   Dal 27 settembre 2026 sotto il logotipo della hero c'e' "Art of Theia"
   (il marchio e' Ichnos, e quella e' la sua riga). E' assoluta sotto l'h1,
   quindi non sposta il titolo, e il titolo sta centrato sopra un 30vh di
   padding mentre le righe della hero stanno appoggiate al fondo. Sugli
   schermi alti fra le due c'e' aria; su quelli bassi no. Misurato fra il
   fondo della riga e la cima dell'occhiello: 146px a 1440x900, 50 a
   1280x720, 14 a 1024x640, -7 a 800x600, cioe' sovrapposte.

   Sotto i 760px d'altezza il padding di fondo cresce di 4.5rem: il titolo,
   centrato nel resto, sale della meta', quanto basta perche' la riga non
   tocchi l'occhiello. Sopra, dove l'aria c'e', non cambia niente.
   ---------------------------------------------------------------------- */

@media (max-height:760px) and (min-width:681px){
  #hero [data-part="type"]{padding-bottom:calc(30vh + 4.5rem)!important}
}

/* =========================================================================
   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}

.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}
}


/* --- 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}
