:root{
  --bg:#141220; --bg2:#1b1830; --panel:#221e39; --panel2:#2a2544;
  --ink:#ece6d9; --muted:#9b93a8; --faint:#6f677f;
  --amber:#f0a55a; --amber-soft:#f6c58d;
  --rust:#e07a55; --cypress:#84b48c;
  --line:rgba(236,230,217,.10); --line2:rgba(236,230,217,.06);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
img{max-width:100%}
::selection{background:var(--amber); color:#221a10}
:focus-visible{outline:2px solid var(--amber); outline-offset:3px; border-radius:3px}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.eyebrow b{color:var(--amber); font-weight:600}

/* top bar */
header{position:sticky; top:0; z-index:50; background:rgba(20,18,32,.72); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:20px; height:60px}
.brand{font-family:var(--mono); font-weight:600; letter-spacing:.04em; font-size:15px}
.brand .cur{color:var(--amber)}
nav.top{margin-left:auto; display:flex; gap:26px; font-family:var(--mono); font-size:13px; letter-spacing:.03em}
nav.top a{color:var(--muted); transition:color .2s}
nav.top a:hover{color:var(--ink)}
.lang{display:flex; font-family:var(--mono); font-size:12px; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.lang button{background:none; border:0; color:var(--faint); padding:5px 11px; cursor:pointer; font:inherit}
.lang button[aria-pressed=true]{background:var(--amber); color:#221a10; font-weight:600}
@media(max-width:760px){ nav.top{display:none} }

/* hero */
.hero{position:relative; padding:72px 0 40px; overflow:hidden}
.hills{position:absolute; inset:auto 0 0 0; width:100%; height:340px; z-index:0; opacity:.5; pointer-events:none}
.dusk{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 80% at 78% -10%, rgba(240,165,90,.18), transparent 55%),
             radial-gradient(90% 70% at 12% 8%, rgba(224,122,85,.10), transparent 60%)}
.hero .wrap{position:relative; z-index:2}
.hero-grid{display:grid; grid-template-columns:1.35fr .95fr; gap:44px; align-items:center}
@media(max-width:880px){ .hero-grid{grid-template-columns:1fr; gap:30px} }

h1.name{font-family:var(--serif); font-weight:600; letter-spacing:-.01em; font-size:clamp(44px,7vw,78px); line-height:.98; margin:14px 0 6px}
h1.name .alias{color:var(--amber); font-style:italic}
.tagline{font-family:var(--serif); font-size:clamp(19px,2.4vw,24px); color:var(--amber-soft); font-style:italic; margin:0 0 18px}
.bio{max-width:44ch; color:var(--muted); font-size:16.5px; margin:0 0 26px}
.bio b{color:var(--ink); font-weight:600}
.cta{display:flex; flex-wrap:wrap; gap:12px}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:13.5px; padding:12px 18px; border-radius:10px; border:1px solid var(--line); cursor:pointer; transition:.2s}
.btn .arw{transition:transform .2s}
.btn:hover .arw{transform:translateX(3px)}
.btn.primary{background:var(--amber); color:#241a0e; border-color:var(--amber); font-weight:600}
.btn.primary:hover{background:var(--amber-soft)}
.btn.ghost:hover{border-color:var(--amber); color:var(--amber-soft)}

/* portrait + rotating status (signature) */
.portrait{position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 34px 80px -44px rgba(0,0,0,.95); background:#14110c; margin:0}
.portrait img{width:100%; height:auto; display:block}
.status{position:relative; background:var(--panel); border-top:1px solid var(--line); padding:13px 16px}
.status-nav{position:absolute; top:11px; right:12px; display:flex; gap:6px; z-index:4}
.snav{width:24px; height:24px; border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center; font-family:var(--mono); transition:.2s}
.snav:hover{border-color:var(--amber); color:var(--amber)}
.status .lbl{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); display:flex; align-items:center; gap:8px; margin-bottom:7px}
.dot{width:7px; height:7px; border-radius:50%; background:var(--cypress); box-shadow:0 0 0 3px rgba(132,180,140,.18)}
.pstage{position:relative; height:54px}
.pslide{position:absolute; inset:0; opacity:0; transform:translateY(6px); transition:opacity .5s, transform .5s; display:flex; flex-direction:column; gap:1px; font-family:var(--mono); font-size:13px; color:inherit; text-decoration:none; pointer-events:none}
.pslide.on{opacity:1; transform:none; pointer-events:auto}
.pslide.on:hover .val{text-decoration:underline; text-underline-offset:3px}
.pslide .kind{font-size:10.5px; letter-spacing:.03em}
.pslide .val{color:var(--ink); font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.pslide .meta{font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; margin-top:1px}
.k-code{color:var(--cypress)} .k-music{color:var(--rust)} .k-video{color:var(--rust)} .k-note{color:var(--amber)}
.ticks{display:flex; gap:5px; margin-top:9px}
.tick{flex:1; height:2px; border-radius:2px; background:var(--line); overflow:hidden}
.tick i{display:block; height:100%; width:0; background:var(--amber)}
.tick.active i{animation:fill 5s linear forwards}
@keyframes fill{from{width:0}to{width:100%}}

/* section frame */
section.block{padding:60px 0; border-top:1px solid var(--line2); position:relative}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px}
.sec-head h2{font-family:var(--serif); font-weight:600; font-size:clamp(26px,3.6vw,38px); margin:6px 0 0; letter-spacing:-.01em}
.sec-head .side{font-family:var(--mono); font-size:12.5px; color:var(--muted)}
.rail{display:flex; align-items:center; gap:10px}
.rail .navbtn{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; font-size:15px; transition:.2s}
.rail .navbtn:hover{border-color:var(--amber); color:var(--amber)}
.accent-code h2 span, .accent-code .eyebrow b{color:var(--cypress)}
.accent-music h2 span, .accent-music .eyebrow b{color:var(--rust)}

/* cards / carousel */
.track{display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 2px 14px; scrollbar-width:thin; scrollbar-color:var(--panel2) transparent}
.track::-webkit-scrollbar{height:8px}
.track::-webkit-scrollbar-thumb{background:var(--panel2); border-radius:4px}
.card{position:relative; scroll-snap-align:start; flex:0 0 300px; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .25s, border-color .25s; display:flex; flex-direction:column}
.card:hover{transform:translateY(-4px)}
.card-cover{position:absolute; inset:0; z-index:1}          /* tutta la card apre la demo */
.card-body h3{overflow-wrap:anywhere}
.card-foot .repo-link{position:relative; z-index:2; color:var(--faint); transition:color .2s}
.card-foot .repo-link:hover{color:var(--cypress)}
.accent-code .card:hover{border-color:rgba(132,180,140,.5)}
.accent-music .card:hover{border-color:rgba(224,122,85,.5)}
.thumb{height:130px; position:relative; display:flex; align-items:center; justify-content:center}
.thumb .mono-badge{position:absolute; top:10px; left:12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:rgba(255,255,255,.72)}
.thumb .glyph{font-size:40px}
.thumb .star{position:absolute; top:10px; right:12px; font-family:var(--mono); font-size:12px; color:var(--amber-soft)}
.card-body{padding:15px 16px 17px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-body h3{font-family:var(--serif); font-size:19px; margin:0; font-weight:600}
.card-body p{margin:0; font-size:13.5px; color:var(--muted); flex:1}
.card-foot{display:flex; align-items:center; gap:14px; margin-top:6px; font-family:var(--mono); font-size:12px; color:var(--faint)}
.card-foot .go{margin-left:auto; color:var(--amber); font-weight:600}

.cats{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.cat{font-family:var(--mono); font-size:12.5px; padding:7px 13px; border-radius:999px; border:1px solid var(--line); color:var(--muted); cursor:pointer; transition:.2s}
.cat:hover{border-color:var(--cypress); color:var(--cypress)}

/* repos */
.repos{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
@media(max-width:720px){ .repos{grid-template-columns:1fr} }
.repo{display:flex; gap:14px; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:15px 17px; transition:.2s}
.repo:hover{border-color:rgba(132,180,140,.5); transform:translateY(-2px)}
.repo .rname{font-family:var(--mono); font-size:14.5px; color:var(--ink)}
.repo .rdesc{font-size:13px; color:var(--muted); margin-top:3px}
.repo .stars{margin-left:auto; font-family:var(--mono); font-size:13px; color:var(--amber); white-space:nowrap}
.repo .lang{font-family:var(--mono); font-size:11.5px; color:var(--faint)}

/* music */
.music-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
@media(max-width:820px){ .music-grid{grid-template-columns:1fr} }
.album{background:linear-gradient(160deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:16px; padding:22px}
.album .cover{aspect-ratio:1; border-radius:12px; margin-bottom:16px; position:relative; overflow:hidden; background:linear-gradient(160deg,#2c2740,#191527); display:flex; align-items:flex-end; padding:18px}
.album .cover::before{content:""; position:absolute; inset:0; background:radial-gradient(70% 60% at 30% 18%, rgba(224,122,85,.35), transparent 60%), radial-gradient(60% 50% at 80% 90%, rgba(240,165,90,.22), transparent 60%)}
.album .cover .ctitle{position:relative; font-family:var(--serif); font-style:italic; font-size:23px; line-height:1.1}
.album .cover.has-img{background-size:cover; background-position:center}
.album .cover.has-img::before{background:linear-gradient(180deg, transparent 42%, rgba(11,9,16,.82))}
.album .meta{font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:16px}
.tracklist{list-style:none; margin:0; padding:0}
.tracklist .trk{border-bottom:1px solid var(--line2)}
.trk-line{display:flex; align-items:center; gap:12px; padding:8px 0; font-size:14px}
.trk-line .n{font-family:var(--mono); font-size:12px; color:var(--rust); width:20px; flex:none}
.trk-title{flex:1; color:inherit; text-decoration:none}
.trk-title:hover{text-decoration:underline; text-underline-offset:2px}
.trk-testo{flex:none; font-family:var(--mono); font-size:11px; color:var(--faint); background:none; border:1px solid var(--line); border-radius:6px; padding:3px 9px; cursor:pointer; transition:.2s}
.trk-testo:hover{border-color:var(--rust); color:var(--rust)}
.trk-lyrics{margin:0 0 12px 32px; padding-left:14px; border-left:2px solid var(--line); font-size:13.5px; color:var(--muted); line-height:1.75}
.trk-lyrics .sec{display:block; margin-top:12px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--rust)}
.trk-lyrics .sec:first-child{margin-top:0}

/* videos */
.vgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
@media(max-width:820px){ .vgrid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .vgrid{grid-template-columns:1fr} }
.video{border:1px solid var(--line); border-radius:13px; overflow:hidden; background:var(--panel); transition:.2s; display:block}
.video:hover{border-color:rgba(224,122,85,.5); transform:translateY(-3px)}
.video .vthumb{aspect-ratio:16/10; position:relative; display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#2b2640,#181425); overflow:hidden}
.video .vthumb img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:.85}
.video .vthumb .play{position:relative; z-index:2; width:46px; height:46px; border-radius:50%; background:rgba(224,122,85,.92); display:flex; align-items:center; justify-content:center; color:#241109; font-size:16px}
.video .vmeta{padding:12px 14px}
.video .vmeta h4{margin:0; font-family:var(--serif); font-size:16px; font-weight:600}
.video .vmeta .vd{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:5px; display:flex; gap:10px}

/* notes strip */
.notes{display:flex; align-items:center; gap:26px; background:linear-gradient(120deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:18px; padding:28px 30px}
@media(max-width:720px){ .notes{flex-direction:column; align-items:flex-start; gap:16px} }
.notes .nt{flex:1}
.notes h3{font-family:var(--serif); font-size:25px; margin:2px 0 6px; font-weight:600}
.notes p{margin:0; color:var(--muted); font-size:14.5px}

/* about / chi sono */
.about-grid{display:grid; grid-template-columns:230px 1fr; gap:36px; align-items:start}
@media(max-width:760px){ .about-grid{grid-template-columns:1fr; gap:22px} }
.about-figure{display:flex; flex-direction:column; gap:16px; position:sticky; top:80px}
@media(max-width:760px){ .about-figure{position:static} }
.about-figure img{width:100%; border-radius:14px; border:1px solid var(--line); display:block}
.about-figure>img{aspect-ratio:1; object-fit:cover}
.about-figure .about-wide{aspect-ratio:1; object-fit:cover}
.about-surf{margin:0}
.about-surf figcaption{margin-top:9px; font-family:var(--serif); font-style:italic; font-size:13px; line-height:1.55; color:var(--muted)}
.about-body{max-width:64ch; color:var(--muted); font-size:16px; line-height:1.7}
.about-body p{margin:0 0 15px}
.about-body b{color:var(--ink); font-weight:600}
.about-body a{color:var(--amber); text-decoration:none}
.about-body a:hover{text-decoration:underline}
.about-body p:last-child{margin-top:20px; padding-top:18px; border-top:1px solid var(--line2); color:var(--amber-soft); font-family:var(--serif); font-style:italic; font-size:18.5px; line-height:1.5}
.inspir{margin-top:26px; padding-top:20px; border-top:1px solid var(--line2); display:flex; flex-direction:column; gap:14px}
.ins-row{display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.ins-lbl{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); flex:none; padding-top:5px}
.ins-chips{display:flex; flex-wrap:wrap; gap:8px}
.ins-chip{font-family:var(--mono); font-size:12px; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 11px; transition:.2s}
.ins-chip:hover{border-color:var(--amber); color:var(--ink)}

/* footer */
footer{border-top:1px solid var(--line); padding:44px 0 60px; margin-top:20px}
.foot{display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center}
.social{display:flex; gap:10px; flex-wrap:wrap}
.social a{font-family:var(--mono); font-size:12.5px; padding:8px 12px; border:1px solid var(--line); border-radius:9px; color:var(--muted); transition:.2s}
.social a:hover{border-color:var(--amber); color:var(--amber)}
.colophon{font-family:var(--mono); font-size:12px; color:var(--faint); max-width:44ch}
.colophon b{color:var(--muted)}
.updated{margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--faint)}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .slide,.pslide{transition:opacity .001s}
}