/* Articoli leggibili: caricato solo dalle pagine articolo (articoli/<id>.html, scritte da scripts/build_static.py,
   e articolo.html). Regole tenute fuori da style.css; classi con prefisso al- e solo le variabili già in style.css.
   Indice, sottotitoli, tempo di lettura e precedente/successivo sono nell'HTML del build: niente spazio da riservare
   dopo. La barra di avanzamento (js/articolo.js) è position:fixed e si muove con transform: nessuno spostamento. */
#art.al .body{max-width:68ch}
#art.al .body p{line-height:1.65}
#art.al .body h2{font-size:1.3rem;line-height:1.3;font-weight:700;margin:1.8em 0 .6em;text-wrap:balance;overflow-wrap:break-word}
/* l'ancora non finisce sotto l'header sticky (circa 60px) */
#art.al [id]{scroll-margin-top:84px}
#art.al .byline .al-rt{white-space:nowrap}

/* .al-toc e .al-pn sono <nav>: style.css ha regole generiche su nav e nav a (flex, nowrap, overflow, padding del menu)
   che qui si annullano */
.al-toc{display:block;overflow:visible;max-width:68ch;box-sizing:border-box;margin:0 0 26px;padding:14px 20px 12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.al-toc h2{margin:0 0 6px;font-size:.8rem;line-height:1.4;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.al-toc ol{margin:0;padding-left:1.4em;color:var(--mut)}
.al-toc li{margin:6px 0;line-height:1.45}
.al-toc a{padding:0;border-radius:0;font-size:inherit;font-weight:600;white-space:normal;color:var(--acc2);overflow-wrap:break-word}
.al-toc a:hover{background:none;color:var(--acc2);text-decoration:underline}

.al-pn{display:grid;overflow:visible;max-width:none;gap:12px;margin:28px 0 0}
@media (min-width:640px){.al-pn{grid-template-columns:1fr 1fr}.al-pn-next{grid-column:2;text-align:right}}
.al-pn a{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:1rem;white-space:normal;color:var(--txt);text-decoration:none;transition:none}
.al-pn a:hover{background:var(--card);border-color:var(--acc2);color:var(--txt);text-decoration:none}
.al-pn a:hover .al-pn-t{text-decoration:underline}
.al-pn a:focus-visible,.al-toc a:focus-visible{outline:2px solid #ffd36e;outline-offset:3px}
.al-pn-k{font-size:.8rem;font-weight:600;color:var(--mut)}
.al-pn-t{font-weight:700;line-height:1.35;overflow-wrap:break-word}

.al-prog{position:fixed;top:0;left:0;width:100%;height:3px;z-index:30;pointer-events:none;background:var(--acc2);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
@media (prefers-reduced-motion:no-preference){.al-prog{transition:transform .08s linear}}
@media print{.al-prog,.al-toc,.al-pn{display:none}}