@font-face{font-family:Montserrat;font-weight:500;font-style:normal;font-display:swap;src:url(font/montserrat-latin-500.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Montserrat;font-weight:500;font-style:normal;font-display:swap;src:url(font/montserrat-latin-ext-500.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Baskervville;font-weight:400;font-style:normal;font-display:swap;src:url(font/baskervville-latin-400.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Baskervville;font-weight:400;font-style:normal;font-display:swap;src:url(font/baskervville-latin-ext-400.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--serif:Baskervville,Baskerville,"Libre Baskerville",Georgia,serif;--blue:#0016ff;--ink:#111;--ph:#ebebeb;--muted:#8a8a8a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{color-scheme:light}
[hidden]{display:none!important}
*{box-sizing:border-box;margin:0}
body{background:#fff;color:var(--ink);font-family:Montserrat,Helvetica,Arial,sans-serif;text-align:center;min-height:100vh;min-height:100svh;padding:40px 0 28px;display:flex;flex-direction:column;align-items:center}
.name{font-weight:800;font-size:clamp(26px,3.4vw,48px);letter-spacing:.06em;text-transform:uppercase;color:var(--g);line-height:1.1;text-decoration:none;padding:0 5vw}
nav{margin:28px 0 36px;display:flex;flex-direction:column;align-items:center;padding:0 5vw}
.w{display:block;font:800 clamp(38px,6.2vw,88px)/1.05 Montserrat,Helvetica,Arial,sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--blue);text-decoration:none;transition:color .15s}
.w:hover,.w:focus-visible,.w[aria-current="page"]{color:var(--g);outline:none}
body:not(.home) nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 3vw;margin:20px 0 28px}
body:not(.home) .w{font-size:clamp(28px,4vw,56px)}
main{width:100%;padding:0 5vw}
section{display:none}
section.on{display:block}
.list{list-style:none;padding:0;margin:8px auto 40px;max-width:760px}
.list a{display:block;padding:clamp(12px,1.8vw,20px) 0;font-weight:800;font-size:clamp(20px,2.6vw,34px);line-height:1.15;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);text-decoration:none;transition:color .15s}
.list a:hover,.list a:focus-visible{color:var(--g2);outline:none}
.bio{white-space:pre-line;max-width:620px;margin:8px auto 28px;font-size:clamp(16px,1.5vw,19px);line-height:1.65;font-weight:500}
.links{margin-bottom:40px}
.links a{display:block;padding:4px 0;font-weight:800;font-size:clamp(20px,2.4vw,32px);color:var(--blue);text-decoration:none}
.links a:hover,.links a:focus-visible{color:var(--g);outline:none}
.sh{font-weight:800;font-size:clamp(20px,2.4vw,32px);letter-spacing:.06em;text-transform:uppercase;color:var(--g);margin-bottom:14px}
.exh{max-width:760px;margin:0 auto 40px}
.exh ul{list-style:none;padding:0}
.exh li{display:flex;gap:18px;padding:9px 0;text-align:left;font-size:clamp(15px,1.4vw,18px);line-height:1.4;font-weight:500;color:var(--muted)}
.exh strong{font-weight:500}
.exh b{flex:none;min-width:3.2em;white-space:nowrap;color:var(--muted);font-weight:500}
.exh .it p+p{margin-top:8px}
.pt{font-weight:800;font-size:clamp(22px,3vw,40px);letter-spacing:.04em;text-transform:uppercase;margin:0 0 22px}
.poster{width:min(320px,70%);aspect-ratio:2/3;margin:0 auto 32px;background:var(--ph);display:flex;align-items:flex-end;text-align:left}
.poster img{width:100%;height:100%;object-fit:cover;display:block}
.notes{max-width:620px;margin:0 auto 36px;text-align:left;font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);line-height:1.7;font-weight:400;color:#6e6e6e;white-space:pre-line}
#ft,#pt{color:var(--g)}
#fnh{font-family:var(--serif);font-weight:600;letter-spacing:.08em;color:#7a7a7a}
.vid{width:min(100%,900px);aspect-ratio:16/9;margin:0 auto 40px;background:var(--ph);display:flex;align-items:flex-end;text-align:left}
.vid iframe{width:100%;height:100%;border:0}
.vcons{position:relative;width:100%;height:100%;display:block;padding:0;border:0;background:var(--ph);cursor:pointer;overflow:hidden}
.vcons img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
.vcons .vplay{position:absolute;left:50%;top:50%;width:clamp(44px,7vw,72px);height:clamp(44px,7vw,72px);transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.9);transition:background .15s,transform .15s}
.vcons .vplay::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-style:solid;border-width:.62em 0 .62em 1em;border-color:transparent transparent transparent #9a9a9a;font-size:clamp(14px,2.2vw,22px);transition:border-color .3s ease}
.vcons:hover .vplay::after,.vcons:focus-visible .vplay::after{border-left-color:#141414}
.vcons:hover .vplay,.vcons:focus-visible .vplay{background:#fff;transform:translate(-50%,-50%) scale(1.08)}
.vcons:focus-visible{outline:1px solid #9a9a9a;outline-offset:3px}
.sl{position:relative;width:min(100%,1800px);height:max(300px,calc(100vh - 237px));height:max(300px,calc(100svh - 237px));margin:0 auto;display:flex;align-items:flex-end;text-align:left;touch-action:pan-y}
.sl img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;transition:opacity .5s ease}
.sl img.on{opacity:1}
.arr{margin:6px 0 24px;min-height:20px;display:flex;align-items:center;justify-content:center}
.car{width:min(90%,900px);aspect-ratio:3/2;margin-top:clamp(20px,5vh,44px);position:relative;background:var(--ph);display:flex;align-items:flex-end;text-align:left}
.car img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .9s ease}
.car img.on{opacity:1}
@media (min-width:700px){.car{margin-top:auto}}
/* Home su computer: tutto in una schermata, la foto prende lo spazio che resta */
@media (min-width:700px){
  body.home{height:100vh;height:100svh;padding:clamp(14px,4vh,40px) 0 clamp(10px,2.5vh,28px)}
  body.home .name{font-size:clamp(22px,min(3.4vw,5vh),48px)}
  body.home nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 3vw;margin:clamp(8px,2.5vh,28px) 0 clamp(8px,3vh,36px)}
  body.home .w{font-size:clamp(32px,min(6.2vw,9vh),88px)}
  body.home .car{flex:1 1 0;min-height:180px;width:auto;max-width:min(94%,1500px);margin-top:0}
  body.home footer{margin-top:clamp(8px,2vh,24px)}
}
.detail .car{display:none}
.car img,.sl img,.poster img,.portrait img{pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.car,.sl,.poster,.portrait{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
@media print{.car,.sl,.poster,.portrait{display:none!important}}
#wait{display:none;margin:40vh auto 0;font-weight:500;color:var(--muted)}
body.wait #wait{display:block}
body.wait nav,body.wait .name,body.wait main,body.wait .car,body.wait footer{display:none!important}
footer a{color:inherit}
footer{margin-top:24px;font-size:12px;color:var(--muted);line-height:1.7;padding:0 5vw}
#veil{position:fixed;inset:0;z-index:50;display:none}
.exit{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));left:calc(5vw - 4px);padding:8px 18px 8px 4px;line-height:0;z-index:5;display:none;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--g);text-decoration:none}
.exit:hover,.exit:focus-visible{color:#141414;outline:none}
.detail .exit{display:block}
.exit svg,.back svg{display:block;width:22px;height:11px}
.detail nav,.detail .name{display:none}
.detail{padding-top:84px}
.rv{opacity:0}
.go .rv{animation:rv .9s ease forwards}
@keyframes rv{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cnt{display:inline-block;min-width:4.5em;font-size:11px;letter-spacing:.14em;font-weight:500;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;animation:none!important}.car img,.sl img{transition:none}}
.priv nav,.priv .car{display:none!important}
.priv main{margin-top:28px}
:root{--ink:#141414;--ph:#ecebe8;--muted:#8c8a86}
html,body,body.room-film{background:#faf9f7;color:var(--ink)}
.name,.exit,.sh,footer,.w.m{font:500 11px/1.4 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.name{color:var(--ink);padding:0}
.exit,.exit:link{color:#9a9a9a;transition:color .3s ease}
.exit:hover,.exit:focus-visible{color:#141414}
/* freccia indietro nelle pagine film/photo: sopra il titolo, in linea con la colonna del testo, ben visibile */
body.detail .exit{position:relative;top:auto;left:auto;align-self:center;width:auto;padding:10px 24px;margin:0 0 4px}
body.detail .exit svg{width:36px;height:18px}
body.detail .exit svg path{stroke-width:1.4}
body.room-photo .exit{padding:6px 24px;margin:0}
body.room-photo .exit svg{width:30px;height:15px}
.sh,#fnh{color:var(--muted);font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:.14em}
footer{color:var(--muted)}

/* HOME / STAGE: fototessera e tre voci grigie; cliccando, tutto sfuma nel bianco e resta solo la pagina scelta */
:root{--g:#bdbdbd;--g2:#9a9a9a}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.stage,.side{display:contents}
body.home{--pad:clamp(24px,9vw,150px);--fh:128px;--desc:8.3px;--lo:11px;--maxw:min(520px,calc(100vw - 2*var(--pad)));
  --top:calc((100vh - var(--fh))*.4444);--top:calc((100svh - var(--fh))*.4444);
  display:flex;flex-direction:column;align-items:flex-start;position:relative;height:auto;min-height:100vh;min-height:100svh;
  padding:0 var(--pad);transition:none;overflow-x:clip}
body.home::before,body.home::after{content:"";display:block}
body.home::before{flex:1 1 0}
body.home::after{flex:1.25 1 0}
body.home:not([data-view="menu"])::before{flex:0 0 var(--top)}
body.home[data-view="contact"]::before{flex:0 0 36px}
body.home[data-view="menu"],body.home[data-view="contact"]{align-items:center}
.name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;margin:0}
body.home.out.outd .name{opacity:0}
body.home .stage{display:flex;align-items:flex-end;column-gap:9px;position:relative;flex:none;transition:opacity .6s ease}
body.home:not([data-view="menu"]) .stage{display:none}
body.home .side{display:block;position:relative}
body.home .car{flex:none;height:var(--fh);width:min(calc(var(--fh)*var(--ar,.75)),calc(100vw - 48px - 90px));max-width:none;min-height:0;aspect-ratio:auto;margin:0}
body.home .car.cambia{transition:width .9s ease}
body.home:not(.ready) .stage{visibility:hidden}
body.home nav{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 calc(-1*var(--desc));padding:0;gap:0}
body.home .w,body.home .list a,body.home .links a,body.home .mlink,body.home .back{
  font:500 13px/26px Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.04em;text-transform:none;text-decoration:none;text-align:left;color:var(--g);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color .3s ease}
body.home .w,body.home .mlink{text-transform:lowercase}
body.home .w{position:relative}
body.home .w::after{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-18px}
body.home main{display:none;width:auto;max-width:var(--maxw);padding:0 0 120px;margin:calc(-1*var(--lo)) 0 0;transition:opacity .6s ease}
body.home:not([data-view="menu"]) main{display:block}
body.home.out .stage,body.home.out main{opacity:0;transition:opacity .4s ease}
body.home .list{margin:0;padding:0;max-width:none;text-align:left}
body.home .list a{display:block;padding:0;line-height:1.55;padding:5px 0}
body.home .bio{font:500 12px/1.9 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.02em;color:var(--g2);margin:3px 0 18px;max-width:320px;text-align:left;white-space:pre-line}
body.home .portrait{width:calc(var(--fh)*var(--ar,.75));max-width:100%;height:var(--fh);margin:0 0 20px;background:var(--ph)}
body.home .portrait img{display:block;width:100%;height:100%;object-fit:cover}
body.home .links{margin:0}
body.home .links a{display:block;padding:0;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
body.home .exh{margin:30px 0 0;max-width:none;text-align:left}
body.home .exh .sh{font:500 13px/26px Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.04em;text-transform:lowercase;color:var(--g);margin:0 0 6px}
body.home .exh li{display:flex;gap:16px;padding:5px 0;font:500 12px/1.6 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.03em;text-transform:none;color:var(--g2)}
body.home .exh b{min-width:3.4em;color:var(--g2);font-weight:500}
body.home .back{display:block;width:fit-content;margin:0 0 14px;padding:8px 18px 8px 0;line-height:0}
body.home .list+.back{margin:14px 0 0}
body.home .back{color:#858585}
body.home[data-view="film"],body.home[data-view="photo"]{align-items:center}
body.home[data-view="film"] .list,body.home[data-view="photo"] .list{text-align:center}
body.home[data-view="film"] .list a,body.home[data-view="photo"] .list a{text-align:center}
body.home[data-view="film"] .list+.back,body.home[data-view="photo"] .list+.back{margin:14px auto 0;padding:8px 0}
body.home .back:focus-visible{color:var(--ink)}
@media (hover:hover){body.home .back:hover{color:var(--ink)}}
body.home .w:focus-visible,body.home .list a:focus-visible,body.home .mlink:focus-visible{color:var(--g2);outline:none;text-decoration:underline;text-underline-offset:5px}
@media (hover:hover){body.home .w:hover,body.home .list a:hover,body.home .mlink:hover{color:var(--g2)}body.home .links a:hover{color:#000fb3}}
body.home .links a:focus-visible{color:#000fb3;outline:none}
body.home footer{position:absolute;left:0;right:0;bottom:0;margin:0;padding:0 24px calc(18px + env(safe-area-inset-bottom,0px));text-align:center;font-size:9px;line-height:1.6;color:var(--g)}
body.home footer a{color:var(--g)}
.fnome{display:block;font:500 11px/1.6 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
body:not(.home) .fnome{display:none}
body:not(.home) .back,body:not(.home) .mlink{display:none}
@media (max-width:699px){
  body.home{--maxw:calc(100vw - 48px);padding:env(safe-area-inset-top,0px) max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px))}
}
@media (min-width:700px){
  body.home{--fh:144px;--desc:9px}
  body.home[data-view="contact"]::before{flex-basis:clamp(48px,10vh,96px)}
  body.home .w,body.home .list a,body.home .links a,body.home .mlink{font-size:14px;line-height:28px}
  body.home .list a{line-height:1.55}
  body.home .bio{font-size:13px}
}
@media (prefers-reduced-motion:reduce){body.home .car,body.home .car.cambia,body.home .stage,body.home main,body.home .w,body.home .list a{transition:none!important}}

/* pagina di una serie su computer: titolo, foto, contatore e footer stanno tutti nella schermata */
@media (min-width:700px){
  body.room-photo{height:100vh;height:100svh}
  body.room-photo main{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  body.room-photo section.on{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  body.room-photo .sl{flex:1 1 0;height:auto;min-height:220px}
  body.room-photo .sl img{inset:7.5%;width:85%;height:85%}
  body.room-photo .arr{margin:6px 0 4px}
  body.room-photo footer{margin-top:6px}
}
/* PAGINE INTERNE */
body:not(.home) .car{display:none}
body:not(.home){padding:30px 24px 28px}
body:not(.home) nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 30px;margin:20px 0 48px;padding:0}
body:not(.home) .w{font:500 11px/1.4 Montserrat,Helvetica,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--g);transition:color .3s ease}
body:not(.home) .w:hover,body:not(.home) .w:focus-visible{color:var(--g2);outline:none}
body:not(.home) .w[aria-current="page"]{color:var(--ink)}
.list a{font:400 clamp(26px,3.2vw,42px)/1.15 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink);padding:clamp(8px,1.2vw,14px) 0}
.list a:hover,.list a:focus-visible{color:var(--g2)}
.pt,#ft,#pt{font:400 clamp(28px,3.6vw,50px)/1.1 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink)}
.bio{font:400 clamp(18px,1.6vw,21px)/1.7 var(--serif);color:#3d3d3b}
.links a{font:400 clamp(22px,2.4vw,32px)/1.3 var(--serif);color:var(--ink);padding:3px 0}
.links a:hover,.links a:focus-visible{color:var(--g2)}
.exh li{color:var(--muted);font-family:var(--serif);font-size:clamp(16px,1.5vw,19px)}
.cnt{color:var(--muted)}
.nojs{padding:40px;font:500 16px Montserrat,Helvetica,Arial,sans-serif}