/* site.css — base condivisa delle pagine fatte a mano (Chi sono, Collane, Homelab).
   Valori presi tali e quali dallo stile della home: stessa carta, stesso inchiostro,
   stessi verdi del prompt. La home e le pagine dei volumi hanno ancora il loro
   foglio; questo serve perche' le pagine nuove (e ogni progetto Homelab copiato dal
   modello) non debbano portarsi dietro trecento righe di stile ciascuna.
   Cambiandolo, va cambiata la versione ?v= nelle pagine: /assets/ e' servita
   immutable per trenta giorni. */

:root{
  --bg:#F4F5F2;            /* grigio chiaro caldo, "carta da editor" */
  --panel:#FFFFFF;         /* superficie terminale */
  --bg-alt:#ECEDE8;
  --ink:#1E2228;
  --soft:#6B7178;
  --prompt:#1A8F6B;        /* verde prompt */
  --accent:#16B070;
  --path:#C24A8E;          /* magenta argomenti */
  --kw:#2D6CC4;            /* blu comandi */
  --hairline:rgba(30,34,40,0.10);
  --hairline-strong:rgba(30,34,40,0.16);
  --shadow:0 24px 60px -32px rgba(30,34,40,0.4);
  --wait:#B8892B;          /* ambra: "in arrivo" */
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--bg);}
body{background:transparent;color:var(--ink);font-family:'JetBrains Mono',monospace;font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:var(--accent);color:#fff;}
a{color:inherit;text-decoration:none;}

/* sfondo a piste di circuito, sotto tutto */
#circuito{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;}
@media (prefers-reduced-motion:reduce){#circuito{opacity:0.55;}}
body::before{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0.5;background:repeating-linear-gradient(0deg,rgba(30,34,40,0.015) 0px,rgba(30,34,40,0.015) 1px,transparent 1px,transparent 4px);}

/* ---------- NAV: chi sono · collane · homelab ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:20px 5vw;font-size:12px;letter-spacing:0.04em;color:var(--soft);background:linear-gradient(180deg,rgba(244,245,242,0.96) 0%,rgba(244,245,242,0) 100%);backdrop-filter:blur(4px);}
nav .mark{color:var(--ink);font-weight:700;letter-spacing:0.08em;}
nav .mark .dot{color:var(--accent);}
nav .nav-right{display:flex;gap:26px;align-items:center;}
nav ul{display:flex;gap:24px;list-style:none;}
nav a{transition:color .25s ease;}
nav ul a::before{content:'';color:var(--accent);}
nav ul a:hover,nav ul a[aria-current="page"]{color:var(--accent);}
nav ul a:hover::before,nav ul a[aria-current="page"]::before{content:'~/';}
nav .lang a.active{color:var(--ink);font-weight:500;}
@media (max-width:640px){nav{padding:16px 4vw;}nav .nav-right{gap:10px 14px;flex-wrap:wrap;justify-content:flex-end;}nav ul{gap:12px;}nav ul a{font-size:11px;}}

/* ---------- testata di pagina ---------- */
.phero{max-width:1080px;margin:0 auto;padding:clamp(120px,18vh,170px) 5vw 10px;}
.phero .crumb{font-size:12px;color:var(--soft);margin-bottom:22px;}
.phero .crumb a:hover{color:var(--accent);}
.phero .crumb .sep{margin:0 8px;color:var(--hairline-strong);}
.phero .prompt{font-size:13px;color:var(--soft);margin-bottom:16px;}
.phero .prompt .pr{color:var(--prompt);font-weight:500;}
.phero .prompt .cmd{color:var(--kw);font-weight:500;}
.phero .prompt .arg{color:var(--path);}
.phero h1{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(34px,6vw,64px);line-height:1.05;letter-spacing:-0.01em;}
.phero .lede{font-family:'Fraunces',serif;font-style:italic;font-size:clamp(17px,2.1vw,22px);line-height:1.5;color:var(--soft);margin-top:18px;max-width:58ch;}
.phero .lede em{color:var(--accent);font-style:italic;}

/* ---------- sezioni ---------- */
section{padding:clamp(48px,7vh,80px) 5vw;position:relative;max-width:1080px;margin:0 auto;}
.head{display:flex;align-items:center;gap:12px;margin-bottom:40px;font-size:13px;color:var(--soft);flex-wrap:wrap;}
.head .pr{color:var(--prompt);font-weight:500;}
.head .cmd{color:var(--kw);font-weight:500;}
.head .arg{color:var(--path);}
.head .rule{flex:1;height:1px;background:var(--hairline);min-width:30px;}
.prose{font-family:'Fraunces',serif;font-size:16px;line-height:1.8;color:var(--soft);max-width:64ch;}
.prose p+p{margin-top:16px;}
.prose strong{color:var(--ink);font-weight:500;}
.prose em{color:var(--accent);font-style:normal;}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);}
.reveal.in{opacity:1;transform:translateY(0);}

/* ---------- percorso (Chi sono) ---------- */
.cv{display:grid;}
.cv-item{display:grid;grid-template-columns:132px 1fr;gap:28px;padding:24px 0;border-top:1px solid var(--hairline);}
.cv-item:first-child{border-top:none;padding-top:0;}
.cv-when{font-size:12.5px;color:var(--prompt);font-variant-numeric:tabular-nums;padding-top:6px;}
.cv-body h3{font-family:'Fraunces',serif;font-weight:400;font-size:20px;color:var(--ink);line-height:1.25;}
.cv-body h3 span{color:var(--soft);font-size:13.5px;}
.cv-body p{font-family:'Fraunces',serif;font-size:15px;line-height:1.7;color:var(--soft);margin-top:6px;max-width:64ch;}
@media (max-width:640px){.cv-item{grid-template-columns:1fr;gap:6px;}}

/* ---------- stati: disponibile / in arrivo / in preparazione ---------- */
.stato{display:inline-flex;align-items:center;gap:7px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);}
.stato::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;}
.stato.ok{color:var(--accent);}
.stato.arrivo{color:var(--wait);}
.stato.prep{color:var(--soft);}
.stato.prep::before{background:transparent;border:1.5px solid currentColor;width:5px;height:5px;}

/* ---------- collane ---------- */
.collane{display:grid;gap:22px;}
.collana{background:var(--panel);border:1px solid var(--hairline-strong);border-radius:14px;padding:32px 32px 28px;box-shadow:var(--shadow);}
.collana.prep{background:transparent;box-shadow:none;border-style:dashed;}
.collana .ctop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px;}
.collana .cnum{font-size:12px;color:var(--prompt);}
.collana h2,.collana h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(23px,3.2vw,32px);line-height:1.15;color:var(--ink);}
.collana .csub{font-family:'Fraunces',serif;font-style:italic;color:var(--soft);margin-top:8px;font-size:16px;}
.collana .cdesc{font-family:'Fraunces',serif;font-size:15.5px;line-height:1.75;color:var(--soft);margin-top:16px;max-width:64ch;}
.collana .clink{display:inline-flex;gap:8px;margin-top:20px;font-size:13px;font-weight:600;color:var(--ink);}
.collana .clink:hover{color:var(--accent);}

/* le tre collane affiancate (home) e le schede cliccabili */
.collane.tre{grid-template-columns:repeat(3,1fr);}
.collane.tre .collana{padding:26px 24px 24px;}
.collane.tre .collana h3{font-size:clamp(20px,2.2vw,25px);}
.collane.tre .collana .cdesc,.collane.tre .collana .csub{font-size:14.5px;}
a.collana{display:block;transition:border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1);}
a.collana:hover{border-color:var(--accent);transform:translateY(-3px);}
@media (max-width:900px){.collane.tre{grid-template-columns:1fr;}}

/* home: rimando a Chi sono dentro il terminale, e al metodo nei manuali */
.bio-out .bio-more a{color:var(--prompt);border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease;}
.bio-out .bio-more a:hover{color:var(--accent);border-color:var(--accent);}
.method-more{display:inline-block;margin-top:26px;font-size:13px;font-weight:600;color:var(--ink);}
.method-more:hover{color:var(--accent);}

/* elenco dei volumi di una collana */
.volumi{margin-top:26px;border-top:1px solid var(--hairline);}
.vol{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 22px;align-items:center;padding:16px 0;border-bottom:1px solid var(--hairline);}
.vol .vnome{font-family:'Fraunces',serif;font-size:19px;color:var(--ink);}
.vol .vnome a{border-bottom:1px solid transparent;transition:border-color .2s ease,color .2s ease;}
.vol .vnome a:hover{color:var(--accent);border-color:var(--accent);}
.vol .vmeta{grid-column:1;font-size:12px;color:var(--soft);}
.vol .vformati{grid-column:2;grid-row:1 / span 2;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center;}
.formato{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 12px;border:1px solid var(--hairline-strong);border-radius:999px;color:var(--ink);background:var(--panel);transition:border-color .2s ease,color .2s ease;}
a.formato:hover{border-color:var(--accent);color:var(--accent);}
@media (max-width:640px){.vol{grid-template-columns:1fr;}.vol .vformati{grid-column:1;grid-row:auto;justify-content:flex-start;}}

/* ---------- homelab ---------- */
.lab-list{list-style:none;display:grid;gap:16px;}
.lab-card{display:block;background:var(--panel);border:1px solid var(--hairline-strong);border-radius:12px;padding:24px 26px;transition:border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1);}
.lab-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.lab-card h3{font-family:'Fraunces',serif;font-weight:400;font-size:21px;color:var(--ink);}
.lab-card p{font-family:'Fraunces',serif;font-size:15px;color:var(--soft);margin-top:6px;line-height:1.65;}
.lab-card .lab-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.tag{font-size:11.5px;padding:2px 10px;border:1px solid var(--hairline-strong);border-radius:999px;color:var(--prompt);}
/* lo stato vuoto sparisce da solo appena c'e' un progetto nell'elenco */
.lab-empty{border:1px dashed var(--hairline-strong);border-radius:12px;padding:26px;font-size:13px;color:var(--soft);line-height:1.8;}
.lab-empty .pr{color:var(--prompt);}
.lab-projects:has(.lab-list li) .lab-empty{display:none;}

/* pagina di un progetto */
.scheda{display:flex;gap:10px 26px;flex-wrap:wrap;font-size:12.5px;color:var(--soft);margin-top:22px;}
.scheda b{color:var(--ink);font-weight:500;}
.blocco{margin-top:6px;}
.blocco h2{font-family:'Fraunces',serif;font-weight:400;font-size:24px;color:var(--ink);margin-bottom:14px;}
.blocco ul{margin-left:20px;font-family:'Fraunces',serif;font-size:15.5px;line-height:1.8;color:var(--soft);}
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.galleria img,.blocco img{max-width:100%;height:auto;display:block;}
.galleria figure{background:var(--panel);border:1px solid var(--hairline);border-radius:10px;overflow:hidden;}
.galleria figcaption{font-size:12px;color:var(--soft);padding:10px 12px;}
pre.codice{background:var(--panel);border:1px solid var(--hairline-strong);border-radius:10px;padding:18px 20px;font-size:13px;line-height:1.7;overflow-x:auto;}

/* ---------- homelab come logbook ---------- */
/* obiettivo e componenti, prima del diario */
.specs-wrap{padding-top:26px;padding-bottom:0;}
.specs{display:grid;grid-template-columns:1.3fr 1fr;gap:28px 46px;background:var(--panel);border:1px solid var(--hairline-strong);border-radius:12px;padding:28px 30px;}
.specs h2{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--prompt);font-weight:500;margin-bottom:10px;font-family:'JetBrains Mono',monospace;}
.specs .prose{font-size:15.5px;}
.componenti{list-style:none;font-size:13px;line-height:1.9;color:var(--ink);}
.componenti li::before{content:'- ';color:var(--soft);}
@media (max-width:760px){.specs{grid-template-columns:1fr;}}

/* il diario: una linea del tempo, la data a sinistra come in un registro di bordo */
.log{list-style:none;position:relative;margin-top:6px;}
.log::before{content:'';position:absolute;left:150px;top:6px;bottom:6px;width:1px;background:var(--hairline-strong);}
.log-voce{display:grid;grid-template-columns:150px 1fr;gap:0 34px;padding:0 0 34px;position:relative;}
.log-voce::before{content:'';position:absolute;left:146px;top:7px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--g,var(--prompt));}
.log-quando{text-align:right;padding-right:6px;font-size:12px;line-height:1.5;}
.log-quando time{display:block;color:var(--ink);font-variant-numeric:tabular-nums;}
.log-genere{display:block;color:var(--g,var(--prompt));text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;margin-top:3px;}
.log-corpo{min-width:0;}
.log-corpo .prose{font-size:15.5px;}
.log-corpo .prose ul{margin:8px 0 0 20px;}
.log-corpo .prose code{font-size:.88em;background:var(--bg-alt);padding:1px 5px;border-radius:4px;color:var(--ink);}
.log-corpo .prose a{color:var(--prompt);border-bottom:1px solid currentColor;}
.log-corpo pre.codice{margin-top:4px;}
.g-nota{--g:var(--prompt);}
.g-difficolta{--g:var(--path);}
.g-risultato{--g:var(--accent);}
.g-codice{--g:var(--kw);}
.g-foto,.g-video,.g-pdf{--g:var(--soft);}
.galleria.una{grid-template-columns:minmax(0,640px);}
.log-video{background:var(--panel);border:1px solid var(--hairline);border-radius:10px;overflow:hidden;max-width:720px;}
.log-video video{display:block;width:100%;background:#000;}
.log-video figcaption{font-size:12px;color:var(--soft);padding:10px 12px;}
.log-pdf{display:inline-flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--hairline-strong);border-radius:10px;padding:12px 16px;font-size:13px;transition:border-color .2s ease;}
.log-pdf:hover{border-color:var(--accent);}
.log-pdf .ext{font-size:10.5px;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--path);border-radius:4px;padding:3px 6px;}
.log-pdf .apri{color:var(--soft);}
.log-lingua{font-size:12px;color:var(--soft);margin:-18px 0 26px;}
@media (max-width:640px){
  .log::before{left:6px;}
  .log-voce{grid-template-columns:1fr;padding-left:28px;}
  .log-voce::before{left:2px;}
  .log-quando{text-align:left;display:flex;gap:12px;align-items:baseline;margin-bottom:8px;}
  .log-genere{margin-top:0;}
}

/* indice: ogni progetto e' una riga del registro */
.log-progetto{display:grid;grid-template-columns:150px 1fr;gap:6px 34px;}
.lp-quando{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-top:4px;}
.tag.conta{color:var(--soft);}
@media (max-width:640px){.log-progetto{grid-template-columns:1fr;}.lp-quando{flex-direction:row;gap:14px;}}

/* ---------- footer ---------- */
footer{max-width:1080px;margin:0 auto;padding:28px 5vw;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--hairline);font-size:11.5px;color:var(--soft);flex-wrap:wrap;gap:12px;}
footer .domain{color:var(--accent);}
footer a:hover{color:var(--accent);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
}