/* Layout: pagina progetto = una sala. Hero a colore pieno con titolo enorme, bollo che gira e nastro dei servizi; didascalia da museo + racconto; galleria a blocchi (pieno, coppia, terzina, fascia, browser); sala successiva. Template guidato da un oggetto dati. Look unico, niente tema scuro. */
:root{
  --ink:#16120f;
  --paper:#fffaf0;
  --sala:#ff3a12;
  --sala-ink:#fffaf0;
  --zafferano:#ffd000;
  --f-display:"Bagel Fat One","Arial Black",Impact,system-ui,sans-serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink)}
body{margin:0;font-family:var(--f-body);font-size:16px;line-height:1.5;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
body.locked{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit}
img,video{max-width:100%;display:block}
figure video{aspect-ratio:16/9;object-fit:cover;background:var(--ink)}
:focus-visible{outline:3px solid var(--zafferano);outline-offset:3px}

/* barra */
.bar{position:fixed;left:0;right:0;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--gutter) 14px;pointer-events:none;mix-blend-mode:difference;color:#fff}
.bar *{pointer-events:auto}
.logo{display:inline-flex;align-items:center;height:34px}
.logo img{height:30px;width:auto}
.bar-r{display:flex;gap:18px;align-items:center;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.bar-r a{text-decoration:none}

/* hero */
.hero{position:relative;min-height:92vh;min-height:92svh;background:var(--sala);color:var(--sala-ink);display:grid;grid-template-rows:1fr auto;overflow:hidden}
.hero-in{padding:calc(env(safe-area-inset-top,0px) + 110px) var(--gutter) 40px;display:grid;align-content:end;gap:22px;position:relative}
.kicker{font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.1em}
.hero h1{font-family:var(--f-display);font-weight:400;font-size:clamp(64px,15vw,250px);line-height:.82;margin:0;max-width:9ch;text-wrap:balance}
.hero h1 span{display:block}
.hero h1 span:nth-child(2){padding-left:.6em}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--f-mono);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.meta b{font-weight:500;background:var(--ink);color:var(--paper);padding:2px 8px}

.bollo{position:absolute;right:var(--gutter);top:calc(env(safe-area-inset-top,0px) + 96px);width:clamp(120px,17vw,210px);aspect-ratio:1;color:var(--ink)}
.bollo svg{width:100%;height:100%;animation:gira 22s linear infinite}
.bollo text{font-family:var(--f-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;fill:currentColor}
.bollo .centro{position:absolute;inset:0;display:grid;place-items:center;text-align:center;font-family:var(--f-display);font-size:clamp(22px,3vw,36px);line-height:.85;color:var(--ink)}
.bollo .disco{fill:var(--zafferano)}
@keyframes gira{to{transform:rotate(360deg)}}

.nastro{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;border-block:2px solid var(--ink)}
.nastro-in{display:inline-flex;gap:28px;padding:14px 0;animation:scorri 28s linear infinite;font-family:var(--f-display);font-size:clamp(20px,2.4vw,30px)}
.nastro-in i{font-style:normal;color:var(--sala)}
@keyframes scorri{to{transform:translateX(-50%)}}

/* intro */
.intro{padding-block:clamp(56px,8vw,110px);padding-inline:var(--gutter);display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;max-width:1400px;margin-inline:auto}
.label{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:18px 20px;font-family:var(--f-mono);font-size:13px;line-height:1.45;position:sticky;top:90px}
.label dl{margin:0;display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr);gap:6px 14px}
.label dt{max-width:11em}
.label dt{text-transform:uppercase;letter-spacing:.06em;font-size:11px;opacity:.6;padding-top:2px}
.label dd{margin:0;min-width:0;overflow-wrap:break-word}
.label .chicca{}
.todo{background:var(--zafferano);padding:0 4px;color:var(--ink)}
.racconto{display:grid;gap:22px;min-width:0}
.racconto p{margin:0;font-size:clamp(20px,2.3vw,30px);line-height:1.28;max-width:30ch;text-wrap:pretty}
.racconto p:first-child::first-letter{font-family:var(--f-display);color:var(--accento);font-size:1.5em;line-height:1}
.bozza{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.55}
.intro-video{width:min(100%,380px);aspect-ratio:1;object-fit:cover;background:var(--ink);transform:rotate(-3deg);box-shadow:12px 12px 0 var(--sala);justify-self:end;margin-top:10px}

/* galleria */
.galleria{display:grid;gap:clamp(40px,6vw,90px);padding-bottom:clamp(60px,8vw,120px)}
.blocco{padding-inline:var(--gutter);display:grid;gap:clamp(14px,2vw,28px);max-width:1500px;margin-inline:auto;width:100%}
.blocco.coppia{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.blocco.coppia.storta{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);align-items:center}
.blocco.terzina{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.blocco.terzina figure:nth-child(2){margin-top:clamp(30px,6vw,90px)}
.blocco.fascia{padding-inline:0;max-width:none}
.blocco.fascia img,.blocco.fascia video{width:100%;height:clamp(240px,48vw,640px);object-fit:cover}
figure{margin:0;display:grid;gap:10px;min-width:0;will-change:transform}
figure img,figure video{width:100%;height:auto;cursor:zoom-in;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
figure:hover img{transform:scale(1.015)}
figcaption{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.7;display:flex;gap:10px}
figcaption::before{content:"↳";color:var(--accento);opacity:1}
.blocco.fascia figcaption{padding-inline:var(--gutter)}

.titoletto h2,.macchine h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,88px);line-height:.9;margin:0;max-width:14ch}
.titoletto h2{color:var(--accento)}
.chiaro .titoletto h2 span{background:linear-gradient(transparent 58%,var(--sala) 58%,var(--sala) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.chiaro .bollo .disco{fill:var(--paper)}
.macchine{background:#fff;max-width:none;padding-block:clamp(40px,6vw,90px);border-block:2px solid var(--ink)}
.macchine h2,.macchine .fila{max-width:1500px;margin-inline:auto;width:100%}
.macchine .fila{display:grid;grid-template-columns:1.25fr 1fr 1.1fr;gap:clamp(16px,3vw,48px);align-items:end}
.macchine figure img{mix-blend-mode:multiply}
@media (max-width:820px){.macchine .fila{grid-template-columns:minmax(0,1fr)}}
.browser{background:var(--sala);padding:clamp(24px,5vw,80px) var(--gutter);max-width:none}
.browser .finestra{max-width:1200px;margin-inline:auto;width:100%;border:2px solid var(--ink);box-shadow:14px 14px 0 var(--ink);background:var(--paper)}
.browser .barra{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:2px solid var(--ink);font-family:var(--f-mono);font-size:12px}
.browser .barra i{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);display:inline-block}
.browser .barra span{margin-left:10px;opacity:.7}
.browser figcaption{max-width:1200px;margin-inline:auto;width:100%;color:var(--sala-ink);opacity:.9}
.browser figcaption::before{color:var(--ink)}

/* segnaposto e crediti */
.segnaposto .vuoto{border:3px dashed var(--ink);min-height:clamp(200px,30vw,420px);display:grid;place-content:center;gap:8px;text-align:center;padding:24px;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;background:repeating-linear-gradient(-45deg,transparent 0 18px,rgba(22,18,15,.04) 18px 36px)}
.segnaposto .vuoto b{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,4vw,52px);letter-spacing:0;text-transform:none;color:var(--accento)}
.crediti{padding-block:clamp(50px,7vw,100px);padding-inline:var(--gutter);border-top:2px solid var(--ink)}
.crediti h2{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,7vw,100px);line-height:.9;margin:0 0 clamp(24px,4vw,48px)}
.cred-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);max-width:1400px}
.crediti dl{margin:0;display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);gap:0;border-top:2px solid var(--ink)}
.crediti dt,.crediti dd{margin:0;padding:12px 0;border-bottom:1px solid var(--ink)}
.crediti dt{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.7;padding-right:16px}
.crediti dd{font-size:18px}
.partner span{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.partner ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.partner li{border:2px solid var(--ink);padding:6px 12px;font-size:15px;background:var(--paper)}
@media (max-width:820px){.cred-grid{grid-template-columns:minmax(0,1fr)}.crediti dl{grid-template-columns:minmax(0,1fr)}.crediti dt{border-bottom:0;padding-bottom:0}}

/* sala successiva */
.prossima{background:var(--ink);color:var(--paper);padding-block:clamp(60px,9vw,130px);padding-inline:var(--gutter);display:grid;gap:26px}
.prossima .kicker{color:var(--zafferano)}
.prossima a.nome{font-family:var(--f-display);font-size:clamp(52px,11vw,170px);line-height:.85;text-decoration:none;display:inline-block;transition:transform .35s cubic-bezier(.3,1.6,.5,1),color .2s}
.prossima a.nome:hover{transform:translateX(18px) rotate(-2deg);color:var(--accento)}
.prossima .giu{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.prossima .giu a{text-decoration:none;border-bottom:2px solid var(--zafferano)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:80;background:rgba(22,18,15,.94);display:grid;place-items:center;padding:clamp(16px,4vw,60px)}
.lb[hidden]{display:none}
.lb img{max-height:86vh;width:auto;max-width:100%;box-shadow:0 0 0 2px var(--paper)}
.lb button{position:fixed;background:var(--paper);color:var(--ink);border:0;width:52px;height:52px;border-radius:50%;font-size:22px;cursor:pointer;display:grid;place-items:center}
.lb .x{top:calc(env(safe-area-inset-top,0px) + 16px);right:var(--gutter)}
.lb .prev{left:var(--gutter);top:50%;transform:translateY(-50%)}
.lb .next{right:var(--gutter);top:50%;transform:translateY(-50%)}
.lb .n{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);left:50%;transform:translateX(-50%);color:var(--paper);font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;font-variant-numeric:tabular-nums}

/* cursore */
.cur{position:fixed;left:0;top:0;width:22px;height:22px;border-radius:50%;background:#fff;pointer-events:none;z-index:90;transform:translate(-50%,-50%);
  transition:width .2s,height .2s,background .2s;mix-blend-mode:difference;display:none;place-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:#000;text-transform:uppercase}
.cur.guarda{width:84px;height:84px;mix-blend-mode:normal;background:var(--zafferano)}
@media (hover:hover) and (pointer:fine){.cur{display:grid}}

@media (max-width:820px){
  .intro{grid-template-columns:minmax(0,1fr)}
  .label{position:static}
  .intro-video{justify-self:start}
  .blocco.coppia,.blocco.coppia.storta,.blocco.terzina{grid-template-columns:minmax(0,1fr)}
  .blocco.terzina figure:nth-child(2){margin-top:0}
  .bollo{width:104px;top:calc(env(safe-area-inset-top,0px) + 78px)}
}
/* edizioni */
.edizioni{max-width:none;background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,110px) var(--gutter)}
.edizioni h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,88px);line-height:.9;margin:0 auto clamp(28px,4vw,56px);max-width:1500px;color:var(--sala)}
.edizioni ol{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.edizioni .ed{all:unset;cursor:zoom-in;display:block;position:relative;width:100%}
.edizioni img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.3,1.5,.5,1),filter .3s;filter:grayscale(.15)}
.edizioni .ed:hover img,.edizioni .ed:focus-visible img{transform:rotate(-3deg) scale(1.04);filter:none}
.edizioni li:nth-child(even) .ed:hover img{transform:rotate(3deg) scale(1.04)}
.edizioni b{position:absolute;left:8px;top:8px;font-family:var(--f-display);font-weight:400;font-size:clamp(20px,2vw,30px);background:var(--sala);color:var(--sala-ink);padding:.05em .3em;line-height:1}
.edizioni span{display:block;font-family:var(--f-mono);font-size:12px;line-height:1.35;margin-top:8px;opacity:.85}
.edizioni .ed:focus-visible{outline:3px solid var(--sala);outline-offset:4px}
@media (max-width:820px){.edizioni ol{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* telefoni */
.telefoni{display:flex;justify-content:center;align-items:flex-start;gap:clamp(20px,5vw,80px);flex-wrap:wrap;background:var(--sala);max-width:none;padding-block:clamp(40px,6vw,90px)}
.telefoni figure{width:auto}
.telefoni figure:nth-child(even){margin-top:clamp(30px,6vw,90px)}
.telefoni .cornice{border:8px solid var(--ink);border-radius:34px;overflow:hidden;background:var(--ink);box-shadow:10px 10px 0 var(--ink)}
.telefoni img{height:min(72vh,680px);width:auto;max-width:80vw;object-fit:cover;object-position:top;display:block}
.telefoni figcaption{color:var(--sala-ink)}
/* youtube */
.tubo{display:grid;gap:clamp(16px,3vw,40px)}
.tubo.due{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:end}
.tubo video{cursor:auto}
.tubo .yt,.tubo iframe,.tubo video{display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;background:var(--ink);position:relative;cursor:pointer;box-shadow:10px 10px 0 var(--sala)}
.tubo .yt img{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:filter .3s}
.tubo .yt:hover img{filter:brightness(.75)}
.tubo .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:clamp(64px,8vw,104px);aspect-ratio:1;border-radius:50%;background:var(--sala);color:var(--sala-ink);display:grid;place-items:center;font-size:clamp(22px,2.6vw,34px);padding-left:.18em;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.tubo .yt:hover .play{transform:scale(1.15) rotate(-8deg)}
@media (max-width:820px){.tubo.due{grid-template-columns:minmax(0,1fr)}}
/* numeri */
.numeri{max-width:none;background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,110px) clamp(16px,4vw,56px);border-block:2px solid var(--ink)}
.numeri h2{font-family:var(--f-mono);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin:0 auto clamp(24px,3vw,40px);max-width:1500px;color:var(--sala)}
.numeri ul{list-style:none;margin:0 auto;padding:0;max-width:1500px;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:2px;background:var(--paper)}
.numeri li{background:var(--ink);padding:clamp(18px,2.4vw,34px) clamp(14px,2vw,28px) clamp(20px,2.6vw,36px);display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .3em;transition:background .25s,color .25s}
.numeri li:nth-child(4n+1):hover{background:#ff3a12}.numeri li:nth-child(4n+2):hover{background:#1a33ff}
.numeri li:nth-child(4n+3):hover{background:#ffd000;color:var(--ink)}.numeri li:nth-child(4n+4):hover{background:#00e676;color:var(--ink)}
.numeri b{font-family:var(--f-display);font-weight:400;font-size:clamp(40px,4.6vw,84px);line-height:.9;font-variant-numeric:tabular-nums}
.numeri i{font-style:normal;font-family:var(--f-display);font-size:clamp(22px,2.6vw,40px)}
.numeri span{flex-basis:100%;font-family:var(--f-mono);font-size:13px;line-height:1.4;margin-top:.8em;opacity:.85}
@media (max-width:820px){.numeri ul{grid-template-columns:repeat(2,minmax(0,1fr))}.numeri li:last-child:nth-child(odd){grid-column:1/-1}}
/* totem */
.totem{max-width:none;background:var(--fondo,var(--ink));color:var(--paper);padding:clamp(48px,7vw,110px) var(--gutter) clamp(40px,5vw,80px);justify-items:center;text-align:center}
.totem h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,88px);line-height:.9;margin:0;max-width:16ch;color:var(--sala)}
.totem>p{margin:0;max-width:52ch;font-size:clamp(17px,1.6vw,21px);line-height:1.4;opacity:.9}
.totem figure{width:min(100%,1100px);gap:0;margin-top:clamp(10px,2vw,24px)}
.totem .schermo{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:clamp(8px,1.2vw,16px) solid var(--ink);border-radius:clamp(8px,1vw,14px);box-shadow:0 0 0 2px rgba(255,250,240,.25),18px 18px 0 rgba(0,0,0,.35)}
.totem .schermo video{width:100%;height:100%;object-fit:cover;aspect-ratio:auto;cursor:default}
.totem .schermo iframe{position:absolute;left:0;top:0;width:1920px;height:1080px;border:0;transform-origin:0 0}
.totem .gioca{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);border:2px solid var(--ink);background:var(--sala);color:var(--sala-ink);font-family:var(--f-display);font-size:clamp(18px,2vw,28px);padding:.35em .8em;cursor:pointer;box-shadow:6px 6px 0 var(--ink);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.totem .gioca span{font-size:.7em;margin-left:.3em}
.totem .gioca:hover{transform:rotate(-4deg) scale(1.06)}
.totem .stele{width:clamp(70px,12%,140px);height:clamp(50px,7vw,110px);background:var(--ink);margin:0 auto;position:relative}
.totem .stele::after{content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;width:340%;height:14px;background:var(--ink);border-radius:4px}
.totem figcaption{justify-content:space-between;flex-wrap:wrap;margin-top:22px;opacity:.85;text-align:left}
.totem figcaption a{color:var(--sala);text-decoration:none;border-bottom:2px solid currentColor}
@media (max-width:820px){.totem .gioca{display:none}}
/* parete: illustrazioni panoramiche in fila */
.parete{max-width:none;padding-inline:0;gap:16px}
.parete h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,88px);line-height:.9;margin:0 auto;max-width:1500px;width:100%;padding-inline:var(--gutter);color:var(--accento)}
.striscia{display:flex;overflow-x:auto;height:clamp(220px,50vh,540px);cursor:grab;scrollbar-width:thin;scrollbar-color:var(--ink) transparent;border-block:2px solid var(--ink);background:var(--ink)}
.striscia.presa{cursor:grabbing}
.striscia img{height:100%;width:auto;max-width:none;flex:none;cursor:inherit;user-select:none;-webkit-user-drag:none}
.striscia img:hover{transform:none}
.parete figcaption{padding-inline:var(--gutter)}
.parete .scorri{margin-left:auto;opacity:1;color:var(--accento)}
.chiaro .parete h2 span{background:linear-gradient(transparent 58%,var(--sala) 58%,var(--sala) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pd.larga{grid-template-columns:minmax(0,1fr);justify-items:start}
.pd.larga .prima{width:min(100%,560px)}
.pd.larga .freccia{rotate:90deg;justify-self:start;margin-left:clamp(40px,8vw,140px)}
.pd.larga .dopo{width:100%}
/* quadri: piccoli loop in fila */
.quadri h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,88px);line-height:.9;margin:0;max-width:15ch;color:var(--accento)}
.quadri ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(10px,2vw,28px)}
.quadri li{display:grid;gap:10px}
.quadri video,.quadri img{width:100%;aspect-ratio:1;object-fit:cover;background:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--sala);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.quadri li:nth-child(odd) :is(video,img){transform:rotate(-2deg)}
.quadri li:nth-child(even) :is(video,img){transform:rotate(2deg)}
.quadri li:hover :is(video,img){transform:rotate(0) scale(1.06)}
.quadri img{cursor:zoom-in}
.quadri span{font-family:var(--f-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;opacity:.75}
@media (max-width:820px){.quadri ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* prompt: prima e dopo */
.prompt{gap:clamp(36px,5vw,72px)}
.prompt h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,88px);line-height:.9;margin:0;max-width:15ch;color:var(--accento)}
.prompt .sotto{margin:-.4em 0 0;max-width:46ch;font-size:clamp(18px,1.8vw,24px);line-height:1.35}
.pd{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.5fr);gap:clamp(14px,2.4vw,36px);align-items:center}
.pd .prima{transform:rotate(-2deg)}
.pd:nth-of-type(even) .prima{transform:rotate(2deg)}
.pd code{display:block;font-family:var(--f-mono);font-size:12.5px;line-height:1.5;background:var(--ink);color:var(--paper);padding:12px 14px;border-left:6px solid var(--sala)}
.pd code b{color:var(--sala);font-weight:500}
.pd .prima img{box-shadow:8px 8px 0 var(--ink)}
.pd .freccia{font-family:var(--f-display);font-size:clamp(40px,6vw,90px);color:var(--accento);line-height:1}
@media (max-width:820px){.pd{grid-template-columns:minmax(0,1fr)}.pd .freccia{rotate:90deg;justify-self:center}}
@media (prefers-reduced-motion:reduce){
  .bollo svg,.nastro-in{animation:none}
  figure{will-change:auto}
  .cur{display:none!important}
}

/* quiz: domande vere, si risponde cliccando */
.quiz{max-width:980px}
.quiz h2{font-family:var(--f-display);font-weight:400;font-size:clamp(36px,6vw,88px);line-height:.9;margin:0 0 .3em;color:var(--accento)}
.quiz .sotto{font-family:var(--f-mono);font-size:13px;opacity:.75;margin:0 0 clamp(20px,3vw,36px);max-width:60ch}
.quiz .qd{border:2px solid var(--ink);background:#fff;box-shadow:8px 8px 0 var(--sala);margin:0 0 clamp(20px,3vw,32px);padding:clamp(16px,2.4vw,28px)}
.quiz legend{font-weight:600;font-size:clamp(17px,1.6vw,21px);padding:0 .4em;background:var(--paper)}
.quiz legend b{font-family:var(--f-mono);font-weight:500;background:var(--ink);color:var(--paper);padding:0 .45em;margin-right:.3em}
.quiz .scena{margin:.2em 0 1em;opacity:.8;max-width:65ch}
.quiz .opz{display:grid;gap:8px}
.quiz .opz button{text-align:left;border:2px solid var(--ink);background:var(--paper);padding:10px 14px;cursor:pointer;transition:transform .2s,background .2s}
.quiz .opz button:hover{transform:translateX(4px)}
.quiz .fatto .opz button{cursor:default;transform:none;opacity:.55}
.quiz .opz button.giusta{background:#00e676;opacity:1}
.quiz .opz button.sbagliata{background:#ff3a12;color:var(--paper);opacity:1}
.quiz .perche{margin:1em 0 0;font-family:var(--f-mono);font-size:14px;line-height:1.5;max-width:65ch}

/* invito a scrivere, per gli oggetti che si possono ancora avere */
.cta{justify-items:center;text-align:center;gap:14px;padding-block:clamp(24px,4vw,56px)}
.cta a{display:inline-block;font-family:var(--f-display);font-weight:400;font-size:clamp(40px,8vw,120px);line-height:.9;text-decoration:none;color:var(--ink);
  background:var(--sala);padding:.18em .32em .22em;box-shadow:10px 10px 0 var(--ink);transform:rotate(-2deg);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cta a span{display:inline-block;transition:transform .25s}
.cta a:hover{transform:rotate(1deg) scale(1.03)}
.cta a:hover span{transform:translateX(.15em)}
.cta p{margin:0;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em;opacity:.75}

/* scorrevole: una parete lunga che passa di lato */
.blocco.scorre{max-width:none;padding:0;display:block;position:relative;min-width:0;width:100%;contain:inline-size}
.scorre .pista{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;gap:clamp(10px,2vh,20px);padding:calc(env(safe-area-inset-top,0px) + 76px) 0 clamp(16px,3vh,32px);grid-template-columns:minmax(0,1fr)}
.sc-testa{padding-inline:var(--gutter);display:flex;flex-wrap:wrap;gap:6px 28px;align-items:baseline}
.sc-testa h2{font-family:var(--f-display);font-weight:400;font-size:clamp(32px,5vw,72px);line-height:.9;margin:0;color:var(--accento)}
.sc-testa p{margin:0;max-width:60ch;font-size:15px;opacity:.8}
.sc-nastro{min-height:0;min-width:0;display:flex;align-items:center;padding-inline:max(var(--gutter),16px)}
.sc-img{position:relative;height:min(62vh,calc(100vw * .42));height:min(62svh,calc(100vw * .42));flex:none;will-change:transform;box-shadow:12px 12px 0 var(--ink);background:#fff}
.sc-img img{height:100%;width:auto;max-width:none;cursor:zoom-in}
.sc-metri{list-style:none;margin:0;padding:0;position:absolute;left:0;right:0;top:100%;height:22px;border-top:2px solid var(--ink)}
.sc-metri li{position:absolute;top:0;width:0;height:8px;border-left:2px solid var(--ink)}
.sc-metri li span{position:absolute;top:9px;left:0;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px}
.sc-conta{padding-inline:var(--gutter);padding-top:22px;font-family:var(--f-mono);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.sc-conta b{font-family:var(--f-display);font-weight:400;font-size:clamp(28px,4vw,48px);letter-spacing:0;color:var(--accento);font-variant-numeric:tabular-nums;margin-right:6px}
.scorre.statico .pista{position:static;height:auto}
.scorre.statico .sc-nastro{overflow-x:auto;padding-bottom:30px}
.scorre.statico .sc-conta{display:none}
@media (max-width:760px){.sc-img{height:46vh;height:46svh}}