/* Italosfera — testata Bodoni, testo Literata, etichette Instrument Sans; giallo Napoli come unico accento */
:root{
  --bg:#F4F5F1; --fg:#1B2333; --muted:#596170; --rule:#D5D9D1;
  --accent:#DFA62B; --wash:#F2DDA2; --blu:#1F4E79; --card:#FBFBF8;
  --rosso:#C8553D; --rossowash:#F1C9BD;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Literata",Georgia,"Times New Roman",serif;
  --f-label:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#12161D; --fg:#ECEAE3; --muted:#A0A7B3; --rule:#2B313B;
  --accent:#E8B84A; --wash:#4B3E1C; --blu:#93B9E2; --card:#171C24;
  --rosso:#D9705A; --rossowash:#4A2A22; color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:18px;line-height:1.65;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 48px}
.wrap{max-width:1120px;margin:0 auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img,svg{max-width:100%}

.topbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:14px;
  font-family:var(--f-label);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule)}

.masthead{padding-block:26px 16px;display:grid;gap:4px}
.logo{font-family:var(--f-display);font-weight:800;font-size:clamp(54px,12vw,140px);line-height:.9;letter-spacing:-.02em}
.logo .ital{font-style:italic;font-weight:500}
.motto{font-style:italic;font-size:clamp(18px,2.6vw,24px);color:var(--muted);margin:6px 0 0}
.motto b{font-weight:400;color:var(--fg);box-shadow:inset 0 -.45em 0 var(--wash)}

nav.sezioni{display:flex;flex-wrap:wrap;gap:6px 22px;padding-block:14px;border-top:2px solid var(--fg);border-bottom:1px solid var(--rule);
  font-family:var(--f-label);font-weight:600;font-size:14px}
nav.sezioni a{padding-block:4px}
nav.sezioni a:hover{color:var(--blu)}

.label{display:inline-block;font-family:var(--f-label);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent);color:#1B2333;padding:3px 9px;border-radius:2px;justify-self:start}
.firma{font-family:var(--f-label);font-size:13px;color:var(--muted)}
.firma strong{color:var(--fg);font-weight:600}
.sommario{font-size:20px;line-height:1.5;margin:0 0 16px;max-width:34em}

.apertura{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;padding-block:40px;align-items:start;border-bottom:1px solid var(--rule)}
.apertura h2{font-family:var(--f-display);font-weight:800;font-size:clamp(36px,5.4vw,64px);line-height:1.02;margin:14px 0;text-wrap:balance}
.apertura h2 a:hover,.pezzo h3 a:hover{color:var(--blu)}
.leggi{display:inline-block;margin-top:18px;font-family:var(--f-label);font-weight:600;font-size:14px;border-bottom:2px solid var(--accent);padding-bottom:2px}

figure.vignetta{margin:0;display:grid;gap:10px}
.vignetta svg{width:100%;height:auto;display:block;background:var(--card);border:1px solid var(--rule)}
.vignetta figcaption{font-style:italic;font-size:17px;line-height:1.4;text-align:center;text-wrap:balance;padding-inline:8px}
.vignetta.small figcaption{font-size:15px}
.ink{fill:none;stroke:var(--fg);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.thin{stroke-width:1.4}
.wash{fill:var(--wash);stroke:none}
.rossowash{fill:var(--rossowash);stroke:none}
.rosso{fill:var(--rosso);stroke:none}
.pin{fill:var(--accent);stroke:var(--fg);stroke-width:1.5}
.svgtext{font-family:var(--f-display);fill:var(--fg)}

.sezione-titolo{font-family:var(--f-display);font-weight:500;font-style:italic;font-size:30px;margin:40px 0 20px}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:36px 28px}
.pezzo{display:grid;gap:10px;align-content:start;min-width:0}
.pezzo h3{font-family:var(--f-display);font-weight:800;font-size:25px;line-height:1.1;margin:2px 0 0;text-wrap:balance}
.pezzo p{margin:0;font-size:16px;color:var(--muted)}

.sez-head{padding-block:36px 24px;border-bottom:1px solid var(--rule);margin-bottom:32px}
.sez-head h1{font-family:var(--f-display);font-weight:800;font-size:clamp(40px,7vw,72px);line-height:1;margin:0 0 10px}
.sez-head p{margin:0;color:var(--muted);max-width:36em}
.sez-head a{border-bottom:2px solid var(--accent)}
.vuoto{color:var(--muted);font-style:italic}

.articolo{max-width:720px;margin:0 auto;padding-top:36px}
.art-head{display:grid;gap:8px;margin-bottom:28px}
.kicker{font-family:var(--f-label);font-size:13px;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:.08em}
.art-head h1{font-family:var(--f-display);font-weight:800;font-size:clamp(38px,6vw,64px);line-height:1.02;margin:0;text-wrap:balance}
.articolo figure.vignetta{margin-bottom:32px}
.testo p{margin:0 0 1.1em}
.testo > p:first-child::first-letter{font-family:var(--f-display);font-weight:800;float:left;font-size:3.4em;line-height:.85;padding:6px 8px 0 0}
.testo ul{padding-left:1.2em;margin:0 0 1.1em}
.testo li{margin-bottom:.4em}
.correlati{border-top:2px solid var(--fg);margin-top:48px}

footer{margin-top:56px;padding-block:22px;border-top:2px solid var(--fg);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;
  font-family:var(--f-label);font-size:13px;color:var(--muted)}
footer a:hover{color:var(--fg)}
.logo-small{font-family:var(--f-display);font-weight:800;font-size:22px;color:var(--fg)}

@media (max-width:760px){
  body{font-size:17px}
  .apertura{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px}
  .apertura figure{order:-1}
}
@media (prefers-reduced-motion: reduce){*{scroll-behavior:auto}}