:root{
  --rgb-fondo:11,12,15; --rgb-testo:239,237,230;
  --g1:#D9D6CF; --g2:#B4B0A8; --g3:#9E9A93; --g4:#9C9891;
  /* --g8 era #4E4B47, 2.26:1 su ink: sotto AA anche a pagina vuota, e lo usa
     .n-sep che e' testo. Sollevato a 5.00:1. */
  --g5:#8C8880; --g6:#6E6B65; --g7:#5E5B56; --g8:#858079;
  --tratto:160,107,255; --impulso:91,255,154;
}
body.chiaro{
  --ink:#EFEDE6; --nebbia:#14151A; --grafite:#E4E1D8;
  --rgb-fondo:239,237,230; --rgb-testo:14,15,20;
  --verde:#12A055; --verde-neon:#35DD79; --viola:#5B18D6; --viola-tratto:#7A2FF4;
  --fil:rgba(14,15,20,.16);
  --g1:#1E1F24; --g2:#3B392F; --g3:#54514A; --g4:#5B584F;
  --g5:#6B6760; --g6:#7C786F; --g7:#8B877E; --g8:#A5A199;
  --tratto:122,47,244; --impulso:18,160,85;
  --avviso:#A4231B;
}
body.chiaro .foglio b{opacity:.9}
body.chiaro .cta:hover,body.chiaro .campo button{color:#FFF}
body.chiaro .campo button:hover{color:var(--verde)}
body.chiaro .chiudi:hover{color:#FFF}
body.chiaro .rt-foto::after,body.chiaro .sede .velo{
  background:linear-gradient(180deg,rgba(239,237,230,0) 34%,rgba(239,237,230,.55) 62%,rgba(239,237,230,.94))}
body.chiaro .ritratto figcaption{background:linear-gradient(180deg,rgba(239,237,230,.86),rgba(239,237,230,.5) 62%,rgba(239,237,230,0))}
body.chiaro .sede b{color:var(--g3)}
@font-face{font-family:Syne;src:url(../fonts/syne.woff2) format('woff2');font-weight:400 800;font-display:swap;font-style:normal}
@font-face{font-family:'Hanken Grotesk';src:url(../fonts/hanken-grotesk.woff2) format('woff2');font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:'Space Mono';src:url(../fonts/space-mono-400.woff2) format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Space Mono';src:url(../fonts/space-mono-700.woff2) format('woff2');font-weight:700;font-display:swap;font-style:normal}
:root{--verde:#35DD79;--viola:#7A2FF4;--viola-tratto:#A06BFF;--ink:#0B0C0F;--nebbia:#EFEDE6;
 --grigio:var(--g5);--fil:rgba(var(--rgb-testo),.13);--gut:clamp(26px,4.5vw,72px);--bordo:22px;
 /* --muto era #7c7c74, 4.65:1 su ink: 0.15 sopra il cancello, cioe' nessun
    margine contro il canvas. Sollevato a 6.01:1, resta il grigio piu' quieto. */
 --muto:#8F8F86;--nav:#9c9c92;
 /* stato di errore del contatto: 9.64:1 su ink, e il rosso non e' l'unico
    segnale, il messaggio dice cosa e' andato storto */
 --avviso:#FF9C86;
 /* Reading protection used to live here alone: one veil alpha per section, dimming
    the whole monument to cover the fraction of it the text actually crosses. The
    halo below took that job over, so these drop to a single low base. What is left
    is a floor, not protection: it keeps the very brightest strokes off the leads
    and buys the halo a little headroom, at a cost of a tenth of the monument.
    Per section values are gone on purpose. The halo follows the writing, so nothing
    here needs retuning when the copy or the language changes. */
 --velo-tav-01:.10;--velo-tav-02:.10;--velo-tav-03:.10;
 --velo-tav-04:.10;--velo-tav-05:.10;
 /* the glyph halo, see the rule further down for why the radii are small */
 --halo:0 0 2px var(--ink),0 0 2px var(--ink),0 0 2px var(--ink),
        0 0 4px var(--ink),0 0 4px var(--ink),0 0 8px var(--ink);
 /* il velo deve essere gia' pieno dove comincia il contenuto: il rientro e'
    bordo + gut, cioe' il 4.9% a 1920px e l'8.8% a 320px, e il tedesco manda a
    capo diversamente dall'italiano. La rampa si chiude prima del rientro
    minimo, non dove capitava di stare comodi in italiano. */
 --velo-tav:var(--velo-tav-01);--velo-tav-x0:4%;--velo-tav-x1:96%;
 --velo-lato:26px;
 /* le due targhe fisse stanno a destra, fuori dalla banda di lettura, quindi gli
    impulsi ci passano ancora dietro: il loro fondo se ne fa carico da solo */
 --velo-hud:.83;
 /* velo del piede sopra il canvas: l'ultimo monumento resta pieno anche sotto la
    sua sezione, quindi il testo del piede va staccato dal tratto. Due livelli
    perche' i due testi hanno margini diversi su ink: --g5 parte da 5.54:1, la
    stampatella di .piede-riga a --muto da 4.65:1 e non lascia passare nulla. */
 --velo-piede:.82;--velo-riga:.965;--velo-quota:215px;--velo-sfuma:40px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--nebbia);font-family:"Hanken Grotesk",system-ui,sans-serif;
 font-size:clamp(1rem,.95rem + .25vw,1.1rem);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
#vivo{position:fixed;inset:0;z-index:0;pointer-events:none}
main{position:relative;z-index:1}
/* la testata e' rientrata di --bordo: senza questa fascia il contenuto scorre
   nella striscia sopra di lei. Sta sotto cornice e testata, cosi' il bordo
   superiore del foglio e le tacche d'angolo restano leggibili. */
body::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--bordo);
 background:var(--ink);z-index:3;pointer-events:none}

.mono{font-family:"Space Mono",monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grigio)}

.foglio{position:fixed;inset:var(--bordo);z-index:4;pointer-events:none;border:1px solid var(--fil)}
.foglio b{position:absolute;width:12px;height:12px;border:0 solid var(--verde);opacity:.8}
.foglio b:nth-child(1){left:-1px;top:-1px;border-left-width:1px;border-top-width:1px}
.foglio b:nth-child(2){right:-1px;top:-1px;border-right-width:1px;border-top-width:1px}
.foglio b:nth-child(3){left:-1px;bottom:-1px;border-left-width:1px;border-bottom-width:1px}
.foglio b:nth-child(4){right:-1px;bottom:-1px;border-right-width:1px;border-bottom-width:1px}
.righello{position:absolute;left:0;top:0;bottom:0;width:8px;
 background:repeating-linear-gradient(to bottom,var(--fil) 0 1px,transparent 1px 9px)}

/* --- testata: adesso e' il menu --- */
.testata{position:fixed;left:var(--bordo);right:var(--bordo);top:var(--bordo);z-index:6;
 display:flex;align-items:center;gap:2.2rem;padding:.8rem 1.1rem;border-bottom:1px solid var(--fil);
 background:linear-gradient(180deg,rgba(var(--rgb-fondo),.88),rgba(var(--rgb-fondo),.78));
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.marchio{display:flex;align-items:center;gap:.55em;text-decoration:none;color:var(--nebbia);
 font-family:Syne,sans-serif;font-weight:800;font-size:.98rem;letter-spacing:-.02em}
.marchio-segno{height:25px;width:auto;color:var(--nebbia)}
.marchio .ms-punto{animation:puls 2.8s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
nav{margin-left:auto;display:flex;gap:1.9rem}
nav a{font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
 color:var(--nav);text-decoration:none;position:relative;padding-bottom:3px}
nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--verde);
 transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
nav a:hover{color:var(--nebbia)}
nav a:hover::after{transform:scaleX(1);transform-origin:left}
.cta{display:inline-flex;align-items:center;gap:.6em;padding:.66em 1.15em;border:1px solid var(--verde);
 color:var(--verde);text-decoration:none;font-family:"Space Mono",monospace;font-size:.64rem;
 letter-spacing:.2em;text-transform:uppercase;transition:background .2s,color .2s}
.cta:hover{background:var(--verde);color:var(--ink)}
/* cambio lingua: e' un div con role=navigation e non un <nav>, cosi' non eredita
   il margin-left:auto della barra e resta visibile anche sotto gli 860px, dove
   nav e cta spariscono e la lingua deve restare raggiungibile */
.lingue{display:flex;align-items:center;gap:.5em;font-family:"Space Mono",monospace;
 font-size:.62rem;letter-spacing:.18em}
.lingue a{color:var(--nav);text-decoration:none;transition:color .2s}
.lingue a:hover{color:var(--nebbia)}
.lingue a[aria-current]{color:var(--verde)}
.lingue span{color:var(--fil)}

/* --- coordinate in basso a sinistra --- */
.coord{position:fixed;left:calc(var(--bordo) + 22px);bottom:calc(var(--bordo) + 14px);z-index:5;
 font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.19em;text-transform:uppercase;
 color:var(--nav);display:flex;gap:1.5em;pointer-events:none;
 background:rgba(var(--rgb-fondo),var(--velo-hud));padding:3px 10px;border-radius:100px}
.coord b{color:var(--nav);font-weight:400}

/* --- cartiglio: piu' piccolo e trasparente --- */
.cartiglio{position:fixed;right:calc(var(--bordo) + 10px);bottom:calc(var(--bordo) + 10px);z-index:5;
 display:flex;gap:0;border:1px solid rgba(var(--rgb-testo),.08);background:rgba(var(--rgb-fondo),var(--velo-hud));
 backdrop-filter:blur(3px);font-family:"Space Mono",monospace;pointer-events:none;
 padding:3px 10px;border-radius:100px}
.cartiglio div{border-left:1px solid rgba(var(--rgb-testo),.08);padding:.3rem .6rem}
.cartiglio div:first-child{border-left:0}
.cartiglio i{display:block;font-style:normal;font-size:.45rem;letter-spacing:.2em;color:var(--nav)}
.cartiglio span{display:block;font-size:.6rem;letter-spacing:.1em;color:var(--nav);margin-top:.1rem;
 white-space:nowrap}
.cartiglio .att span{color:rgba(53,221,121,.85)}

/* le due targhe sono fisse e coprirebbero il piede: al piede si ritirano */
.coord,.cartiglio{transition:opacity .4s}
body.al-piede .coord,body.al-piede .cartiglio{opacity:0}

/* --- tavole --- */
.tavola{position:relative;padding:clamp(110px,15vh,180px) 0;
 padding-inline:calc(var(--bordo) + var(--gut))}
/* il velo sta fra il canvas e il contenuto: main fa contesto a z-index 1, quindi
   z-index -1 qui dentro resta sopra al canvas e sotto al testo */
.tavola::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(to right,
  rgba(var(--rgb-fondo),0) 0,
  rgba(var(--rgb-fondo),var(--velo-tav)) var(--velo-tav-x0),
  rgba(var(--rgb-fondo),var(--velo-tav)) var(--velo-tav-x1),
  rgba(var(--rgb-fondo),0) 100%)}
#tav01{--velo-tav:var(--velo-tav-01)} #tav02{--velo-tav:var(--velo-tav-02)}
#tav03{--velo-tav:var(--velo-tav-03)} #tav04{--velo-tav:var(--velo-tav-04)}
#tav05{--velo-tav:var(--velo-tav-05)}

/* The halo carries the reading protection now, so the veil above can stay near
   zero and the monument reads bright. It is ink on ink over the flat background,
   invisible; over the stroke it darkens the few pixels around each letter, and it
   follows the writing, so the longer German and English lines are covered without
   anyone tuning a per section number again.
   Tight radii, several of them, is the whole trick. A 9px Space Mono stem is about
   one pixel wide: blurred over 18px its shadow peaks near a tenth of full ink and
   protects nothing. The same ink spent on 2 and 4px radii reaches the opacity that
   actually matters, and the dark patch stays small. Measured as the lightest stack
   that holds AA at a .10 veil: dropping to 2,2,4,4,8 leaves the contact privacy link
   at 4.43:1 in German at 390px.
   Not for text that already sits on its own solid backing: the header, the two HUD
   plates, the menu and the green button are excluded on purpose.
   The headings are excluded too, and that one is about frame budget. Blur cost goes
   with the area under the glyphs, and h1 and h2 are 39 to 66px: they were most of
   the paint. They do not need protecting anyway. Measured bare at a .10 veil, the
   worst run of 17px and up is 4.89:1 against a 3:1 gate, because a heading stroke is
   thick enough to sit on its own. Everything that binds is 9 to 19px. */
/* `.campo` IS IN THIS LIST AND DOES NOT REACH ITS OWN CONTROLS. text-shadow inherits,
   but Blink's UA stylesheet declares text-shadow:none on input, textarea, select and
   button, and any declaration beats an inherited value. Measured on /de/: `.campo` and
   `.campo .stato` carry the six shadow halo, `.campo button` and `.campo input` compute
   `none`. So the halo covers the status line inside the field and nothing else there.
   No contrast consequence today, checked rather than assumed: the submit button is dark
   ink on the green fill and reads 10.96 in Italian and German, so it never wanted a halo.
   It matters the day anything in `.campo` sits over the canvas, because the symptom is a
   row that no change to `--halo` can move. `.campo button{text-shadow:inherit}` is the
   one line that would undo the UA rule, and it is not added here because nothing needs
   it. tools/verify/halo.mjs carries the same list and the same blind spot. */
.occhiello,.lead,.fase b,.fase strong,.fase p,.avanzamento,
.manifesto p,.numero,.nota-priv,.campo,.sede .testo,.et,.prossimo,
.tav-num,.quota span,.rt-num,.elenco-intro,.voce-s,.elenco-cima,.subito,
.ritratto figcaption{text-shadow:var(--halo)}
.tav-num{position:absolute;left:calc(var(--bordo) + 22px);top:clamp(76px,10vh,116px);writing-mode:vertical-rl;
 font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.34em;text-transform:uppercase;color:var(--muto)}
.dentro{max-width:1220px;margin-inline:auto}
h1,h2{font-family:Syne,sans-serif;font-weight:800;line-height:.94;letter-spacing:-.03em;margin:0}
h1{font-size:clamp(2.4rem,1.4rem + 3.4vw,4.6rem)}
h2{font-size:clamp(1.9rem,1.1rem + 2.4vw,3.2rem)}
/* Display type does not break words. With hyphens:auto plus break-word, Italian at
   320px gave "preconfezio / nate.", and on a device that really hyphenates that
   becomes "preconfezio- / nate", a hyphen through the middle of a brand heading.
   The type scale carries this, not the break. h3 is body copy, not display, and
   keeps the old behaviour. */
h1,h2{overflow-wrap:normal;hyphens:manual;-webkit-hyphens:manual}
h3{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.verde{color:var(--verde)}
.lead{max-width:48ch;color:var(--g2);margin:1.6rem 0 0;font-size:clamp(1rem,.95rem + .3vw,1.16rem)}
.occhiello{margin:0 0 1.3rem}
.quota{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:2.2rem 0 0}
.quota i{position:relative;height:1px;background:var(--fil);transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.quota i:first-of-type{transform-origin:right}.quota i:last-of-type{transform-origin:left}
.quota.vista i{transform:scaleX(1)}
.quota i::after{content:"";position:absolute;top:-4px;height:9px;width:1px;background:var(--verde);opacity:.7}
.quota i:first-of-type::after{left:0}.quota i:last-of-type::after{right:0}
.quota span{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--grigio);white-space:nowrap}

/* --- esploso assonometrico --- */
.telaio{margin-top:2.6rem}
#esploso{width:100%;height:auto;display:block;overflow:visible}
#esploso .piano{fill:rgba(122,47,244,.045);stroke:rgba(var(--rgb-testo),.20);stroke-width:1;transition:fill .3s,stroke .3s}
#esploso .fianco{fill:rgba(var(--rgb-fondo),.30);stroke:rgba(var(--rgb-testo),.11);stroke-width:1}
#esploso .fianco--b{fill:rgba(var(--rgb-fondo),.50)}
#esploso .richiamo{fill:none;stroke:rgba(var(--rgb-testo),.16);stroke-width:1}
#esploso .segno{fill:rgba(160,107,255,.22);stroke:rgba(160,107,255,.55);stroke-width:.9;
 cursor:crosshair;transition:fill .18s,stroke .18s,transform .18s;transform-box:fill-box;transform-origin:center}
#esploso .segno:hover{fill:rgba(53,221,121,.85);stroke:var(--verde);transform:scale(1.5)}
#esploso .lastra{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
#esploso .lastra:hover .piano{fill:rgba(53,221,121,.055);stroke:rgba(53,221,121,.45)}
#esploso .et-occ{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:2.4px;fill:var(--muto)}
#esploso .et-tit{font-family:Syne,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.4px;fill:var(--nebbia)}
#esploso .et-num{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:2.4px;fill:var(--grigio)}
#esploso .nota-l{stroke:var(--verde);stroke-width:1;fill:none;opacity:.65}
#esploso .nota-c{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:2.2px;fill:var(--verde)}
#esploso .nota-t{font-family:Syne,sans-serif;font-weight:800;font-size:17px;fill:var(--nebbia)}
#esploso .filo-nota{stroke:rgba(var(--rgb-testo),.10);stroke-width:1}
#esploso .nota-v{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:2.2px;fill:var(--muto)}

/* --- schede semitrasparenti --- */
.schede{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:2.6rem}
.scheda{position:relative;padding:1.7rem 1.4rem 1.3rem;text-decoration:none;color:inherit;
 border:1px solid var(--fil);background:rgba(var(--rgb-fondo),.30);backdrop-filter:blur(2px);
 transition:background .35s,border-color .35s}
.scheda:hover{background:rgba(122,47,244,.10);border-color:rgba(53,221,121,.5)}
.scheda b{font-family:"Space Mono",monospace;font-size:.62rem;letter-spacing:.2em;color:var(--viola-tratto);font-weight:400}
.scheda h3{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;
 font-size:clamp(1.1rem,.9rem + .6vw,1.4rem);margin:.9rem 0 0}
.scheda p{color:var(--g3);font-size:.93rem;line-height:1.55;margin:.8rem 0 0}
.scheda:hover b{color:var(--verde)}

@media(max-width:980px){nav{display:none}.schede{grid-template-columns:1fr}}
/* reduced motion drops the canvas, and with no monument behind the text the halo
   is protecting nothing: one token turns all of it off and gives those users the
   cheapest paint of anyone */
@media(prefers-reduced-motion:reduce){#vivo{display:none}*{transition:none!important;animation:none!important}
 :root{--halo:none}}

/* ================= ESPLOSO =================
   Tutto in 2D: l'assonometria e' rotate(-45deg) piu' scaleY, che sullo schermo
   da' esattamente lo stesso rombo di rotateX+rotateZ ma senza contesto 3D,
   quindi i clic finiscono dove li vedi e la lastra puo' contenere il suo elenco. */
.esploso{position:relative;margin-top:2.2rem;display:grid;
 grid-template-columns:minmax(420px,600px) minmax(260px,1fr);gap:clamp(16px,3vw,54px);align-items:center}
.scena{position:relative;height:clamp(440px,64vh,600px);--p:300px;--k:2.2}
.pila{position:absolute;inset:0}
.scena.ferma .lastra{transition:none!important}
.lastra{position:absolute;left:50%;top:50%;width:var(--p);height:var(--p);
 margin:calc(var(--p)/-2) 0 0 calc(var(--p)/-2);cursor:pointer;
 transition:transform .9s cubic-bezier(.22,.85,.24,1),opacity .5s ease,
            width .9s cubic-bezier(.22,.85,.24,1),height .9s cubic-bezier(.22,.85,.24,1),
            margin .9s cubic-bezier(.22,.85,.24,1)}
.lastra[data-a="0"]{z-index:3;transform:translate(0px,var(--d0,-150px)) scale(1,.53) rotate(-45deg)}
.lastra[data-a="1"]{z-index:2;transform:translate(0px,var(--d1,0px))    scale(1,.53) rotate(-45deg)}
.lastra[data-a="2"]{z-index:1;transform:translate(0px,var(--d2,150px))  scale(1,.53) rotate(-45deg)}
.piano{position:absolute;inset:0;border:1px solid rgba(var(--rgb-testo),.22);
 background:rgba(122,47,244,.05);transition:border-color .4s,background .4s}
.spessore{position:absolute;inset:0;border:1px solid rgba(var(--rgb-testo),.08);
 background:rgba(var(--rgb-fondo),.35);transform:translate(6px,6px);transition:opacity .4s}
.griglia{position:absolute;inset:0;transition:opacity .28s ease .52s}
.segno{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
 background:rgba(160,107,255,.26);border:1px solid rgba(160,107,255,.62);
 transition:background .25s,border-color .25s}
.zone{position:absolute;inset:0;z-index:5}
.zona{position:absolute;left:0;right:0;height:33.34%;background:none;border:0;padding:0;cursor:pointer;outline:none}
.zona:focus-visible{outline:2px solid var(--verde);outline-offset:-4px}
.zona[data-a="0"]{top:0}.zona[data-a="1"]{top:33.33%}.zona[data-a="2"]{top:66.66%}
.scena[data-su="0"] .lastra[data-a="0"] .piano,
.scena[data-su="1"] .lastra[data-a="1"] .piano,
.scena[data-su="2"] .lastra[data-a="2"] .piano{border-color:rgba(53,221,121,.55);background:rgba(53,221,121,.055)}
.scena[data-su="0"] .lastra[data-a="0"] .segno,
.scena[data-su="1"] .lastra[data-a="1"] .segno,
.scena[data-su="2"] .lastra[data-a="2"] .segno{background:rgba(53,221,121,.32);border-color:rgba(53,221,121,.78)}
.scena-cont.aperta .zone{display:none}
.scena-cont.aperta .lastra{opacity:.08;pointer-events:none}
.scena-cont.aperta .lastra[data-a="0"]{transform:translate(0px,calc(var(--d0,-150px) * 2)) scale(1,.53) rotate(-45deg)}
.scena-cont.aperta .lastra[data-a="2"]{transform:translate(0px,calc(var(--d2,150px) * 2)) scale(1,.53) rotate(-45deg)}

/* --- la lastra scelta si raddrizza e diventa il riquadro --- */
.scena-cont.aperta .lastra.aperta{opacity:1;pointer-events:auto;z-index:9;cursor:default;
 width:var(--pw2,480px);height:var(--ph2,210px);
 margin:calc(var(--ph2,210px) / -2) 0 0 calc(var(--pw2,480px) / -2);
 transform:translate(var(--dxp,0px),0px) scale(var(--k),var(--k)) rotate(0deg)}
.lastra.aperta .griglia{opacity:0}
.lastra.aperta .spessore{opacity:0;transition:opacity .3s ease .5s}
.lastra.aperta .piano{border-color:rgba(53,221,121,.55);background:rgba(var(--rgb-fondo),.5);
 transition:border-color .35s ease .55s,background .35s ease .45s}
.lastra.aperta .elenco{opacity:1;pointer-events:auto}

/* --- l'elenco vive dentro la lastra: i corpi sono divisi per la scala --- */
.elenco{position:absolute;inset:0;padding:calc(2.5rem / 2.2) calc(3rem / 2.2);
 display:flex;flex-direction:column;opacity:0;pointer-events:none;
 transition:opacity .38s ease .66s;overflow:hidden}
.elenco-cima{display:flex;align-items:center;gap:calc(1rem / 2.2);white-space:nowrap;
 border-bottom:1px solid rgba(var(--rgb-testo),.18);padding-bottom:calc(.85rem / 2.2);margin-bottom:calc(.9rem / 2.2)}
.elenco-cima b{font-family:"Space Mono",monospace;font-size:calc(.58rem / 2.2);letter-spacing:.22em;color:var(--muto);font-weight:400}
.elenco-cima span{font-family:Syne,sans-serif;font-weight:800;font-size:calc(1.3rem / 2.2);letter-spacing:-.025em}
.elenco-cima em{font-style:normal;font-family:"Space Mono",monospace;font-size:calc(.58rem / 2.2);letter-spacing:.2em;color:var(--verde)}
.chiudi{margin-left:auto;flex:0 0 auto;font-family:"Space Mono",monospace;font-size:calc(.58rem / 2.2);
 letter-spacing:.2em;text-transform:uppercase;color:var(--g4);background:rgba(var(--rgb-fondo),.6);
 border:1px solid rgba(var(--rgb-testo),.22);padding:calc(.5rem / 2.2) calc(1.1rem / 2.2);cursor:pointer;
 transition:color .2s,border-color .2s,background .2s}
.chiudi:hover{color:var(--ink);background:var(--verde);border-color:var(--verde)}
.elenco-intro{margin:0 0 calc(.75rem / 2.2);color:var(--g3);font-size:calc(.84rem / 2.2);line-height:1.5;max-width:82ch}
.colonne{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(2.4rem / 2.2);align-content:start}
.colonne ul{list-style:none;margin:0;padding:0;align-content:start}
.elenco li{border-bottom:1px solid rgba(var(--rgb-testo),.07)}
.voce-s{display:grid;grid-template-columns:calc(.62rem / 2.2) auto 1fr calc(1.1rem / 2.2);align-items:center;
 gap:calc(.8rem / 2.2);width:100%;text-align:left;background:none;border:0;padding:calc(.46rem / 2.2) 0;
 cursor:pointer;color:inherit;font:inherit}
.voce-s i{width:calc(.46rem / 2.2);height:calc(.46rem / 2.2);background:rgba(160,107,255,.4);
 border:1px solid rgba(160,107,255,.75);transform:rotate(45deg);transition:background .2s,border-color .2s}
.voce-s b{font-family:"Space Mono",monospace;font-size:calc(.56rem / 2.2);letter-spacing:.16em;color:var(--nav);font-weight:400}
.voce-s span{font-size:calc(.88rem / 2.2);line-height:1.3;color:var(--g1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voce-s u{justify-self:center;width:calc(.7rem / 2.2);height:1px;background:var(--g5);position:relative;
 text-decoration:none;flex:0 0 auto}
/* il braccio verticale si centra sulla barra: con top negativo il basso restava mozzo */
.voce-s u::after{content:"";position:absolute;left:50%;top:50%;
 width:1px;height:calc(.7rem / 2.2);background:var(--g5);
 transform:translate(-50%,-50%);transition:opacity .25s}
.voce-s:hover i{background:var(--verde);border-color:var(--verde)}
.voce-s:hover span{color:var(--nebbia)}
.elenco li p{margin:0;max-height:0;overflow:hidden;opacity:0;color:var(--g3);font-size:calc(.78rem / 2.2);
 line-height:1.45;padding-left:calc(1.9rem / 2.2);
 transition:max-height .4s cubic-bezier(.2,.8,.2,1),opacity .3s,padding-bottom .4s}
.elenco li.apert p{max-height:calc(6rem / 2.2);opacity:1;padding-bottom:calc(.55rem / 2.2)}
.elenco li.apert .voce-s u::after{opacity:0}
.elenco li.apert .voce-s i{background:var(--verde);border-color:var(--verde)}
.elenco li.apert .voce-s span{color:var(--nebbia)}

.etichette{position:relative;height:clamp(440px,64vh,600px)}
.et{position:absolute;left:0;right:0;padding-left:34px;cursor:pointer;transition:opacity .4s}
.et-l{position:absolute;left:-90px;width:110px;top:26px;height:1px;background:rgba(var(--rgb-testo),.16)}
.et b{font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.22em;color:var(--muto);font-weight:400}
.et h3{font-family:Syne,sans-serif;font-weight:800;font-size:clamp(1.15rem,.9rem + .7vw,1.6rem);
 letter-spacing:-.025em;margin:.3rem 0 .35rem;line-height:1}
.et em{font-style:normal;font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.2em;color:var(--grigio)}
.et .apri{display:block;margin-top:.55rem;font-family:"Space Mono",monospace;font-size:.56rem;
 letter-spacing:.2em;text-transform:uppercase;color:var(--verde);opacity:.75}
.et:hover .apri{opacity:1}
.scena-cont.aperta .et{opacity:.04;pointer-events:none}
@media(max-width:1080px){.esploso{grid-template-columns:1fr}.etichette{height:auto;display:grid;gap:1.3rem}
 .et{position:static;padding-left:0}.et-l{display:none}}

/* niente barre di scorrimento grigie, ne' qui ne' sulla pagina */
html{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar,.elenco::-webkit-scrollbar,
.colonne::-webkit-scrollbar,ul::-webkit-scrollbar{width:0;height:0;display:none}
.elenco,.colonne,.colonne ul{scrollbar-width:none;-ms-overflow-style:none}

/* ================= RITRATTI ================= */
.ritratti{display:grid;grid-template-columns:repeat(3,minmax(0,290px));justify-content:space-between;
 gap:clamp(22px,3vw,44px);margin-top:2.6rem;width:100%}
.ritratto{position:relative;margin:0;padding-top:1.4rem;border-top:1px solid var(--fil)}
.rt-num{position:absolute;left:50%;transform:translateX(-50%);top:-.1rem;font-family:"Space Mono",monospace;font-size:.56rem;
 letter-spacing:.2em;color:var(--viola-tratto)}
.rt-foto{position:relative;overflow:hidden;border:1px solid var(--fil);background:rgba(var(--rgb-fondo),.4)}
.rt-foto img{display:block;width:100%;height:auto;
 transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s}
.ritratto:hover .rt-foto img{transform:scale(1.035)}
.rt-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(var(--rgb-fondo),0) 62%,rgba(var(--rgb-fondo),.42));transition:opacity .5s}
.rt-tacca{position:absolute;left:10px;bottom:10px;width:14px;height:14px;border-left:1px solid var(--verde);
 border-bottom:1px solid var(--verde);opacity:.7}
.ritratto figcaption{text-align:center;padding:1rem .4rem 1.1rem;
 background:linear-gradient(180deg,rgba(var(--rgb-fondo),.78),rgba(var(--rgb-fondo),.42) 62%,rgba(var(--rgb-fondo),0))}
.ritratto figcaption b{font-family:"Space Mono",monospace;font-size:.55rem;letter-spacing:.22em;
 color:var(--muto);font-weight:400;display:block}
.ritratto figcaption h3{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.025em;line-height:1.02;
 font-size:clamp(1rem,.85rem + .5vw,1.3rem);margin:.45rem 0 .35rem}
@media(max-width:1080px){.ritratti{grid-template-columns:1fr}}

/* ================= ASSE DEL METODO ================= */
.asse{position:relative;margin-top:3.4rem;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.asse::before{content:"";position:absolute;left:0;right:0;top:14px;height:1px;background:var(--fil)}
.asse{--avanz:0}
.asse::after{content:"";position:absolute;left:0;top:14px;height:1px;background:var(--verde);
 width:calc(var(--avanz) * 100%);transition:width .12s linear}
.asse::before{opacity:.9}
.fase::before{transition:background .35s,border-color .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.fase.raggiunta::before{background:var(--verde);border-color:var(--verde);transform:rotate(45deg) scale(1.25)}
.fase.raggiunta b{color:var(--verde)}
.fase strong,.fase p{opacity:.45;transition:opacity .5s ease}
.fase.raggiunta strong,.fase.raggiunta p{opacity:1}
.fase{position:relative;padding:2.6rem 1.6rem 0 0}
.fase::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
 border:1px solid var(--viola-tratto);background:var(--ink);transform:rotate(45deg);transition:background .3s,border-color .3s}
.fase:hover::before{background:var(--verde);border-color:var(--verde)}
/* l'asse corre a top:14px: il numero scende sotto la linea, non ci sta dentro */
.fase b{position:absolute;left:22px;top:24px;font-family:"Space Mono",monospace;font-size:.58rem;
 letter-spacing:.2em;color:var(--viola-tratto);font-weight:400}
.fase strong{display:block;font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.02em;
 font-size:clamp(1rem,.85rem + .55vw,1.35rem);line-height:1.05}
.fase p{margin:.8rem 0 0;color:var(--g3);font-size:.9rem;line-height:1.5;max-width:26ch}
@media(max-width:860px){.asse{grid-template-columns:1fr}.asse::before,.asse::after{display:none}
 /* The marker is a 13px box and not the 11px its width declares: box-sizing is
    set on `*`, and `*` does not match a pseudo-element, so ::before keeps the
    initial content-box and its 1px border sits outside the 11. Rotated 45deg the
    diagonal is 18.4px, and .raggiunta scales it by 1.25 to 23.0, which reaches
    27.0px below the padding edge. The heading began at 22.4px, so the marker
    landed on the first letter of every phase heading, by 15.7 x 2.3px and by
    18.0 x 4.6px once the phase was reached. It begins at 40px now, 13px clear of
    the largest state the marker ever takes.
    Cleared vertically rather than by moving the marker into a left gutter. A
    gutter wide enough for the marker and the number is 46px, which is 17% of the
    264px text column at 320: it would push the German headings to three lines
    and reopen the heading sizing that c1295a9 settled. Height is cheap on a page
    that already scrolls, and the heading keeps its full width. */
 .fase{padding:2.5rem 0 1.4rem 0;border-bottom:1px solid var(--fil)}
 /* qui l'asse non c'e': il numero torna in linea col nodo, sopra il titolo */
 .fase b{top:6px}}

/* --- il metodo si blocca: la pagina scorre, la tavola resta ferma finche' i quattro passi non ci sono tutti --- */
.tavola--bloccata{padding:0}
/* the sticky panel is one screen and already full, so the stance band sits after
   it rather than inside it. .tavola--bloccata zeroes the section padding, so the
   tail restores the same inline gutter every other tavola gets. */
.coda-metodo{padding-inline:calc(var(--bordo) + var(--gut));padding-block:0 clamp(110px,15vh,180px)}
.bloccante{position:relative;height:270vh}
/* THE tav03 PANEL AND SHORT SCREENS. There is no character budget here on purpose.
   Two have been written into this comment from measurements taken at 1440 and 1280,
   and both were wrong, because CONTENT IS NOT MONOTONIC IN WIDTH: .asse stays
   repeat(4,1fr) down to 861 while the column keeps narrowing, so the text wraps at
   the column rather than at .fase p's 26ch max-width and the panel CAN be taller at
   900 than at 1440. Which language that bites moves with the copy: at H=640 German
   peaks at 903, 466.2 against 449.7 at 1440, while Italian and English peak at the
   wide end. Italian runs 3/5/6/3 lines at 1440 and 3/7/7/5 at 919. A single number is
   true at the width it was taken at and false across the range, and a translator has
   no way to know which.

   So the range is swept and asserted instead: tools/verify/pannello.mjs, which
   fails if any language needs more than a 640px viewport at any width from 861 to
   1600, with 20px of margin required. Run that rather than reading a figure here.

   Why 640: a maximised browser on a 1366x768 laptop leaves about that. Why it
   matters: .fisso is sticky and min-height:100vh, so it cannot scroll its own
   overflow, and .asse being four columns means the height is the TALLEST step and
   not the average.

   The state at 2026-08-21, after restoring the Italian s3_d wording and lowering
   the padding on short screens:

     en  peak content 444.4 at  896 wide   needs 585px   55.6px of margin
     it  peak content 479.5 at 1447 wide   needs 620px   20.5px of margin
     de  peak content 466.4 at  903 wide   needs 607px   33.6px of margin

   Italian is the tight one and 20.5px is about one line of a step body, so tav03
   Italian has room for one more line and no more. The peak moved from 919 to 1447
   when s3_d was restored, which is worth knowing: the width that binds is a property
   of the copy, not a constant, so do not assume the narrow end is always the worst.

   The overflow is silent for a long way, which is why this is a gate and not
   something anyone would notice. Overflow eats .fisso's own padding before it
   reaches the text, so THE BUFFER IS THE PADDING AND MOVES WITH IT. Under the 70px
   this rule now sets, measured 1440 wide in the settled state, every .fase given
   .raggiunta and transitions off, text does not pass the fold until a viewport height
   of 548 in Italian, 519 in German and 498 in English, each at about -71 of headroom.
   Two earlier versions of this paragraph were wrong: one said 582 and 552, measured
   before the phases were settled and impossible anyway since the deepest text cannot
   sit below pad + content; the next said 547, 539 and 518 with a ~90px buffer, which
   was right until the same commit lowered the padding to 70 and did not re measure.

   ONE MORE THING THE MARGIN IS QUIETLY BUYING. With the panel now fitting, align-items
   centre puts its top at pad + (box - content)/2 instead of pinning it at pad, so the
   top RISES as content grows. At Italian's current 479.5 the .dentro box top sits at
   80.3 against a header bottom of 80.5 at H=640: the box is level with the bar, and
   only the line box leading keeps the eyebrow ink off it. That is unchanged by this
   commit, the old 90px padding put it at the same 80.3, but it means the 20px the
   gate enforces is also the buffer that keeps tav03 out from under the header. */
.fisso{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;
 padding-block:clamp(90px,12vh,150px);padding-inline:calc(var(--bordo) + var(--gut))}
/* Short screens get the room instead of the copy getting shorter. A 1366x768 laptop
   with a maximised browser leaves about 640px, and at 640 the base rule above spends
   180 of them on padding, which is 28% of the screen, while the panel is the one
   block on the site that cannot scroll its own overflow.

   BOTH TERMS HAD TO MOVE, and the first attempt at this only moved one. clamp(MIN,
   VAL, MAX) is max(MIN, min(VAL, MAX)), so the vh term is a floor as well as a
   preference: at 640 the base 12vh is 76.8px, and lowering only the 90px MIN to 64
   or 70 or 50 leaves the computed padding at 76.8 every time. The MIN governs only
   above about 750px of height. So the middle term drops to 10vh, which is 64 at 640
   and lets the 70px MIN be the value that binds.

   70 is the largest round MIN that keeps 20px of margin for the worst language,
   which is Italian at 479.5px of content: 479.5 + 140 = 619.5 against 640, so 20.5
   to spare. German has 33.6 and English 55.6. tools/verify/pannello.mjs asserts it
   across 861 to 1600 rather than trusting these three numbers.

   The step at the boundary is deliberate and small: 720 is the last height inside
   this rule and takes 72px a side, 721 is the first outside it and takes 90.

   min-width:861px because that is where the panel stops being the problem. Below it
   .fisso is position:static with min-height:0 and cannot trap anything, so a phone in
   landscape has no overflow to relieve and no reason to lose 20px a side. The first
   version of this rule was height only and did change the padding at 844x390 and at
   320x640, which is a spacing change nobody asked for in a slice about a sticky
   desktop panel. */
@media(max-height:720px) and (min-width:861px){
  .fisso{padding-block:clamp(70px,10vh,150px)}
}
.fase{opacity:0;transform:translateY(14px);
 transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.fase.raggiunta{opacity:1;transform:none}
.fase.raggiunta strong,.fase.raggiunta p{opacity:1}
.fase strong,.fase p{opacity:1}
.avanzamento{position:absolute;right:0;top:-2.2rem;font-family:"Space Mono",monospace;font-size:.58rem;
 letter-spacing:.2em;color:var(--muto)}
.avanzamento b{color:var(--verde);font-weight:400}
@media(max-width:860px){.bloccante{height:auto}.fisso{position:static;min-height:0}
 .coda-metodo{padding-block:0 clamp(64px,10vh,96px)}
 .fase{opacity:1;transform:none}}

/* ================= SEDI ================= */
.sedi{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,22px);margin-top:2.8rem;
 width:calc(100% + 2 * (var(--bordo) + var(--gut) - 22px));margin-inline:calc(-1 * (var(--bordo) + var(--gut) - 22px))}
.sede{position:relative;border:1px solid var(--fil);background:rgba(var(--rgb-fondo),.34);padding:0;
 overflow:hidden;aspect-ratio:4/3;transition:border-color .4s}
.sede:hover{border-color:rgba(53,221,121,.5)}
.sede img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
 transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.sede:hover img{transform:scale(1.045)}
.sede .velo{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(180deg,rgba(var(--rgb-fondo),0) 30%,rgba(var(--rgb-fondo),.42) 58%,rgba(var(--rgb-fondo),.92))}
.sede .tacca{position:absolute;left:12px;top:12px;width:14px;height:14px;
 border-left:1px solid var(--verde);border-top:1px solid var(--verde);opacity:.8}
.sede .testo{position:absolute;left:1.4rem;right:1.4rem;bottom:1.1rem}
.sede b{display:inline-block;font-family:"Space Mono",monospace;font-size:.55rem;letter-spacing:.24em;color:var(--g2);font-weight:400;
 background:rgba(var(--rgb-fondo),.72);padding:2px 9px;border-radius:100px}
.sede h3{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.025em;
 font-size:clamp(1.4rem,1rem + 1.1vw,2rem);margin:.4rem 0 .25rem;line-height:1}
.sede em{font-style:normal;font-family:"Space Mono",monospace;font-size:.56rem;
 letter-spacing:.18em;color:var(--verde)}

/* ================= CONTATTO ================= */
/* what happens after the form is sent. Body face rather than the Space Mono
   componentry, because it is a sentence to read and not a label, and a step down
   from .lead so it supports the form instead of competing with the claim above it.

   The top margin is a consequence of the move, not a taste. This used to be the
   first child of .contatto, so .contatto's 2.6rem top margin was its whole top
   spacing and 0 was correct. Above the coordinate label it follows .lead, which
   has no bottom margin, and measured at 390 and 1440 the two paragraphs sat 0.0px
   apart. 1.1rem is the value the rule already carried at the bottom, so the block
   is symmetric and no new constant enters the sheet; it is tighter than the 1.6rem
   .lead takes from the heading, which is right, because this reads as a
   continuation of the lead rather than a new block. The bottom 1.1rem now
   collapses against .quota's 2.2rem top and the label keeps its own spacing. */
.prossimo{margin:1.1rem 0;max-width:52ch;color:var(--g2);
 font-size:clamp(.95rem,.92rem + .18vw,1.05rem);line-height:1.55}
.contatto{margin-top:2.6rem;max-width:640px}
.campo{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.campo input{flex:1 1 240px;min-width:0;padding:1.05em 1.25em;background:rgba(var(--rgb-fondo),.5);
 border:1px solid var(--fil);color:var(--nebbia);font-family:inherit;font-size:.95rem;outline:none;
 transition:border-color .3s,background .3s}
.campo input::placeholder{color:var(--muto)}
.campo input:focus{border-color:rgba(53,221,121,.6);background:rgba(var(--rgb-fondo),.72)}
.campo button{padding:1.05em 1.6em;background:var(--verde);color:var(--ink);border:1px solid var(--verde);
 font-family:"Space Mono",monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
 font-weight:700;cursor:pointer;transition:background .2s,color .2s}
.campo button:hover{background:transparent;color:var(--verde)}
.campo button[disabled]{opacity:.55;cursor:default}
/* la trappola per i bot: fuori dallo schermo ma non display:none, che i bot
   riconoscono. Fuori flusso, quindi non tocca il flex del campo. */
/* .campo input vince per specificita' e le rimetterebbe padding e bordo, gonfiando
   il quadratino da 1px a una trentina: il selettore va tenuto piu' specifico di
   quello, o la trappola diventa visibile */
.campo input.trappola{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;
 min-width:0;flex:0 0 1px;background:none;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* widget e stato prendono una riga loro: il campo e' flex-wrap */
.campo .antispam,.campo .stato{flex-basis:100%}
/* Il widget di Turnstile e' largo 300px fissi e non scende. A 320px di viewport fra
   i margini restano 264px, e non basta scalarlo: la scatola di layout resterebbe di
   300 e, con .campo in colonna, stirerebbe anche l'input dell'email a 300. Serve un
   contenitore che possa rimpicciolire (min-width:0), dentro cui il widget si scala.
   264/300 = .88, arrotondato a .86. */
.campo .antispam{min-width:0;max-width:100%}
@media(max-width:379px){
  .campo .antispam{height:calc(65px * .86)}
  .campo .antispam .cf-turnstile{transform:scale(.86);transform-origin:left top}
}
.campo .stato{margin:.2rem 0 0;font-family:"Space Mono",monospace;font-size:.62rem;
 letter-spacing:.14em;text-transform:uppercase;color:var(--g5);line-height:1.5}
.campo .stato:empty{display:none}
.campo .stato[data-tipo="ok"]{color:var(--verde)}
.campo .stato[data-tipo="errore"]{color:var(--avviso)}
/* a invio riuscito il controllo sparisce e resta la conferma */
.campo[data-fatto] input,.campo[data-fatto] button,.campo[data-fatto] .cf-turnstile{display:none}
.nota-priv{margin:1rem 0 0;font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.14em;
 text-transform:uppercase;color:var(--muto);line-height:1.7}
.nota-priv a{color:var(--viola-tratto);text-decoration:none;border-bottom:1px solid rgba(160,107,255,.4)}
.nota-priv a:hover{color:var(--verde);border-color:var(--verde)}
.subito{margin-top:2.6rem}
.subito>span{font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muto)}
.numeri{display:flex;flex-wrap:wrap;gap:10px;margin-top:1rem}
/* 5.2em resolved to 83px and "Lorenzo" in Syne 800 asks for 92, so the name ran
   over the separator dot, at every width and on the desktop too. The three rows are
   three separate grids, so the fixed track was aligning nothing. */
.numero{display:grid;grid-template-columns:max-content auto auto;align-items:center;column-gap:.6em;
 padding:.78em 1.15em;border:1px solid var(--fil);background:rgba(var(--rgb-fondo),.42);text-decoration:none;
 color:var(--nebbia);transition:border-color .3s,background .3s,transform .3s cubic-bezier(.2,.8,.2,1)}
.numero:hover{border-color:rgba(53,221,121,.55);background:rgba(122,47,244,.1);transform:translateY(-2px)}
.numero .n-nome{font-family:Syne,sans-serif;font-weight:800;font-size:.9rem;letter-spacing:-.01em;white-space:nowrap}
.numero .n-sep{color:var(--g8)}
.numero .n-num{font-family:"Space Mono",monospace;font-size:.78rem;color:var(--verde);white-space:nowrap}

/* ================= MANIFESTO ================= */
.manifesto{margin-top:3rem;padding:1.6rem 0 0;border-top:1px solid var(--fil);
 display:flex;flex-wrap:wrap;gap:1.2rem 2rem;align-items:baseline}
.manifesto p{margin:0;font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.02em;
 font-size:clamp(1.05rem,.9rem + .55vw,1.4rem);max-width:30ch;line-height:1.15}
/* The stance band, at the end of tav03 since the site went to five sections. .manifesto is a wrapping flex row that has only ever
   held one paragraph, so with two it decides nothing on its own: whether the
   claim and the supporting line share a row would fall out of two max-widths
   happening to sum to less than the container, which is an accident, not a rule.
   The basis states it. The supporting line asks for 26rem, so the two share a
   row while the claim, the 2rem gap and that basis fit, and it takes its own
   line when they do not. Measured on /de/, which has the longest claim: the row
   breaks between 1067 and 1068px, so it is side by side at 1280 and 1440 and
   stacked from 861 down, which is the whole tablet and phone range.
   The contact manifesto keeps one paragraph and none of this reaches it. */
.manifesto--posizione .manifesto-sub{flex:1 1 26rem;
 font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:400;letter-spacing:normal;
 font-size:clamp(.95rem,.9rem + .3vw,1.1rem);line-height:1.5;max-width:58ch;color:var(--g2)}
@media(max-width:860px){.sedi{grid-template-columns:1fr}}

/* ================= PIEDE ================= */
.piede-sito{position:relative;z-index:1;margin:clamp(70px,10vh,130px) calc(var(--bordo) + var(--gut)) 0;
 border-top:1px solid var(--fil);padding:clamp(2.4rem,5vh,3.6rem) 0 calc(var(--bordo) + 46px)}
/* il velo pieno sale dal fondo fin sopra .piede-riga (misurata a 203px dal fondo
   a 320px di larghezza, il caso peggiore), poi sfuma nel vuoto fra le due fasce.
   Sta su un pseudo-elemento e non sul fondo del piede perche' la maschera
   orizzontale sfuma il bordo laterale: senza, lo skyline non velato riprendeva
   di colpo al margine e si vedeva la cucitura. */
.piede-sito::before{content:"";position:absolute;top:0;bottom:0;z-index:-1;pointer-events:none;
 left:calc(-1 * var(--velo-lato));right:calc(-1 * var(--velo-lato));
 background:linear-gradient(to top,
  rgba(var(--rgb-fondo),var(--velo-riga)) 0,
  rgba(var(--rgb-fondo),var(--velo-riga)) var(--velo-quota),
  rgba(var(--rgb-fondo),var(--velo-piede)) calc(var(--velo-quota) + var(--velo-sfuma)));
 -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--velo-lato),
  #000 calc(100% - var(--velo-lato)),transparent 100%);
 mask-image:linear-gradient(to right,transparent 0,#000 var(--velo-lato),
  #000 calc(100% - var(--velo-lato)),transparent 100%)}
.piede-griglia{max-width:1220px;margin-inline:auto;display:grid;
 grid-template-columns:minmax(230px,1.3fr) repeat(4,minmax(130px,1fr));gap:clamp(24px,3.4vw,56px)}
/* The min-width:0 was on .piede-col, but the first footer column, the brand one,
   carries no class: it stayed at min-width:auto and its 174px min-content pinned
   track one, leaving 64px of 264 for track two. Measured on German at 320px:
   grid-template-columns 173.938px 64.4688px. It belongs on every direct child, not
   on the class.
   overflow-wrap:break-word does not lower an element's min-content contribution, so
   it cannot rescue a grid track. anywhere does. */
.piede-griglia > *{min-width:0}
.piede-col a,.piede-col .piede-t,.piede-sito p{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.piede-marchio{display:flex;align-items:center;gap:.55em;font-family:Syne,sans-serif;font-weight:800;
 font-size:1rem;letter-spacing:-.02em;color:var(--nebbia);text-decoration:none}
.piede-marchio .marchio-segno{height:24px}
.piede-sito p{margin:1rem 0 0;color:var(--g5);font-size:.87rem;line-height:1.55;max-width:34ch}
.piede-col .piede-t{font-family:"Space Mono",monospace;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
 color:var(--g5);font-weight:400;margin:.2rem 0 1rem}
.piede-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.piede-col a{color:var(--g2);text-decoration:none;font-size:.9rem;transition:color .2s}
.piede-col a:hover{color:var(--verde)}
.piede-riga{max-width:1220px;margin:clamp(2.4rem,5vh,3.4rem) auto 0;padding-top:1.2rem;
 border-top:1px solid var(--fil);display:flex;flex-wrap:wrap;gap:1.4rem 2rem;align-items:center;
 font-family:"Space Mono",monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muto)}
.piede-riga nav{margin:0;display:flex;gap:1.6rem;flex-wrap:wrap}
.piede-riga a{color:var(--nav);text-decoration:none;transition:color .2s}
.piede-riga a:hover{color:var(--verde)}
.piede-riga .dx{margin-left:auto;color:var(--muto)}
/* the five track footer needs 230 + 4x130 of track plus four gaps, and the gap is
   3.4vw in this range: measured, it first fits the inline space (viewport minus
   bordo + gut a side) at exactly 1026px, 0 slack, and overflows by 2px at 1024.
   The fallback used to start at 860px, so 861 to 1025 had no rule that fits and
   the last column pushed the page sideways. It hands over at 1080px, the step the
   esploso and the portraits already use, which leaves 42px of slack at the seam. */
@media(max-width:1080px){.piede-griglia{grid-template-columns:1fr 1fr}}

/* ================= PAGINA LEGALE ================= */
/* Same frame, same header, same footer as the home, but no canvas behind it: the
   only thing that matters here is the reading measure. No halo either, there is
   nothing moving underneath to protect the text from. The top margin clears the
   fixed header, which is --bordo plus its own height. */
.legale{max-width:68ch;margin:calc(var(--bordo) + 104px) auto clamp(70px,10vh,130px);
 padding-inline:calc(var(--bordo) + var(--gut))}
.legale h1{font-family:Syne,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.04;
 font-size:clamp(1.9rem,1.3rem + 2.2vw,3rem);margin:0 0 1.1rem;color:var(--nebbia)}
/* This page is the exception to the no word breaking rule the home page follows.
   ad9b234 took overflow-wrap and hyphens off h1 and h2 so the brand claim would
   never carry a hyphen, and handed the job to the type scale. That was reasoning
   about display type. A legal title is not display type, and a German reader expects
   a compound to split: "Datenschutz und Impressum" at 30.4px needs 305px inside 264
   and pushed the document to 333 against a 320 viewport, at every width from 320 to
   332. Do not tidy this back into the global rule. */
.legale h1,.legale h2{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.legale .intro{margin:0 0 2.4rem;padding-bottom:1.7rem;border-bottom:1px solid var(--fil);
 color:var(--g2);font-size:1.05rem;line-height:1.6}
.legale h2{font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.22em;
 text-transform:uppercase;color:var(--g5);font-weight:400;margin:2.5rem 0 .7rem}
.legale p{margin:0 0 1rem;color:var(--g2);line-height:1.68}
.legale .torna{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--fil)}
.legale .torna a{color:var(--verde);text-decoration:none;font-family:"Space Mono",monospace;
 font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.legale .torna a:hover{color:var(--nebbia)}

/* ======================= TELEFONO ======================= */
@media(max-width:860px){
  /* the fixed bar's own height on a phone: a 44px button, .7rem of padding above
     and below it, and the 1px rule under it. Measured 67.4px at 320 and at 390,
     and it is a constant here rather than a computed value because the bar takes
     its height from its tallest child. collisioni.mjs asserts the gap underneath
     it, so if the bar ever grows this reads as a failed check and not as a
     collision on somebody's phone. */
  :root{--bordo:12px;--gut:clamp(16px,4.5vw,26px);--testata-h:67.4px}
  .tav-num,.cartiglio,.coord{display:none}
  .righello{display:none}
  .testata{gap:.9rem;padding:.7rem .9rem}
  .testata nav{display:none}
  .testata .cta{display:none}
  .apri-menu{display:inline-flex;margin-left:auto;align-items:center;gap:.5em;background:none;
   border:1px solid var(--fil);color:var(--nebbia);padding:.62em .9em;cursor:pointer;min-height:44px;
   font-family:"Space Mono",monospace;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
  .apri-menu i{display:block;width:14px;height:8px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
  .menu{position:fixed;inset:0;z-index:20;background:rgba(var(--rgb-fondo),.97);backdrop-filter:blur(8px);
   display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:0 var(--gut);
   transform:translateY(-100%);transition:transform .5s cubic-bezier(.22,.85,.24,1);visibility:hidden}
  .menu.on{transform:none;visibility:visible}
  .menu a{font-family:Syne,sans-serif;font-weight:800;font-size:2rem;letter-spacing:-.03em;
   color:var(--nebbia);text-decoration:none;padding:.35rem 0;border-bottom:1px solid var(--fil)}
  /* This rule drops the divider under the LAST NAV LINK, and until now it never
     did. Inside .menu the links and the button are flat siblings, there is no
     <nav> to scope to, and the last <a> sibling is the button: .cta-m matched
     :last-of-type, so the divider stayed under "Contact" and the button lost the
     bottom edge of its own green border instead. At 0,2,1 against the 0,2,0 of
     .menu .cta-m it won on specificity, so source order could not save it, and
     the drawer's call to action rendered as a three sided box in all three
     languages. The mock carries the same rule and the same defect.

     :not(.cta-m) is the obvious narrowing and it is a trap, though not quite the
     one it looks like. :last-of-type is positional among siblings of one element
     type and resolves independently of the rest of the compound, and `.menu a`
     is a DESCENDANT selector, so it also reaches the three links inside .lingue.
     Counted on the page: `.menu a` matches 9, `.menu a:last-of-type` matches 2,
     the button and the DE link, and `.menu a:not(.cta-m):last-of-type` matches 1,
     the DE link, which is not the last nav link and never was. Only the child
     combinator, `.menu > a:not(.cta-m):last-of-type`, matches nothing. Every one
     of those leaves the divider exactly where it was. The DE link was never
     visibly affected because .menu .lingue a below carries the same 0,2,1 and
     sits later, so it always won.

     :has(+ .cta-m) says the thing that is actually meant, the link immediately
     before the button, and it matches that one element and nothing else. It is
     tied to the button rather than to a sibling ordinal, so adding or moving
     anything after the button cannot break it again the way the switcher already
     did. Where :has is unsupported the rule is dropped, and that is the safe
     direction: the button still gets four borders, because nothing is left to
     override its own green shorthand, and the divider stays under the last link.
     Better than what ships today, never worse. */
  .menu a:has(+ .cta-m){border-bottom:0}
  .menu .cta-m{display:inline-flex;align-self:flex-start;margin-top:1.6rem;padding:.9em 1.4em;
   border:1px solid var(--verde);color:var(--verde);text-decoration:none;font-family:"Space Mono",monospace;
   font-size:.66rem;letter-spacing:.2em;text-transform:uppercase}
  /* sotto gli 860 la barra non regge marchio piu' lingue piu' bottone: a 320px
     sommavano 324px in 267px di spazio. La lingua passa nel menu a tendina,
     dove sta insieme alla navigazione. */
  .testata .lingue{display:none}
  .menu .lingue{margin-top:1.8rem;gap:.9em}
  .menu .lingue a{font-family:"Space Mono",monospace;font-size:.72rem;font-weight:400;
   letter-spacing:.18em;padding:0;border-bottom:0;color:var(--nav)}
  .menu .lingue a[aria-current]{color:var(--verde)}
  /* 85x19 with the nearest target's centre 18px away: under the 24x24 of criterion
     2.5.8 and outside its spacing exception, so an AA breach and not a comfort miss.
     The padding grows only the hit area and the negative margin cancels it, so the
     button stays where it was and the size it was. Taking it to 44 is a separate
     decision and not mine. */
  .chiudi-menu{position:absolute;top:1.1rem;right:var(--gut);background:none;border:0;color:var(--g5);
   font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.2em;cursor:pointer;
   padding:.45rem .6rem;margin:-.45rem -.6rem}

  h1{font-size:clamp(2.1rem,1.2rem + 5vw,3rem)}
  h2{font-size:clamp(1.7rem,1rem + 4vw,2.4rem)}
  /* Same treatment for tav02, sized for the worst case, German at 320. The heading
     is two spans around a <br> and both were wrapping again inside themselves: three
     lines in Italian, four in English and German at 320. This holds each span on one
     line across 320 to 430 in all three languages. 21.4px at 320, 28.3px at 430, so
     it sits in family with the 19.2px tav05 already ships. The clamp caps at 2.4rem,
     which is where the desktop h2 rule arrives at 861, so the seam does not jump. */
  #tav02 h2{font-size:clamp(1.25rem,.1rem + 6.2vw,2.4rem)}
  /* The tav04 claim is two spans around a <br> and each has to hold one line.
     The binding one is the Italian "che puoi chiamare.", which at the default
     28.8px needs 419.5px inside a 264px box at 320. Solving for a fit with room
     to spare puts the ceiling near 17.7px there, and 5.3vw gives 16.96px.
     Measured across 320, 360, 390, 414 and 430 in three languages: one line per
     span everywhere, tightest cell Italian at 320 with 17.1px of slack.
     It caps at 2.4rem like the tav02 heading, which is where the desktop h2 rule
     arrives at 861, so the seam does not jump. */
  #tav04 h2{font-size:clamp(1rem,5.3vw,2.4rem)}
  .lead{font-size:1rem}
  .tavola{padding-block:clamp(64px,10vh,96px)}
  /* The hero is the one section that opens underneath the fixed bar. That
     padding puts its first line at 84.4px against a bar whose bottom edge is at
     79.4, so the eyebrow cleared it by 5px at every width, which is not spacing:
     it is a near miss that any taller bar closes. The clearance is now stated in
     terms of the bar's own geometry instead of a number that happened to work,
     and it comes to 1.9rem of real gap. */
  #tav01{padding-top:calc(var(--bordo) + var(--testata-h) + 1.9rem)}
  .quota span{font-size:.54rem;letter-spacing:.16em}

  /* l'esploso diventa tre schede impilate: niente 3D, tutto leggibile */
  .esploso{display:block;margin-top:1.8rem}
  .scena{height:auto;position:static}
  .zone,.griglia,.spessore,.etichette{display:none}
  .pila{position:static;display:grid;gap:14px}
  .lastra{position:static;width:auto;height:auto;margin:0;transform:none!important;
   opacity:1!important;transition:none;cursor:default}
  .piano{position:static;border:1px solid var(--fil);background:rgba(var(--rgb-fondo),.45);
   backdrop-filter:blur(3px)}
  .elenco{position:static;opacity:1;pointer-events:auto;padding:1.2rem 1.1rem 1rem;transition:none}
  .elenco-cima{gap:.6rem;white-space:normal;flex-wrap:wrap;padding-bottom:.7rem;margin-bottom:.7rem}
  .elenco-cima b{font-size:.55rem}
  .elenco-cima span{font-size:1.15rem}
  .elenco-cima em{font-size:.55rem}
  .chiudi{display:none}
  .elenco-intro{font-size:.86rem;margin-bottom:.8rem}
  .colonne{grid-template-columns:1fr}
  .voce-s{grid-template-columns:8px auto 1fr 14px;gap:.6rem;padding:.55rem 0}
  .voce-s i{width:7px;height:7px}
  .voce-s b{font-size:.55rem}
  .voce-s span{font-size:.9rem;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .voce-s u{width:9px}
  .voce-s u::after{height:9px}
  .elenco li p{font-size:.82rem;padding-left:1.4rem}
  .elenco li.apert p{max-height:9rem}

  .schede,.ritratti,.sedi,.dettagli{grid-template-columns:1fr}
  .ritratti{max-width:340px;margin-inline:auto}
  .sedi{width:100%;margin-inline:0}
  /* In a column, flex-basis is a height: the input inherited flex:1 1 240px and
     became a 240px tall box. And under 16px iOS zooms the page on focus and never
     zooms back out. */
  .campo{flex-direction:column}
  .campo input{flex:0 0 auto;width:100%;font-size:16px}
  .campo button{width:100%;justify-content:center;min-height:44px}
  .numeri{flex-direction:column}
  .numero{width:100%}
  .piede-griglia{grid-template-columns:1fr 1fr;gap:1.6rem}
  /* Two tracks are not a grid on a phone: at 320px they are 119px each and the
     longest link, "Datenschutz und Impressum", asks for 183. Two tracks only hold it
     from 448px up. Below that it drops to one column, which also keeps the phone
     numbers and "Prenota una call" on a single line each. */
  @media(max-width:479px){.piede-griglia{grid-template-columns:1fr;gap:1.9rem}}
  .piede-riga{font-size:.52rem;gap:.8rem 1.2rem}
  .piede-riga .dx{margin-left:0}
  .manifesto p{font-size:1.05rem}
}
@media(min-width:861px){.apri-menu,.menu{display:none}}
@media(max-width:860px){.solo-desk{display:none}}

/* .occhiello had a max-width:560px override here, letter-spacing:.11em and
   text-wrap:balance, from ec689c4 on 2026-08-13 until 2026-08-21. It existed for the hero
   eyebrow, deleted the same day, and it went with it. At the .2em .mono declares,
   the longest label left, German "Wie wir arbeiten" at tav03, needs 133px of the 264px
   column at 320: 131px clear, nothing wraps in any language at any phone width. */
/* l'ancora non deve finire sotto alla testata */
section[id]{scroll-margin-top:96px}