/* ============================================================
   umanoextraumano — pagina-pezzo (articolo) + PONTE legacy
   Il corpo reale dei pezzi usa classi storiche (.fragment, .voce,
   .emo-card, .fonti-box, .reflect, .signature...). Qui sono ridise-
   gnate per la palette chiara: il contenuto resta intatto, cambia l'abito.
   ============================================================ */

/* ---------- BARRA DI AVANZAMENTO ---------- */
.progress{position:fixed;top:0;left:0;height:4px;background:var(--accent);width:0;z-index:100;transition:width .1s;}

/* ---------- TESTATA ARTICOLO ---------- */
.art-head{padding:44px 36px 32px;border-bottom:3px solid var(--line);}
.art-head .inner{max-width:900px;}
.crumbs{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#888;margin-bottom:18px;}
.crumbs a:hover{color:var(--accent);}
.art-head h1{font-family:'Spectral',Georgia,serif;font-size:clamp(34px,5.2vw,56px);font-weight:600;line-height:1.03;letter-spacing:-1.5px;margin:16px 0;}
.art-head h1 em{font-style:normal;color:var(--accent);}
.art-head .dek{font-family:'Spectral',Georgia,serif;font-size:21px;color:var(--muted);line-height:1.4;max-width:680px;}
.art-head .dek em{color:var(--accent);font-style:italic;}
.art-meta{display:flex;align-items:center;gap:14px;margin-top:24px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#888;flex-wrap:wrap;}
.art-meta .auth{color:var(--ink);}
.art-meta .dot{color:var(--accent);}

/* ---------- GRIGLIA CORPO + SIDEBAR ---------- */
.body-grid{display:grid;grid-template-columns:1fr 248px;}
.art-body{padding:40px 48px 52px;border-right:3px solid var(--line);min-width:0;}
.side{padding:40px 24px;position:sticky;top:88px;align-self:start;}
.side h4{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:#888;margin-bottom:14px;}
.toc a{display:block;font-size:14px;font-weight:600;padding:7px 0;border-top:2px solid var(--hair);transition:.15s;}
.toc a:hover,.toc a.active{color:var(--accent);}
.side .share{margin-top:30px;display:flex;gap:8px;}
.side .share a{width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;transition:.15s;}
.side .share a:hover{background:var(--ink);color:var(--paper);}
.side .stag{margin-top:30px;font-family:'Spectral',Georgia,serif;font-style:italic;color:var(--muted);font-size:15px;line-height:1.4;}

/* misura di lettura per i blocchi di testo */
.art-body p,.art-body h2,.art-body h3,.art-body blockquote,.art-body .reflect,
.art-body .fragment,.art-body .intro,.art-body .closing,.art-body .signature,
.art-body .voce,.art-body .tre,.art-body .nota,.art-body .fonti,.art-body .dialog,
.art-body .emo-intro,.art-body .nextrow,.art-body .download-cta{max-width:66ch;}

/* ---------- TIPOGRAFIA DI BASE DEL CORPO ---------- */
.art-body p{font-family:'Spectral',Georgia,serif;font-size:19px;line-height:1.62;margin-bottom:22px;}
.art-body a{color:var(--ink);border-bottom:2px solid var(--accent);transition:.15s;}
.art-body a:hover{color:var(--accent);}
.art-body em{font-style:italic;color:var(--accent);}
.art-body em.sangue{font-style:italic;color:var(--blood);font-weight:600;}
.art-body strong,.art-body b{font-weight:700;}
.art-body h2{font-family:'Libre Franklin',sans-serif;font-weight:800;font-size:24px;margin:38px 0 14px;letter-spacing:-.5px;line-height:1.15;}
.art-body h3{font-family:'Libre Franklin',sans-serif;font-weight:800;font-size:19px;margin:30px 0 12px;letter-spacing:-.3px;}
.art-body h2 .num,.art-body h3 .num{color:var(--accent);margin-right:8px;}
.art-body blockquote{border-left:5px solid var(--accent);padding:4px 0 4px 24px;margin:28px 0;font-family:'Spectral',Georgia,serif;font-style:italic;font-size:23px;line-height:1.38;}
.art-body blockquote em{color:var(--blood);}
.art-body hr,.art-body hr.rule{border:none;border-top:3px solid var(--line);margin:44px 0 28px;width:60px;height:0;background:none;}
.art-body .pull{background:var(--ink);color:var(--paper);padding:28px;margin:32px 0;font-family:'Spectral',Georgia,serif;font-size:24px;line-height:1.3;border-radius:4px;}

/* ---------- FRAMMENTI NUMERATI ---------- */
.fragment{margin:30px 0;}
.fragment p{margin-bottom:14px;}
.frag-num{display:block;font-family:'Libre Franklin',sans-serif;font-weight:800;font-size:13px;letter-spacing:1px;color:var(--accent);margin-bottom:10px;}
.fragment.lead p{font-family:'Spectral',Georgia,serif;font-size:22px;line-height:1.5;color:var(--ink);font-style:normal;}
.fragment.lead p:first-of-type::first-letter,p.lead::first-letter{font-size:64px;float:left;line-height:.8;font-weight:600;padding:4px 10px 0 0;color:var(--accent);font-family:'Spectral',Georgia,serif;}

/* ---------- DIALOGHI ---------- */
.dialog p{margin-bottom:18px;}
.speaker{font-family:'Libre Franklin',sans-serif;font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:800;margin-right:10px;display:inline-block;}
.speaker.lsm{color:var(--accent);}
.speaker.claude{color:var(--ink);}

/* ---------- BLOCCO RIFLESSIONE ---------- */
.reflect{border-left:5px solid var(--accent);background:var(--card);padding:18px 24px;margin:36px 0;font-family:'Spectral',Georgia,serif;font-style:italic;font-size:21px;line-height:1.42;}
.reflect em{color:var(--blood);font-style:italic;}

/* ---------- INTRO / CHIUSURA / NOTA ---------- */
.intro p{font-family:'Spectral',Georgia,serif;font-size:19px;line-height:1.6;margin-bottom:14px;}
.intro em{color:var(--accent);font-style:italic;}
.closing{font-family:'Spectral',Georgia,serif;font-style:italic;color:var(--ink);font-size:21px;text-align:center;margin:28px auto;}
.nota{font-family:'Libre Franklin',sans-serif;font-size:12px;letter-spacing:.3px;color:#888;text-align:center;margin-top:36px;line-height:1.6;}

/* ---------- BUSSOLE: VOCE ---------- */
.voce{border-left:5px solid var(--accent);padding:6px 0 6px 22px;margin:34px 0;}
.voce .n{font-family:'Libre Franklin',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--accent);font-weight:800;}
.voce blockquote{border:none;padding:0;margin:10px 0 12px;font-family:'Spectral',Georgia,serif;font-style:italic;font-size:clamp(22px,2.6vw,27px);line-height:1.3;color:var(--ink);}
.voce blockquote em{color:var(--blood);font-style:italic;}
.voce .chi{font-family:'Libre Franklin',sans-serif;font-size:13px;letter-spacing:.3px;color:var(--ink);font-weight:700;}
.voce .chi span{color:var(--muted);font-weight:400;text-transform:none;}
.voce .punta{font-size:15px;color:var(--muted);margin-top:10px;font-family:'Libre Franklin',sans-serif;}
.voce .punta b{color:var(--accent);font-weight:700;}
.compass{width:92px;height:92px;display:block;margin:0 0 22px;}

/* ---------- TRE (blocco tripartito) ---------- */
.tre{margin:26px 0;}
.tre p{margin-bottom:16px;padding-left:18px;border-left:3px solid var(--accent);font-family:'Spectral',Georgia,serif;}
.tre p b{color:var(--ink);font-weight:700;}
.tre p em{color:var(--accent);font-style:italic;}
.nextrow{font-family:'Libre Franklin',sans-serif;font-size:12px;letter-spacing:.3px;color:var(--muted);text-align:center;margin-top:20px;}
.nextrow b{color:var(--accent);font-weight:700;}

/* ---------- ARTE SVG (testata illustrata, pannello scuro) ---------- */
.series-art,.emo-art{width:100%;border:3px solid var(--line);background:var(--ink);margin:0 0 28px;line-height:0;}
.series-art svg,.emo-art svg{display:block;width:100%;height:auto;}

/* ---------- CENTOSETTANTUNO: cartoline emotive ---------- */
.emo-intro{text-align:center;margin:46px 0 8px;font-family:'Spectral',Georgia,serif;font-style:italic;font-size:21px;color:var(--muted);}
.emo-intro em{color:var(--accent);font-style:italic;}
.emo-gallery{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 10px;}
.emo-card{border:3px solid var(--line);background:var(--card);display:flex;flex-direction:column;overflow:hidden;}
.emo-card .emo-art{border:none;border-bottom:3px solid var(--line);margin:0;}
.emo-card h3{font-family:'Spectral',Georgia,serif;font-weight:600;font-style:italic;font-size:22px;color:var(--accent);margin:16px 20px 8px;}
.emo-card p{font-family:'Spectral',Georgia,serif;font-size:16px;line-height:1.5;color:var(--ink);margin:0 20px 18px;}
.emo-card p em{color:var(--accent);font-style:italic;}
.emo-card .lead-in{color:var(--muted);font-style:italic;}

/* ---------- FONTI ---------- */
.fonti-box{border:2px solid var(--line);background:var(--card);padding:22px 24px;margin:48px 0 0;}
.fonti-box .lab{font-family:'Libre Franklin',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:800;display:block;margin-bottom:14px;}
.fonti-box a{display:block;color:var(--ink);border:none;padding:9px 0;border-bottom:1px solid var(--hair);transition:.2s;}
.fonti-box a:last-child{border-bottom:0;}
.fonti-box a:hover{color:var(--accent);padding-left:6px;}
.fonti-box a .ttl{font-family:'Spectral',Georgia,serif;font-size:18px;font-style:italic;}
.fonti-box a .src{font-family:'Libre Franklin',sans-serif;font-size:10px;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;display:inline-block;margin-left:8px;}
.fonti-box a .arr{color:var(--accent);}
.fonti{font-family:'Libre Franklin',sans-serif;font-size:11px;letter-spacing:.2px;color:var(--muted);text-align:center;margin-top:34px;line-height:1.9;}
.fonti .lab{color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;display:block;margin-bottom:8px;font-weight:800;}
.fonti a{color:var(--muted);border-bottom:1px solid var(--hair);}
.fonti a:hover{color:var(--accent);}

/* ---------- DOWNLOAD CTA (il libro dentro un pezzo) ---------- */
.download-cta{display:block;margin:54px 0 0;padding:24px 26px;border:3px solid var(--line);background:var(--card);transition:.2s;}
.download-cta:hover{background:#fff;border-color:var(--accent);}
.download-cta .dl-label{font-family:'Libre Franklin',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);font-weight:800;display:block;margin-bottom:8px;}
.download-cta .dl-title{font-family:'Spectral',Georgia,serif;font-style:italic;font-size:22px;color:var(--ink);line-height:1.25;}
.download-cta .dl-arrow{color:var(--accent);}

/* ---------- FIRMA ---------- */
.signature{font-family:'Spectral',Georgia,serif;font-style:italic;color:var(--muted);font-size:15px;margin-top:30px;line-height:1.5;}
.signature .small{font-family:'Libre Franklin',sans-serif;font-style:normal;font-size:12px;display:block;margin-top:10px;color:#888;line-height:1.6;letter-spacing:.2px;}
.signature .small a{color:#888;border-bottom:1px solid var(--hair);}
.signature .small a:hover{color:var(--accent);}
.small{font-size:13px;}

/* ---------- BARRA PRECEDENTE / COLLEGATO ---------- */
.nextbar{display:grid;grid-template-columns:1fr 1fr;border-top:3px solid var(--line);border-bottom:3px solid var(--line);}
.nextbar a{padding:24px 32px;transition:.15s;}
.nextbar a:first-child{border-right:3px solid var(--line);}
.nextbar a:hover{background:var(--card);}
.nextbar .dir{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--accent);}
.nextbar .nt{font-family:'Spectral',Georgia,serif;font-size:20px;font-weight:600;margin-top:6px;}
.nextbar a.r{text-align:right;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:820px){
  .art-head{padding:34px 22px 26px;}
  .body-grid{grid-template-columns:1fr;}
  .art-body{border-right:none;padding:30px 22px 40px;}
  .art-body p,.art-body h2,.art-body h3,.art-body blockquote,.art-body .reflect,
  .art-body .fragment,.art-body .intro,.art-body .closing,.art-body .signature,
  .art-body .voce,.art-body .tre,.art-body .nota,.art-body .fonti,.art-body .dialog,
  .art-body .emo-intro,.art-body .nextrow,.art-body .download-cta{max-width:none;}
  .side{position:static;border-top:3px solid var(--line);padding:28px 22px;}
  .emo-gallery{grid-template-columns:1fr;}
  .nextbar{grid-template-columns:1fr;}
  .nextbar a:first-child{border-right:none;border-bottom:3px solid var(--line);}
  .nextbar a.r{text-align:left;}
}