:root{
  --ground:#F1F4F3;
  --panel:#E7ECEA;
  --ink:#161F1E;
  --ink-soft:#57635F;
  --ink-faint:#8A9691;
  --rule:#C9D2CF;
  --accent:#0F5C54;
  --accent-soft:#0F5C5426;
  --accent-line:#0F5C5459;

  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#111614;
    --panel:#191F1D;
    --ink:#E3EAE7;
    --ink-soft:#9FADA8;
    --ink-faint:#6B7873;
    --rule:#2C3835;
    --accent:#5FBFAF;
    --accent-soft:#5FBFAF1F;
    --accent-line:#5FBFAF4D;
  }
}
:root[data-theme="dark"]{
  --ground:#111614;
  --panel:#191F1D;
  --ink:#E3EAE7;
  --ink-soft:#9FADA8;
  --ink-faint:#6B7873;
  --rule:#2C3835;
  --accent:#5FBFAF;
  --accent-soft:#5FBFAF1F;
  --accent-line:#5FBFAF4D;
}

*{box-sizing:border-box}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.1875rem;
  line-height:1.62;
  margin:0;
  -webkit-font-smoothing:antialiased;
}

/* ---- impaginato: colonna di lettura + riga graduata a sinistra ---- */
.sheet{
  max-width:44rem;
  margin:0 auto;
  padding:4rem 1.5rem 7rem;
  position:relative;
}
.scale{
  position:absolute;
  left:-3.25rem; top:3.5rem; bottom:6rem;
  width:1.5rem;
  pointer-events:none;
  opacity:.5;
}
@media (max-width:1080px){ .scale{display:none} }

/* ---- testata ---- */
.masthead{
  display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:baseline;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint);
  padding-bottom:1rem; margin-bottom:2.25rem;
  border-bottom:1px solid var(--rule);
}
.masthead .serie{color:var(--ink-soft)}
.masthead .stato{
  margin-left:auto;
  color:var(--accent);
  border:1px solid var(--accent-line);
  border-radius:2px;
  padding:.15rem .45rem;
  letter-spacing:.12em;
}

h1{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(2.5rem,7vw,3.6rem);
  line-height:1.04; letter-spacing:-.026em;
  text-wrap:balance;
  margin:0 0 .6rem;
}
.dek{
  font-family:var(--sans); font-weight:400;
  font-size:1.35rem; line-height:1.38; color:var(--ink-soft);
  text-wrap:balance;
  margin:0 0 2.75rem;
}

h2{
  font-family:var(--sans); font-weight:600;
  font-size:1.75rem; line-height:1.18; letter-spacing:-.018em;
  text-wrap:balance;
  margin:3.75rem 0 1.15rem;
}
h3{
  font-family:var(--sans); font-weight:500;
  font-size:1.25rem; line-height:1.28;
  margin:2.5rem 0 .85rem;
}
p{margin:0 0 1.4rem}
strong{font-weight:600}
em{font-style:italic}
a{color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}

ul{margin:0 0 1.15rem; padding-left:1.2rem}
li{margin:.25rem 0}
li::marker{color:var(--accent)}

/* ---- riquadro "in breve": un display da strumento ---- */
.abstract{
  background:var(--panel);
  border-left:2px solid var(--accent);
  padding:1.15rem 1.35rem;
  margin:0 0 2.25rem;
  font-size:1.1rem;
}
.abstract .etichetta{
  display:block;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.5rem;
}
.abstract p:last-child{margin-bottom:0}

/* ---- citazione dal paper ---- */
blockquote.paper{
  margin:2rem 0; padding:0 0 0 1.75rem;
  border-left:2px solid var(--accent-line);
  font-size:1.2rem; line-height:1.5; font-style:italic; color:var(--ink);
}
blockquote.paper .attribuzione{
  display:block; margin-top:.7rem;
  font-family:var(--mono); font-style:normal; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
blockquote.paper p{margin:0 0 .5rem}
blockquote.paper p:last-child{margin:0}

/* ---- codice ---- */
pre{
  font-family:var(--mono); font-size:.9rem; line-height:1.62;
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:.9rem 1rem;
  margin:0 0 1.3rem;
  overflow-x:auto;
}
code{font-family:var(--mono); font-size:.9em}
p code, li code{background:var(--accent-soft); padding:.1em .3em; border-radius:2px}

/* ---- la figura ---- */
figure{margin:2.75rem 0 3rem}
@media (min-width:52rem){
  figure{margin-left:-3rem; margin-right:-3rem}
}
figure svg{display:block; width:100%; height:auto; color:var(--accent)}
figcaption{
  font-family:var(--mono); font-size:.76rem; line-height:1.55;
  color:var(--ink-faint); margin-top:.85rem; padding:0 .25rem;
}

/* ---- pannello di confronto fra i due motori ---- */
.confronto{
  margin:2.5rem 0 2.25rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
}
@media (min-width:52rem){ .confronto{margin-left:-3rem; margin-right:-3rem} }
.confronto .riga{
  display:grid; grid-template-columns:1fr 7.5rem 7.5rem;
  align-items:baseline; gap:0 1rem;
  padding:.7rem .25rem; border-bottom:1px solid var(--rule);
}
.confronto .intestazione{
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  padding-bottom:.5rem;
}
.confronto .intestazione .b{color:var(--accent)}
.confronto .cosa{
  font-family:var(--serif); font-size:1rem; line-height:1.35; color:var(--ink-soft);
}
.confronto .val{
  font-size:1.35rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.confronto .val small{font-size:.62em; opacity:.6; margin-left:.15em}
.confronto .a{color:var(--ink-faint)}
.confronto .b{color:var(--accent); font-weight:500}
@media (max-width:40rem){
  .confronto .riga{grid-template-columns:1fr 5.5rem 5.5rem; gap:0 .5rem}
  .confronto .val{font-size:1.1rem}
  .confronto .cosa{font-size:.9rem}
}

/* ---- la tesi della serie, fuori dalla colonna ---- */
.tesi{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(1.35rem,3.4vw,1.7rem); line-height:1.28; letter-spacing:-.015em;
  text-wrap:balance;
  color:var(--ink);
  margin:2.5rem 0;
  padding:1.5rem 0;
  border-top:2px solid var(--accent-line);
  border-bottom:2px solid var(--accent-line);
}
@media (min-width:52rem){ .tesi{margin-left:-3rem; margin-right:-3rem; padding-left:.25rem} }

/* ---- mappa dei sette pezzi ---- */
.specifiche{
  display:grid; grid-template-columns:auto 1fr; gap:0;
  margin:1.75rem 0 2rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  font-family:var(--mono); font-size:.85rem;
}
.specifiche dt{
  padding:.55rem 1.25rem .55rem 0;
  color:var(--ink-faint); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  border-bottom:1px solid var(--rule);
  white-space:nowrap;
}
.specifiche dd{
  margin:0; padding:.55rem 0;
  border-bottom:1px solid var(--rule);
  font-variant-numeric:tabular-nums;
}
.specifiche dt:last-of-type,.specifiche dd:last-of-type{border-bottom:0}
.specifiche .nota{color:var(--ink-soft); font-size:.8rem}

.mappa{display:grid; gap:0; margin:1.5rem 0 1.5rem; border-top:1px solid var(--rule)}
.mappa .voce{
  display:grid; grid-template-columns:2.5rem 1fr; gap:0 1rem;
  padding:.85rem 0; border-bottom:1px solid var(--rule);
  align-items:baseline;
}
.mappa .num{
  font-family:var(--mono); font-size:.85rem; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.mappa .tit{font-family:var(--sans); font-weight:600; font-size:1.05rem; display:block; margin-bottom:.15rem}
.mappa .desc{font-size:1rem; color:var(--ink-soft); line-height:1.55}

/* ---- il terzo di approfondimento ---- */
.approfondimento{
  margin:3.5rem 0 0;
  padding-top:2rem;
  border-top:2px solid var(--rule);
}
.approfondimento > .intro{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:2rem;
}
.box{
  background:var(--panel);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:1.75rem 1.75rem .75rem;
  margin:0 0 1.75rem;
}
.box h2{
  margin:0 0 1.1rem;
  font-size:1.3rem;
  display:flex; flex-wrap:wrap; gap:.55rem; align-items:baseline;
}
.box .ganasce{
  font-family:var(--mono); color:var(--accent); font-weight:400;
  border:1px solid var(--accent-line); border-radius:2px;
  padding:0 .3rem; font-size:.85rem;
}
.box .rubrica{color:var(--accent); font-weight:600}
.box .oggetto{font-weight:400; color:var(--ink-soft); font-size:1.05rem}
.box pre{background:var(--ground)}

/* ---- coda ---- */
.coda{margin-top:3.5rem; padding-top:1.75rem; border-top:1px solid var(--rule)}
.coda h3{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .6rem}
.coda .fonte{font-size:.9rem; color:var(--ink-soft); line-height:1.6; margin-bottom:2rem}
.prossimo{
  background:var(--panel); border-left:2px solid var(--accent);
  padding:1.1rem 1.35rem; font-size:.98rem;
}
.prossimo .etichetta{
  display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.45rem;
}
.prossimo p{margin:0}
.num-mis{font-variant-numeric:tabular-nums}

/* ---- tabelle: solo navigazione o confronto, vedi editorial/figure.md ---- */
.tabella{overflow-x:auto; margin:1.75rem 0 2rem}
@media (min-width:52rem){ .tabella{margin-left:-3rem; margin-right:-3rem} }
.tabella table{border-collapse:collapse; width:100%; font-size:1rem}
.tabella th,.tabella td{
  text-align:left; vertical-align:top;
  padding:.7rem 1rem .7rem 0;
  border-bottom:1px solid var(--rule);
  line-height:1.5;
}
.tabella th{
  font-family:var(--mono); font-weight:400; font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);
}
.tabella tr:first-child td{border-top:1px solid var(--rule)}
.tabella td:first-child{color:var(--ink-soft)}
.tabella td strong{color:var(--ink)}
.tabella td{font-variant-numeric:tabular-nums}

hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}
.approfondimento hr{display:none}
.box + .box{margin-top:1.75rem}
.box h3{margin-top:1.5rem}

.nota-tabella{
  font-family:var(--mono); font-size:.78rem; line-height:1.55;
  color:var(--ink-faint); margin:-.75rem 0 2rem;
}
@media (min-width:52rem){ .nota-tabella{margin-left:-3rem; margin-right:-3rem} }

/* Cornice del sito: quello che pagina.css non copre perche' nasceva per una pagina sola.
   Stessi token, nessun colore nuovo. */

/* ---- barra in testa ---- */
.barra{
  border-bottom:1px solid var(--rule);
  background:var(--ground);
}
.barra .dentro{
  max-width:44rem;
  margin:0 auto;
  padding:.9rem 1.5rem;
  display:flex; align-items:baseline; gap:1rem;
}
.marchio{
  font-family:var(--sans);
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
}
.marchio .punto{ color:var(--accent) }
.barra nav{
  margin-left:auto;
  display:flex; gap:1rem;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.04em;
}
.barra nav a{ color:var(--ink-faint); text-decoration:none }
.barra nav a:hover{ color:var(--accent) }
.barra nav a[aria-current]{ color:var(--ink); }

/* ---- indice ---- */
.sommario{ margin:3rem 0 0; padding:0; list-style:none }
.sommario li{ border-top:1px solid var(--rule) }
.sommario li:last-child{ border-bottom:1px solid var(--rule) }
.sommario a{
  display:grid;
  grid-template-columns:2.75rem 1fr;
  gap:0 1rem;
  padding:1.35rem .25rem;
  text-decoration:none;
  color:inherit;
}
.sommario a:hover{ background:var(--accent-soft) }
.sommario .n{
  font-family:var(--mono);
  font-size:.8125rem;
  color:var(--ink-faint);
  padding-top:.35rem;
  font-variant-numeric:tabular-nums;
}
.sommario .t{
  font-family:var(--sans);
  font-weight:600;
  font-size:1.125rem;
  line-height:1.3;
  color:var(--ink);
}
.sommario a:hover .t{ color:var(--accent) }
.sommario .s{
  grid-column:2;
  font-size:1rem;
  line-height:1.45;
  color:var(--ink-soft);
  margin-top:.3rem;
}
@media (max-width:520px){
  .sommario a{ grid-template-columns:1fr }
  .sommario .n{ padding-top:0; margin-bottom:.35rem }
  .sommario .s{ grid-column:1 }
}

/* ---- il blocco "prossimo articolo" diventa un link ---- */
a.prossimo{ display:block; text-decoration:none; color:inherit }
a.prossimo:hover{ border-color:var(--accent-line) }
a.prossimo:hover p{ color:var(--accent) }

/* ---- piede del sito ---- */
.piede{
  border-top:1px solid var(--rule);
  /* nessun margine: la .sheet ha gia' 7rem di padding sotto */
}
.piede .dentro{
  max-width:44rem;
  margin:0 auto;
  padding:2rem 1.5rem 4rem;
  font-family:var(--sans);
  font-size:.8125rem;
  line-height:1.6;
  color:var(--ink-faint);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
}
.piede a{ color:var(--ink-soft) }
.piede a:hover{ color:var(--accent) }
.piede .tesi-piede{ font-style:italic }

/* ---- navigazione fra articoli in fondo ---- */
.scorri{
  display:flex; justify-content:space-between; gap:1rem;
  margin-top:3.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.03em;
}
.scorri a{ color:var(--ink-faint); text-decoration:none }
.scorri a:hover{ color:var(--accent) }
.scorri .avanti{ margin-left:auto; text-align:right }

/* ---- pagine corte: il piede sta in fondo alla finestra, non a meta' schermo ---- */
body{ display:flex; flex-direction:column; min-height:100svh }
main{ flex:1 0 auto }

/* ---- indice: le voci non ancora pubblicate. Si vedono, non si cliccano ---- */
.sommario li.attesa .voce{
  display:grid;
  grid-template-columns:2.75rem 1fr;
  gap:0 1rem;
  padding:1.35rem .25rem;
}
.sommario li.attesa .t{ color:var(--ink-faint); font-weight:500 }
.sommario li.attesa .s{ color:var(--ink-faint) }
.sommario li.attesa .quando{
  grid-column:2;
  margin-top:.5rem;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  border:1px solid var(--rule);
  border-radius:2px;
  padding:.15rem .4rem;
  justify-self:start;
}
@media (max-width:520px){
  .sommario li.attesa .voce{ grid-template-columns:1fr }
  .sommario li.attesa .quando{ grid-column:1 }
}