/* ============ PORTALE3D — foglio di stile condiviso per le pagine di dettaglio ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Mono',monospace;overflow-x:hidden;background:#07060f;color:#fff}
a{color:inherit;text-decoration:none}
.wrap{max-width:900px;margin:0 auto;padding:0 32px}
.reveal{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.on{opacity:1;transform:none}

/* ============ NAV (identica al portale) ============ */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:58px;background:rgba(7,6,15,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1)}
nav .wrap{max-width:1240px;height:100%;display:flex;align-items:center;justify-content:space-between}
nav .lg{font-family:'Oswald';font-weight:700;font-size:20px;letter-spacing:.04em;color:#fff}
nav .lg b{color:#ff2e2e}
nav .nl{display:flex;gap:4px}
nav .nl a{font-family:'Oswald';font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:8px 13px;color:#bdbdc7;transition:.2s;border-radius:4px}
nav .nl a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav .langsw{display:flex;gap:2px;font-family:'Oswald';font-size:11px;letter-spacing:.08em;margin-left:8px}
nav .langsw a{color:#7a7a86;padding:5px 7px;border-radius:4px;transition:.2s}
nav .langsw a:hover{color:#fff;background:rgba(255,255,255,.08)}
nav .langsw a.on{color:#fff;background:rgba(255,255,255,.12)}
@media(max-width:760px){nav .wrap{padding:0 14px}nav .nl{gap:0}nav .nl a{padding:6px 6px;font-size:10.5px;letter-spacing:.03em}nav .langsw{margin-left:2px}nav .langsw a{padding:5px 5px;font-size:10px}}

/* ============ HERO / STRUTTURA ARTICOLO comune ============ */
.art-hero{padding:118px 0 46px}
.art-crumb{font-family:'Oswald';font-size:12px;letter-spacing:.14em;margin-bottom:22px;display:inline-block;opacity:.85}
.art-crumb:hover{text-decoration:underline}
.art-kick{font-family:'Oswald';font-size:12px;letter-spacing:.24em;margin-bottom:14px}
.art-h1{font-weight:700;line-height:1.04;margin-bottom:18px}
.art-sub{max-width:640px;line-height:1.65;font-size:17.5px}
.art-meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:26px;font-family:'DM Mono';font-size:13px}
.art-meta b{display:block;font-family:'Oswald';font-size:10px;letter-spacing:.14em;opacity:.6;margin-bottom:3px}

.art-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:38px 0}
.art-gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
@media(max-width:700px){.art-gallery{grid-template-columns:1fr}.art-hero{padding:96px 0 34px}}

/* screenshot a piena larghezza, senza crop: altezza libera in proporzione all'immagine reale */
.art-shot{margin:32px 0}
.art-shot img{width:100%;height:auto;display:block}

.art-body{max-width:720px;margin:0 auto;padding:6px 0 54px}
.art-body p{line-height:1.78;font-size:16.5px;margin-bottom:20px}
.art-body h2{font-weight:700;margin:38px 0 14px;font-size:25px}
.art-body ul{margin:0 0 20px 22px}
.art-body li{margin-bottom:9px;line-height:1.6}

.art-tags{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 6px}
.art-tags a{font-family:'Oswald';font-size:12px;letter-spacing:.08em;padding:5px 12px;border:1px solid currentColor;opacity:.8}

.art-ctarow{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:8px 0 44px}
.art-cta{display:inline-block;font-family:'Oswald';font-weight:600;letter-spacing:.1em;font-size:14px;padding:14px 26px;transition:.2s}
.art-cta2{font-family:'Oswald';font-size:13px;letter-spacing:.08em;opacity:.8;border-bottom:1px dashed currentColor}
.art-cta2:hover{opacity:1}

/* ============ THEME ed — software & progetti (editorial dark) ============ */
body.art-ed{background:#0c0f14;color:#e6edf6}
.art-ed .art-crumb{color:#7fa8d8}
.art-ed .art-kick{color:#7fa8d8}
.art-ed .art-h1{font-family:'Bodoni Moda';font-size:clamp(32px,5.4vw,58px)}
.art-ed .art-sub{font-family:'Bodoni Moda';font-size:18px;color:#9aa6b5}
.art-ed .art-meta{color:#9aa6b5;border-top:1px solid rgba(86,112,143,.3);padding-top:18px}
.art-ed .art-meta b{color:#7fa8d8}
.art-ed .art-body{color:#c7d1de}
.art-ed .art-body h2{font-family:'Bodoni Moda';color:#e6edf6}
.art-ed .art-tags a{color:#7fa8d8}
.art-ed .art-cta{background:#7fa8d8;color:#0c0f14}
.art-ed .art-cta:hover{background:#e6edf6}
.art-ed .art-cta2{color:#9aa6b5}
.art-ed .status{display:inline-block;font-family:'Oswald';font-size:11px;letter-spacing:.14em;padding:4px 10px;margin-bottom:16px}
.art-ed .status.on{background:#1f8f4d;color:#fff}
.art-ed .status.demo{background:rgba(0,0,0,.4);border:1px solid rgba(127,168,216,.5);color:#7fa8d8}
.art-ed .art-gallery img{border:1px solid rgba(86,112,143,.3)}
.art-ed .art-shot img{border:1px solid rgba(86,112,143,.3)}

/* ============ THEME gm — giochi (neo-brutal) ============ */
body.art-gm{background:#f5f1e8;color:#0f0f0f}
.art-gm .art-hero{background-image:radial-gradient(#0f0f0f 1.1px,transparent 1.1px);background-size:26px 26px}
.art-gm .art-crumb{color:#0f0f0f}
.art-gm .art-kick{background:#0f0f0f;color:#c8f04b;display:inline-block;padding:5px 12px;letter-spacing:.16em}
.art-gm .art-h1{font-family:'Bricolage Grotesque';font-weight:800;letter-spacing:-.02em;font-size:clamp(34px,6vw,64px)}
.art-gm .art-sub{font-family:'Bricolage Grotesque';font-size:18px}
.art-gm .art-meta{border-top:3px solid #0f0f0f;padding-top:18px}
.art-gm .art-meta b{color:#0f0f0f}
.art-gm .art-gallery img{border:3px solid #0f0f0f}
.art-gm .art-shot img{border:3px solid #0f0f0f}
.art-gm .art-body h2{font-family:'Bricolage Grotesque';font-weight:800}
.art-gm .art-tags a{border:2px solid #0f0f0f}
.art-gm .art-tags a:hover{background:#c8f04b}
.art-gm .art-cta{background:#ff5da2;color:#0f0f0f;border:3px solid #0f0f0f;box-shadow:5px 5px 0 #0f0f0f}
.art-gm .art-cta:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #0f0f0f}
.art-gm .art-cta2{color:#0f0f0f}

/* ============ THEME mu — musica (cyberpunk) ============ */
body.art-mu{background:#07060f;color:#e9e6ff}
.art-mu .art-crumb{color:#16f2ff}
.art-mu .art-kick{font-family:'Chakra Petch';color:#16f2ff}
.art-mu .art-h1{font-family:'Chakra Petch';font-weight:700;text-transform:uppercase;font-size:clamp(30px,6vw,58px)}
.art-mu .art-sub{font-family:'Chakra Petch';color:#a89fd0}
.art-mu .art-meta{color:#a89fd0;border-top:1px solid rgba(22,242,255,.3);padding-top:18px}
.art-mu .art-meta b{color:#16f2ff}
.art-mu .art-video{position:relative;aspect-ratio:16/9;margin:32px 0;border:1px solid rgba(255,43,214,.35);background:#000}
.art-mu .art-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.art-mu .art-body{font-family:'Chakra Petch';color:#c9c3e6}
.art-mu .art-body h2{font-family:'Chakra Petch';color:#fff}
.art-mu .art-tags a{border:1px solid rgba(22,242,255,.45);color:#16f2ff}
.art-mu .art-cta{background:#16f2ff;color:#07060f}
.art-mu .art-cta:hover{background:#ff2bd6;color:#fff}
.art-mu .art-cta2{color:#a89fd0}

/* ============ FOOTER (comune) ============ */
.ft{background:#0c0c0c;color:#fff;padding:68px 0 32px;margin-top:30px}
.ft h2{font-family:'Oswald';font-weight:700;font-size:clamp(28px,5vw,48px);margin-bottom:12px}
.ft p{color:#9a9aa4;max-width:520px;margin-bottom:22px;font-size:15px}
.ft .lk{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.ft .lk a{font-family:'Oswald';letter-spacing:.1em;font-size:13px;border:1px solid rgba(255,255,255,.3);padding:11px 18px;transition:.2s}
.ft .lk a:hover{background:#fff;color:#0c0c0c}
.ft .sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;margin-bottom:44px;padding-top:28px;border-top:1px solid rgba(255,255,255,.14)}
.ft .sitemap h4{font-family:'Oswald';font-weight:600;font-size:12px;letter-spacing:.16em;color:#7a7a82;text-transform:uppercase;margin-bottom:12px}
.ft .sitemap ul{list-style:none}
.ft .sitemap li{margin-bottom:7px}
.ft .sitemap a{font-size:13px;line-height:1.4;color:#c7c7cf;border-bottom:1px solid transparent}
.ft .sitemap a:hover{color:#fff;border-color:#fff}
.ft .bot{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;font-size:12px;color:#7a7a82;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px}
.ft .bot a{margin-left:16px;border-bottom:1px solid transparent}
.ft .bot a:hover{color:#fff;border-color:#fff}