:root{
  --bg:#070b14; --bg2:#0d1422; --ink:#e8e2d3; --mute:#a8a49b; --line:#1d2740; --accent:#c9b98a;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif; --sans:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-size:1.25rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;height:auto}

.top{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,3rem);background:linear-gradient(var(--bg),transparent);font-family:var(--sans);font-size:.85rem;letter-spacing:.04em}
.brand{text-decoration:none;letter-spacing:.35em;text-transform:uppercase;font-size:.78rem}
.top nav{display:flex;gap:1.4rem;align-items:center}
.top nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.top nav a:hover{color:var(--ink)}
.cta-small{border:1px solid var(--accent);padding:.35rem .9rem;border-radius:2rem;color:var(--ink)!important}
@media (max-width:720px){.top nav > a:not(.cta-small){display:none}}

/* hero */
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6rem 1.5rem 4rem;position:relative;overflow:hidden}
.hero .bg{position:absolute;inset:0;z-index:0;background:#05080f;filter:grayscale(1)}
.hero .bg canvas,#regia{position:absolute;inset:0;width:100%;height:100%}
.hero .bg canvas{object-fit:cover;opacity:.32;mix-blend-mode:screen;filter:blur(1.4px)}
.hero.con-video .bg canvas{opacity:.1}
#regia{overflow:hidden}
#regia .rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity 1.2s ease}
#regia .rv.on{opacity:.62}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,#05080f55 10%,#05080fee 100%),linear-gradient(#05080f99,transparent 35%,#05080fdd)}
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.statement{position:absolute;z-index:1;left:clamp(1.2rem,4vw,3rem);bottom:clamp(2.2rem,6vh,4rem);max-width:28ch;margin:0;text-align:left;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(.78rem,1.6vw,.95rem);line-height:1.6;color:var(--ink);text-shadow:0 1px 8px #000}
.cursor{display:inline-block;width:.55em;height:1.05em;margin-left:.2em;vertical-align:-.15em;background:var(--ink);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
@media (max-width:640px){.statement{bottom:5.5rem}}
.dots{display:flex;gap:clamp(1.6rem,5vw,3.2rem);margin-bottom:clamp(2rem,6vh,4rem)}
.dots i{display:block;width:clamp(44px,7vw,78px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#8d8a83,#5a5852);opacity:.25;animation:type 3.4s infinite ease-in-out}
.dots i:nth-child(1){animation-delay:0s}
.dots i.eye{animation-delay:.3s;background:radial-gradient(circle,#05070d 0 14%,#cfd3da 15% 22%,#77808e 38%,#4b5360 70%)}
.dots i:nth-child(3){animation-delay:.6s}
@keyframes type{0%,70%,100%{opacity:.3;transform:none}35%{opacity:.85;transform:translateY(-3px)}}
.hero h1{font-weight:400;font-size:clamp(2.8rem,9vw,6.4rem);line-height:1.02;margin:0;letter-spacing:-.01em}
.hero h1 span{display:inline-block;opacity:0;transform:translateY(24px);animation:rise .9s forwards cubic-bezier(.2,.7,.2,1)}
.hero h1 span:nth-child(1){animation-delay:.15s}
.hero h1 span:nth-child(2){animation-delay:.3s}
.sub{font-style:italic;color:var(--mute);font-size:clamp(1.15rem,3vw,1.7rem);margin:1.6rem 0 0;opacity:0;animation:rise .9s .6s forwards}
.byline{letter-spacing:.5em;text-transform:uppercase;font-size:.85rem;margin-top:3rem;opacity:0;animation:rise .9s .8s forwards}
.scroll{position:absolute;z-index:1;right:clamp(1.2rem,4vw,3rem);bottom:2rem;font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);text-decoration:none;opacity:0;animation:rise .9s 1.1s forwards}
.scroll::after{content:"";display:block;width:1px;height:38px;margin:.6rem auto 0;background:linear-gradient(var(--mute),transparent)}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

section{padding:clamp(4rem,10vw,8rem) clamp(1.2rem,5vw,3rem)}
.intro,.fonti,.estratto,.notizie,.autore{max-width:760px;margin:0 auto}
.lead{font-size:clamp(1.4rem,3.2vw,1.9rem);line-height:1.5}
h2{font-weight:400;font-size:clamp(2rem,5vw,3.2rem);margin:0 0 1rem;line-height:1.1}
.muted{color:var(--mute)}
.small{font-family:var(--sans);font-size:.78rem;color:var(--mute);margin-top:1.4rem}
.section-note{color:var(--mute);margin-bottom:3rem}

/* cards */
.storie{max-width:1180px;margin:0 auto}
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cards li{background:var(--bg);padding:1.7rem 1.5rem 1.9rem;position:relative;transition:background .35s;opacity:0;transform:translateY(18px);transition:opacity .8s,transform .8s,background .35s}
.cards li.in{opacity:1;transform:none}
.cards li:hover{background:var(--bg2)}
.cards .n{font-family:var(--sans);font-size:.72rem;letter-spacing:.25em;color:var(--accent)}
.cards h3{font-weight:400;font-size:1.6rem;line-height:1.15;margin:.5rem 0 .6rem}
.cards p{margin:0;font-size:1.05rem;color:var(--mute);line-height:1.5}

.fonti{text-align:center}
blockquote{margin:0 0 1.5rem;font-style:italic;font-size:clamp(1.7rem,4.5vw,2.8rem);line-height:1.25;color:var(--ink)}
.fonti p{color:var(--mute)}

.leggi{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:clamp(2rem,5vw,4rem);align-items:center;max-width:900px;margin:0 auto}
.leggi img{border-radius:3px;box-shadow:0 30px 80px #000a,0 0 0 1px var(--line);transform:rotate(-1.5deg);transition:transform .6s}
.leggi img:hover{transform:rotate(0) scale(1.02)}
.buy{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.btn{font-family:var(--sans);font-size:.95rem;text-decoration:none;padding:.85rem 1.5rem;border-radius:3rem;background:var(--ink);color:var(--bg);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px #c9b98a33}
.btn.ghost{background:none;color:var(--ink);border:1px solid var(--accent)}
@media (max-width:700px){.leggi{grid-template-columns:1fr;text-align:center}.leggi img{margin:0 auto;max-width:240px}.buy{justify-content:center}}

.autore{text-align:center;font-size:1.1rem;border-top:1px solid var(--line)}
footer{padding:2rem 1.2rem 3rem;text-align:center;font-family:var(--sans);font-size:.78rem;color:var(--mute)}

.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s,transform 1s}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .hero h1 span,.sub,.byline,.scroll,.reveal,.cards li{opacity:1!important;transform:none!important}
  .dots i{opacity:.7}
}

/* ingresso alla sala 3D */
.enter{position:absolute;z-index:1;left:50%;bottom:2.2rem;transform:translateX(-50%);font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid var(--accent);padding:.7rem 1.3rem;border-radius:3rem;background:#05080f99;backdrop-filter:blur(4px);opacity:0;animation:rise .9s 1.3s forwards;transition:background .2s,color .2s}
.enter:hover{background:var(--ink);color:var(--bg)}
@media (max-width:640px){.enter{bottom:1.2rem;font-size:.72rem}}

@media (max-height:520px){.statement{display:none}}

/* selettore di lingua */
.lang{display:inline-flex;gap:.15rem;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.72rem;letter-spacing:.08em}
.lang a{padding:.25rem .4rem;color:var(--mute);text-decoration:none;border-radius:.3rem}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{color:var(--ink);box-shadow:inset 0 -1px 0 var(--accent)}