/* DEAD STOCK — CHI SIAMO: il magazzino */
@font-face{font-family:"SH";src:url(fonts/ShaperLine-Regular.woff2) format("woff2");font-weight:100 600;font-display:swap}
@font-face{font-family:"SH";src:url(fonts/ShaperLine-Bold.woff2) format("woff2");font-weight:700 900;font-display:swap}
:root{--ink:#0c0c0c;--paper:#efe7d6;--white:#f6f3ec;--grey:#8e8a82;--red:#d23a2e;--f:"SH","Arial Narrow",sans-serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--white);font:400 16px/1.4 var(--f);letter-spacing:.06em;overflow-x:hidden}
a{color:inherit} button{font:inherit;color:inherit;cursor:pointer} img{display:block}

/* televideo */
.ttx{position:fixed;top:0;left:0;right:0;z-index:40;height:36px;display:flex;align-items:center;gap:14px;padding:0 14px;background:#000;font-weight:700;letter-spacing:.12em;font-size:16px;border-bottom:1px solid #222}
.ttx-back{text-decoration:none}.ttx-back:hover{color:#2fb8c4}
.ttx-name{background:#2fb8c4;color:#000;padding:3px 10px 1px;white-space:nowrap}
.ttx-hint{color:#e8d04a;animation:blk 1.2s steps(2) infinite}
@keyframes blk{50%{opacity:0}}
.lang{margin-left:auto;display:flex;border:2px solid var(--white)}
.lang a{padding:3px 9px 1px;font-weight:700;letter-spacing:.1em;font-size:14px;text-decoration:none}
.lang a[aria-current]{background:var(--white);color:#000}

/* stanza */
.room{position:relative;height:calc(100svh - 36px);min-height:480px;margin-top:36px;overflow:hidden;background:#0b0b0b}
.room::before{content:"";position:absolute;inset:-40px;background:url(img/magazzino.jpg) center/cover;filter:blur(26px) brightness(.35) saturate(.8)}
.track{position:absolute;inset:0;overflow:hidden}
.stage{position:absolute;left:0;top:0;width:1670px;height:942px;transform-origin:0 0}
.photo{position:absolute;inset:0;width:1670px;height:942px;user-select:none;-webkit-user-drag:none}
/* la lampadina: luce che ogni tanto sfarfalla, al clic si spegne */
.glow{position:absolute;left:670px;top:-160px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,190,110,.22),rgba(255,170,80,.08) 40%,transparent 68%);mix-blend-mode:screen;pointer-events:none;animation:flick 9s infinite}
@keyframes flick{0%,86%,100%{opacity:1}87%{opacity:.25}88%{opacity:1}89.5%{opacity:.4}90.5%{opacity:1}}
.shade{position:absolute;inset:0;background:radial-gradient(ellipse at 58% 10%,rgba(0,0,0,.5),rgba(0,0,0,.82) 70%);opacity:0;pointer-events:none;transition:opacity .35s}
.stage.off .shade{opacity:1}
.stage.off .glow{opacity:0;animation:none}

/* oggetti */
.hot{position:absolute;display:block;padding:0;border:0;background:none;border-radius:8px;cursor:pointer;text-decoration:none;color:var(--ink)}
.hot:focus{outline:none}
.obj-glow{position:absolute;max-width:none;opacity:0;transition:opacity .25s;pointer-events:none;filter:drop-shadow(0 0 12px rgba(255,190,110,.45))}
.hot:hover .obj-glow,.hot:focus-visible .obj-glow,.hot.on .obj-glow,.stage.hint .obj-glow{opacity:1}
.stage.hint .obj-glow{animation:hint 2.6s ease-in-out}
@keyframes hint{0%,100%{opacity:0}30%,60%{opacity:.9}}
.room.street::before{background-image:url(img/strada.jpg)}
.tag{position:absolute;left:50%;top:100%;transform:translate(-50%,8px) rotate(-2deg);background:var(--paper);color:var(--ink);font-weight:700;font-size:16px;letter-spacing:.12em;padding:4px 10px 2px;white-space:nowrap;box-shadow:0 3px 6px rgba(0,0,0,.5);opacity:0;transition:opacity .2s;pointer-events:none;z-index:5}
.tag.up{top:auto;bottom:100%;transform:translate(-50%,-8px) rotate(-2deg)}
.hot:hover .tag,.hot:focus-visible .tag,.hot.on .tag{opacity:1}

/* cartellino */
.card{position:fixed;z-index:60;right:24px;top:60px;width:min(420px,calc(100vw - 24px));max-height:calc(100svh - 84px);overflow:auto;
  background:var(--paper);color:var(--ink);border-radius:4px;padding:30px 24px 22px;box-shadow:0 24px 50px rgba(0,0,0,.7);transform:rotate(-1deg);animation:cardIn .4s cubic-bezier(.2,.9,.2,1)}
.card[hidden]{display:none}
.card.left{right:auto;left:24px;transform:rotate(1deg)}
.card::before{content:"";position:absolute;top:10px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 4px #3a3a3a}
@keyframes cardIn{from{transform:rotate(-6deg) translateY(30px);opacity:0}}
.card-x{position:absolute;top:8px;right:10px;background:none;border:0;font-size:22px;color:var(--ink);padding:4px 8px}

/* testi (nel cartellino e nel diario sotto la stanza) */
.txt h2{margin:0 0 12px;font-weight:700;font-size:30px;line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.txt h3{margin:16px 0 4px;font-weight:700;font-size:19px;letter-spacing:.12em;text-transform:uppercase}
.txt p,.txt li{font-family:var(--sans);letter-spacing:0;font-size:16px;line-height:1.55;margin:0 0 12px}
.txt .kick{font-family:var(--f);font-weight:700;font-size:14px;letter-spacing:.22em;color:var(--red);margin:0 0 4px;text-transform:uppercase}
.txt .big{font-family:var(--f);font-weight:700;font-size:21px;line-height:1.15;letter-spacing:.06em;text-transform:uppercase}
.txt .red{color:var(--red)}
.txt ol,.txt ul{padding-left:0;list-style:none;margin:0 0 12px}
.txt ol li{padding:10px 0 8px;border-top:2px dashed #b9ae93}
.txt ol li b{display:block;font-family:var(--f);font-size:20px;letter-spacing:.1em;text-transform:uppercase}
.txt ol li b span{color:var(--red)}
.txt .roots{display:flex;flex-wrap:wrap;gap:6px}
.txt .roots li{margin:0;padding:3px 9px 1px;border:2px solid currentColor;font-family:var(--f);font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.txt .mani li{font-family:var(--f);font-weight:700;font-size:20px;line-height:1.15;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px}
.txt .mani li:nth-child(3n){color:var(--red)}
.txt details{border-top:2px dashed #b9ae93;padding:9px 0}
.txt details:last-of-type{border-bottom:2px dashed #b9ae93}
.txt summary{cursor:pointer;font-family:var(--f);font-weight:700;font-size:17px;letter-spacing:.08em;text-transform:uppercase;list-style:none;display:flex;justify-content:space-between;gap:10px}
.txt summary::-webkit-details-marker{display:none}
.txt summary::after{content:"+";color:var(--red)}
.txt details[open] summary::after{content:"–"}
.txt details p{margin:8px 0 2px}
.txt a{text-decoration-color:var(--red);text-underline-offset:3px}
.go{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.go a{padding:7px 12px 4px;border:2px solid currentColor;font-family:var(--f);font-weight:700;font-size:15px;letter-spacing:.14em;text-decoration:none;text-transform:uppercase}
.go a:hover{background:var(--ink);color:var(--paper)}

/* il diario: tutti i testi, leggibili anche senza cliccare */
.diary{max-width:780px;margin:0 auto;padding:56px 20px 30px}
.diary h1{margin:0 0 6px;font-weight:700;font-size:clamp(30px,5vw,46px);line-height:1.05;letter-spacing:.06em;text-transform:uppercase}
.diary .lead{margin:0 0 34px;color:var(--grey);font-weight:700;letter-spacing:.16em;font-size:15px}
.diary article{padding:26px 0;border-top:1px solid #2a2a2a}
.diary .txt p,.diary .txt li{color:#ddd8cd}
.diary .txt .mani li{color:var(--white)}
.diary .txt .mani li:nth-child(3n){color:var(--red)}
.diary .txt ol li,.diary .txt details{border-color:#3a3833}
.diary .go a:hover{background:var(--paper);color:var(--ink)}
.diary .rip{text-align:center}
.diary .rip .r{display:block;font-weight:700;font-size:64px;line-height:1;color:var(--red)}

.pan{display:none}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:20px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid #222;font-weight:700;font-size:14px;letter-spacing:.2em;color:var(--grey)}
.foot a{text-decoration:none}.foot a:hover{color:var(--white)}
.foot .legal{color:#6f6b64}

@media (max-width:860px){
  .ttx{gap:8px;font-size:13px;padding:0 10px}.ttx-hint{display:none}
  .room{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
  .room::before{display:none}
  .room::-webkit-scrollbar{display:none}
  .track{position:relative;inset:auto}
  .tag{font-size:22px}
  .pan{display:block;position:fixed;left:0;top:calc(100svh - 44px);z-index:20;width:100vw;margin:0;text-align:center;font-weight:700;font-size:13px;letter-spacing:.2em;text-shadow:0 1px 4px #000;pointer-events:none;transition:opacity .4s}
  .pan.gone{opacity:0}
  .card,.card.left{left:0;right:0;top:auto;bottom:10px;margin:0 auto;transform:none;max-height:calc(100svh - 70px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.txt .r{color:var(--red)}
.txt .say{font-family:var(--sans);letter-spacing:0;font-size:19px;line-height:1.5;font-weight:600}

/* radio */
.radio{position:fixed;right:18px;bottom:18px;z-index:60;width:min(300px,calc(100vw - 24px));max-height:calc(100svh - 60px);overflow:auto;background:#141414;border-radius:16px;padding:14px 16px 14px;box-shadow:0 0 0 1px #333,0 24px 50px rgba(0,0,0,.75);animation:radioIn .35s cubic-bezier(.2,.9,.2,1);scrollbar-width:none}
.radio[hidden]{display:none}
@keyframes radioIn{from{transform:translateY(30px);opacity:0}}
.radio-head{display:flex;align-items:center;gap:10px;padding:0 2px 8px;margin-bottom:10px;border-bottom:2px solid #d23a2e;font-weight:700;letter-spacing:.16em;font-size:14px}
.radio-led{width:9px;height:9px;border-radius:50%;background:#ff3b2e;box-shadow:0 0 8px #ff3b2e}
.radio.playing .radio-led{animation:blk 1.2s steps(2) infinite}
.radio-x{margin-left:auto;background:none;border:0;color:var(--white);font-size:20px;line-height:1;padding:2px 4px}
.radio-x:hover{color:#d23a2e}
.cassette{position:relative;margin:0 0 12px}
.cassette>img:first-child{width:100%;height:auto;border-radius:8px}
.reel{position:absolute;width:15.11%;height:auto;aspect-ratio:1;pointer-events:none;animation:spin 2.4s linear infinite;animation-play-state:paused}
.radio.playing .reel{animation-play-state:running}
@keyframes spin{to{transform:rotate(-360deg)}}
.sp-wrap iframe{display:block;border:0;border-radius:12px;width:100%;max-width:100%;height:352px}
.radio-open{display:block;text-align:center;margin-top:10px;padding:9px 6px 7px;border:2px solid #444;border-radius:10px;font-weight:700;font-size:12px;letter-spacing:.12em;line-height:1.3;color:var(--white);text-decoration:none}
.radio-open:hover{border-color:var(--white)}
.radio-note{margin:8px 0 0;text-align:center;font-size:11px;letter-spacing:.06em;color:#8e8a82}
.foot .legal{color:#6f6b64;text-decoration:none}.foot .legal:hover{color:var(--white)}
@media (max-width:860px){.radio{left:0;right:0;bottom:10px;margin:0 auto;max-width:calc(100vw - 20px);max-height:calc(100svh - 56px);overflow-x:hidden;overflow-y:auto}}

@keyframes spin{to{transform:rotate(-360deg)}}
.sp-wrap iframe{display:block;border:0;border-radius:12px;width:100%;max-width:100%;height:352px}
@keyframes blk{50%{opacity:0}}