/* Archivio di prova Fuori Binario: pagine del numero, articoli, elenco dei numeri.
   Caricato su R2 come archivio-stile.css (archivio/genera_dati.py). */
:root{
  --carta:#FFFFFF; --fondo:#EFEDE8; --inchiostro:#1D1D1B; --grigio:#5E625F; --filo:#D3D1CB;
  --rosso:#D2232A; --scuro:#141416;
  --serif:"Crimson Pro",Georgia,serif; --sans:Syne,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--inchiostro);font:19px/1.55 var(--serif)}
a{color:var(--rosso)}
:focus-visible{outline:3px solid var(--rosso);outline-offset:2px}
img{max-width:100%;height:auto}

/* testata comune */
.testata{background:var(--scuro);color:#F0ECE4;padding:14px 20px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.testata .logo img{display:block;height:46px;width:auto}
.testata .dove{font:600 13px/1.3 var(--sans);letter-spacing:.04em;color:#C9C4BA}
.testata .dove a{color:#F0ECE4}
.testata nav{margin-left:auto;display:flex;gap:18px;font:600 14px var(--sans)}
.testata nav a{color:#F0ECE4}
.in-popup .testata{display:none}

/* ── pagina del numero: scansione a sinistra, fisarmonica a destra ── */
.numero-testa{max-width:1280px;margin:0 auto;padding:22px 20px 8px;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline}
.numero-testa h1{margin:0;font:700 clamp(30px,4vw,44px)/1.05 var(--serif)}
.numero-testa p{margin:0;color:var(--grigio);font:600 14px var(--sans)}
.numero-testa .pdf{margin-left:auto;font:700 14px var(--sans)}
.sfoglia{max-width:1280px;margin:0 auto;padding:10px 20px 60px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.scansione{position:sticky;top:12px;margin:0}
.foglio{position:relative;background:var(--carta);box-shadow:0 1px 0 rgba(0,0,0,.08),0 10px 24px -14px rgba(0,0,0,.45)}
.foglio img{display:block;width:100%}
.foglio svg{position:absolute;inset:0;width:100%;height:100%}
.foglio svg g{display:none}
.foglio svg g.qui{display:inline}
.area rect{fill:transparent;stroke:transparent;stroke-width:6}
.area:hover rect,.area:focus rect,.area.su rect{fill:rgba(210,35,42,.12);stroke:var(--rosso)}
.scansione figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font:600 14px var(--sans)}
.scansione button{font:700 14px var(--sans);padding:6px 12px;border:1.5px solid var(--inchiostro);background:var(--carta);border-radius:3px;cursor:pointer}
.scansione button:disabled{opacity:.35;cursor:default}

.indice{min-width:0}
.indice > details{background:var(--carta);margin:0 0 8px;border-left:4px solid transparent}
.indice > details[open]{border-left-color:var(--rosso)}
.indice > details > summary{list-style:none;cursor:pointer;padding:12px 16px;display:flex;gap:12px;align-items:baseline;font:700 15px var(--sans)}
.indice > details > summary::-webkit-details-marker{display:none}
.indice > details > summary .n{min-width:1.6em;color:var(--rosso)}
.indice > details > summary small{margin-left:auto;font-weight:600;color:var(--grigio)}
.indice .art{border-top:1px solid var(--filo);margin:0 16px}
.indice .art > summary{list-style:none;cursor:pointer;padding:10px 0;display:block}
.indice .art > summary::-webkit-details-marker{display:none}
.indice .art > summary b{display:block;font:700 20px/1.25 var(--serif)}
.indice .art > summary span{font:600 13px var(--sans);color:var(--grigio)}
.indice .art[open] > summary b{color:var(--rosso)}
.indice .art.su > summary b{text-decoration:underline;text-decoration-color:var(--rosso)}
.corpo{padding:0 0 16px;max-width:68ch}
.corpo .occhiello{font-style:italic;color:var(--grigio);margin:0 0 10px}
.corpo h3{font:700 17px var(--sans);margin:18px 0 6px}
.corpo p{margin:0 0 12px}
.azioni{font:600 14px var(--sans);display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:6px}
.etichette{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.etichette li{font:600 12px var(--sans);background:var(--fondo);padding:2px 8px;border-radius:2px}

/* ── pagina dell'articolo ── */
.articolo{max-width:760px;margin:0 auto;padding:28px 20px 70px}
.briciole{font:600 13px var(--sans);color:var(--grigio);margin:0 0 18px}
.briciole a{color:var(--grigio)}
.articolo .sezione{font:700 13px var(--sans);color:var(--rosso);letter-spacing:.06em;margin:0}
.articolo h1{font:700 clamp(32px,5vw,48px)/1.08 var(--serif);margin:6px 0 10px}
.articolo .occhiello{font:italic 22px/1.4 var(--serif);color:var(--grigio);margin:0 0 14px}
.articolo .firma{font:600 15px var(--sans);margin:0 0 26px}
.articolo .firma span{color:var(--grigio)}
.articolo .testo{background:var(--carta);padding:26px 30px;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.articolo .testo p{margin:0 0 14px}
.articolo .testo h2{font:700 19px var(--sans);margin:24px 0 8px}
.articolo .fonte{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;margin-top:26px;font:600 14px var(--sans)}
.articolo .fonte img{border:1px solid var(--filo)}
.vicini{display:flex;justify-content:space-between;gap:20px;margin-top:30px;font:600 14px var(--sans)}

/* ── elenco dei numeri (archivio di prova) ── */
.archivio{max-width:1280px;margin:0 auto;padding:26px 20px 60px}
.archivio h1{font:800 clamp(28px,4vw,40px) var(--sans);margin:0 0 4px;letter-spacing:.01em}
.archivio > p{color:var(--grigio);margin:0 0 22px;font:600 14px var(--sans)}
.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px;list-style:none;padding:0;margin:0}
.scheda{background:var(--carta);display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.scheda img{display:block;aspect-ratio:2339/3308;object-fit:cover;width:100%}
.scheda h2{font:700 20px var(--serif);margin:10px 14px 0}
.scheda h2 small{font:600 13px var(--sans);color:var(--grigio);margin-left:6px}
.scheda .conta{font:600 13px var(--sans);color:var(--grigio);margin:2px 14px 10px}
.scheda .bottoni{display:flex;gap:8px;margin:auto 14px 14px}
.scheda .bottoni a{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:44px;border:1.5px solid var(--inchiostro);border-radius:3px;text-decoration:none;color:var(--inchiostro)}
.scheda .bottoni a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scheda .bottoni a.sfoglia-btn{background:var(--inchiostro);color:#fff}
dialog.popup{border:0;padding:0;width:min(1320px,96vw);height:92vh;max-height:none;box-shadow:0 24px 70px rgba(0,0,0,.45);background:var(--fondo)}
dialog.popup::backdrop{background:rgba(20,20,22,.6)}
dialog.popup .barra{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--scuro);color:#F0ECE4;font:700 15px var(--sans)}
dialog.popup .barra a{color:#F0ECE4;margin-left:auto}
dialog.popup .barra button{font:700 14px var(--sans);padding:5px 12px;border:1.5px solid #F0ECE4;background:transparent;color:#F0ECE4;border-radius:3px;cursor:pointer}
dialog.popup iframe{display:block;width:100%;height:calc(100% - 46px);border:0}

@media (max-width:860px){
  .sfoglia{grid-template-columns:1fr}
  .scansione{position:static}
  .testata nav{margin-left:0}
  .articolo .testo{padding:18px}
  .articolo .fonte{grid-template-columns:80px 1fr}
}
@media (max-width:560px){
  .griglia{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .scheda h2{font-size:17px;margin:8px 10px 0}
  .scheda h2 small{display:block;margin:2px 0 0}
  .scheda .conta{margin:2px 10px 8px}
  .scheda .bottoni{margin:auto 10px 10px;gap:6px}
}
@media (prefers-reduced-motion:no-preference){.area rect{transition:fill .12s,stroke .12s}}