:root{--r-sm:6px;--r-md:12px;--r-lg:14px;--r-pill:999px}
/* Blog AIR: tipografia pensata per la lettura. Si appoggia su /servizi.css per nav, footer, bottoni. */

article{max-width:1100px;margin:0 auto;padding:0 40px}
article > *{max-width:600px}
.article-hero{padding:56px 0 8px}
.article-hero .back{display:inline-block;margin-bottom:26px}
.article-hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--primary);display:block;margin-bottom:18px}
.article-hero h1{font-family:var(--sans);font-weight:800;font-size:clamp(32px,5.2vw,58px);line-height:1.03;letter-spacing:-.03em;max-width:16ch}
.article-hero .dek{font-family:var(--serif);font-weight:500;font-size:clamp(19px,2.3vw,25px);line-height:1.42;color:var(--text-muted);margin-top:22px;max-width:44ch}
.article-hero .meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--text-muted);margin-top:26px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.article-hero .meta .dot{color:var(--primary)}

.article-body{font-size:clamp(17px,0.6vw + 0.9rem,19px);line-height:1.72;padding:34px 0 72px}
.article-body>p{margin:0 0 24px;max-width:none}
.article-body>p:first-of-type{font-size:1.06em}
.article-body h2{font-family:var(--sans);font-weight:800;font-size:clamp(23px,3vw,32px);letter-spacing:-.02em;line-height:1.12;margin:48px 0 18px;max-width:24ch}
.article-body h3{font-family:var(--sans);font-weight:700;font-size:clamp(19px,2vw,22px);letter-spacing:-.01em;margin:34px 0 12px}
.article-body a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.article-body a:hover{text-decoration-thickness:2px}
/* i bottoni dentro l'articolo non ereditano lo stile dei link (evita testo verde su bottone verde) */
.article-body a.btn{color:var(--btn-ink);text-decoration:none}
.article-body a.btn:hover{text-decoration:none}
/* la variante ghost vive in servizi.css: qui basta non farla ereditare dai link */
.article-body a.btn.ghost{text-decoration:none}
.article-body strong{font-weight:700;color:var(--text)}
.article-body ul{margin:0 0 24px;padding-left:0;list-style:none;max-width:66ch}
.article-body ul li{position:relative;padding-left:26px;margin-bottom:12px}
.article-body ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--primary)}

.article-body blockquote{margin:34px 0;padding:4px 0 4px 26px;border-left:3px solid var(--primary);font-family:var(--serif);font-size:clamp(21px,2.5vw,28px);line-height:1.35;color:var(--text);max-width:26ch}

.pull{font-family:var(--serif);font-size:clamp(22px,3vw,30px);line-height:1.3;letter-spacing:-.01em;color:var(--text);margin:40px 0;padding:26px 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);max-width:24ch}

.tldr{border:1px solid var(--hairline);border-left:3px solid var(--primary);background:var(--surface-2);border-radius:var(--r-lg);padding:22px 24px;margin:8px 0 12px}
.tldr .eyebrow{display:block;margin-bottom:10px}
.tldr p{margin:0;color:var(--text);font-size:.98em;max-width:none}

.article-cta{border-top:1px solid var(--hairline);margin-top:20px;padding:34px 0 8px}
.article-cta h3{font-family:var(--sans);font-weight:700;font-size:clamp(19px,2vw,23px);margin-bottom:8px}
.article-cta p{color:var(--text-muted);margin-bottom:18px;max-width:56ch}

.article-foot{font-family:var(--mono);font-size:12px;color:var(--text-muted);border-top:1px solid var(--hairline);margin-top:40px;padding:22px 0 0}

/* indice blog: card articolo */
.article-body a.post-card{display:block;text-decoration:none;color:var(--text);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 28px;transition:border-color .2s,transform .2s,box-shadow .2s}
.article-body a.post-card:hover{text-decoration:none;border-color:var(--primary);transform:translateY(-2px);box-shadow:0 18px 44px color-mix(in srgb,var(--primary) 14%,transparent)}
.post-card .post-tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.post-card h2{font-family:var(--sans);font-weight:800;font-size:clamp(21px,2.6vw,29px);letter-spacing:-.02em;line-height:1.1;margin:12px 0 10px;max-width:24ch;color:var(--text)}
.post-card p{color:var(--text-muted);font-size:16px;line-height:1.6;margin:0;max-width:60ch}
.post-card .post-more{display:inline-block;margin-top:16px;font-weight:600;color:var(--primary)}

@media(max-width:640px){
  article{padding-left:22px;padding-right:22px}
}

@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}}
article [id],section[id]{scroll-margin-top:96px}

/* P38: queste quattro perdevano contro .article-body>p, che e dichiarata dopo
   con pari specificita. Rialzate al livello giusto. */
.article-body > p.pull{margin:44px 0;max-width:30ch}
.article-body > p.article-foot{margin-top:40px;max-width:none}
.article-cta{margin-top:52px;padding:34px 0 8px}
.article-cta h3{margin-top:0}
.article-cta p{max-width:none}

/* micro etichette leggibili anche in tema chiaro (vedi servizi.css) */
.article-hero .kicker,.post-card .post-tag,.post-card .post-more,
.tldr .eyebrow{color:var(--primary-ink,var(--primary))}

/* P26: titoli bilanciati, per evitare ultime righe di una parola sola */
h1,h2,h3,.s-hero h1,.sec h2,.poc-row h3,.step h3{text-wrap:balance}
.s-hero p.sub,.sec .lead,.article-hero .dek{text-wrap:pretty}