/* Il censimento di Pinocchio & Le volture di Collodi — stile comune
   Sottoprogetto di chiostri.cc. Carta, inchiostro, serif. Nessuna dipendenza. */

:root{
  --carta:#f5ecd6; --carta-2:#efe4ca; --inchiostro:#2a2925; --scuro:#5d5646;
  --rosso:#b03a2e; --oro:#bf9640; --verde:#67804f; --blu:#3d6480; --grigio:#8a8373;
  --riga:#c9bda1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#e6dcc4;color:var(--inchiostro);
  font-family:"Iowan Old Style",Palatino,Georgia,serif;line-height:1.5}
.wrap{max-width:1120px;margin:0 auto;padding:26px 26px 70px}
a{color:var(--blu)}
a:hover{color:var(--rosso)}

/* testata */
header.testa{border-bottom:3px double var(--inchiostro);padding-bottom:12px;margin-bottom:6px}
.marchio{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap}
.marchio h1{font-size:clamp(26px,4vw,40px);margin:0;font-weight:600;letter-spacing:-.3px;line-height:1.08}
.marchio .chi{font-size:12px;color:var(--scuro);font-family:system-ui,sans-serif;
  text-transform:uppercase;letter-spacing:1.2px;white-space:nowrap}
.sub{font-size:14.5px;color:var(--scuro);font-style:italic;margin-top:6px}

/* navigazione */
nav.principale{display:flex;gap:4px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
nav.principale a{display:block;font-family:system-ui,sans-serif;font-size:12.5px;
  text-decoration:none;color:var(--scuro);padding:6px 12px;border:1px solid transparent;
  border-radius:2px;letter-spacing:.4px}
nav.principale a:hover{background:#fff6dd;border-color:var(--riga);color:var(--inchiostro)}
nav.principale a[aria-current="page"]{background:var(--inchiostro);color:var(--carta);border-color:var(--inchiostro)}

/* testi */
h2{font-size:13px;text-transform:uppercase;letter-spacing:1.6px;color:var(--scuro);
  margin:34px 0 12px;border-bottom:1px solid var(--riga);padding-bottom:6px;font-weight:600}
h2 .n{color:var(--rosso);margin-right:7px}
h3{font-size:16px;margin:22px 0 7px}
p{margin:0 0 12px}
p.occhiello{font-size:18px;line-height:1.55;max-width:820px;margin:18px 0 0}
p.occhiello b{font-weight:600}
em{font-style:italic}
small{font-size:12px;color:var(--scuro);font-family:system-ui,sans-serif}

/* due porte */
.porte{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0 6px}
@media (max-width:980px){.porte{grid-template-columns:1fr}}
.porta{display:block;text-decoration:none;color:inherit;background:var(--carta);
  border:1.4px solid var(--scuro);border-radius:4px;padding:20px 22px;transition:transform .12s,box-shadow .12s}
.porta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(60,50,30,.14);color:inherit}
.porta .num{font-family:system-ui,sans-serif;font-size:10.5px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--rosso)}
.porta h3{font-size:23px;margin:6px 0 6px;font-weight:600}
.porta p{font-size:13.5px;color:#3d382e;margin:0}
.porta .freccia{display:inline-block;margin-top:10px;font-family:system-ui,sans-serif;font-size:12px;color:var(--blu)}

/* numeri */
.numeri{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--riga);
  border:1px solid var(--riga);margin-top:16px}
@media (max-width:900px){.numeri{grid-template-columns:repeat(2,1fr)}}
.num{background:var(--carta);padding:13px 15px}
.num b{display:block;font-size:28px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums}
.num span{display:block;font-size:11.5px;color:var(--scuro);margin-top:5px;
  font-family:system-ui,sans-serif;line-height:1.35}

/* tabelle */
table.dati{width:100%;border-collapse:collapse;font-size:13px;margin:6px 0 4px}
table.dati th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;
  color:var(--scuro);border-bottom:1px solid var(--riga);padding:6px 8px;font-weight:600}
table.dati td{border-bottom:1px dotted #cfc4a9;padding:9px 8px;vertical-align:top;line-height:1.4}
table.dati td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
table.dati tr.tot td{border-top:1.4px solid var(--scuro);border-bottom:none;font-weight:600}

/* citazione */
.quote{font-size:14px;font-style:italic;color:#4a4438;border-left:3px solid var(--rosso);
  padding:2px 0 2px 14px;margin:18px 0}

/* schede del censimento */
.griglia{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
@media (max-width:880px){.griglia{grid-template-columns:1fr}}
.caso{background:var(--carta);border:1px solid #b8ac8f;border-left:4px solid var(--grigio);
  border-radius:3px;padding:13px 15px;display:flex;flex-direction:column;gap:7px}
.caso.cl-utile{border-left-color:var(--verde)}
.caso.cl-ambiguo{border-left-color:var(--oro)}
.caso.cl-copia{border-left-color:var(--grigio)}
.caso.cl-estrattivo{border-left-color:var(--rosso)}
.caso.cl-dannoso{border-left-color:#6d1a12;background:#f7e7e1}
.caso.cl-rumore{border-left-color:#a8a8a8}
.caso.cl-precedente{border-left-color:var(--inchiostro)}
.caso .testa{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.caso h4{margin:0;font-size:15px;line-height:1.25;font-weight:600}
.caso .chi{font-size:11.5px;color:var(--scuro);font-family:system-ui,sans-serif;margin-top:3px}
.badge{font-family:system-ui,sans-serif;font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;white-space:nowrap;border:1px solid;font-weight:600}
.b-utile{background:#e3ebd6;border-color:var(--verde);color:#3f5429}
.b-ambiguo{background:#f7ebca;border-color:var(--oro);color:#6b5017}
.b-copia{background:#e7e4d9;border-color:var(--grigio);color:#4e493d}
.b-estrattivo{background:#f5ddd7;border-color:var(--rosso);color:#7c241d}
.b-dannoso{background:#e9c6bf;border-color:#6d1a12;color:#54130e}
.b-rumore{background:#e9e9e9;border-color:#a8a8a8;color:#555}
.b-precedente{background:#ded8c6;border-color:var(--inchiostro);color:#3a352b}
.assi{display:flex;gap:12px;font-size:10.5px;font-family:system-ui,sans-serif;color:var(--scuro)}
.assi span{display:inline-flex;align-items:center;gap:4px}
.quad{width:9px;height:9px;border:1px solid #b3a888;display:inline-block;border-radius:1px}
.quad.on{background:var(--inchiostro);border-color:var(--inchiostro)}
.evidenza{font-size:12.5px;line-height:1.45;color:#3d382e}
.serv{font-size:12px;line-height:1.4;background:#fbf3dc;border-left:2px solid var(--oro);padding:6px 9px}
.serv b{font-size:9.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--scuro);display:block;margin-bottom:2px}
.fondo{display:flex;justify-content:space-between;gap:8px;font-size:10.5px;
  font-family:system-ui,sans-serif;color:var(--scuro);margin-top:auto;padding-top:3px}

/* filtri */
.barra{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:14px 0 10px}
.barra .lab{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--scuro);
  margin-right:5px;font-family:system-ui,sans-serif}
button.f{font-family:system-ui,sans-serif;font-size:11.5px;padding:4px 10px;border-radius:2px;
  border:1px solid var(--scuro);background:var(--carta);cursor:pointer}
button.f:hover{background:#fff6dd}
button.f.on{background:var(--inchiostro);color:var(--carta)}
.sezione.hide{display:none}

/* riquadri */
.riquadro{background:var(--carta);border:1.4px solid var(--scuro);border-radius:4px;padding:14px 16px;margin:14px 0}
.riquadro h3{margin-top:0}
.scarica{display:inline-block;font-family:system-ui,sans-serif;font-size:12px;
  border:1px solid var(--scuro);border-radius:2px;padding:5px 11px;text-decoration:none;color:var(--inchiostro);margin:3px 4px 3px 0}
.scarica:hover{background:#fff6dd;color:var(--inchiostro)}

/* note e piè di pagina */
.nota{font-size:12px;color:var(--scuro);font-style:italic}
footer.pie{margin-top:38px;font-size:11.5px;line-height:1.6;color:#6a6353;
  font-family:system-ui,sans-serif;border-top:1px solid var(--riga);padding-top:13px}
footer.pie b{color:#4a4438}