/* pixelLex — stili degli articoli del blog */
body{line-height:1.7}
.art-wrap{max-width:720px;margin:0 auto;padding:0 24px}
.nobr{white-space:nowrap}

/* testata */
.art-head{padding:64px 0 48px;border-bottom:1px solid var(--line)}
.crumb{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:26px}
.crumb a:hover{color:var(--blue)}
.tag{font-family:var(--mono);font-size:12px;color:var(--blue);font-weight:700;letter-spacing:.04em}
.art-head h1{font-family:var(--mono);font-weight:700;font-size:clamp(28px,4vw,42px);line-height:1.2;letter-spacing:-.03em;margin:16px 0 20px}
.art-head h1 .px{width:.38em;height:.38em}
.meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}

/* corpo */
article{padding:52px 0}
article p{margin-bottom:22px;font-size:17.5px}
article p strong{font-weight:600}
article p a,article li a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
article h2{font-family:var(--mono);font-weight:700;font-size:24px;letter-spacing:-.02em;line-height:1.3;margin:44px 0 16px}
article h2[id]{scroll-margin-top:90px}
article h3{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.35;margin:30px 0 12px}
article ul,article ol{margin:0 0 22px}
article ul{list-style:none}
article ul li{font-size:17.5px;padding-left:22px;position:relative;margin-bottom:10px}
article ul li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;background:var(--blue)}
article ol:not(.toc-list){padding-left:22px}
article ol:not(.toc-list) li{font-size:17.5px;margin-bottom:10px}
.art-lead{font-size:20px;color:var(--muted)}
.clause-num{font-family:var(--mono);font-size:13px;color:var(--red);font-weight:700;display:block;margin-bottom:6px}

/* copertina tipografica (al suo posto si può mettere una foto) */
.art-cover{aspect-ratio:2/1;background:var(--ink);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;margin-bottom:36px}
.art-cover img{width:100%;height:100%;object-fit:cover}
/* animazione in pixel art: riempie la copertina */
.art-cover picture{position:absolute;inset:0;display:block}
.art-cover .anim{display:block;width:100%;height:100%;object-fit:contain}
.art-cover .glyph{font-family:var(--mono);font-weight:700;font-size:clamp(56px,11vw,112px);color:var(--paper);letter-spacing:-.04em;line-height:1}
.art-cover .glyph .px{width:.32em;height:.32em}
/* Space Mono disegna §, © ed € piccoli e rialzati: qui li porto all'altezza delle cifre */
.art-cover .sym{position:relative;line-height:0}
.art-cover .sym-sect{font-size:1.468em;top:.2275em;margin:0 -.07em}
.art-cover .sym-copy{font-size:1.31em;top:.289em}
.art-cover .sym-euro{font-size:1.39em;top:.098em}
.rgb-badge{position:absolute;bottom:14px;left:14px;display:flex;gap:6px;background:var(--paper);padding:8px 10px;border:1px solid var(--line)}
.rgb-badge span{width:9px;height:9px;display:block}

/* indice */
.toc{position:static;z-index:auto;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid var(--line);background:#fff;padding:24px 26px;margin:0 0 40px}
.toc-title{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.05em;margin-bottom:14px;line-height:1.3}
.toc ol{list-style:none;counter-reset:toc;margin:0}
.toc li{counter-increment:toc;margin-bottom:9px;padding-left:30px;position:relative;font-size:15.5px;line-height:1.45}
.toc li:last-child{margin-bottom:0}
.toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.1em;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--blue)}
.toc a{color:inherit;text-decoration:none;transition:color .15s;border-bottom:1px solid transparent}
.toc a:hover{color:var(--blue);border-bottom-color:var(--blue)}

/* riquadri */
.tip{border:1px solid var(--line);border-left:4px solid var(--green);background:#fff;padding:20px 22px;margin:28px 0;font-size:15.5px}
.tip b{font-family:var(--mono);font-size:12px;color:var(--green);display:block;margin-bottom:8px;letter-spacing:.04em}
.cta-box{border:1px solid var(--ink);background:var(--ink);color:var(--paper);padding:34px 32px;margin:44px 0;text-align:center}
.cta-box .cta-title{font-family:var(--mono);font-weight:700;font-size:21px;margin-bottom:10px;letter-spacing:-.01em;color:var(--paper)}
.cta-box p{color:#B9B9C2;font-size:15px;margin-bottom:22px}
.cta-box .btn{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.cta-box .btn:hover{background:var(--blue);border-color:var(--blue);color:var(--paper)}
.disclaimer{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:20px;margin-top:44px}

/* autore */
.author{display:flex;gap:20px;align-items:center;border:1px solid var(--line);background:#fff;padding:24px;margin-top:32px}
.author .sq{width:64px;height:64px;background:var(--ink);flex-shrink:0;overflow:hidden}
.author .sq img{width:100%;height:100%;object-fit:cover}
.author p{font-size:14px;color:var(--muted);margin:0}
.author b{font-family:var(--mono);font-size:14px;color:var(--ink);display:block;margin-bottom:4px}

@media(max-width:900px){
  .art-head{padding:44px 0 36px}
  article{padding:40px 0}
}
@media(max-width:600px){
  .cta-box{padding:28px 20px}
  .author{align-items:flex-start}
}
@media(max-width:520px){
  .meta .sep2{display:none}
  .meta .by{flex-basis:100%}
}