/* ══════════════════════════════════════════════════════════════════
   vae-mood.css
   L'ultimo foglio di ogni pagina. Non aggiunge niente di nuovo: prende
   quello che c'e' gia' e lo porta tutto nella stessa direzione.

   Sei cose, in quest'ordine:
     1  tre toni e basta
     2  aria
     3  contrasto di scala
     4  tutto lento
     5  una sola ricetta per le immagini
     6  i vuoti dichiarati

   Va per ultimo perche' deve poter correggere i fogli precedenti a
   parita' di peso. Dove i fogli vecchi usano !important o catene di
   :not(#id), qui si usa la stessa arma, mai piu' del necessario.
   ══════════════════════════════════════════════════════════════════ */


/* ══ 1 · TRE TONI ══════════════════════════════════════════════════
   Il nero caldo, il rosso, e un terzo tono preso dalla pelle nelle
   foto. Tutto il resto era rimasto da versioni precedenti: un lilla
   freddo, un rosa cipria, un tan. Non li cancello, li faccio puntare
   tutti allo stesso posto, cosi' le duecento righe che li chiamano
   continuano a funzionare e la tavolozza si chiude da sola.
   Il tono chiaro serve solo dove prima c'era uno scarto: se anche il
   passaggio del mouse diventasse identico al riposo, non si vedrebbe
   piu' che una cosa e' toccabile.                                    */
:root{
  --skin:#c9a18d;
  --skin-hi:#e3c3af;

  /* il carattere scritto a mano era dichiarato solo nella home: qui vale
     per tutte le pagine, altrimenti var(--hand) e' un valore che non
     esiste e la riga scritta a mano esce in grottesco */
  --hand:"Caveat",cursive;

  --cyan:var(--skin-hi);
  --magenta:var(--skin);
  --amber:var(--skin);
  --acid:var(--skin);
  --ice:var(--skin);
  --chrome:var(--haze);

  /* la ricetta unica per le foto, vedi il punto 5 */
  --foto:grayscale(.92) sepia(.24) saturate(1.25) contrast(1.06) brightness(.92);
  --foto-viva:grayscale(.55) sepia(.12) saturate(1.15) contrast(1.05) brightness(1);
}


/* ══ 2 · ARIA ══════════════════════════════════════════════════════
   Con poco contenuto, l'unica cosa che si puo' aumentare e' lo spazio.
   Una pagina lunga che respira sembra piena; una corta e fitta sembra
   una pagina a cui manca qualcosa.                                   */
html body main{padding-bottom:clamp(150px,22vh,280px)}
html body .vv{padding-top:clamp(120px,17vw,230px);padding-bottom:clamp(120px,17vw,230px)}
html body .ap-band{margin-bottom:clamp(60px,11vh,130px)}
html body .vd-big{margin-top:clamp(56px,7vw,90px)}
html body .vd-foot{margin-top:clamp(40px,5vw,72px)}
html body .vae-foot{margin-top:clamp(60px,10vh,140px)}
html body.page-about .page,
html body.page-practices .page{padding-bottom:clamp(120px,20vh,240px)}
html body .ab2-rooms{margin-top:clamp(44px,6vw,80px)}
html body .ab2-room{padding-top:1.5em;padding-bottom:1.5em}


/* ══ 3 · CONTRASTO DI SCALA ════════════════════════════════════════
   Una cosa enorme e tutto il resto minuscolo. E' quello che fa
   sembrare un sito costoso, molto piu' di qualunque effetto: il
   titolo comanda, il mono sussurra e non prova a competere.          */
html body .hm-inhero .hm-in-q{
  font-size:clamp(2rem,4.4vw,4.6rem);
  line-height:1.08;
  letter-spacing:-.018em;
}
html body .vv-h2,
html body .ph-h2{
  font-size:clamp(2rem,4.2vw,3.9rem);
  line-height:1.04;
  letter-spacing:-.015em;
}
/* il mono si ritira: piu' piccolo, piu' spaziato, piu' spento */
html body :is(.hm-in-kick,.hm-in-meta,.vv-eye,.ap-kick,.kicker,
  .ab-tags,.vf-motto,.vd-when,.vf-copy2,.ab2-room i){
  font-size:.56rem;
  letter-spacing:.34em;
}
html body .hm-in-meta{color:rgba(201,161,141,.6)}
/* la riga di etichette sopra l'apertura della About e' lunga: con la
   spaziatura piena andava a capo in mezzo a una parola */
html body .ab-tags{letter-spacing:.2em}
@media (max-width:760px){
  html body :is(.hm-in-kick,.hm-in-meta,.vv-eye,.ap-kick,.kicker,.ab-tags){
    letter-spacing:.26em;
  }
}


/* ══ 4 · TUTTO LENTO ═══════════════════════════════════════════════
   Sopra i seicento millisecondi il movimento smette di sembrare una
   reazione e comincia a sembrare una scelta. Niente rimbalzi: la
   curva rallenta e si ferma, non torna mai indietro.
   Il peso serve: nav.js inietta un suo blocco a fine caricamento, che
   arriva dopo questo foglio e vincerebbe a parita' di specificita'.  */
html body :is(a,button,summary,.booklink,.vd-card,.ab2-room,.rite,
  .hm-ic,.vf-soc a,.navtop,.navtrigger,.door,.ap-bio a){
  transition-duration:.72s !important;
  transition-timing-function:cubic-bezier(.22,.61,.28,1) !important;
}
html body .vd-shot img{transition:filter 1.1s ease,transform 1.5s cubic-bezier(.22,.61,.28,1) !important}
html body .vd-shot::after{transition:opacity 1.1s ease !important}
html body .navtop::after,html body .navtrigger::after{transition-duration:.7s !important}
@media (prefers-reduced-motion:reduce){
  html body *{transition-duration:.01ms !important}
}


/* ══ 5 · UNA SOLA RICETTA PER LE IMMAGINI ══════════════════════════
   Stesso filtro su tutte: quasi grigie, virate calde, un filo scure.
   Non conta quale ricetta sia, conta che sia sempre la stessa: e'
   quello che fa sembrare le foto scelte invece che raccolte.
   Al passaggio del mouse il colore torna, ma solo dove si puo'
   cliccare, cosi' il colore diventa un'informazione.
   Unica esclusa: la faccia nella About, vedi sotto.                  */
html body :is(.vd-shot img,.hw-photo img,.vc-shot img){
  filter:var(--foto) !important;
}
html body :is(.vd-card:hover,.vd-card:focus-visible) .vd-shot img{
  filter:var(--foto-viva) !important;
  transform:scale(1.03);
}
/* Il ritratto della About resta a colori. E' l'unica faccia vicina del
   sito e in grigio diventava una foto d'archivio: la ricetta comune
   vale per tutto il resto, non per quella. */
html body .ab-face-img{filter:none !important}
/* La foto grande della home resta com'era. Ci avevo messo sopra la
   ricetta comune e veniva piu' fredda e piu' spenta dell'originale:
   e' la prima cosa che si vede del sito, e li' il colore giusto conta
   piu' della coerenza. La ricetta vale per le miniature, non per lei. */


/* ══ 6 · I VUOTI DICHIARATI ════════════════════════════════════════
   Dove non c'e' ancora niente si scrive quando ci sara'. Un vuoto con
   una data sopra sembra un piano; lo stesso vuoto senza sembra un
   pezzo che manca. Costa una riga e cambia come si legge la stanza.  */
.vae-soon{
  display:inline-block;vertical-align:.18em;
  margin-left:.85em;padding:.4em .85em .3em;
  border:1px solid rgba(201,161,141,.28);border-radius:999px;
  font-family:var(--mono),"JetBrains Mono",ui-monospace,monospace;
  font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--skin);white-space:nowrap;line-height:1;
  transition:border-color .72s ease,color .72s ease;
}
a:hover .vae-soon{border-color:rgba(225,44,79,.5);color:#e12c4f}
/* La targhetta sta accanto al nome della stanza, non sotto. Resta pero'
   fuori dall'elemento tradotto: l'i18n riscrive il contenuto di quello
   che ha data-i18n, e una targhetta li' dentro sparirebbe al primo
   cambio di lingua. Quindi il contenitore diventa una riga flessibile e
   la descrizione va a capo da sola. */
html body .ab2-room-t{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.9em}
html body .ab2-room-d{flex-basis:100%}
html body .ab2-room-t .vae-soon{margin-left:0}
.vae-soon-line{
  margin-top:2.2em;
  font-family:var(--mono),"JetBrains Mono",ui-monospace,monospace;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--skin);
}
@media (max-width:600px){
  .vae-soon{display:block;margin:.9em 0 0;width:max-content}
}


/* ══ IL VIDEO IN CIMA ══════════════════════════════════════════════
   Un anello muto di pochi secondi al posto della foto. Sta sotto le
   due velature della foto, non sopra, altrimenti perderebbe la virata
   calda e la sfumatura verso il nero e sembrerebbe incollato.
   Parte spento e si accende solo quando sta gia' andando: se il file
   non c'e', o il browser rifiuta di partire, resta la foto e non se
   ne accorge nessuno.                                               */
.ap-vid{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 30%;
  z-index:0;opacity:0;transition:opacity 1.6s ease;
  pointer-events:none;
}
.ap-vid.on{opacity:1}
.ap-photo::before{z-index:1}
.ap-photo::after{z-index:2}


/* ══ 7 · TOGLIERE LA MANO DELLA MACCHINA ═══════════════════════════
   Certe forme le riconosci in mezzo secondo perche' le hai gia' viste
   mille volte: la griglia di scatole tutte uguali con l'angolo tondo e
   il filetto chiaro, l'etichetta in mono maiuscolo sopra ogni scatola,
   la casellina con l'icona dentro, e le schede che entrano una dopo
   l'altra a cascata. Non sono brutte, sono solo la scelta che fa
   chiunque non abbia scelto niente.
   Qui si toglie il contenitore e si tiene il contenuto: righe separate
   da un filo, il numero che sporge nel margine invece di stare
   nell'angolo, e la riga di stato che smette di gridare in mono e
   torna a essere una frase in corsivo.                                */

/* --- l'indice delle pratiche: sette righe, non sette scatole --- */
html body .rite{
  display:grid !important;
  grid-template-columns:clamp(40px,5.5vw,86px) minmax(0,1fr) auto;
  grid-template-areas:"num state go" "num name go" "num desc go";
  align-items:baseline;
  column-gap:clamp(16px,2.6vw,38px);
  min-height:0 !important;
  padding:clamp(24px,3.2vw,40px) 0 clamp(22px,3vw,36px) !important;
  border:0 !important;border-top:1px solid var(--line) !important;
  border-radius:0 !important;background:none !important;
  opacity:1 !important;animation:none !important;
  overflow:visible !important;
}
html body .rite:last-child{border-bottom:1px solid var(--line) !important}
html body .rites{
  display:block !important;
  gap:0 !important;
  width:min(880px,94vw) !important;
}
/* il numero sporge nel margine e resta storto: e' l'unica cosa della
   pagina che non sta in squadra, e basta lei */
html body .rite-num{
  grid-area:num;position:static !important;z-index:auto !important;
  align-self:start;justify-self:end;
  font-size:clamp(1.5rem,3vw,2.5rem) !important;
  color:rgba(201,161,141,.3) !important;
  transform:rotate(-4deg);
  transition:color .72s ease,transform .72s cubic-bezier(.22,.61,.28,1) !important;
}
html body .rite:hover .rite-num{
  color:rgba(225,44,79,.55) !important;transform:rotate(-4deg) translateY(-2px);
}
/* la riga di stato smette di gridare in mono */
html body .rite-state{
  grid-area:state;
  font-family:"Cormorant",Georgia,serif !important;
  font-style:italic;font-weight:400;
  font-size:clamp(.98rem,1.4vw,1.12rem) !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--skin) !important;max-width:none !important;
}
html body .rite-name{grid-area:name;margin-top:.12em !important}
html body .rite-desc{grid-area:desc;margin-top:.35em !important;max-width:52ch}
html body .rite-go{grid-area:go;align-self:center;margin-top:0 !important}
/* la prima riga pesa piu' delle altre: un indice in cui tutte le voci
   hanno esattamente la stessa importanza non lo scrive nessuno */
html body .rite:first-child{padding-top:clamp(10px,1.6vw,18px) !important;border-top:0 !important}
html body .rite:first-child .rite-name{font-size:clamp(1.9rem,3.4vw,2.7rem) !important}
html body .rite:first-child .rite-num{font-size:clamp(2rem,4vw,3.4rem) !important}
html body .rite:hover{transform:translateX(6px) !important;box-shadow:none !important}
@media (max-width:600px){
  html body .rite{grid-template-columns:clamp(30px,9vw,44px) minmax(0,1fr);
    grid-template-areas:"num state" "num name" "num desc" ". go"}
  html body .rite-go{align-self:start;margin-top:.9em !important}
}

/* --- i passi delle pratiche: stessa cura --- */
html body .jx-steps{gap:0 !important}
html body .jx-step{
  border:0 !important;border-top:1px solid var(--line) !important;
  border-radius:0 !important;background:none !important;
  padding:clamp(22px,3.2vw,34px) 0 clamp(20px,3vw,30px) !important;
}
html body .jx-step:last-child{border-bottom:1px solid var(--line) !important}
html body .jx-step:hover{transform:none !important;box-shadow:none !important}
/* l'icona perde la casellina e resta il segno */
html body .jx-fig svg{
  border:0 !important;border-radius:0 !important;background:none !important;
  padding:0 !important;width:34px !important;height:34px !important;
}
html body .jx-fig:hover svg,html body .jx-fig:focus-visible svg{
  box-shadow:none !important;transform:none !important;opacity:1;
}
html body .jx-fig{opacity:.75;transition:opacity .72s ease}
html body .jx-fig:hover{opacity:1}
html body .jx-pic{
  border:0 !important;border-radius:0 !important;background:none !important;
  border-top:1px solid var(--line) !important;padding-left:0 !important;padding-right:0 !important;
}
/* l'oro era un quarto colore rimasto in giro: rientra nei tre */
html body :is(.jx-num,.jx-fig,.jx-fig-cap,.jx-key,.jx-credit,.jx-pic-kick,
  .rite-cta .rite-state,.rite-cta .rite-num){color:var(--skin) !important}

/* --- niente cascate --- */
html body :is(.rite,.wm-card,.brx-card,.hd-item){animation:none !important;opacity:1 !important}

/* --- una riga scritta a mano, storta, nel margine --- */
/* Anche qui serve peso: un foglio piu' vecchio impone il grottesco a
   tutti i paragrafi con quattro livelli di :not(#id). */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .vae-mano{
  font-family:var(--hand) !important;
  font-weight:500 !important;
}
.vae-mano{
  display:block;
  font-size:clamp(1.1rem,1.8vw,1.45rem);
  line-height:1.35;color:var(--skin);
  transform:rotate(-1.6deg);
  transform-origin:left center;
  opacity:.9;
  width:min(880px,94vw);margin:clamp(26px,4vw,44px) auto 0;
  padding-left:clamp(40px,5.5vw,86px);
  text-align:left !important;text-align-last:left !important;
}

/* la nuvola rosa che pulsa dietro al titolo: e' l'unica decorazione
   della pagina che non dice niente, e si vede che e' li' per riempire */
html body .rites-title::before{display:none !important}

/* Sette volte la stessa parola ENTER, una per riga, sono sette etichette
   che dicono quello che la freccia dice gia'. Resta la freccia. */
html body .rite-go span{display:none}
html body .rite-go i{font-size:1.35rem;font-style:normal;opacity:.55;transition:opacity .72s ease,transform .72s cubic-bezier(.22,.61,.28,1)}
html body .rite:hover .rite-go i{opacity:1;transform:translate(3px,-3px)}


/* --- sul telefono l'indice resta un indice ---------------------------
   Sotto gli 860 il sito centra tutto quello che sta nel corpo pagina,
   e con quattro livelli di :not(#id) vince su qualunque regola normale.
   Su un elenco di sette voci il centrato non funziona: il numero resta
   a sinistra e le righe ballano. Stessa arma, un livello in piu'.     */
@media (max-width:899px){
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .rite,
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .rite
    :is(span,.rite-state,.rite-name,.rite-desc,.rite-go),
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .vae-mano{
    text-align:left !important;text-align-last:left !important;
    align-items:flex-start !important;
    margin-left:0 !important;margin-right:0 !important;
  }
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .rite{
    align-items:baseline !important;
  }
  html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .rite-go{
    justify-content:flex-start !important;
  }
  html body .vae-mano{
    padding-left:0;width:auto;
    margin-left:clamp(30px,9vw,44px) !important;margin-right:0 !important;
  }
}


/* ══ 8 · IL PASSAGGIO FRA LE PAGINE ════════════════════════════════
   Due righe di CSS e il browser fa da solo la dissolvenza fra una
   pagina e l'altra: fotografa quella che esce, fotografa quella che
   entra, e anima la differenza. Nessun JavaScript, nessun router,
   nessun pacchetto.
   Chi ha un browser che non le conosce vede quello che vedeva prima:
   la regola viene ignorata e la pagina cambia di colpo. Non c'e' niente
   da rilevare e niente da riparare.
   La barra in cima ha un nome suo, cosi' resta ferma mentre il resto
   si sposta: e' la sola cosa uguale su tutte le pagine, e vederla
   sfarfallare a ogni passaggio la faceva sembrare ricaricata.        */
/* Perche' il corpo pagina non deve essere un contenitore di scorrimento.
   Quasi ogni pagina si portava dietro un body{overflow-x:hidden} scritto
   dentro la pagina stessa, e hidden su un asse costringe l'altro asse ad
   auto: il risultato e' che a scorrere non era la finestra ma il corpo
   della pagina. Da fuori non si vede, ma window.scrollTo smette di
   funzionare, gli ancoraggi diventano imprevedibili e position:sticky si
   spegne. clip taglia allo stesso modo senza creare il contenitore.
   Serve piu' peso di una classe perche' quelle regole stanno in blocchi
   <style> dentro il corpo, e a parita' vincono per posizione. */
/* Solo il corpo pagina, mai l'elemento html: su html overflow si
   propaga alla finestra, e clip sulla finestra spegne lo scorrimento
   della pagina intera. Provato, e per un attimo la home non scorreva
   piu'. */
html body:not(#_){overflow-x:clip;overflow-y:visible}

@view-transition{ navigation:auto }

::view-transition-old(root){
  animation:vae-esce .42s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:vae-entra .6s cubic-bezier(.22,.61,.28,1) both;
}
@keyframes vae-esce{ to{ opacity:0; transform:translateY(-8px) } }
@keyframes vae-entra{ from{ opacity:0; transform:translateY(14px) } }

.vae-bar{ view-transition-name:vae-bar }

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){ animation:none }
}


/* ══ 9 · LA ABOUT ═════════════════════════════════════════════════
   Tre aggiunte e un ingrandimento. Il filo che le tiene insieme e' lo
   stesso: la pagina diceva delle cose su di se' invece di mostrarle.  */

/* Il ritratto. Era duecento pixel a meta' pagina, cioe' una foto che si
   scusa. Qui pesa il doppio ed e' fra le prime cose che si vedono. */
/* Le regole che danno la misura al ritratto della About non stanno
   piu' qui: sono passate nel blocco <style> dentro la pagina. Erano
   l'ultimo foglio della catena e ogni tanto arrivavano dopo il primo
   disegno, e per un istante la foto era quella vecchia da trecento
   pixel: uno scarto di centoventi che spostava tutta la pagina. Uno
   stile scritto dentro la pagina c'e' sempre, per definizione. */

/* Le sei lingue, e il motto. La stessa riga sei volte, che scende e si
   spegne: la prima si legge, l'ultima si intravede, come una cosa
   ripetuta a se stessi finche' non attacca. Non e' un elenco di lingue
   parlate: e' la stessa cosa detta in sei modi, che e' un'altra cosa.
   La prima riga pesa piu' delle altre, perche' e' il motto e non una
   voce di elenco. */
.ab-lingue{
  margin:clamp(30px,4.4vw,58px) 0 clamp(26px,3.6vw,48px);
  padding-left:clamp(0px,1.4vw,18px);
}
.ab-lingue p{
  display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);
  margin:0;padding:.16em 0;
  font-family:var(--disp),"Cormorant",Georgia,serif;
  font-weight:300;font-style:italic;line-height:1.25;
  color:#f2ebe8;
  text-align:left !important;text-align-last:left !important;
}
/* Il serif serve il peso: un foglio precedente impone il grottesco a
   ogni paragrafo con quattro livelli di :not(#id). Stessa storia della
   riga scritta a mano. */
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .ab-lingue p{
  font-family:var(--disp),"Cormorant",Georgia,serif !important;
  font-style:italic !important;font-weight:300 !important;
}
html body:not(#_):not(#__):not(#___):not(#____):not(#_____) .ab-lingue i{
  font-family:var(--mono),"JetBrains Mono",ui-monospace,monospace !important;
  font-style:normal !important;
}
.ab-lingue i{
  flex:0 0 auto;width:2.2em;
  font-family:var(--mono),"JetBrains Mono",ui-monospace,monospace;
  font-style:normal;font-size:.5rem;letter-spacing:.22em;
  text-transform:uppercase;color:rgba(225,44,79,.75);
}
/* ogni riga un filo piu' piccola e un filo piu' spenta della precedente */
.ab-lingue p:nth-child(1){font-size:clamp(1.4rem,2.5vw,2rem);opacity:1}
.ab-lingue p:nth-child(2){font-size:clamp(1.16rem,2.05vw,1.58rem);opacity:.86}
.ab-lingue p:nth-child(3){font-size:clamp(1.08rem,1.9vw,1.46rem);opacity:.72}
.ab-lingue p:nth-child(4){font-size:clamp(1.02rem,1.78vw,1.34rem);opacity:.6}
.ab-lingue p:nth-child(5){font-size:clamp(.96rem,1.66vw,1.24rem);opacity:.5}
.ab-lingue p:nth-child(6){font-size:clamp(.92rem,1.56vw,1.14rem);opacity:.42}
@media (hover:hover){
  .ab-lingue p{transition:opacity .72s ease,color .72s ease}
  .ab-lingue:hover p{opacity:.34}
  .ab-lingue p:hover{opacity:1 !important;color:#fff}
}

/* ══ LA ABOUT, ASCIUTTA ═══════════════════════════════════════════
   Meno segni, non piu' segni. Via i numeri nel margine e via il
   capolettera: due cose che provavano a dare ordine dall'esterno a un
   testo che l'ordine deve averlo dentro. La storia torna un paragrafo
   come gli altri, e la citazione pesa un po' piu' del testo normale
   invece che il doppio.
   Quattro livelli di :not(#id) perche' le misure vecchie stanno in un
   blocco <style> dentro la pagina, e da li' vincono su tutto il resto. */
html body:not(#_):not(#__):not(#___):not(#____) .ab-storia{
  font-size:inherit !important;
  line-height:inherit !important;
  max-width:52ch !important;
  color:#ccbfba !important;
}
html body:not(#_):not(#__):not(#___):not(#____) .ab-pull{
  font-size:clamp(1.2rem,1.9vw,1.55rem) !important;
  line-height:1.4 !important;font-weight:300 !important;
}
html body:not(#_):not(#__):not(#___):not(#____) .ab-aside{
  font-size:clamp(.95rem,1.3vw,1.05rem) !important;margin-top:1em !important;
}
/* il link a Polyglot Ninja dentro l'apertura: si vede che e' un link
   senza gridarlo, una riga sotto e basta */
html body:not(#_):not(#__):not(#___):not(#____) .ab-lang-link{
  color:inherit !important;text-decoration:none !important;
  border-bottom:1px solid rgba(225,44,79,.45);
  transition:border-color .72s ease,color .72s ease;
}
html body:not(#_):not(#__):not(#___):not(#____) .ab-lang-link:hover{
  color:#e12c4f !important;border-bottom-color:#e12c4f;
}

/* Le due cose da fare in fondo. Prima ce n'era una sola, ed era
   scrivimi: chiedere di scrivere a chi e' appena arrivato e' chiedere
   il passo piu' grande per primo. */
html body .ab2-act{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,46px);align-items:baseline}
html body .ab2-link-2{opacity:.66}
html body .ab2-link-2:hover{opacity:1}

/* La About adesso e' corta, e gli spazi erano tarati su una pagina di
   nove paragrafi: fra l'ultima riga e "What I do" restavano quasi
   trecento pixel di niente, e altri quattrocento fra le due righe in
   fondo e il piede. Su una pagina lunga sono respiro, su una corta
   sono un buco. Qui valgono la meta'. */
html body.page-about .ph-open{padding-bottom:clamp(30px,4vh,60px) !important}
html body.page-about .ph-h2{margin-top:clamp(40px,6vh,80px) !important}
html body.page-about .ab2-rooms{margin-top:clamp(28px,3.4vw,48px)}
html body.page-about main,
html body.page-about .page{padding-bottom:clamp(70px,10vh,130px) !important}
html body.page-about .vae-foot{margin-top:clamp(40px,6vh,80px)}


/* ══ 10 · LA DOMANDA NON SPOSTA LA PAGINA ══════════════════════════
   La colonna della home e' centrata dentro la fascia: se il testo
   dentro cambia altezza, tutto il blocco si ricentra e si sposta in
   verticale. All'apertura succedeva sempre, perche' la domanda viene
   scritta un attimo dopo, e succedeva di nuovo a ogni domanda nuova.
   Da fuori sembrava che la pagina si assestasse per un secondo.
   Qui la domanda tiene sempre lo spazio di tre righe, che e' la
   lunghezza piu' comune su centouno domande: trentaquattro ne fanno
   due, cinquantasei tre, nove quattro e due cinque. Sotto le tre lo
   spazio resta vuoto invece di far muovere la pagina.
   Le undici piu' lunghe la fanno ancora crescere, ma verso il basso e
   di poco: meglio undici volte un movimento piccolo che centouno volte
   il salto di tutta la colonna.                                      */
html body .hm-inhero .hm-in-q{
  min-height:calc(1.16em * 3);
}


/* ══ 11 · LO SCARTO PER LA BARRA, PRIMA DEL PRIMO DISEGNO ══════════
   Questa era la causa vera del salto all'apertura, ed era su tutte le
   pagine, non solo in home.
   vae.css riserva 58px sotto la barra. nav.js, che gira a documento
   pronto, inietta un foglio che li porta a 96, perche' 58 e' il numero
   di una barra che non esiste piu'. Risultato: la pagina viene
   disegnata con 58, poi arriva il foglio e tutto scende di trentotto
   pixel in un colpo. Nella fascia della home il testo e' centrato in
   verticale, quindi lo scarto si vedeva come una colonna che scivola
   giu' e si ferma.
   Qui lo stesso scarto e' scritto in un foglio normale, quindi vale
   gia' al primo disegno e nav.js non cambia piu' niente. I numeri sono
   copiati da nav.js: se li' cambiano, vanno cambiati anche qui.       */
@media (min-width:861px){
  html body:not(#_):not(#__):not(#___):not(#____){padding-top:96px !important}
}
@media (max-width:860px){
  html body:not(#_):not(#__):not(#___):not(#____){padding-top:84px !important}
}

html body.page-about [data-passo]:hover::before{color:#e12c4f}
/* la riga del titolo e' piu' grande: il numero si allinea alla prima riga */
html body.page-about h2[data-passo]::before{top:.55em}

/* Sotto i 1100 nel margine non ci sta piu' niente: il numero sale
   sopra il blocco, allineato al testo. */
@media (max-width:1099px){
  html body.page-about [data-passo]::before{
    position:static;display:block;transform:none;
    margin-bottom:.7em;
  }
}


/* ══ 13 · LA DOMANDA STA SULLO SCHERMO, NON IN MEZZO ALLA FASCIA ═══
   La fascia della home e' piu' alta della finestra: ha il rapporto
   della foto, quindi a 1440x900 e' alta 1079 mentre di finestra ce ne
   sono 804. La colonna del testo era centrata dentro la fascia, cioe'
   dentro un'altezza che nessuno vede tutta: la domanda finiva in basso
   e i tre bottoni sotto sfioravano il bordo. Chi apriva la home doveva
   scorrere per vedere una cosa che dovrebbe essere la prima.
   Adesso la colonna e' alta esattamente quanto la parte visibile e il
   contenuto si appoggia in fondo, con un dito di aria sotto: tutto il
   blocco sta dentro la prima schermata e l'ultima riga arriva vicino
   al bordo, senza toccarlo. Centrato era troppo in alto.             */
@media (min-width:1025px){
  html body:not(#_):not(#__):not(#___):not(#____) .ap-band{align-items:flex-start !important}
  /* Quattro livelli di :not(#id): due fogli precedenti tengono questa
     colonna centrata con tre livelli e !important, e con meno peso la
     regola qui sotto veniva letta e ignorata. */
  html body:not(#_):not(#__):not(#___):not(#____) .ap-text{
    height:calc(100svh - 96px);
    /* appoggiata in fondo alla parte visibile, non centrata: l'ultima
       riga di bottoni si ferma poco sopra il bordo dello schermo, e
       tutto il blocco sta dentro la prima schermata senza scorrere.
       Centrata era troppo in alto e lasciava un vuoto sotto. */
    justify-content:flex-end !important;
    padding-top:0 !important;
    padding-bottom:clamp(48px,7vh,84px) !important;
  }
  /* Il rientro di 144 pixel sopra e sotto arriva da vae-axis, dove serve
     perche' quel blocco di solito sta da solo in mezzo a una pagina.
     Dentro la fascia della home tiene la domanda lontana dal bordo di
     un rientro che nessuno vede: qui vale zero. Serve il peso dei
     quattro :not(#id), altrimenti vince quello. */
  html body:not(#_):not(#__):not(#___):not(#____) .hm-inhero{
    margin-top:0 !important;margin-bottom:0 !important;
    padding-top:0 !important;padding-bottom:0 !important;
  }
}