@font-face{font-family:Paloma;src:url('/pre-view/assets/fonts/Paloma.otf') format('opentype');font-style:normal;font-weight:400;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#292824;color:#fff;font-family:Arial,sans-serif}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid #dfcba7;outline-offset:6px}
[hidden]{display:none!important}
#room{position:fixed;inset:0;overflow:hidden}
#still,#journey{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#still,#journey{visibility:hidden!important}
/* Keep the room free: the signature above, the navigation on the floor. */
header{position:fixed;z-index:4;inset:34px 5vw auto;display:flex;justify-content:center;align-items:center;transition:opacity .22s}
.brand{font:400 clamp(40px,3.5vw,56px)/1.15 Paloma,serif;white-space:nowrap;color:#262823}
header nav{position:fixed;inset:auto 5vw 32px;display:flex;justify-content:center;align-items:baseline;gap:clamp(28px,3.5vw,64px);color:#262823}
header nav a{position:relative;font:400 clamp(30px,3.1vw,46px)/1.25 Paloma,serif;padding:8px 2px}
header nav #capabilities,header nav #contact{font-size:clamp(24px,2.2vw,34px)}
header nav #capabilities{margin-left:24px}
header nav a:after{content:'';position:absolute;left:2px;right:2px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
header nav a:hover:after,header nav a:focus-visible:after{transform:scaleX(1)}
.hotspot{position:absolute;min-width:44px;min-height:44px;border:0;background:transparent;color:white;transform:translate(-50%,-50%)}
.hotspot span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font:400 25px/1.15 Paloma,serif;padding:8px;text-shadow:0 1px 8px #0008;opacity:0;transition:opacity .2s}
.hotspot:hover span,.hotspot:focus-visible span{opacity:1}
.hotspot:after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);border:1px solid #f5f1e899;border-radius:50%;background:transparent;opacity:.7;transition:opacity .2s}
.hotspot:hover:after,.hotspot:focus-visible:after{opacity:1}
#surface{position:fixed;inset:0;z-index:5;overflow:hidden;visibility:hidden;pointer-events:none;isolation:isolate}
#paper{position:absolute;top:0;left:0;width:1px;height:1px;background:#fff;transform-origin:0 0;will-change:transform}
.site-page{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:#fff;transform-origin:0 0;will-change:transform;backface-visibility:hidden}
#surface.interactive{visibility:visible;pointer-events:auto}
#status{position:fixed;z-index:9;left:3.5vw;bottom:25px;font-size:12px;text-shadow:0 1px 12px #000}
#skip,#back{position:fixed;z-index:10;right:24px;bottom:22px;padding:12px 16px;border:1px solid #c9c2b6;background:#f8f6f0;color:#272620;font:400 25px/1.15 Paloma,serif;border-radius:2px;box-shadow:0 3px 16px #0001}
#back{right:20px;bottom:18px}
html:not(.using-keyboard) #back:focus-visible{outline:none}
body.moving header,body.open header{opacity:0;pointer-events:none}
body.moving .hotspot,body.open .hotspot{display:none}
#projects-wall{position:fixed;inset:0;z-index:4}
#wall-still{width:100%;height:100%;object-fit:cover}
#projects-wall h1{position:absolute;top:24px;left:3.5vw;margin:0;font:400 48px/1.1 Paloma,serif;color:#262823}
#project-links a{position:absolute;display:block;min-width:44px;min-height:44px;outline:1px solid transparent;outline-offset:6px;transition:outline-color .2s}
#project-links a:hover,#project-links a:focus-visible{outline-color:#fff}
#project-links span{position:absolute;top:calc(100% + 4px);left:50%;transform:translateX(-50%);white-space:nowrap;font:400 20px/1.1 Paloma,serif;color:#272620;opacity:0;pointer-events:none;transition:opacity .2s}
#project-links a:hover span,#project-links a:focus-visible span{opacity:1}
@media(max-aspect-ratio:13/10){
 header{inset:32px 22px auto}
 .brand{font-size:clamp(36px,10.2vw,50px)}
 header nav{inset:auto max(28px,env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;column-gap:26px;row-gap:0}
 header nav a{padding:1px 2px;min-height:48px;font-size:clamp(38px,11.5vw,50px);line-height:1.16;text-align:center;justify-self:center}
 header nav #paintings,header nav #projects{grid-column:1/-1}
 header nav #projects{margin-bottom:14px}
 header nav #capabilities,header nav #contact{font-size:clamp(24px,7.4vw,32px);margin:0;min-height:44px}
 .hotspot span{display:none}
 .hotspot:after{width:8px;height:8px;background:#ffffff30;opacity:.8;box-shadow:0 1px 5px #0004}
 .hotspot:hover:after,.hotspot:focus-visible:after{background:#fff;opacity:1}
 #skip,#back{bottom:max(14px,env(safe-area-inset-bottom));right:14px;background:transparent;border:0;box-shadow:none;font-size:28px;padding:12px 8px}
 #projects-wall h1{left:24px;top:24px;font-size:44px}
 #project-links span{top:calc(100% + 3px);font-size:18px}
}
@media(min-aspect-ratio:13/10) and (max-width:900px){header{top:16px}.brand{font-size:34px}header nav{bottom:12px;gap:22px}header nav a{font-size:24px}header nav #capabilities,header nav #contact{font-size:20px}header nav #capabilities{margin-left:6px}}
@media(hover:none){#project-links a:hover span{opacity:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
#surface[hidden],#paper[hidden],#hero-flight[hidden]{display:none!important}
#hero-flight{position:fixed;left:0;top:0;width:1000px;height:1000px;transform-origin:0 0;overflow:hidden;z-index:8;pointer-events:none;will-change:transform,opacity;backface-visibility:hidden}
#hero-image{position:absolute;max-width:none;object-fit:fill;display:block}
#wall-stage{position:absolute;inset:0;transform-origin:0 0;will-change:transform}
#wall-still,#wall-spots,#wall-spots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#wall-spots{pointer-events:none}
#wall-spots img{opacity:0;transition:opacity .3s ease}
#projects-wall.flying h1,#projects-wall.flying #project-links{visibility:hidden}
#project-links a{outline:0!important}
#project-links a:focus-visible{outline:1px solid #262823!important}
#project-links span{color:#262823;background:rgba(244,240,232,.92);padding:4px 9px;border-radius:1px}
@media(prefers-reduced-motion:reduce){#wall-spots img{transition:none}}
/* Warm paper labels, with small variations along the cut edge. */
#back,#skip,.hotspot span,#project-links span,#projects-nav{isolation:isolate;border:0;border-radius:0;background:transparent;box-shadow:none;color:#302e27;text-shadow:none}
#back::before,#skip::before,.hotspot span::before,#project-links span::before,#projects-nav::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:#ccc7bc;background-image:radial-gradient(ellipse at 15% 8%,#e2dfd650,transparent 67%),radial-gradient(ellipse at 98% 94%,#8c877c20,transparent 72%);clip-path:polygon(.6% 2%,18% .6%,36% 1.4%,57% 0,78% 1.1%,99.1% .3%,100% 25%,99.6% 52%,100% 78%,99.2% 98.6%,77% 99.5%,54% 98.7%,32% 100%,12% 98.9%,.4% 99.6%,0 73%,.5% 45%,0 19%)}
#back,#skip{filter:drop-shadow(0 2px 2px #32281722);padding:12px 18px}
.hotspot span{padding:6px 12px;font-size:21px}
#wall-entry span{opacity:1;font-size:19px;bottom:calc(50% + 13px)}
#wall-entry:after{width:9px;height:9px;border:1px solid #d7c8a9;background:#64563d;box-shadow:0 1px 3px #0006;opacity:1}
#project-links span{padding:5px 9px;font-size:19px;filter:drop-shadow(0 1px 1px #32281724);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
#projects-nav{position:absolute;left:3.5vw;bottom:22px;padding:13px 20px 15px;filter:drop-shadow(0 2px 3px #32281720)}
.projects-nav-caption{display:block;margin-bottom:7px;font:400 10px/1.3 Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#625b4d}
#projects-menu{display:flex;gap:26px;align-items:baseline}
#projects-menu a{font:400 24px/1.3 Paloma,serif;text-decoration:underline;text-decoration-color:#88785b80;text-decoration-thickness:1px;text-underline-offset:5px;padding:4px 0}
#projects-menu a:hover,#projects-menu a:focus-visible{text-decoration-color:currentColor}
#projects-wall.flying #projects-nav{visibility:hidden;pointer-events:none}
@media(max-aspect-ratio:13/10){
 #project-links span,#project-links a:hover span{opacity:1;font-size:15px;line-height:1.2;padding:5px 7px;top:calc(100% + 2px)}
 #projects-nav{left:22px;right:22px;bottom:calc(87px + env(safe-area-inset-bottom));padding:12px 15px 14px}
 #projects-menu{gap:8px 16px;flex-wrap:wrap;justify-content:flex-start}
 #projects-menu a{font-size:19px;min-height:36px;display:flex;align-items:center}
 #back,#skip{font-size:24px;padding:10px 15px;right:22px}
}
#project-links span{pointer-events:auto}

/* Quiet captions belong to the pinned sheets, without a second paper label. */
#project-links span{background:none;filter:none;text-decoration:none;color:#403e38;font-size:16px;padding:2px 0}
#project-links span::before{display:none}
#projects-menu a{text-decoration:none}
#projects-menu a:hover,#projects-menu a:focus-visible{color:#665f51}
@media(max-aspect-ratio:13/10){
 #project-links span,#project-links a:hover span{font-size:12px;padding:2px 0;top:calc(100% + 1px);color:#403e38}
 #projects-nav{padding:10px 15px}
 #projects-menu a{font-size:18px}
}

/* Paper tones sampled from the darker sheets: #ada190, #998874, #b3a696. */
header{top:49px}
.brand{font-size:clamp(34px,3.1vw,48px)}
#wall-entry{display:none!important}
#back::before,#skip::before,.hotspot span::before,#projects-nav::before{inset:-3px -5px;background:transparent url('/pre-view/assets/v9/paper-label.svg') center/100% 100% no-repeat;clip-path:none}
#projects-nav::before{background-image:url('/pre-view/assets/v9/paper-menu.svg');transform:rotate(-.35deg)}
#back,#skip,#projects-nav{filter:drop-shadow(1px 2px 1px #30261d40) drop-shadow(0 5px 5px #30261d15)}
#project-links span{font-size:20px}
@media(max-aspect-ratio:13/10){
 header{top:47px}
 .brand{font-size:clamp(27px,8vw,38px)}
 #project-links span,#project-links a:hover span{font-size:17px;line-height:1.2}
}

@media(max-aspect-ratio:13/10){#project-links [data-project="bsp"] span{transform:translateX(calc(-50% + 10px))}}
/* Plain paper: sampled beige, quiet edges, no simulated ageing. */
#back::before,#skip::before,.hotspot span::before,#projects-nav::before{inset:0;background:#b3a696;transform:none;clip-path:polygon(.4% 1.2%,34% 0,71% .8%,99.7% 0,100% 98.6%,67% 100%,29% 99%,0 100%)}
#back,#skip,#projects-nav{filter:drop-shadow(0 1px 1px #30261d20)}
/* The book and easel retain their original, light hover lettering. */
#book span,#canvas span,#device span{background:none;color:#f4f0e7;padding:6px 0;text-shadow:0 1px 7px #0007;filter:none}
#book span::before,#canvas span::before,#device span::before{display:none}
#book span,#canvas span,#device span{font-size:25px}
/* Desktop navigation responds with light lettering instead of an underline. */
@media(min-aspect-ratio:13/10) and (hover:hover){
 header nav a::after{display:none}
 header nav a{transition:color .22s ease}
 header nav a:hover,header nav a:focus-visible{color:#f4f0e7}
 #projects-menu a{transition:color .22s ease}
 #projects-menu a:hover,#projects-menu a:focus-visible{color:#f4f0e7;text-decoration:none}
}
/* More prominent studio signature, with additional space above it. */
header{top:72px}
.brand{font-size:clamp(40px,3.8vw,60px)}
@media(max-aspect-ratio:13/10){
 header{top:65px}
 .brand{font-size:clamp(30px,8.8vw,43px)}
}
@media(min-aspect-ratio:13/10) and (max-width:900px){
 header{top:36px}
 .brand{font-size:38px}
}

/* Softer paper tone for the return control. */
#back::before{background:#cbbfae}

/* Film e quadro di nuovo nello stesso canvas: il video nativo resta solo come sorgente dei fotogrammi (Claude, 1.10.2026). */
#visuals{position:fixed;inset:0;z-index:0;pointer-events:none;will-change:opacity}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
#room{z-index:1}
#still,#journey{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#still,#journey{visibility:hidden!important}
body.painting-handoff #visuals{z-index:6}

/* 1.10.2026 (Alessio): firma molto piu' grande ovunque, navigazione del telefono piu' grande. */
header{top:64px}
.brand{font-size:clamp(52px,5vw,84px)}
@media(min-aspect-ratio:13/10) and (max-width:900px){
 header{top:30px}
 .brand{font-size:46px}
}
@media(max-aspect-ratio:13/10){
 header{top:56px}
 .brand{font-size:clamp(46px,16vw,64px);white-space:normal;display:block;width:min-content;text-align:center;line-height:.98}
 header nav a{font-size:clamp(40px,11.8vw,52px)}
 header nav #capabilities,header nav #contact{font-size:clamp(25px,7.6vw,33px)}
 header nav{column-gap:22px}
}

/* 1.10.2026 (Alessio): niente cartigli, niente etichette sulle stampe; il menu dei progetti sotto i fogli. */
#back::before,#skip::before,.hotspot span::before,#projects-nav::before,#project-links span::before{display:none!important}
#back,#skip,#projects-nav{filter:none!important;background:transparent!important;box-shadow:none!important;border:0!important}
#project-links span{display:none!important}
#projects-nav{bottom:14px;padding:4px 0}
@media(max-aspect-ratio:13/10){
 #projects-nav{bottom:calc(66px + env(safe-area-inset-bottom));padding:2px 0}
 #projects-menu{gap:4px 18px}
}
@media(min-aspect-ratio:13/10){
 #projects-menu a,#back,#skip{text-shadow:0 0 2px #efe9de,0 0 6px #efe9de,0 0 12px #efe9dec0}
}
/* sulla parete dei progetti le scritte sono chiare */
#projects-menu a{color:#f4efe2;text-shadow:0 1px 2px #1d1a1480,0 0 10px #1d1a1466}
#projects-menu a:hover,#projects-menu a:focus-visible{color:#fff}
body:has(#projects-wall:not([hidden])) #back{color:#f4efe2;text-shadow:0 1px 2px #1d1a1480,0 0 10px #1d1a1466}
#project-links span,#project-links a span{display:none!important}

/* 2.10.2026 (Alessio): sulla parete scritte nere, progetti e ritorno della stessa misura, menu un po' piu' alto. */
#projects-menu a,body:has(#projects-wall:not([hidden])) #back{color:#262823;text-shadow:none;font-size:26px}
#projects-menu a:hover,#projects-menu a:focus-visible{color:#665f51}
#projects-nav{bottom:34px}
@media(max-aspect-ratio:13/10){
 #projects-menu a,body:has(#projects-wall:not([hidden])) #back{font-size:21px}
 #projects-nav{bottom:calc(86px + env(safe-area-inset-bottom))}
 /* stanza: firma un po' piu' piccola, quattro voci della stessa misura */
 .brand{font-size:clamp(40px,14vw,56px)}
 header nav a,header nav #capabilities,header nav #contact{font-size:clamp(25px,7.6vw,33px)}
 header nav #projects{margin-bottom:6px}
}
#projects-menu a,body:has(#projects-wall:not([hidden])) #back{text-shadow:0 0 3px #ece6da,0 0 8px #ece6da,0 0 16px #ece6dacc}
/* niente effetti sulle scritte: l'effetto e' la luce sui fogli */
#projects-menu a,body:has(#projects-wall:not([hidden])) #back{text-shadow:none!important;transition:none}
#projects-menu a:hover,#projects-menu a:focus-visible{color:#262823}
@media(min-aspect-ratio:13/10){#projects-nav{bottom:16px}}

/* Mobile room exploration, after the curtain navigation (ChatGPT, 2.10.2026). */
#mobile-look{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
@media(max-aspect-ratio:13/10){#room{touch-action:none}}
#arrival-cover{position:fixed;inset:0;z-index:2;pointer-events:none;background:#292824 url('/pre-view/assets/arrivo-desktop.jpg') center/cover no-repeat}
@media(max-aspect-ratio:13/10){#arrival-cover{background-image:url('/pre-view/assets/arrivo-mobile.jpg')}}

/* 2.10.2026 (Alessio): navigazione del telefono disegnata a mano (navigazione-mobile-ultima.png), misurata sul foglio 1125x2157 e ancorata al fondo. */
header nav a img.nm,#recenter{display:none}
@media(max-aspect-ratio:13/10){
 :root{--u:calc(100vw/1125)}
 header nav{display:block!important;position:fixed!important;inset:auto 0 env(safe-area-inset-bottom) 0!important;height:calc(var(--u)*523);padding:0;margin:0}
 header nav a,header nav #capabilities,header nav #contact,header nav #paintings,header nav #projects{position:absolute!important;display:block!important;padding:0!important;margin:0!important;min-height:0!important;font-size:0!important;line-height:0!important;grid-column:auto!important}
 header nav a::after{display:none!important}
 header nav a::before,#recenter::before{content:'';position:absolute;inset:-12px -10px}
 header nav a .nt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 header nav a img.nm,#recenter img{display:block;width:100%;height:auto}
 header nav #capabilities{left:calc(var(--u)*93);top:calc(var(--u)*15);width:calc(var(--u)*403)}
 header nav #paintings{left:calc(var(--u)*669);top:calc(var(--u)*0);width:calc(var(--u)*366)}
 header nav #contact{left:calc(var(--u)*158);top:calc(var(--u)*145);width:calc(var(--u)*309)}
 header nav #projects{left:calc(var(--u)*715);top:calc(var(--u)*149);width:calc(var(--u)*274)}
 #recenter{position:fixed;left:calc(var(--u)*435);bottom:calc(env(safe-area-inset-bottom) + var(--u)*84);width:calc(var(--u)*276);padding:0;border:0;background:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
 body:has(#mobile-look:not([hidden])) #recenter{display:block}
}