/* ============================================================
   vae-velvet.css · livello estetico vladaether
   Ispirato alla pittura e al cinema di David Lynch: buio che mangia
   i bordi, una sola luce calda, materia e grana, il rosso del sipario,
   e dissolvenze lente al posto degli scatti.

   Va caricato per ultimo, subito prima di </head>.
   Non tocca il markup: riscrive le variabili che le pagine gia'
   dichiarano nei loro :root. Per tornare indietro, togli il <link>.
   ============================================================ */

@font-face{
  font-family:"Bodoni Moda";
  src:url("/assets/fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2-variations");
  font-weight:400 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Bodoni Moda";
  src:url("/assets/fonts/bodoni-moda-latin-wght-italic.woff2") format("woff2-variations");
  font-weight:400 900;font-style:italic;font-display:swap;
}

:root{
  /* --- il buio non e' vuoto: e' fondo scuro con dentro il caldo --- */
  --void:#050304;
  --void-2:#140a0d;
  --bg:#050304;
  --panel:#140a0d;

  /* --- inchiostri: bianco sporco, mai bianco puro --- */
  --haze:#f2ebe8;
  --fg:#f2ebe8;
  --chrome:#faf5f2;
  --mist:#a8908c;
  --muted:#a8908c;
  --ice:#ccbfba;

  /* --- il rosso del sipario, unico protagonista --- */
  --violet:#e12c4f;
  --pink:#e12c4f;
  --lilac:#e12c4f;
  --velvet:#e12c4f;
  --magenta:#e12c4f;
  --gold:#e12c4f;
  --gold-soft:#f2ebe8;

  /* --- la lampada: ambra calda, la sola altra fonte di luce --- */
  --amber:#e0b579;
  --acid:#e0b579;
  --cyan:#c08a76;

  --line:rgba(225,44,79,.20);
  --line-2:rgba(225,44,79,.42);

  --holo:linear-gradient(112deg,#e12c4f 0%,#6f101f 22%,#c2394f 46%,#4d0b16 70%,#e12c4f 100%);

  --disp:"Bodoni Moda","Cormorant",Georgia,serif;
  --disp-2:"Cormorant",Georgia,serif;

  --slow:1100ms;
  --ease-lynch:cubic-bezier(.22,.61,.28,1);
}

/* ============================================================
   1. IL FONDO · una sola lampada calda fuori centro,
      il resto se lo mangia il nero
   ============================================================ */
body{
  background-color:var(--void);
  background-image:
    /* la lampada */
    radial-gradient(58% 44% at 68% 6%, rgba(224,181,121,.13) 0%, rgba(224,181,121,.04) 38%, rgba(5,3,4,0) 72%),
    /* il rosso che filtra da dietro il sipario */
    radial-gradient(96% 64% at 18% 0%, rgba(225,44,79,.15) 0%, rgba(225,44,79,.04) 40%, rgba(5,3,4,0) 74%),
    /* il fondo che si chiude verso il basso */
    linear-gradient(180deg,#170b0f 0%,#0b0508 40%,#060304 74%,#040203 100%);
  background-attachment:fixed;
  position:relative;
}

/* ============================================================
   2. LA GRANA · pellicola finissima sopra ogni cosa
   ============================================================ */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.38;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
  background-size:220px 220px;
}

/* ============================================================
   3. LA VIGNETTATURA · gli angoli si chiudono, come in camera oscura
      piu' il filo rosso in alto a sinistra
   ============================================================ */
body::before{
  content:"";position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:
    radial-gradient(128% 92% at 50% 42%, rgba(0,0,0,0) 44%, rgba(0,0,0,.34) 76%, rgba(0,0,0,.68) 100%);
}
html::before{
  content:"";position:fixed;left:0;top:0;width:96px;height:3px;
  background:var(--violet);z-index:9999;pointer-events:none;
}

/* ============================================================
   4. IL SIPARIO · velluto verticale sui bordi laterali,
      visibile solo sugli schermi larghi
   ============================================================ */
@media (min-width:1500px){
  html::after{
    content:"";position:fixed;inset:0;z-index:9996;pointer-events:none;
    background:
      repeating-linear-gradient(90deg,
        rgba(225,44,79,.055) 0px, rgba(0,0,0,.10) 13px, rgba(225,44,79,.055) 27px),
      linear-gradient(90deg, rgba(20,6,10,.85) 0%, rgba(20,6,10,0) 9%,
        rgba(20,6,10,0) 91%, rgba(20,6,10,.85) 100%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 9%,transparent 91%,#000 100%);
    mask-image:linear-gradient(90deg,#000 0%,transparent 9%,transparent 91%,#000 100%);
  }
}

/* ============================================================
   5. LA TIPOGRAFIA · Didone, corsivi rossi, niente bianco assoluto
   ============================================================ */
h1,h2,.vv-h2{letter-spacing:-.018em}
h1 em,h2 em,h1 i,h2 i{font-style:italic;color:var(--violet)}
h1{text-shadow:0 0 62px rgba(225,44,79,.20)}

::selection{background:rgba(225,44,79,.34);color:#fff}
::-moz-selection{background:rgba(225,44,79,.34);color:#fff}
a{text-underline-offset:.22em;text-decoration-thickness:.06em}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:2px}
[class*="-ep"],[class*="ep-"],.eyebrow,.kicker{letter-spacing:.3em}

/* ============================================================
   6. LA LENTEZZA · si dissolve, non scatta
   ============================================================ */
a,button,[role="button"],.rite,.ab2-room,.vc-link{
  transition:color var(--slow) var(--ease-lynch),
             background-color var(--slow) var(--ease-lynch),
             border-color var(--slow) var(--ease-lynch),
             opacity var(--slow) var(--ease-lynch),
             box-shadow var(--slow) var(--ease-lynch) !important;
}
/* la luce arriva addosso a quello che tocchi */
.rite:hover,.ab2-room:hover{box-shadow:0 0 68px -22px rgba(225,44,79,.55)}

@keyframes vaeFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1,.vv-h2{animation:vaeFadeUp 1500ms var(--ease-lynch) both}

/* la lampada respira, appena appena. solo sulla vignettatura,
   mai sul body, altrimenti pulsa anche il testo. */
@keyframes vaeLamp{0%,100%{opacity:1}52%{opacity:.84}}
body::before{animation:vaeLamp 13s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  body::after{opacity:.3}
}

/* ============================================================
   7. IL BLOCCO FONTE · ogni pratica dice di chi e'
   ============================================================ */
.jx-credit,.vae-credit{
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.72rem;line-height:2;letter-spacing:.04em;
  color:rgba(168,144,140,.86);
  border-top:1px solid rgba(225,44,79,.22);
  padding-top:1.5em;margin-top:2.6em;
}
.jx-credit b,.vae-credit b{color:var(--haze);font-weight:500}

/* ============================================================
   8. SCHERMI LARGHI · il testo cresce con la finestra
      invece di restare una colonnina appoggiata a sinistra.
      Il sito misura quasi tutto in rem, quindi alzare la base
      scala titoli, corpo ed etichette insieme, senza toccare
      una sola pagina.
   ============================================================ */
:root{--maxw:1460px}

@media (min-width:1400px){ html{font-size:16.5px} }
@media (min-width:1700px){ html{font-size:17.5px} }
@media (min-width:2100px){ html{font-size:18.5px} }
@media (min-width:2600px){ html{font-size:19.5px} }

/* i contenitori dichiarati in rem crescono da soli con la base
   qui sopra. Questi due restano in px nelle pagine, quindi li alzo. */
@media (min-width:1400px){
  .wrap{max-width:min(1560px,92vw) !important;margin-left:auto !important;margin-right:auto !important}
  /* il testo riempie il contenitore invece di lasciare un buco a destra */
  .wrap p,.wrap li,.jx-body p,.jx-body li{max-width:none}
}

/* le colonne misurate in "ch" respirano sul grande */
@media (min-width:1700px){
  .ek-d,.ek-sub{max-width:none}
}

/* ============================================================
   9. NIENTE PAROLE ORFANE
      Le colonne strette lasciavano l'ultima parola da sola sulla
      riga sotto. text-wrap:balance distribuisce le righe in modo
      che non succeda, e i titoli non si spezzano mai a meta'.
   ============================================================ */
h1,h2,h3,.vv-h2,.ek-t,.ek-dek,.ek-close,.rite-name,.rite-desc,
.ab2-room-d,.b2-room-d,[class*="-dek"],[class*="-lead"]{
  text-wrap:balance;
}
p,li,.ek-d,.ek-sub,.jx-credit{
  text-wrap:pretty;
}
/* i titoli brevi restano su una riga sola */
h1{text-wrap:nowrap;text-wrap:balance}

/* ============================================================
   10. STESSA IMPAGINAZIONE SU TUTTE LE PAGINE
      Ogni pagina aveva la sua larghezza: 47.5rem, 55rem, 45rem,
      58.75rem. Qui diventano una sola misura, e le pagine che
      non hanno il contenitore .page lo ricevono lo stesso.
   ============================================================ */

.page{
  max-width:58.75rem !important;
  margin:0 auto !important;
  padding:8vh 96px 14vh !important;
}

/* about e contact non hanno regole proprie: le prendono da qui */
/* about e contact non definiscono .page nel loro foglio: qui la
   ricevono per intero, non solo la larghezza. */
.page-about .page,.page-contact .page,.page{
  min-height:100vh;display:block;
  max-width:58.75rem !important;margin:0 auto !important;
  padding:8vh 96px 14vh !important;
}
.page-about .ab2-rooms,.page-about .ab2-in{max-width:none !important}
.body{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:3vh 0 7vh}

/* i titoli senza la classe .display prendono lo stesso trattamento */
h1.ct-h1,.ab2-title,.page-about h1,.page-contact h1{
  font-family:"Cormorant",Georgia,serif !important;
  font-weight:500 !important;
  font-size:clamp(2.4rem,9vw,3.6rem) !important;
  line-height:1.04 !important;letter-spacing:.01em !important;
  background:linear-gradient(110deg,#ffffff,#ccbfba,#dcc3b4,#e4c6c0,#ccbfba);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* la colonna di lettura e' la stessa ovunque */
.jx-wrap,.hd-wrap,.ct-wrap,.ab2-wrap,.rites-wrap{
  max-width:42.5rem !important;margin:0 auto !important;
  padding:0 clamp(22px,5vw,40px) !important;
}
/* eccezioni: griglie e strumenti, che hanno bisogno di respiro */
.hd-wide,.rites,.brx,.brx-grid{max-width:none !important}

/* massima specificita': vince su qualunque regola interna alle pagine */
html body .page,
html body.page-about .page,
html body.page-contact .page{
  display:block !important;
  width:auto !important;
  max-width:58.75rem !important;
  margin-left:auto !important;margin-right:auto !important;
  padding:8vh 96px 14vh !important;
}
html body.page-about .body,html body.page-contact .body{max-width:none !important}

/* il ritratto della About resta un cerchio, sempre */
html body .ab-face-img{display:block;width:360px;height:360px;object-fit:cover;object-position:50% 40%;border-radius:50%;filter:none}
@media (max-width:760px){
}

/* ============================================================
   11. MOVIMENTO
      Il sito era fermo. Qui gli elementi entrano dal basso quando
      li raggiungi, il ritratto respira, e quello che tocchi si
      illumina invece di accendersi di scatto. Tutto lento, alla
      Lynch. Chi ha chiesto meno animazioni non vede niente di
      tutto questo: lo script non parte nemmeno.
   ============================================================ */

/* stato di partenza: solo se lo script e' vivo, cosi' senza
   JavaScript la pagina resta leggibile */
html.vae-motion h1,
html.vae-motion h2,
html.vae-motion .vae-name,
html.vae-motion .ph-lede,
html.vae-motion .ph-p,
html.vae-motion .ph-h2,
html.vae-motion .jx-step,
html.vae-motion .jx-note,
html.vae-motion .jx-credit,
html.vae-motion .rite,
html.vae-motion .ab2-room,
html.vae-motion .vae-in{opacity:1;transform:none}

/* i titoli salgono un po' di piu' e ci mettono di piu' */
html.vae-motion h1,html.vae-motion h2{
  transform:translateY(26px);
  transition-duration:1600ms;
}

/* il ritratto arriva crescendo, e poi sta fermo */



/* quello che tocchi si scalda invece di accendersi */
.rite,.ab2-room,.jx-step{transition:transform 700ms cubic-bezier(.22,.61,.28,1),
  box-shadow 700ms cubic-bezier(.22,.61,.28,1),border-color 700ms ease}
.rite:hover,.ab2-room:hover{transform:translateY(-3px)}

/* il filetto rosso si allunga quando la sezione entra */
.rule::before,.ek-rule::before,.jx-note>div{transition:width 1400ms cubic-bezier(.22,.61,.28,1)}

@media (prefers-reduced-motion:reduce){
  html.vae-motion *{opacity:1 !important;transform:none !important;animation:none !important}
}

/* piu' aria fra la colonna di testo e il ritratto */
html body .ab-top{gap:72px;gap:clamp(40px,7vw,104px)}

/* ------------------------------------------------------------
   In vae.css c'e' una regola vecchia che toglieva ogni margine
   alla sola pagina About per farla andare a tutta larghezza.
   Era la ragione per cui il testo restava incollato al bordo.
   Qui la annullo con una specificita' piu' alta.
   ------------------------------------------------------------ */
html body.page-about .page:not(#_):not(#__):not(#___),
html body.page-about .page > .body:not(#_):not(#__):not(#___){
  max-width:58.75rem !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:96px !important;padding-right:96px !important;
}
@media (max-width:760px){
  html body.page-about .page:not(#_):not(#__):not(#___),
  html body.page-about .page > .body:not(#_):not(#__):not(#___){
    padding-left:24px !important;padding-right:24px !important;
  }
}

/* ------------------------------------------------------------
   Il ritratto della About. Una regola sola, qui e in nessun
   altro posto: contenitore e immagine hanno sempre la stessa
   misura, quindi resta un cerchio e non si crea l'alone.
   ------------------------------------------------------------ */
html body figure.ab-face{
  display:block !important;flex:0 0 auto !important;
  margin:0 !important;padding:0 !important;border:0 !important;
  width:300px !important;height:300px !important;
  min-width:300px !important;min-height:300px !important;
  max-width:300px !important;max-height:300px !important;
  border-radius:50% !important;overflow:hidden !important;
  box-shadow:0 0 0 1px rgba(225,44,79,.4) !important;
}
html body img.ab-face-img{
  display:block !important;
  width:300px !important;height:300px !important;
  object-fit:cover !important;object-position:50% 40% !important;
  border-radius:50% !important;filter:none !important;
}
@media (max-width:900px){
  html body figure.ab-face,html body img.ab-face-img{
    width:200px !important;height:200px !important;
    min-width:200px !important;min-height:200px !important;
    max-width:200px !important;max-height:200px !important;
  }
}

/* la domanda della home riempie la colonna: niente pareggio delle righe */
html body .hm-in-q,html body .hm-in-q *{text-wrap:normal !important}