/* Spazio Shed — design system
   Bianco dell'edificio, segno bordeaux, sezioni nere che si alternano.
   Bodoni Moda (titoli) + Manrope (testo), file locali. */

:root{
  --paper:#F4F1EC; --white:#FFFFFF; --sheet:#FBFAF7;
  --ink:#0B0B0C; --ink2:#161617;
  --bx:#7A1C2A; --bx2:#A0293D; --bx-l:#D9A3AC;
  --line:rgba(11,11,12,.14); --line-l:rgba(255,255,255,.16);
  --mute:rgba(11,11,12,.6); --mute-l:rgba(255,255,255,.62);
  --ff-d:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --ff-t:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pad:clamp(20px,4vw,56px); --max:1440px;
  --sec:clamp(72px,9vw,140px); --gap:clamp(8px,.9vw,12px); --r:clamp(18px,1.8vw,28px);
  --fs-mega:clamp(3.6rem,8.4vw,9.6rem); --fs-h2:clamp(3rem,7.2vw,7.8rem);
  --fs-h3:clamp(1.4rem,2vw,2rem); --fs-lead:clamp(1.08rem,1.3vw,1.3rem);
  --ease:cubic-bezier(.7,0,.2,1); --out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--ink);color:var(--ink);font:400 1.0625rem/1.6 var(--ff-t);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
p,h1,h2,h3,figure,dl,dd,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--bx2);outline-offset:3px;border-radius:4px}
::selection{background:var(--bx);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec);position:relative}
.panel{background:var(--paper);margin:var(--gap);border-radius:var(--r);position:relative;overflow:clip}
.dark{background:var(--ink);color:#fff}
.bx{background:var(--bx);color:#fff}
.grain{isolation:isolate}
.grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.08;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* tipografia */
.d{font-family:var(--ff-d);font-weight:500;letter-spacing:-.025em;line-height:.9}
.h2{font-size:var(--fs-h2)}
.h2 .ln:nth-child(2) .li,.mega .ln:nth-child(2) .li{font-style:italic;font-weight:400}
.h3{font-family:var(--ff-d);font-weight:500;font-size:var(--fs-h3);line-height:1.1;letter-spacing:-.01em}
.ln{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
.li{display:inline-block}
.lead{font-size:var(--fs-lead);line-height:1.55;max-width:34em}
.lead b{font-weight:700}
.muted{color:var(--mute-l)}
.lbl{font:600 .74rem/1.2 var(--ff-t);letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px;opacity:.75}
.o{display:inline-block;width:.16em;height:.16em;border:.05em solid var(--bx);border-radius:50%;margin-left:.06em;vertical-align:baseline}
.dark .o{border-color:var(--bx-l)} .bx .o{border-color:#fff}
.pill-h1{display:inline-flex;align-items:center;gap:10px;font:600 .8rem/1.3 var(--ff-t);padding:8px 14px 8px 8px;border-radius:999px;background:rgba(11,11,12,.06);max-width:100%;margin-bottom:clamp(18px,2.4vw,34px)}
.pill-h1 i{flex:none;width:22px;height:12px;border-radius:99px;background:var(--bx);position:relative}
.pill-h1 i::after{content:"";position:absolute;right:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#fff}
.ph{display:inline-block;border:1.5px dashed currentColor;border-radius:8px;padding:.05em .45em;font-style:italic;opacity:.72;font-size:.92em;line-height:1.3}
.d .ph,.h3 .ph{font-size:.5em;vertical-align:middle;font-family:var(--ff-t);letter-spacing:0}

/* bottoni */
.row{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;transition:background .4s,color .4s,transform .4s var(--out)}
.btn svg{width:18px;height:18px;transition:transform .4s var(--out)}
.btn:hover{background:var(--bx)} .btn:hover svg{transform:translate(2px,-2px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} .btn.ghost:hover{border-color:var(--bx);color:var(--bx)}
.btn.light{background:#fff;color:var(--bx)} .btn.light:hover{background:var(--ink);color:#fff}

/* preloader: il bordeaux si apre come un cerchio */
#pre{display:none}
.pre-on #pre{display:grid;position:fixed;inset:0;z-index:100;background:var(--bx);color:#fff;place-items:center;--r:0px;-webkit-mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px));mask:radial-gradient(circle at 50% 50%,transparent var(--r),#000 calc(var(--r) + 1px))}
.pre-in{display:flex;flex-direction:column;align-items:center;font-family:var(--ff-d);line-height:.9}
.pre-s{font-style:italic;font-size:clamp(1.4rem,2.4vw,2rem)}
.pre-w{font-size:clamp(4rem,12vw,10rem);letter-spacing:.04em}

/* header */
#hdr{position:fixed;z-index:60;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px calc(var(--pad) + var(--gap));color:var(--ink);transition:transform .6s var(--ease),color .4s}
#hdr.on-dark{color:#fff}
#hdr.hide{transform:translateY(-110%)}
.menu-open #hdr{transform:none;color:#fff}
/* bottone Contatti: si allarga, l'icona dei due livelli si apre, la scritta scivola (in .4s, out .25s) */
.cta{display:inline-flex;align-items:center;gap:14px;height:46px;padding:0 16px 0 20px;background:var(--ink);color:#fff;text-decoration:none;font-size:.88rem;font-weight:600;border-radius:999px;transition:padding .25s cubic-bezier(.33,1,.68,1),background .4s,color .4s}
.cta span{transition:transform .25s cubic-bezier(.33,1,.68,1)}
.cta-ic{display:grid;gap:3px;width:16px;transition:gap .25s cubic-bezier(.33,1,.68,1),transform .25s cubic-bezier(.33,1,.68,1)}
.cta-ic b{display:block;height:5px;border:1.5px solid currentColor;border-radius:1px}
.cta-ic b:last-child{background:var(--bx);border-color:var(--bx)}
.cta:hover{padding-right:24px;transition-duration:.4s} .cta:hover span{transform:translateX(.5vw);transition-duration:.4s} .cta:hover .cta-ic{gap:7px;transform:rotate(-8deg);transition-duration:.4s}
#hdr.on-dark .cta,.menu-open .cta{background:#fff;color:var(--ink)}
.brand{text-decoration:none;font-family:var(--ff-d);font-size:1.45rem;line-height:1;letter-spacing:.02em;white-space:nowrap}
.brand em{font-weight:400} .brand b{font-weight:600;letter-spacing:.08em}
.brand-img{display:block;position:relative;height:30px} .brand-img img{height:30px;width:auto;transition:opacity .4s}
.brand-img .b-light{position:absolute;left:0;top:0;opacity:0}
#hdr.on-dark .brand-img.has-light .b-dark,.menu-open .brand-img.has-light .b-dark{opacity:0} #hdr.on-dark .brand-img.has-light .b-light,.menu-open .brand-img.has-light .b-light{opacity:1}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;text-decoration:none}
.skip:focus{top:12px}
.hnav{display:flex;gap:28px;font-size:.88rem;font-weight:500;margin-left:auto}
.hnav a{text-decoration:none;opacity:.85} .hnav a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
#mbtn{margin-left:10px;width:46px;height:46px;border-radius:50%;border:1px solid currentColor;display:grid;place-content:center;gap:6px}
#mbtn span{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .5s var(--out)}
.menu-open #mbtn span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-open #mbtn span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
#menu{position:fixed;inset:0;z-index:55;background:var(--bx);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:100px calc(var(--pad) + var(--gap)) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.33,1,.68,1);overflow:auto}
.menu-open #menu{clip-path:inset(0 0 0 0)}
.m-list a,.m-foot{opacity:0;transform:translateY(30px);transition:opacity .5s,transform .7s var(--out)}
.menu-open .m-list a,.menu-open .m-foot{opacity:1;transform:none;transition-delay:calc(.45s + var(--i,0) * .06s)}
.m-list{display:flex;flex-direction:column}
.m-list a{font-family:var(--ff-d);font-size:clamp(2.8rem,8vw,7rem);line-height:1.02;text-decoration:none;display:flex;align-items:baseline;gap:.4em;border-bottom:1px solid var(--line-l);padding:.08em 0}
.m-list a:hover{font-style:italic}
.m-list i{font:600 .8rem var(--ff-t);letter-spacing:.14em;font-style:normal;opacity:.6}
.m-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;font-size:.9rem;opacity:.8}

/* hero + edificio 3D */
.hero{min-height:calc(100svh - 2 * var(--gap));display:flex}
.hero-in{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:20px;align-items:center;padding:110px var(--pad) 40px;max-width:var(--max);margin:0 auto;width:100%}
.mega{font-size:var(--fs-mega);margin-bottom:clamp(20px,2.4vw,34px)}
.hero-sub{margin-bottom:28px;color:var(--mute);max-width:28em}
.stage{position:relative;height:min(72vh,720px);min-height:460px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.stage.drag{cursor:grabbing}
.rig{position:absolute;left:50%;top:60%;perspective:1700px;transform:scale(var(--s,1));transform-style:preserve-3d}
.world{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateX(60deg) rotateZ(-34deg)}
.world div,.world button{transform-style:preserve-3d}
.ground{position:absolute;left:-470px;top:-380px;width:940px;height:760px;border-radius:50%;background:radial-gradient(closest-side,rgba(11,11,12,.16),rgba(11,11,12,.05) 55%,transparent 72%)}
.lot{position:absolute;left:50%;top:calc(50% + 160px);transform:translateX(-50%);display:flex;gap:44px}
.lot i{display:block;width:2px;height:70px;background:rgba(11,11,12,.28)}
.lot::before{content:"P";position:absolute;left:-50px;top:18px;font:700 22px var(--ff-t);color:rgba(11,11,12,.35)}
.box{position:absolute}
.fc{position:absolute;backface-visibility:visible}
.fc.top{background:#fff}
.fc.front{background:#EEEBE5} .fc.back{background:#D9D5CE} .fc.left{background:#E4E0D9} .fc.right{background:#F7F5F1}
.l1 .fc.top{background:linear-gradient(135deg,#fff,#F1EEE9)}
.glass{position:absolute;left:8%;right:8%;top:22%;bottom:22%;background:linear-gradient(100deg,#151517,#2A2A2D 40%,#151517 70%,#232326);border-radius:2px}
.glass.side{left:10%;right:10%}
.g0{right:46%} .door{position:absolute;right:10%;width:22%;top:26%;bottom:0;background:#1A1A1C;border:5px solid var(--bx);border-bottom:0}
.blade .fc{background:var(--bx)} .blade .fc.top{background:var(--bx2)} .blade .fc.left,.blade .fc.back{background:#5E1320}
.hss{position:absolute;left:0;top:0}
.hs{position:absolute;left:0;top:0;display:flex;text-decoration:none;align-items:center;gap:8px;white-space:nowrap;padding:6px 14px 6px 6px;border-radius:99px;background:var(--ink);color:#fff;font-size:.82rem;font-weight:600;transform-origin:0 50%;transition:background .3s,opacity .4s;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hs i{font-style:normal;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--bx);font-size:.7rem}
.hs:hover,.hs.on{background:var(--bx)}
.fc{transition:opacity .35s cubic-bezier(.33,1,.68,1)}
.world[data-focus="0"] .l1 .fc,.world[data-focus="0"] .l1 .glass,.world[data-focus="1"] .l0 .fc{opacity:.35}
.world[data-focus] .blade .fc{opacity:.5}
.legend li.on b{color:var(--bx)}
.legend{position:absolute;left:0;bottom:46px;display:grid;gap:8px;font-size:.85rem}
.legend li{display:flex;gap:12px;opacity:0;transform:translateY(8px)}
.legend b{font-weight:700;min-width:84px}
.legend span{color:var(--mute)}
.hint{position:absolute;right:0;bottom:12px;font-size:.78rem;color:var(--mute);letter-spacing:.04em}

/* manifesto */
.scrub{font-family:var(--ff-d);font-size:clamp(2rem,4.4vw,4.6rem);line-height:1.1;letter-spacing:-.015em;max-width:18em}
.scrub b{font-style:italic;font-weight:500;color:var(--bx-l)}
.anim .scrub .w{opacity:.16;transition:opacity .2s}
.nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(60px,8vw,120px);border-top:1px solid var(--line-l);padding-top:28px}
.num b{display:block;font-family:var(--ff-d);font-weight:500;font-size:clamp(3.2rem,6.4vw,6.6rem);line-height:1;letter-spacing:-.03em}
.num span{display:block;margin-top:12px;color:var(--mute-l);font-size:.92rem;max-width:14em}

/* sezioni a due colonne */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:end}
.split.top{align-items:start}

/* edificio */
.feats{display:grid;gap:14px;margin-top:30px}
.feats li{display:flex;align-items:center;gap:14px;font-weight:500}
.tg{flex:none;position:relative;width:2.6em;height:1.4em;border-radius:99px;background:rgba(11,11,12,.14);transition:background .5s var(--ease)}
.tg::after{content:"";position:absolute;top:.17em;left:.17em;width:1.06em;height:1.06em;border-radius:50%;background:#fff;transition:transform .55s var(--out)}
.is-on .tg{background:var(--bx)} .is-on .tg::after{transform:translateX(1.2em)}
.levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin-top:clamp(56px,7vw,100px)}
.lv{background:#fff;border-radius:calc(var(--r) - 6px);padding:clamp(22px,2.6vw,36px);display:flex;flex-direction:column;gap:12px;min-height:260px}
.lv p:not(.lbl){color:var(--mute);max-width:30em}
.lv .m{margin-top:auto;font-family:var(--ff-d);font-size:clamp(2rem,3.4vw,3.2rem);line-height:1}
.photos{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--gap);margin-top:var(--gap)}
.phf{aspect-ratio:4/5;border-radius:calc(var(--r) - 6px);overflow:hidden;background:#E6E2DB}
.phf img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.12)}
.photos.n1{grid-template-columns:1fr} .photos.n1 .phf{aspect-ratio:16/9}
.photos.n2{grid-template-columns:1.3fr 1fr}
.photos.n3 .phf:first-child{aspect-ratio:auto}
.photos.n4{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)} .photos.n4::-webkit-scrollbar{display:none}
.photos.n4 .phf{flex:0 0 min(40vw,560px);scroll-snap-align:start}
.ph-box{border:1.5px dashed rgba(11,11,12,.3);display:grid;place-items:center;text-align:center;padding:20px;color:var(--mute);font-style:italic;font-size:.9rem;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(122,28,42,.04) 14px 15px)}
.where-ph{margin-top:clamp(40px,5vw,72px);border-radius:calc(var(--r) - 6px);overflow:hidden;aspect-ratio:21/9}
.where-ph img{width:100%;height:100%;object-fit:cover;display:block}

/* le realtà */
.t-list{margin-top:clamp(48px,6vw,90px);border-top:1px solid var(--line-l)}
.t-row{display:grid;grid-template-columns:60px minmax(0,1.6fr) minmax(0,1fr) 140px 48px;gap:20px;align-items:center;padding:clamp(22px,2.6vw,38px) 0;border-bottom:1px solid var(--line-l);text-decoration:none;position:relative}
.t-row::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--bx-l);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.t-row:hover::before{transform:scaleX(1)}
.t-n{font-style:normal;font-size:.8rem;letter-spacing:.14em;opacity:.6}
.t-name{font-size:clamp(2.2rem,4.6vw,4.6rem);transition:transform .6s var(--out),font-style .2s}
.t-row:hover .t-name{transform:translateX(14px);font-style:italic}
.t-cat,.t-lv{color:var(--mute-l);font-size:.92rem}
.t-go{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-l);display:grid;place-items:center;transition:background .4s,border-color .4s}
.t-go svg{width:18px;height:18px}
.t-row:hover .t-go{background:var(--bx);border-color:var(--bx)}
.pvs{position:fixed;left:0;top:0;z-index:40;pointer-events:none;width:260px;height:320px}
.pv{position:absolute;inset:0;border-radius:16px;background:var(--bx);display:grid;place-items:center;padding:24px;text-align:center;font-style:italic;color:#fff;opacity:0;transform:scale(.85) rotate(-4deg);transition:opacity .35s,transform .5s var(--out);border:1.5px dashed rgba(255,255,255,.5)}
.pv.on{opacity:1;transform:none}
.pv.has-img{padding:0;border:0;overflow:hidden;background:#1a1a1c} .pv.has-img img{width:100%;height:100%;object-fit:cover}
.pv.is-logo{background:#fff;padding:34px} .pv.is-logo img{object-fit:contain}

/* dove */
.addr{display:grid;grid-template-columns:auto 1fr;gap:10px 24px;margin:28px 0;font-size:.98rem}
.addr dt{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;opacity:.65;padding-top:4px}
#dove .lead{color:rgba(255,255,255,.85)}

/* contatti: scheda */
#contatti .lead{color:var(--mute);margin-top:28px}
.sheet{position:relative;background:var(--sheet);border-radius:6px;padding:clamp(24px,3vw,44px);box-shadow:0 1px 0 rgba(11,11,12,.06),0 30px 70px -30px rgba(11,11,12,.35);background-image:linear-gradient(90deg,transparent 46px,rgba(122,28,42,.18) 46px 47px,transparent 47px)}
.sh-head{display:flex;justify-content:space-between;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:10px;font-weight:600}
.f{border:0;margin:0;padding:16px 0 0}
.f.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f label,.f legend{display:flex;gap:10px;align-items:baseline;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--mute);padding:0}
.f i{font-style:normal;color:var(--bx)}
.f input,.f textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;font:500 1.05rem var(--ff-t);padding:8px 0;border-radius:0;color:var(--ink);resize:vertical}
.f input:focus,.f textarea:focus{outline:0;border-bottom-color:var(--bx)}
.chks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk span{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:99px;font-size:.9rem;cursor:pointer;transition:all .3s}
.chk input:checked+span{background:var(--ink);color:#fff;border-color:var(--ink)}
.chk input:focus-visible+span{outline:2px solid var(--bx2);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.priv a{color:inherit}
.priv{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--mute);margin:22px 0 14px}
.err{color:var(--bx);font-size:.9rem;min-height:1.2em;margin-bottom:8px}
.stamp{position:absolute;right:clamp(16px,4vw,48px);bottom:clamp(70px,9vw,110px);width:150px;height:150px;border:3px solid var(--bx);border-radius:50%;color:var(--bx);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:0;transform:scale(1.8) rotate(-24deg);pointer-events:none;mix-blend-mode:multiply}
.stamp b{font-family:var(--ff-d);font-size:2.2rem;letter-spacing:.06em;line-height:1;margin:4px 0}
.sent .stamp{opacity:.9;transform:scale(1) rotate(-12deg);transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .2s;animation:wob .7s .5s steps(7,jump-none) 1}
@keyframes wob{0%{rotate:-7deg}16%{rotate:7deg}33%{rotate:-7deg}50%{rotate:7deg}66%{rotate:-7deg}83%{rotate:7deg}100%{rotate:0deg}}
/* righe che salgono dalla maschera */
.sl{display:block;overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}
.sl>span{display:block}
.ok{margin-top:16px;font-weight:600;color:var(--bx)}

/* footer: resta sotto e si scopre quando la pagina scorre via */
main{position:relative;z-index:1;background:var(--ink);padding-bottom:var(--gap)}
.foot{padding-top:var(--sec);overflow:clip;position:sticky;bottom:0;z-index:0}
.f-top{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px;font-size:.95rem;color:var(--mute-l)}
.f-top nav{display:grid;gap:6px} .f-top a{text-decoration:none} .f-top a:hover{color:#fff}
.f-logo{font-family:var(--ff-d);font-size:clamp(7rem,33vw,34rem);line-height:.78;text-align:center;letter-spacing:.02em;margin-top:clamp(40px,6vw,90px);color:#fff}
.f-logo span{display:inline-block}
.f-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:22px;font-size:.8rem;color:var(--mute-l);border-top:1px solid var(--line-l)}

/* scheda realtà */
#drawer{position:fixed;inset:0;z-index:80;visibility:hidden}
#drawer.open{visibility:visible}
.scrim{position:absolute;inset:0;background:rgba(11,11,12,.55);opacity:0;transition:opacity .5s}
#drawer.open .scrim{opacity:1}
.panel-d{position:absolute;top:var(--gap);right:var(--gap);bottom:var(--gap);width:min(640px,calc(100% - 2 * var(--gap)));background:var(--paper);border-radius:var(--r);overflow:auto;overscroll-behavior:contain;transform:translateX(110%);transition:transform .8s var(--ease);padding:clamp(24px,3.4vw,48px)}
#drawer.open .panel-d{transform:none}
.x{position:sticky;top:0;float:right;width:46px;height:46px;border-radius:50%;background:var(--ink);display:grid;place-content:center;z-index:2}
.x span{display:block;width:16px;height:1.5px;background:#fff}
.x span:first-child{transform:translateY(.75px) rotate(45deg)} .x span:last-child{transform:translateY(-.75px) rotate(-45deg)}
.cs-n{font-size:.8rem;letter-spacing:.16em;color:var(--bx);font-weight:700}
.cs-t{font-size:clamp(2.8rem,6vw,5rem);margin:14px 0 8px}
.cs-full{color:var(--mute);margin-bottom:24px}
.cs-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin:26px 0}
.cs-meta div{background:#fff;border-radius:14px;padding:16px}
.cs-meta span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.cs-meta b{font-weight:600;font-size:.95rem}
.cs-p{margin-bottom:16px;max-width:34em}
.cs-ph{aspect-ratio:16/9;margin:26px 0;border-radius:14px;overflow:hidden}
.cs-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cs-ph.ph-box{border-radius:14px}
.cs-logo{max-width:160px;height:56px;margin-top:18px} .cs-logo img{height:100%;width:auto;object-fit:contain}
.cs-link{margin-top:10px}

/* titoli: variante grotesk con corsivo Bodoni (Impostazioni) */
body.fb{--ff-d:"Inter Tight",ui-sans-serif,system-ui,sans-serif}
body.fb .d,body.fb .scrub,body.fb .h3,body.fb .num b,body.fb .m-list a,body.fb .lv .m{font-weight:500;letter-spacing:-.04em}
body.fb .h2 .ln:nth-child(2) .li,body.fb .mega .ln:nth-child(2) .li,body.fb .scrub b,body.fb .brand em,body.fb .t-row:hover .t-name{font-family:"Bodoni Moda",Georgia,serif;letter-spacing:-.02em}
body.fb .t-row:hover .t-name{font-style:italic}

/* tablet / mobile */
@media (max-width:1100px){.t-row{grid-template-columns:44px minmax(0,1fr) 120px 48px}.t-lv{display:none}}
@media (max-width:900px){
  .hnav{display:none}
  .cta{margin-left:auto;height:42px;padding:0 14px}
  .hero-in{grid-template-columns:1fr;padding-top:96px;gap:0}
  .stage{height:460px;min-height:0;margin-top:10px}
  .split{grid-template-columns:1fr;align-items:start}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}
  .levels{grid-template-columns:1fr}
  .photos{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);scrollbar-width:none}
  .photos::-webkit-scrollbar{display:none}
  .phf{flex:0 0 72%;scroll-snap-align:start}
  .phf:first-child{aspect-ratio:4/5}
  .photos.n4 .phf{flex:0 0 72%}
  .where-ph{aspect-ratio:4/3}
  .t-row{grid-template-columns:34px minmax(0,1fr) 44px;gap:12px}
  .t-cat{grid-column:2;grid-row:2;margin-top:-6px}
  .t-go{grid-row:1/3;grid-column:3;width:44px;height:44px}
  .pvs{display:none}
  .f-top{grid-template-columns:1fr}
  .f.two{grid-template-columns:1fr;gap:0}
  .cs-meta{grid-template-columns:1fr 1fr}
  .legend{bottom:30px}
  .sheet{background-image:none}
  .stamp{bottom:auto;top:40px;width:120px;height:120px}
  .hint{bottom:4px;right:auto;left:0}
}
@media (max-width:420px){.brand{font-size:1.2rem}.cta{padding:0 12px;gap:10px}.pill-h1{font-size:.74rem}.stage{height:400px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.btn[disabled]{opacity:.6;pointer-events:none}
.f-top a{text-decoration:none}
#cs a.btn{color:#fff}