/* vae.css - il CSS che era incollato in ogni pagina, adesso una volta sola.
   Generato da estrai_css.py. I blocchi stanno nell'ordine in cui il browser
   li incontrava prima, ricavato confrontando tutte le pagine fra loro.
   Per cambiare qualcosa si tocca qui, non in quattordici file. */

/* ===== vae-nav-css ===== */
.vae-bar{position:sticky;top:0;z-index:1000;display:flex;align-items:center;padding:14px clamp(18px,4vw,44px);background:rgba(8,7,11,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(208,212,222,.12);font-family:"Hanken Grotesk",system-ui,sans-serif}
.vae-left{flex:1;display:flex;gap:clamp(1.1rem,2.4vw,2.2rem);align-items:center}
.vae-left a{color:#d2d5dc;text-decoration:none;font-size:.95rem;font-weight:400;letter-spacing:.01em;transition:color .2s;white-space:nowrap}
.vae-left a:hover{color:#fff}
.vae-brand{flex:0 0 auto;text-align:center;font-family:"Cormorant",Georgia,serif;font-weight:400;font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:.07em;color:#eef0f4;text-decoration:none;white-space:nowrap}
.vae-ether{background:linear-gradient(100deg,#b3aef9,#bfe3ff,#b3aef9,#bfe3ff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;filter:drop-shadow(0 0 9px rgba(160,164,176,.35));animation:vaeEther 9s ease-in-out infinite}
@keyframes vaeEther{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.vae-right{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:clamp(.85rem,1.6vw,1.3rem)}
.vae-soc{color:#bdc0c8;display:inline-flex;transition:color .2s,transform .2s}
.vae-soc:hover{color:#fff;transform:translateY(-1px)}
.vae-soc svg{width:20px;height:20px;display:block}
.vae-news{background:#e12c4f;color:#fff;text-decoration:none;font-size:.9rem;font-weight:500;letter-spacing:.02em;padding:.58em 1.2em;border-radius:999px;white-space:nowrap;transition:background .2s,transform .2s}
.vae-news:hover{background:#bfc2ca;transform:translateY(-1px)}
.vae-shopbtn{display:inline-block;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#0a0710;background:#e12c4f;padding:1.05em 2.1em;text-decoration:none;box-shadow:0 0 22px rgba(160,164,176,.38);transition:background .25s,transform .2s,box-shadow .3s}
.vae-shopbtn:hover{background:#bfc2ca;transform:translateY(-2px);box-shadow:0 0 30px rgba(160,164,176,.55)}
.vae-burger{display:none;flex:1;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px;z-index:1001}
.vae-burger span{width:22px;height:2px;background:#e6e8ee;border-radius:2px;transition:.25s}
body.vae-open .vae-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.vae-open .vae-burger span:nth-child(2){opacity:0}
body.vae-open .vae-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.vae-mob{display:none}
@media(max-width:860px){
  .vae-left{display:none}
  .vae-right .vae-soc{display:none}
  .vae-right .vae-news{display:none}
  .vae-burger{display:flex}
  .vae-mob{position:fixed;top:56px;left:0;right:0;z-index:999;display:flex;flex-direction:column;padding:1rem clamp(18px,5vw,40px) 1.5rem;background:rgba(8,7,11,.98);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(208,212,222,.14);transform:translateY(-14px);opacity:0;pointer-events:none;transition:.25s}
  body.vae-open .vae-mob{transform:none;opacity:1;pointer-events:auto}
  .vae-mob>a{color:#e3def0;text-decoration:none;font-family:"Cormorant",Georgia,serif;font-size:1.5rem;padding:.5em 0;border-bottom:1px solid rgba(208,212,222,.10)}
  .vae-mob-drop{display:flex;flex-direction:column;border-bottom:1px solid rgba(208,212,222,.10)}
  .vae-mob-drop>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:.5em;color:#e3def0;font-family:"Cormorant",Georgia,serif;font-size:1.5rem;padding:.5em 0}
  .vae-mob-drop>summary::-webkit-details-marker{display:none}
  .vae-mob-drop .vcaret{width:.6em;height:.6em;flex:none;opacity:.8;transition:transform .25s}
  .vae-mob-drop[open] .vcaret{transform:rotate(180deg)}
  .vae-mob-sub{display:flex;flex-direction:column;padding:0 0 .55em .9em}
  .vae-mob-sub a{color:#c8c2db;text-decoration:none;font-family:"Cormorant",Georgia,serif;font-size:1.2rem;padding:.42em 0}
  .vae-mob-sub a:hover{color:#fff}
  .vae-mob-soc{display:flex;gap:1.5rem;padding:1rem 0 .2rem}
  .vae-mob-soc a{color:#bdc0c8;display:inline-flex}
  .vae-mob-soc svg{width:24px;height:24px}
  .vae-mob .vae-news{align-self:flex-start;margin-top:.9rem}
  .vae-mob-cta{margin-top:1.1rem}
}
/* footer minimale: solo la mail */
.vae-foot{border-top:1px solid rgba(208,212,222,.12);padding:clamp(34px,6vw,64px) clamp(18px,5vw,44px);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:"Hanken Grotesk",system-ui,sans-serif}
.vae-foot-mail{color:#d2d5dc;text-decoration:none;font-size:1.02rem;letter-spacing:.01em;transition:color .2s}
.vae-foot-mail:hover{color:#fff}
.vae-foot-legal{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#736e88}
.vae-foot-legal a{color:#a1a4ad;text-decoration:none}
.vae-foot-legal a:hover{color:#bdc0c8}
/* Newsletter section */

/* ===== d3b3d4e141 ===== */
.vae-cart-wrap{position:relative;display:inline-flex;align-items:center}
.vae-cart{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:none;border:0;color:#bdc0c8;cursor:pointer;transition:color .2s,transform .2s}
.vae-cart:hover{color:#fff;transform:translateY(-1px)}
.vae-cart svg{width:21px;height:21px;display:block}
.vae-cart-badge{position:absolute;top:-3px;right:-5px;min-width:17px;height:17px;padding:0 4px;display:none;align-items:center;justify-content:center;background:#e12c4f;color:#fff;font-family:"Hanken Grotesk",sans-serif;font-size:.66rem;font-weight:600;line-height:1;border-radius:999px;box-shadow:0 0 0 2px rgba(8,7,11,.9)}
.vae-cart-badge.on{display:inline-flex}
.vae-cart-panel{position:absolute;top:calc(100% + 14px);right:0;width:340px;max-width:86vw;background:rgba(13,11,20,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(208,212,222,.16);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.5);padding:18px;z-index:1200;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .2s,transform .2s}
.vae-cart-panel.open{opacity:1;transform:translateY(0);pointer-events:auto}
.vae-cart-panel::before{content:"";position:absolute;top:-7px;right:14px;width:12px;height:12px;background:rgba(13,11,20,.97);border-left:1px solid rgba(208,212,222,.16);border-top:1px solid rgba(208,212,222,.16);transform:rotate(45deg)}
.vae-cart-head{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#888b95;margin:0 0 12px}
.vae-cart-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vci{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid rgba(208,212,222,.12);border-radius:10px;background:rgba(255,255,255,.025);transition:border-color .2s,background .2s}
.vci.in{border-color:rgba(160,164,176,.5);background:rgba(160,164,176,.06)}
.vci-info{flex:1;min-width:0}
.vci-name{display:block;font-family:"Cormorant",Georgia,serif;font-size:1.08rem;color:#eef0f4;line-height:1.2}
.vci-price{display:block;font-family:"Hanken Grotesk",sans-serif;font-size:.8rem;color:#abaeb7;margin-top:2px}
.vci-add{flex:0 0 auto;font-family:"Hanken Grotesk",sans-serif;font-size:.8rem;font-weight:500;color:#fff;background:#e12c4f;border:0;border-radius:999px;padding:.5em 1.1em;cursor:pointer;transition:background .2s,transform .2s}
.vci-add:hover{background:#bfc2ca;transform:translateY(-1px)}
.vci-qty{flex:0 0 auto;display:none;align-items:center;gap:8px}
.vci.in .vci-qty{display:inline-flex}
.vci.in .vci-add{display:none}
.vci-step{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;line-height:1;color:#e6e8ee;background:rgba(255,255,255,.06);border:1px solid rgba(208,212,222,.2);border-radius:7px;cursor:pointer;transition:background .2s}
.vci-step:hover{background:rgba(255,255,255,.14)}
.vci-count{min-width:18px;text-align:center;font-family:"Hanken Grotesk",sans-serif;font-size:.9rem;color:#eef0f4}
.vae-cart-foot{margin-top:14px;padding-top:14px;border-top:1px solid rgba(208,212,222,.12);display:flex;align-items:center;justify-content:space-between;gap:12px}
.vae-cart-total{font-family:"Hanken Grotesk",sans-serif;font-size:.9rem;color:#abaeb7}
.vae-cart-total span{color:#eef0f4;font-weight:600}
.vae-cart-checkout{font-family:"Hanken Grotesk",sans-serif;font-size:.85rem;font-weight:500;color:#fff;background:#e12c4f;text-decoration:none;border-radius:999px;padding:.6em 1.3em;transition:background .2s,transform .2s}
.vae-cart-checkout:hover{background:#bfc2ca;transform:translateY(-1px)}
.vae-cart-empty{font-family:"Hanken Grotesk",sans-serif;font-size:.85rem;color:#888b95;text-align:center;padding:6px 0 2px;display:none}

/* ===== vae-harmony ===== */
p,li,blockquote,figcaption,.lead-line,.op-body,.lp-p,.hd-desc,.di-primary,.di-secondary,.br-block p{text-wrap:pretty !important;overflow-wrap:normal;word-break:normal;-webkit-hyphens:none !important;hyphens:none !important;text-align:left;text-align-last:auto}
h1,h2,h3,h4,.lp-title,.hero h1,.prompt-q,.op-hook,.op-turn,.sec-head h2{text-wrap:pretty !important;-webkit-hyphens:none;hyphens:none}

/* ===== vae-navic ===== */
.vae-left .vae-ic{display:none !important}.vae-left .vae-drop-menu .vae-ic{display:inline-block !important;width:1em;height:1em;opacity:.6}.vae-ic{width:1.05em;height:1.05em;flex:0 0 auto;stroke-width:1.6;opacity:.8}.vae-left a,.vae-left .vae-drop>summary{display:inline-flex;align-items:center;gap:.5em}.vae-left .vae-drop-menu a{display:flex;align-items:center;gap:.55em}@media(max-width:760px){.vae-mob>a,.vae-mob-sub a{display:flex;align-items:center;gap:.65em}.vae-mob-lbl{display:inline-flex;align-items:center;gap:.65em}.vae-mob .vae-ic{width:1em;height:1em;opacity:.78}}

/* ===== vae-clsfix ===== */
body{padding-top:58px}@media(max-width:760px){body{padding-top:54px}}

/* ===== vae-dark ===== */
/* fondo: nero inchiostro con un cuore indaco, niente grigio slavato */
  :root{
    --void:#04040a;
    --line:rgba(190,178,222,.20);
    --line-2:rgba(190,178,222,.44);
  }
  html, body{background:#04040a}
  .base, .cosmos{
    background:radial-gradient(135% 105% at 50% 0%, #16112e 0%, #0b0819 40%, #05040d 74%, #020205 100%) !important;
  }
  /* i bagliori: due colori decisi invece della nebbia grigia */
  .atmos, .aurora{
    opacity:.40 !important;
    filter:blur(96px) !important;
    background:
      radial-gradient(40% 34% at 12% 10%, rgba(225,44,79,.34), transparent 62%),
      radial-gradient(36% 30% at 88% 20%, rgba(80,150,255,.28), transparent 62%),
      radial-gradient(46% 40% at 74% 88%, rgba(225,44,79,.20), transparent 64%),
      radial-gradient(34% 30% at 26% 80%, rgba(130,90,255,.24), transparent 64%) !important;
  }
  .stars{opacity:.55 !important}
  .grain{opacity:.045 !important}
  /* i bottoni: pieni, non spenti */
  .vl-cta, .prod-btn, .btn-primary, .vae-news, .hd-btn, .vae-shopbtn, .wm-form button{
    background:#e12c4f !important;
    background-image:none !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    box-shadow:0 16px 44px -14px rgba(225,44,79,.8) !important;
  }
  .vl-cta:hover, .prod-btn:hover, .btn-primary:hover, .vae-news:hover, .wm-form button:hover{
    filter:brightness(1.1) !important;
  }

/* ===== vae-no-orphans ===== */
/* niente parole orfane. mai. su niente. */
  p, li, blockquote, figcaption, dd, .door-body, .hub-card-d, .hub-lead, .lead, .prod-desc, .shop-note, .shop-sub, .ve-body, .vl-lead, .vl-gift, .vc-line, .vc-sub, .three-d, .wm-door p, .wm-steps li, .lp-p, .bc-note, .bc-offer, .ap-lede, .hw-quiet, .vae-name p, .prod-name, .door-name{
    text-wrap: pretty !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }
  h1, h2, h3, .display, .vl-title, .ve-title, .hw-lead, .lp-title{
    text-wrap: balance !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
  }

/* ===== vae-align ===== */
/* i blocchi centrati devono essere centrati DAVVERO, anche l'ultima riga.
     Nel sito c'erano regole text-align:left !important che li spezzavano. */
  .hub-lead, .shop-sub, .shop-note, .shop-kicker,
  .vl-kick, .vl-title, .vl-lead, .vl-gift, .vl-fine,
  .vc-line, .vc-sub, .vc-link,
  .bc-note, .lead {
    text-align: center !important;
    text-align-last: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* dentro le card invece si resta a sinistra, che è giusto */
  .prod-body, .prod-body .prod-desc, .prod-name, .prod-shape,
  .wm-card, .wm-card p, .wm-card h3,
  .wm-door, .wm-door p, .wm-door h3,
  .hub-card, .hub-card-t, .hub-card-d,
  .wm-steps, .wm-steps li {
    text-align: left !important;
    text-align-last: left !important;
  }
  @media (max-width:600px){
    .prod-body, .prod-body .prod-desc, .prod-name{
      text-align: center !important;
      text-align-last: center !important;
    }
  }

/* ===== vae-foot-css ===== */
/* PIEDE, allineato all'altro sito: tre livelli invece di due righe.
   Marchio con il motto, tre colonne raggruppate per intenzione, riga
   sottile in fondo. Il motto e i link legali restano dov'erano. */
.vae-foot{
  display:block !important;
  border-top:1px solid rgba(208,212,222,.12);
  padding:clamp(46px,7vh,78px) clamp(18px,5vw,44px) clamp(24px,3vh,34px);
  font-family:"Hanken Grotesk",system-ui,sans-serif;
}
.vf-top{display:grid;grid-template-columns:minmax(170px,.85fr) minmax(0,3fr);gap:clamp(28px,4vw,60px);align-items:start;max-width:1140px;margin:0 auto}
@media(max-width:900px){.vf-top{grid-template-columns:1fr;gap:34px}}
.vf-mark{display:block;font-family:"Bodoni Moda","Cormorant",serif;font-size:clamp(1.4rem,2.4vw,1.85rem);color:#eef0f4;line-height:1;letter-spacing:.03em}
.vf-motto{font-family:"Cormorant",Georgia,serif;font-style:italic;font-size:1.05rem;letter-spacing:.08em;color:#b3aef9;opacity:.7;margin:.6em 0 0}
.vf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
@media(max-width:900px){.vf-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}}
@media(max-width:420px){.vf-cols{grid-template-columns:1fr;gap:26px}}
.vf-col{display:flex;flex-direction:column;gap:.55em;align-items:flex-start}
.vf-h{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:#e12c4f;margin-bottom:.5em}
.vf-col a{color:#c8cdd8;text-decoration:none;font-size:.95rem;line-height:1.3;transition:color .22s}
.vf-col a:hover{color:#e12c4f}
.vf-hint{font-family:"Cormorant",Georgia,serif;font-style:italic;color:#7d7791 !important}
.vf-hint:hover{color:#e12c4f !important}
.vf-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5em 2em;
  max-width:1140px;margin:clamp(34px,5vh,58px) auto 0;padding-top:1.2em;
  border-top:1px solid rgba(208,212,222,.1);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.58rem;
  letter-spacing:.08em;color:#7d7791;
}
.vf-base a{color:#a39db8;text-decoration:none}
.vf-base a:hover{color:#e12c4f}
.vf-name{color:#a39db8}

/* ===== vae-foot-align ===== */
/* Il piede si allinea a sinistra sempre, qualunque cosa faccia la pagina
   che lo contiene: prima ereditava l'allineamento e la prima colonna
   usciva a destra mentre le altre restavano a sinistra. */
.vae-foot,.vae-foot *{text-align:left !important}
.vf-base{text-align:left !important}
.vf-base span:last-child{text-align:right !important;margin-left:auto}
.vf-brand{display:block}
.vf-mark{text-align:left !important}
.vf-motto{text-align:left !important}
.vf-col a{display:block;width:100%}

/* ===== work with me: lo scheletro dei practitioner ===== */
.wm-who{display:flex;align-items:center;gap:clamp(22px,4vw,44px);max-width:860px;margin:clamp(34px,6vh,58px) auto;padding:0 clamp(22px,5vw,40px)}
.wm-face{width:clamp(110px,18vw,168px);height:clamp(110px,18vw,168px);border-radius:50%;object-fit:cover;object-position:50% 42%;flex:0 0 auto;border:1px solid rgba(185,167,218,.3);box-shadow:0 20px 50px -22px rgba(0,0,0,.7)}
.wm-who-l{font-family:"Cormorant",Georgia,serif;font-style:italic;font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.4;color:#eef0f4;margin:0 0 .9em}
.wm-creds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5em}
.wm-creds li{font-family:"Hanken Grotesk",sans-serif;font-weight:300;font-size:.95rem;line-height:1.55;color:#c8cdd8;padding-left:1.1em;position:relative}
.wm-creds li::before{content:"";position:absolute;left:0;top:.62em;width:.5em;height:1px;background:#e12c4f}
.wm-creds b{color:#eef0f4;font-weight:500}
.wm-limits{border-top:1px solid rgba(208,212,222,.12);padding:clamp(44px,7vh,76px) 0}
.wm-limits .wrap{max-width:660px;margin:0 auto;padding:0 clamp(22px,5vw,40px)}
.wm-h2{font-family:"Cormorant",Georgia,serif;font-weight:400;font-size:clamp(1.7rem,3.4vw,2.2rem);color:#eef0f4;margin:.35em 0 .8em;line-height:1.15}
.wm-lim-l{font-family:"Hanken Grotesk",sans-serif;font-weight:300;font-size:1rem;line-height:1.72;color:#c8cdd8;margin:0 0 1em}
@media(max-width:640px){.wm-who{flex-direction:column;text-align:center}.wm-creds li{text-align:left}}
.vae-rev-sub{font-family:"Hanken Grotesk",sans-serif;font-weight:300;font-size:.95rem;line-height:1.65;color:#a1a4ad;max-width:56ch;margin:1em auto 0;text-wrap:pretty}
.vae-rev .who b{color:#e12c4f;font-weight:500}

/* ===== About: stessa impalcatura sui due siti, tutto a sinistra =====
   Prima vladaether centrava tutto e polyglotninja no. Un lettore che passa
   da un sito all'altro deve ritrovare la stessa forma, non due gusti. */
.ab-sec,.ab-mani .wrap{max-width:660px;margin:clamp(38px,7vh,84px) auto;padding:0 clamp(22px,5vw,40px);text-align:left}
.ab-sec h2,.ab-h2{font-family:"Cormorant",Georgia,serif;font-weight:400;font-size:clamp(1.9rem,4vw,2.6rem);color:#eef0f4;line-height:1.1;margin:.3em 0 .7em;text-align:left;text-wrap:pretty}
.ab-h2 em{display:block;font-style:italic;color:#e12c4f}
.ab-p{font-family:"Hanken Grotesk",sans-serif;font-weight:300;font-size:1.02rem;line-height:1.75;color:#c8cdd8;margin:0 0 1.1em;text-align:left;text-wrap:pretty}
.ab-strong{color:#eef0f4;border-left:2px solid #e12c4f;padding-left:1.1em}
.ab-sec p{text-align:left !important;text-align-last:left !important}
/* body.mob-center centra tutto sotto i 760px: sulla About no, perche' le due
   About dei due siti devono avere la stessa forma su ogni schermo, non solo
   su desktop. */
@media(max-width:760px){
  body.mob-center.mob-center .page-about :is(h1,h2,h3,p,span.kicker,.ap-lede,.ab-p,.ab-h2,.nm-kicker),
  body.mob-center.mob-center .ab-mani :is(h1,h2,h3,p,span),
  body.mob-center.mob-center .ab-sec :is(h1,h2,h3,p,span),
  body.mob-center.mob-center .ap-text :is(h1,p,span){text-align:left !important;text-align-last:left !important}
}
/* il bottone che porta soldi si distingue da quello che porta a una chiamata */
.wm-tier-go.is-buy{color:#e12c4f;font-weight:500}
.wm-tier-alt{display:block;margin-top:.5em;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#8f8aa3;text-decoration:none}
.wm-tier-alt:hover{color:#c8cdd8}
/* il sito gemello, nel piede, con la sua tipografia */
.vf-sister{color:#e12c4f !important;font-family:"Bodoni Moda",Georgia,serif !important;font-size:1rem !important}
.vf-sister i{font-style:italic}
.vf-sister:hover{color:#ff7089 !important}

/* ===== La cornice =====
   Un filo sottile fisso ai bordi della finestra, sopra ogni cosa e
   trasparente ai clic. E' il dettaglio che fa sembrare il sito una pagina
   invece che uno scroll infinito. Su schermi piccoli si assottiglia,
   perche' 26px di margine su 390 di larghezza sarebbero un furto. */
.vae-frame{position:fixed;inset:0;z-index:9000;pointer-events:none;
  border:14px solid #08070b;
  box-shadow:inset 0 0 0 1px rgba(185,167,218,.18)}
@media(max-width:760px){.vae-frame{border-width:8px}}
@media print{.vae-frame{display:none}}

/* Il ritratto sale di rango: sul riferimento la faccia e' la prima cosa
   dopo il titolo, e grande. Qui era in fondo e da 230px. */
.vae-meet .vm-portrait img{width:clamp(190px,30vw,320px);height:clamp(190px,30vw,320px)}
.vae-meet{padding-top:clamp(28px,5vh,56px)}

/* la foto di Work With Me resta leggermente velata: e' grande e piena,
   non un ritratto tondo, e senza velo salta fuori dalla pagina */
.wm-face{filter:brightness(.86) contrast(1.04) saturate(.9);transition:filter .6s cubic-bezier(.2,.7,.2,1)}
.wm-who:hover .wm-face{filter:none}

/* ===== La foto grande, alla Aubrey Aust =====
   Immagine alta a sinistra, poco testo a destra, niente centratura. La foto
   non e' un ornamento accanto al testo: e' meta' del blocco. */
.vae-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;
  max-width:1140px;margin:clamp(30px,6vh,70px) auto clamp(20px,4vh,44px);padding:0 clamp(22px,5vw,44px)}
.ed-fig{margin:0}
.ed-fig img{width:100%;height:auto;display:block;border-radius:4px;
  filter:brightness(.92) contrast(1.05);
  box-shadow:0 34px 80px -40px rgba(0,0,0,.95)}
.ed-lede{font-family:"Cormorant",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1;color:#eef0f4;margin:0 0 .7em;text-align:left}
.ed-body{font-family:"Hanken Grotesk",sans-serif;font-weight:300;font-size:clamp(.98rem,1.4vw,1.06rem);
  line-height:1.72;color:#c8cdd8;margin:0 0 .95em;max-width:46ch;text-align:left;text-wrap:pretty}
.ed-go{margin:1.4em 0 0}
.ed-go a{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:#e12c4f;text-decoration:none}
.ed-go a:hover{color:#ff7089}
@media(max-width:860px){
  .vae-editorial{grid-template-columns:1fr;gap:26px}
  .ed-fig img{max-width:min(420px,86vw);margin:0 auto}
}
@media(max-width:760px){
  body.mob-center.mob-center .vae-editorial :is(p,a){text-align:left !important;text-align-last:left !important}
}

/* ==========================================================================
   L'ERO E DIVISO, alla Aubrey Aust
   Testo a sinistra su fondo grigio caldo, foto a destra che arriva al bordo
   senza cornice ne' margine. Tutto con le grazie, in crema.
   ========================================================================== */
.hero-wall{--warm:#3d3936;--cream:#efeae1}
.hero-wall.hero-wall{background:var(--warm) !important;display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;
  min-height:calc(100svh - 58px);padding:0 !important;overflow:hidden}
.hero-wall::before,.hero-wall::after{display:none !important}

.hw-photo{grid-column:2;grid-row:1;margin:0;height:100%;overflow:hidden;position:relative}
.hw-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;filter:brightness(.94)}
/* la foto sfuma dentro il fondo sul lato sinistro, come sul riferimento */
.hw-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--warm) 0%,rgba(61,57,54,.55) 16%,transparent 46%)}

.hero-wall .hw-text{grid-column:1;grid-row:1;width:auto !important;max-width:none !important;
  align-items:flex-start !important;text-align:left !important;
  padding:clamp(28px,6vh,72px) clamp(22px,4vw,56px) clamp(28px,6vh,72px) clamp(26px,5vw,84px) !important;
  z-index:2}
.hero-wall .hw-kick{color:#b9b1a4;letter-spacing:.3em;text-shadow:none}
.hero-wall .hw-lead{font-family:"Cormorant",Georgia,serif !important;font-style:normal !important;
  font-weight:400 !important;font-size:clamp(2.8rem,6.4vw,5.6rem) !important;line-height:1 !important;
  letter-spacing:-.012em !important;color:var(--cream) !important;max-width:none !important;
  text-align:left !important;margin:.22em 0 .5em !important;text-shadow:none !important}
.hw-role{font-family:"Cormorant",Georgia,serif;font-size:clamp(1.05rem,1.7vw,1.32rem);
  line-height:1.5;color:var(--cream);margin:0 0 2.4em;text-align:left}
.hw-role b{font-weight:600}
.hw-bio p{font-family:"Cormorant",Georgia,serif;font-weight:400;
  font-size:clamp(1.02rem,1.45vw,1.18rem);line-height:1.58;color:#ddd6ca;
  margin:0 0 1.15em;max-width:46ch;text-align:left;text-wrap:pretty}
.hero-wall .hw-facts{color:#a49b8d;border-color:rgba(239,234,225,.2);margin-top:.6em}
.hero-wall .hw-facts i{background:rgba(239,234,225,.28)}
.hero-wall .hw-btns{justify-content:flex-start;margin-top:1.9em}
.hero-wall .hw-link{color:#c9c0b2}
.hero-wall .hw-link:hover{color:var(--cream)}

@media(max-width:860px){
  .hero-wall.hero-wall{grid-template-columns:1fr;min-height:0}
  .hw-photo{grid-column:1;grid-row:1;height:min(56vh,420px)}
  .hw-photo::after{background:linear-gradient(0deg,var(--warm) 0%,rgba(61,57,54,.5) 22%,transparent 60%)}
  .hero-wall .hw-text{grid-column:1;grid-row:2;padding-top:0 !important}
  body.mob-center.mob-center .hero-wall :is(h1,p,span,div){text-align:left !important;text-align-last:left !important}
}

/* ==========================================================================
   IL PANNELLO CHE SI SOLLEVA
   Sul riferimento, arrivando in fondo, il contenuto ha gli angoli arrotondati
   e scivola via scoprendo un piede chiaro rimasto sotto per tutto il tempo.
   Si fa senza JavaScript: il piede sta fisso in fondo alla finestra, il
   contenuto gli scorre sopra con un margine pari alla sua altezza.
   ========================================================================== */
html{background:#f4f1e9}
body{background:transparent}
.vae-sheet{position:relative;z-index:2;background:var(--void,#08070b);
  border-radius:0 0 clamp(18px,2.4vw,34px) clamp(18px,2.4vw,34px);
  overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.vae-foot{position:fixed;left:0;right:0;bottom:0;z-index:1;
  background:#f4f1e9 !important;border-top:0 !important;color:#2a2724 !important}
/* il piede chiaro ribalta i colori del testo */
.vae-foot .vf-mark,.vae-foot .vf-col a,.vae-foot .vf-base{color:#2a2724 !important}
.vae-foot .vf-h{color:#8a1f34 !important}
.vae-foot .vf-motto{color:#6b6459 !important}
.vae-foot .vf-col a:hover{color:#8a1f34 !important}
.vae-foot .vf-sister{color:#8a1f34 !important}
.vae-foot .vae-ether{color:#8a1f34 !important}
.vae-foot .vf-base{border-top-color:rgba(42,39,36,.16) !important}

/* La barra fissa diventa nera piena appena si scorre, come sul riferimento:
   in cima e' trasparente sul grigio caldo dell'eroe, poi si stacca. */
.vae-bar{transition:background .35s ease,border-color .35s ease}
.vae-bar.is-stuck{background:#0a0908 !important;border-bottom-color:rgba(239,234,225,.14) !important}
@media(prefers-reduced-motion:reduce){.vae-bar{transition:none}}
/* I livelli di fondo (base, alone, grana) sono in posizione fissa: restavano
   ancorati alla finestra e coprivano il piede chiaro anche quando il pannello
   era gia' scivolato via. Dentro il pannello diventano assoluti, cosi' si
   fermano ai suoi bordi e il piede si vede. */
.vae-sheet .base,.vae-sheet .atmos,.vae-sheet .grain,.vae-sheet .shimmer,.vae-sheet .scan{
  position:absolute !important;inset:0 !important;height:100% !important;width:100% !important}
/* Il riferimento non ha bottoni nell'eroe: solo testo. Qui serve comunque un
   modo per prenotare, quindi un rimando in riga invece di due pillole. */
.hw-quiet-cta{margin:2.2em 0 0;font-family:"Cormorant",Georgia,serif;font-size:1.05rem;text-align:left}
.hw-quiet-cta a{color:#efeae1;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-decoration-color:rgba(239,234,225,.4)}
.hw-quiet-cta a:hover{text-decoration-color:#efeae1}
.hw-quiet-cta span{color:#8d8579}
/* la foto si stringe sul viso, come sul riferimento, invece di mostrare
   tutta la figura persa nel muro */
.hw-photo img{object-position:50% 12% !important;transform:scale(1.28);transform-origin:50% 14%}
@media(max-width:860px){.hw-photo img{transform:scale(1.12);object-position:50% 14% !important}}
/* il titolo dell'eroe restava centrato da una regola piu' avanti nella
   pagina: unico elemento fuori riga in tutto il sito */
.hero-wall .hw-lead,.hero-wall .hw-lead.hw-lead{text-align:left !important}
@media(max-width:760px){body.mob-center.mob-center .hero-wall .hw-lead{text-align:left !important;text-align-last:left !important}}
/* su mobile la regola mob-center rovesciava il rapporto: il titolo restava a
   sinistra e tutto il resto si centrava. Va in fondo per vincere. */
@media(max-width:760px){
  /* :not(#_) alza la specificita' al livello di un id senza cambiare cosa
     viene selezionato: serve perche' la regola generica che centra tutto
     sotto i 760px usa lo stesso trucco e altrimenti vince lei */
  body.mob-center.mob-center .hero-wall :is(h1,h2,p,span,div,a):not(#_){text-align:left !important;text-align-last:left !important}
  body.mob-center.mob-center .hero-wall .hw-text:not(#_){align-items:flex-start !important}
}

/* ==========================================================================
   NERO, e la foto intera
   Il grigio caldo era un colore preso dal riferimento, non da qui: il sito
   e' nero e resta nero. E la foto si vede tutta invece di essere tagliata
   sul viso: object-fit contain, e il nero attorno fa da fondo.
   ========================================================================== */
.hero-wall{--warm:#08070b;--cream:#efeae1}
.hero-wall.hero-wall{background:#08070b !important}
.hw-photo img{object-fit:contain !important;object-position:50% 50% !important;
  transform:none !important;filter:none !important;height:100% !important}
/* niente sfumatura sul bordo: con il nero pieno non serve piu' */
.hw-photo::after{display:none !important}
.hw-bio p{color:#c8cdd8}
.hero-wall .hw-kick{color:#a1a4ad}
/* il ritratto tondo vive qui adesso, sopra il manifesto */
.ab-face{max-width:660px;margin:clamp(30px,6vh,60px) auto 0;padding:0 clamp(22px,5vw,40px);text-align:left}
.ab-face img{width:clamp(140px,22vw,190px);height:clamp(140px,22vw,190px);border-radius:50%;object-fit:cover;object-position:50% 42%;border:1px solid rgba(185,167,218,.28);box-shadow:0 20px 50px -24px rgba(0,0,0,.8);display:block}
/* La cella della foto non aveva un'altezza risolvibile, quindi height:100%
   sull'immagine non si applicava e la foto sbordava fuori dall'eroe, che la
   tagliava. Con align-self:stretch e min-height:0 la cella prende l'altezza
   della riga e la foto ci sta dentro tutta. */
.hero-wall .hw-photo{align-self:stretch;min-height:0;display:flex;align-items:center;justify-content:center}
.hero-wall .hw-photo picture{display:block;width:100%;height:100%}
.hero-wall .hw-photo img{width:100%;height:100%;max-height:100%;object-fit:contain !important}
@media(max-width:860px){.hero-wall .hw-photo{height:min(58vh,440px)}}
/* Una foto 2:3 mostrata per intero su meta' schermo vorrebbe un eroe alto
   una volta e mezza la sua larghezza, cioe' piu' alto della finestra: si
   vedrebbe tutta ma solo scorrendo. La lego all'altezza della finestra, cosi'
   si vede intera al primo colpo d'occhio, con il nero attorno. */
.hero-wall.hero-wall{max-height:100svh}
.hero-wall .hw-photo img{max-height:calc(100svh - 96px);width:auto;max-width:100%;margin:0 auto}
@media(max-width:860px){
  .hero-wall.hero-wall{max-height:none}
  /* anche su mobile la foto resta intera: altezza libera, proporzioni sue */
  .hero-wall .hw-photo{height:auto !important}
  .hero-wall .hw-photo img{max-height:52svh;width:auto;height:auto;object-fit:contain !important}
}

/* ===== Il piede, ridotto all'osso =====
   Nome, motto, quattro contatti, e la riga legale. Le colonne di categorie
   sono sparite: quello che serve sta nel menu, e un piede lungo su un sito
   di cinque pagine e' solo peso. */
.vae-foot .vf-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:clamp(20px,4vw,50px);max-width:1140px;margin:0 auto}
.vf-links{display:flex;flex-wrap:wrap;gap:.6em clamp(16px,2.4vw,30px);align-items:baseline}
.vf-links a{color:#2a2724;text-decoration:none;font-family:"Hanken Grotesk",sans-serif;font-weight:300;font-size:.95rem}
.vf-links a:hover{color:#8a1f34}
.vf-kofi{color:#8a1f34 !important}
.vae-foot .vf-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  max-width:1140px;margin:clamp(22px,3.4vw,34px) auto 0;padding-top:clamp(14px,2vw,20px)}
@media(max-width:640px){.vae-foot .vf-in{flex-direction:column;align-items:flex-start;gap:22px}}

/* ==========================================================================
   L'ERO E: foto intera a meta' schermo, lastra scura sopra tutto
   La lastra sta sopra la foto, non dietro: il testo ci poggia sopra e resta
   bianco leggibile qualunque cosa faccia la foto sotto. E' quello che rende
   la pagina una cosa sola invece di due meta' incollate.
   ========================================================================== */
.hero-wall.hero-wall{position:relative;isolation:isolate;max-height:none;
  min-height:100svh;align-items:stretch}
.hero-wall .hw-photo{grid-column:2;grid-row:1;align-self:stretch;overflow:hidden}
.hero-wall .hw-photo img{max-height:none !important;width:100% !important;height:100% !important;
  object-fit:contain !important;object-position:50% 50% !important}

/* la lastra: un velo scuro steso sopra la foto, dal centro verso destra */
.hero-wall::after{content:"" !important;display:block !important;position:absolute;inset:0;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#08070b 0%,#08070b 46%,rgba(8,7,11,.86) 58%,rgba(8,7,11,.62) 78%,rgba(8,7,11,.5) 100%)}
.hero-wall .hw-text{position:relative;z-index:2}
.hero-wall .hw-lead,.hw-role{color:#fff !important}
.hw-bio p{color:#d8d4dd}

/* Il sollevamento della foto allo scorrimento: sale di poco mentre la pagina
   scende. Fatto con animation-timeline dove c'e', altrimenti resta ferma. */
@supports (animation-timeline: view()){
  .hero-wall .hw-photo img{animation:fotoSu linear both;animation-timeline:view();animation-range:entry 0% cover 100%}
  @keyframes fotoSu{from{transform:translateY(3.5%) scale(1.02)}to{transform:translateY(-3.5%) scale(1.02)}}
}
@media(prefers-reduced-motion:reduce){.hero-wall .hw-photo img{animation:none !important;transform:none !important}}

@media(max-width:860px){
  .hero-wall.hero-wall{min-height:0}
  .hero-wall::after{background:linear-gradient(180deg,rgba(8,7,11,.45) 0%,rgba(8,7,11,.75) 62%,#08070b 100%)}
  .hero-wall .hw-photo{grid-column:1;grid-row:1;height:auto !important}
  .hero-wall .hw-photo img{max-height:52svh !important;width:auto !important;height:auto !important;margin:0 auto}
}
/* L'eroe prende esattamente l'altezza della finestra: senza un'altezza
   dichiarata la cella della foto la ricavava dall'immagine e l'eroe cresceva
   a 1080, cioe' oltre lo schermo. Cosi' la foto si vede intera al primo
   sguardo, dentro la sua meta'. */
.hero-wall.hero-wall{height:100svh;min-height:0;max-height:100svh}
.hero-wall .hw-photo{height:100%;min-height:0}
.hero-wall .hw-photo picture{height:100%}
.hero-wall .hw-photo img{height:100% !important;width:100% !important;max-height:100% !important}
@media(max-width:860px){
  .hero-wall.hero-wall{height:auto;max-height:none;min-height:0}
  .hero-wall .hw-photo{height:auto !important}
  .hero-wall .hw-photo img{height:auto !important;width:auto !important;max-height:50svh !important}
}
/* le schede dei prezzi restavano centrate su mobile: ultima eccezione */
@media(max-width:760px){
  body.mob-center.mob-center .wm-tier :is(h3,p,span,a):not(#_){text-align:left !important;text-align-last:left !important}
}
/* Sotto i 760px la pagina Work With Me centrava quasi tutto. Una regola sola
   per l'intera pagina invece di rincorrere ogni blocco. */
@media(max-width:760px){
  /* niente 'main' nel selettore: meta' delle pagine usano .page invece del
     tag main, e la regola non le toccava */
  body.mob-center.mob-center :is(h1,h2,h3,h4,p,li,figcaption,blockquote):not(#_):not(.vf-base *){
    text-align:left !important;text-align-last:left !important}
  body.mob-center.mob-center :is(.wm-tier,.wm-who,.wm-rail-sec,.vae-rev,.hw-text):not(#_){align-items:flex-start}
}

/* ===== Tutto a sinistra, a ogni larghezza =====
   Le pagine interne avevano il titolo e il sommario centrati mentre il corpo
   era a bandiera. Uguale su tutto il sito, come su polyglotninja. */
.page :is(h1,h2,h3,h4,p,li,figcaption,blockquote):not(#_),
main :is(h1,h2,h3,h4,p,li,figcaption,blockquote):not(#_){text-align:left;text-align-last:left}
.page .body,.page .hub-head,.page .sec-head{text-align:left}
/* .display era centrato da una regola con !important dentro il foglio della
   pagina, che vince su qualunque cosa scritta qui prima. Stessa arma, e in
   fondo al file cosi' arriva per ultima. */
.display:not(#_),.hub-lead:not(#_),.lead:not(#_),.body > p:not(#_),.body > h1:not(#_){
  text-align:left !important;text-align-last:left !important}
.page .body,.page .body > *{text-align:left !important}
/* ultimi due blocchi rimasti centrati: il titolo di sezione e il richiamo
   finale sulle pagine delle pratiche */
.vae-name:not(#_),.vae-name > *:not(#_),.jx-pay:not(#_),.jx-pay > *:not(#_){
  text-align:left !important;text-align-last:left !important}

/* ===== La lastra, dosata =====
   La prima versione andava da opaca a mezza opacita' anche sopra la foto:
   con una foto gia' scura in bianco e nero il risultato era che la foto
   spariva. La lastra deve unificare la pagina e tenere il testo bianco
   leggibile, non cancellare l'immagine. Piena a sinistra sotto il testo,
   un velo appena percettibile sopra la foto. */
.hero-wall::after{
  background:linear-gradient(90deg,
    rgba(8,7,11,.96) 0%,
    rgba(8,7,11,.92) 40%,
    rgba(8,7,11,.55) 52%,
    rgba(8,7,11,.18) 64%,
    rgba(8,7,11,.10) 100%) !important}
@media(max-width:860px){
  .hero-wall::after{background:linear-gradient(180deg,
    rgba(8,7,11,.12) 0%,rgba(8,7,11,.35) 55%,rgba(8,7,11,.9) 82%,#08070b 100%) !important}
}

/* La vignettatura a schermo intero scuriva i bordi di tutta la finestra: con
   la foto sul lato destro il risultato era che la foto spariva. Nasce per
   dare atmosfera a una pagina di solo testo, non per stare sopra
   un'immagine. Si ferma sopra l'eroe e riprende sotto. */
.vae-vignette{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 100svh,#000 100svh);
  mask-image:linear-gradient(180deg,transparent 0,transparent 100svh,#000 100svh)}
@media(max-width:860px){
  .vae-vignette{-webkit-mask-image:none;mask-image:none;opacity:.5}
}

/* ==========================================================================
   PIEDE NORMALE, NIENTE PANNELLO
   Il piede fisso in fondo alla finestra con il contenuto che ci scivolava
   sopra funzionava sulla home e rompeva tutte le altre pagine. L'unica cosa
   fissa del sito e' la barra in cima. Il piede scorre con la pagina come
   qualunque piede, e torna scuro come il resto.
   ========================================================================== */
html{background:#08070b}
.vae-sheet{position:static;background:none;border-radius:0;overflow:visible;box-shadow:none;margin-bottom:0 !important}
.vae-foot{position:static !important;background:#0b0a0f !important;
  border-top:1px solid rgba(208,212,222,.12) !important;color:#a1a4ad !important}
.vae-foot .vf-mark,.vae-foot .vf-base{color:#eef0f4 !important}
.vae-foot .vf-links a{color:#c8cdd8 !important}
.vae-foot .vf-links a:hover{color:#e12c4f !important}
.vae-foot .vf-kofi,.vae-foot .vf-sister{color:#e12c4f !important}
.vae-foot .vf-motto{color:#8f8aa3 !important}
.vae-foot .vf-base{border-top-color:rgba(208,212,222,.12) !important;color:#8f8aa3 !important}
.vae-foot .vf-base a{color:#a1a4ad !important}
.vae-foot .vae-ether{color:#e12c4f !important}

/* ==========================================================================
   LA LASTRA, PIU' SCURA E COESA
   ========================================================================== */
.hero-wall::after{
  background:linear-gradient(90deg,
    rgba(6,5,9,.985) 0%,
    rgba(6,5,9,.96) 42%,
    rgba(6,5,9,.72) 54%,
    rgba(6,5,9,.46) 68%,
    rgba(6,5,9,.4) 100%) !important}

/* ==========================================================================
   SI MUOVE SOLO LA FOTO
   Il testo e' poco e sta fermo: se si muovesse anche lui la pagina
   sembrerebbe scivolare via. E l'eroe non ha piu' un'altezza bloccata, cosi'
   su schermi bassi il testo non viene tagliato: cresce quanto serve.
   ========================================================================== */
.hero-wall.hero-wall{height:auto;min-height:100svh;max-height:none;align-items:center}
.hero-wall .hw-text{padding-top:clamp(90px,12vh,120px) !important;padding-bottom:clamp(40px,7vh,80px) !important}
.hero-wall .hw-photo{position:sticky;top:0;height:100svh;align-self:start}
.hero-wall .hw-photo img{height:100% !important;object-fit:contain !important}
@media(max-width:860px){
  .hero-wall .hw-photo{position:static;height:auto !important}
  .hero-wall::after{background:linear-gradient(180deg,
    rgba(6,5,9,.3) 0%,rgba(6,5,9,.6) 50%,rgba(6,5,9,.94) 80%,#06050 100%) !important}
}
/* spazio vuoto sotto il piede: veniva dal contenitore .page che ha una
   min-height a schermo intero e continuava a spingere anche a pagina finita */
body > .page{min-height:0}
.page{padding-bottom:0}
/* residuo di spazio sotto il piede: la colonna .page tiene un margine
   automatico in fondo che, a pagina finita, resta come vuoto */
.page{margin-bottom:0 !important}
.vae-foot{margin-top:0}
body{padding-bottom:0 !important;margin-bottom:0 !important}
/* Il piede sta dentro il contenitore .page, che ha 12vh di spazio in fondo:
   a pagina finita quel margine restava sotto il piede come una striscia
   vuota. Sulle pagine che hanno il piede dentro, lo azzero. */
/* il piede sta dentro .body, non dentro .page: era quello ad avere lo spazio
   in fondo che restava come striscia vuota sotto il piede */
.body:has(> .vae-foot):not(#_){padding-bottom:0}

/* ==========================================================================
   LA FASCIA DELLA HOME
   E' la stessa della pagina About, spostata qui identica: foto a sinistra
   larga quanto prima, testo a destra. Cambia solo cosa dice il testo.
   ========================================================================== */
.ap-h1{font-family:"Cormorant",Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,5.2vw,3.6rem);line-height:1.06;color:#fff;
  margin:0 0 .45em;text-align:left}
.ap-role{font-family:"Cormorant",Georgia,serif;font-size:clamp(1.05rem,1.7vw,1.3rem);
  line-height:1.5;color:#eef0f4;margin:0 0 2em;text-align:left}
.ap-role b{font-weight:600}
.ap-bio p{font-family:"Cormorant",Georgia,serif;font-weight:400;
  font-size:clamp(1rem,1.4vw,1.14rem);line-height:1.6;color:#c8cdd8;
  margin:0 0 1.05em;max-width:46ch;text-align:left;text-wrap:pretty}
.ap-cta{margin:1.8em 0 0;font-family:"Cormorant",Georgia,serif;font-size:1.05rem;text-align:left}
.ap-cta a{color:#eef0f4;text-decoration:underline;text-underline-offset:5px;
  text-decoration-thickness:1px;text-decoration-color:rgba(239,234,225,.4)}
.ap-cta a:hover{text-decoration-color:#eef0f4}
.ap-cta span{color:#8d8579}
/* la lastra scura sopra la foto, come chiesto: densa a destra sotto il testo,
   un velo a sinistra dove sta l'immagine */
.ap-photo::after{background:linear-gradient(90deg,
  rgba(6,5,9,.34) 0%,rgba(6,5,9,.5) 55%,rgba(6,5,9,.86) 78%,var(--void) 100%) !important}
/* la vignettatura non deve spegnere la foto */
.vae-vignette{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 100svh,#000 100svh);
  mask-image:linear-gradient(180deg,transparent 0,transparent 100svh,#000 100svh)}
@media(max-width:860px){
  .ap-photo::after{background:linear-gradient(180deg,rgba(6,5,9,.25) 0%,rgba(6,5,9,.7) 55%,var(--void) 92%) !important}
  .vae-vignette{-webkit-mask-image:none;mask-image:none;opacity:.5}
}