/* pilastro.css — le pagine «lettera al te stesso del futuro», nelle cinque
   lingue. Separato da styles.css perche' serve solo a queste pagine. */
.art-main { padding: calc(80px + 48px) 0 72px; }
.art { max-width: 720px; margin: 0 auto; }
.art h1 { margin: 14px 0 18px; }
.art h2 { margin: 56px 0 14px; scroll-margin-top: 96px; }
.art h3 { margin: 30px 0 10px; }
.art p, .art li { font-size: 1.02rem; line-height: 1.75; color: var(--frost-dark); }
.art p + p { margin-top: 14px; }
.art ol, .art ul { padding-left: 1.3em; margin: 12px 0 0; }
.art li + li { margin-top: 8px; }
.art strong { color: var(--frost); }
.art a:not(.art-cta-btn) { color: var(--amber); }
.art-lead { font-size: 1.15rem !important; }
.art-meta { color: var(--mist); font-size: .9rem; margin-top: 12px; }
.art-cta {
  margin: 34px 0; padding: 22px 22px 20px; border-radius: 18px;
  background: rgba(232,168,42,.06); border: 1px solid rgba(232,168,42,.24);
}
.art-cta p { margin: 0 0 14px; color: var(--frost); }
.art-cta-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px;
  border-radius: 12px; background: var(--amber); color: #1A1204;
  font-weight: 700; text-decoration: none; transition: background .15s ease;
}
.art-cta-btn:hover { background: var(--amber-light); }
.art-cta small { display: block; margin-top: 10px; color: var(--mist); font-size: .85rem; }
.art-toc { margin: 26px 0 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: 14px; }
.art-toc p { margin: 0 0 6px !important; font-weight: 600; color: var(--frost); }
.art-toc ol { margin: 0; }
.art-toc li { font-size: .95rem; margin-top: 4px !important; }
@media (max-width: 600px) {
  .art-main { padding-top: calc(72px + 28px); }
  .art-cta-btn { width: 100%; justify-content: center; }
}