/* Layout: le pagine interne sono la stessa tastiera in piccolo. In alto il tasto A con il cognome,
   il testo su carta in una colonna di lettura, in fondo la fascia d'inchiostro con l'email.
   Space Mono per titoli, date, codice e comandi; Atkinson Hyperlegible per leggere gli articoli. */
:root{
  --paper:#F3F1EC;
  --paper-2:#E8E4DA;
  --paper-hi:#FBFAF7;
  --paper-dim:#A8A398;
  --ink:#161616;
  --ink-2:#57524A;
  --liquid:#FF6B35;
  --liquid-ink:#B83E10;
  --mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --read:'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter:clamp(16px, 4vw, 56px);
  --wide:1120px;
  --measure:68ch;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 15px/1.6 var(--mono);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:5px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Tasti ---------- */
.cap{display:block;height:auto;overflow:visible;user-select:none;-webkit-user-select:none}
.cap .body{fill:var(--paper)}
.cap .o{fill:none;stroke:var(--ink);stroke-linejoin:round}
.cap .wv{fill:var(--liquid);animation:wv 2.4s linear infinite}
.cap .bub{fill:var(--paper)}
.cap .lg{font-family:var(--mono);font-weight:700;fill:var(--ink)}
.cap .liq{transform-box:view-box;transform-origin:50% 80%}
.cap .top{transition:transform .12s cubic-bezier(.3,1.6,.5,1)}
@keyframes wv{to{transform:translateX(30px)}}
.slosh .liq{animation:slosh 1.1s cubic-bezier(.3,.6,.4,1)}
@keyframes slosh{0%{transform:rotate(0)}15%{transform:rotate(-7deg) translateY(-6px)}35%{transform:rotate(5deg)}55%{transform:rotate(-3deg)}75%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}
.chip{display:inline-block;font:700 13px/1 var(--mono);color:var(--ink);text-decoration:none;padding:.55em .7em .6em;background:var(--paper);border:2px solid var(--ink);border-radius:.55em;box-shadow:0 3px 0 var(--ink);transition:transform .06s,box-shadow .06s}
a.chip:hover{background:var(--paper-hi)}
a.chip:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}

/* ---------- Testata ---------- */
.top-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:clamp(14px,2vw,24px) var(--gutter)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;font:700 clamp(18px,1.7vw,24px)/1 var(--mono);letter-spacing:.02em}
.brand .cap{width:52px;flex:none}
.brand:hover .top{transform:translateY(4px)}
.top-bar nav{display:flex;align-items:center;gap:4px 18px;flex-wrap:wrap}
.top-bar nav a{font-weight:700;text-decoration:none;padding:10px 4px;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 6px)/0 2px no-repeat;transition:background-size .25s}
.top-bar nav a:hover,.top-bar nav a[aria-current="page"]{background-size:100% 2px}

/* ---------- Titolo della pagina ---------- */
.page-head{max-width:var(--wide);margin:0 auto;padding:clamp(40px,7vw,96px) var(--gutter) clamp(36px,5vw,64px)}
.page-head h1{margin:0;font:700 clamp(48px,7vw,100px)/1 var(--mono);letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
.lead{margin:22px 0 0;max-width:46ch;font:400 clamp(17px,1.35vw,20px)/1.55 var(--read);color:var(--ink-2)}

/* ---------- Elenco degli articoli: un tasto per anno, pieno quanto quell'anno ---------- */
.posts{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) clamp(80px,10vw,140px);display:grid;gap:clamp(48px,6vw,80px)}
.year{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:20px clamp(28px,4vw,56px);align-items:start}
.year-key{margin:0;display:grid;gap:10px;justify-items:start}
.year-key .cap{width:min(100%,150px)}
.year-key span{font:400 13px/1 var(--mono);color:var(--ink-2)}
.post-list{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.post-list li{display:grid;grid-template-columns:4.5em minmax(0,1fr);gap:4px 22px;align-items:baseline}
.post-list time{font:400 14px/1.6 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.post-list a{font:700 clamp(18px,1.55vw,22px)/1.3 var(--mono);text-decoration:none;text-wrap:balance;overflow-wrap:anywhere}
.post-list a:hover{text-decoration:underline;text-decoration-color:var(--liquid);text-decoration-thickness:3px;text-underline-offset:5px}
.post-list p{margin:8px 0 0;max-width:62ch;font:400 17px/1.55 var(--read);color:var(--ink-2)}
.terms{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) clamp(80px,10vw,140px);list-style:none;display:flex;flex-wrap:wrap;gap:14px 12px}
.terms .chip{font-size:14px}
.terms .chip span{color:var(--ink-2);font-weight:400;margin-left:.5em}

/* ---------- Articolo ---------- */
.post{max-width:var(--wide);margin:0 auto;padding:clamp(28px,5vw,72px) var(--gutter) clamp(80px,10vw,140px)}
.post-head{margin-bottom:clamp(36px,5vw,64px)}
.back{font-weight:700;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .25s;padding-bottom:2px}
.back:hover{background-size:100% 2px}
.post-head h1{margin:22px 0 0;max-width:22ch;font:700 clamp(32px,4.6vw,60px)/1.08 var(--mono);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.meta{margin:20px 0 0;font:400 14px/1.6 var(--mono);color:var(--ink-2)}
.tags{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px 10px}

.prose{max-width:var(--measure);font:400 clamp(17px,1.25vw,19px)/1.7 var(--read);overflow-wrap:break-word}
.prose>:first-child{margin-top:0}
.prose h2,.prose h3,.prose h4,.prose h5{font-family:var(--mono);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:2.1em 0 .7em;text-wrap:balance}
.prose h2{font-size:1.4em}
.prose h3{font-size:1.18em}
.prose h4,.prose h5{font-size:1.02em}
.prose p,.prose ul,.prose ol,.prose blockquote,.prose pre,.prose table,.prose figure,.prose .highlight{margin:0 0 1.15em}
.prose li{margin:.3em 0}
.prose a{color:var(--liquid-ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{color:var(--ink)}
.prose strong{font-weight:700}
.prose img{display:block;max-width:100%;height:auto;margin:1.6em 0;border:2px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink)}
.prose iframe{display:block;max-width:100%;border:0}
.prose code{font:400 .84em/1.5 var(--mono);background:var(--paper-2);border-radius:6px;padding:.1em .35em}
.prose pre{font:400 14px/1.65 var(--mono);color:var(--ink);background:var(--paper-hi)!important;border:2px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);padding:18px 20px;overflow-x:auto;tab-size:2}
.prose pre code{font-size:inherit;background:none;padding:0;border-radius:0}
.prose .highlight pre{margin:0}
.prose blockquote{margin-left:0;padding:.1em 0 .1em 1.1em;border-left:4px solid var(--liquid);color:var(--ink-2)}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.92em}
.prose th,.prose td{border:1.5px solid var(--ink);padding:.45em .75em;text-align:left;vertical-align:top}
/* Una cancellatura come un colpo di pennarello arancione, un po' storto. */
.prose del{position:relative;text-decoration:none;color:var(--ink-2);white-space:nowrap}
.prose del::after{content:"";position:absolute;left:-.12em;right:-.12em;top:50%;height:.2em;margin-top:-.06em;background:var(--liquid);border-radius:.12em;transform:rotate(-2.5deg)}
/* Un paragrafo intero barrato: la barra arancione segue ogni riga. */
.prose .struck del{white-space:normal;background:linear-gradient(transparent 47%,var(--liquid) 47% 63%,transparent 63%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.prose .struck del::after{display:none}
.prose hr{border:0;border-top:2px dashed var(--paper-dim);margin:2.6em 0}
/* In About gli elenchi fatti solo di codice (le tecnologie) diventano una fila di tasti. */
.about .prose ul:has(> li > code){list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px 10px}
.about .prose ul:has(> li > code) li{margin:0}
.about .prose li > code{display:inline-block;font:700 13px/1 var(--mono);padding:.55em .7em .6em;background:var(--paper);border:2px solid var(--ink);border-radius:.55em;box-shadow:0 3px 0 var(--ink)}

.pager{max-width:var(--measure);margin-top:clamp(56px,7vw,88px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pager a{display:grid;gap:6px;padding:16px 18px 18px;text-decoration:none;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:0 4px 0 var(--ink);transition:transform .06s,box-shadow .06s;min-width:0}
.pager a:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.pager .newer{grid-column:2;text-align:right;justify-items:end}
.pager small{font:400 13px var(--mono);color:var(--ink-2)}
.pager strong{font:700 15px/1.35 var(--mono);text-wrap:balance}

/* ---------- About ---------- */
.about{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) clamp(80px,10vw,140px);display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,280px);gap:clamp(36px,6vw,88px);align-items:start}
.portrait{margin:0}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:3px solid var(--ink);border-radius:28px;box-shadow:0 6px 0 var(--ink)}
.experience{grid-column:1;margin-top:clamp(24px,4vw,40px)}
.experience h2{margin:0 0 24px;font:700 1.4em/1.25 var(--mono)}
.xp{list-style:none;margin:0;padding:0;display:grid;gap:18px;max-width:var(--measure)}
.xp li{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:2px 22px;align-items:baseline}
.xp .when{font:400 14px/1.6 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.xp strong{font:700 17px/1.35 var(--mono)}
.xp span{display:block;font:400 17px/1.5 var(--read);color:var(--ink-2)}

/* ---------- Fondo ---------- */
.site-foot{background:var(--ink);color:var(--paper);padding:clamp(72px,9vw,128px) var(--gutter) 28px}
.foot-in{max-width:var(--wide);margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:36px 64px}
.site-foot h2{margin:0;font:700 clamp(40px,5.6vw,80px)/1 var(--mono);letter-spacing:-.03em}
.mail{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;margin:24px 0 0;font:700 clamp(18px,2vw,26px)/1.3 var(--mono)}
.mail a{color:var(--liquid);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;padding-bottom:2px;overflow-wrap:anywhere}
.copy{appearance:none;font:700 14px/1 var(--mono);color:var(--paper);background:none;border:2px solid var(--paper);border-radius:10px;box-shadow:0 3px 0 var(--paper);padding:11px 14px 12px;min-height:44px;cursor:pointer;transition:transform .06s,box-shadow .06s}
.copy:active{transform:translateY(3px);box-shadow:0 0 0 var(--paper)}
.foot-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-weight:700}
.foot-links a{display:inline-block;text-decoration:none;padding:8px 0;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 4px)/0 2px no-repeat;transition:background-size .25s}
.foot-links a:hover{background-size:100% 2px}
.foot{max-width:var(--wide);margin:clamp(72px,9vw,120px) auto 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--paper-dim);font-size:13px}
.foot p{margin:0}

/* ---------- 404 ---------- */
.missing{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) clamp(80px,10vw,140px)}
.missing p{margin:0 0 28px;max-width:46ch;font:400 clamp(17px,1.35vw,20px)/1.55 var(--read);color:var(--ink-2)}
.missing nav{display:flex;flex-wrap:wrap;gap:14px 12px}

@media (max-width:860px){
  .about{grid-template-columns:minmax(0,1fr)}
  .portrait{max-width:220px;grid-row:1}
  .experience{grid-column:auto}
}
@media (max-width:720px){
  .year{grid-template-columns:minmax(0,1fr)}
  .year-key{grid-template-columns:auto 1fr;align-items:center;gap:16px}
  .year-key .cap{width:110px}
  .post-list li{grid-template-columns:minmax(0,1fr)}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pager .newer{grid-column:auto;grid-row:1}
  .xp li{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .cap .wv{animation:none}
}

/* ---------- Shipped: l'archivio, con i filtri come una fila di tasti ---------- */
.shipped .filters{display:flex;flex-wrap:wrap;gap:12px 10px;margin-bottom:clamp(8px,2vw,16px)}
.filters .chip{cursor:pointer;font-size:14px}
.filters .chip span{color:var(--ink-2);font-weight:400;margin-left:.4em}
.filters .chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.filters .chip[aria-pressed="true"] span{color:var(--paper-dim)}
.entry-meta{margin:0 0 4px!important;font:400 13px/1.4 var(--mono)!important;color:var(--ink-2)}

[hidden]{display:none!important}