/* =======================================================================
   Cammino Diritto — impaginazione broadsheet
   Derivato da demo-rivista-6-broadsheet.html
   Tutto e' confinato dentro .bsx per non toccare il tema Bootstrap
   usato dalle pagine interne.
   ======================================================================= */

:root{
  --carta:#F3F2EE;
  --bianco:#FBFAF7;
  --ink:#141412;
  --ink2:#54534E;
  --fil:#C8C6BE;
  --rosso:#9B1B1B;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --stretto:'Archivo Narrow',Arial,Helvetica,sans-serif;
}

body{background:var(--carta);}

.bsx,.bsx *{box-sizing:border-box}
.bsx{
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.bsx a{color:inherit;text-decoration:none}
.bsx,.bsx p,.bsx h1,.bsx h2,.bsx h3,.bsx h4,.bsx a,.bsx span,.bsx div{overflow-wrap:anywhere;word-break:break-word}
.bsx a:hover,.bsx a:focus{color:var(--rosso);text-decoration:none}
.bsx .wrap{max-width:1320px;margin:0 auto;padding:0 26px}
.bsx img{max-width:100%}

/* ---------- datario ---------- */
.bsx .data{
  font-family:var(--stretto);font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink2);
  display:flex;justify-content:space-between;align-items:center;
  padding:5px 0;border-bottom:.5px solid var(--fil);
  flex-wrap:wrap;gap:8px;
}
.bsx .data .dxs{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- testata ---------- */
.bsx .testata{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:end;gap:20px;padding:9px 0 7px;
}
.bsx .testata .lat{font-family:var(--stretto);font-size:11.5px;line-height:1.45;color:var(--ink2)}
.bsx .testata .lat.dx{text-align:right}
.bsx .marchio{
  font-family:var(--serif);
  font-size:clamp(30px,4.6vw,56px);font-weight:400;letter-spacing:.03em;
  line-height:.95;text-align:center;white-space:nowrap;margin:0;color:var(--ink);
}
.bsx .marchio a{display:inline-flex;align-items:center;gap:.24em}
.bsx .marchio a:hover{color:var(--ink)}
/* L'effige accanto al nome: si misura in em, cosi' cresce e cala insieme
   al corpo del marchio, che e' fluido. Il disegno e' a tratto nero: qui
   sta accanto al nome, non deve rubargli la scena, quindi si schiarisce
   con l'opacita' invece di tenere un secondo file solo per il grigio. */
.bsx .marchio .effige{
  height:1.1em;width:auto;flex:none;
  opacity:.28;
  transform:translateY(-.02em);
}
.bsx .sottomarchio{
  font-family:var(--stretto);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;color:var(--ink2);margin:6px 0 0;
}
.bsx .rule{border-top:3px solid var(--ink);border-bottom:.5px solid var(--ink);height:5px}

/* ---------- navigazione ---------- */
.bsx nav.bsnav{display:flex;justify-content:stretch;gap:0;flex-wrap:wrap;border-bottom:.5px solid var(--fil);background:none;margin:0;min-height:0;border-radius:0}
/* i bottoni si allargano a riempire tutta la barra, larghezza proporzionata al contenuto */
.bsx nav.bsnav > a,.bsx nav.bsnav > .voce{flex:1 1 auto}
.bsx nav.bsnav > a,.bsx nav.bsnav .voce > a{
  display:block;font-family:var(--stretto);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink2);padding:9px 16px;text-align:center;
  border-right:.5px solid var(--fil);white-space:nowrap;
}
.bsx nav.bsnav > *:first-child > a,.bsx nav.bsnav > a:first-child{border-left:.5px solid var(--fil)}
.bsx nav.bsnav a:hover{color:var(--rosso)}
.bsx nav.bsnav .voce{position:relative}
.bsx nav.bsnav .voce > .tendina{
  display:none;position:absolute;left:0;top:100%;z-index:900;
  min-width:250px;background:var(--bianco);border:.5px solid var(--ink);
  padding:8px 0;box-shadow:0 8px 22px rgba(0,0,0,.14);
}
.bsx nav.bsnav .voce:hover > .tendina,.bsx nav.bsnav .voce:focus-within > .tendina,.bsx nav.bsnav .voce.aperta > .tendina{display:block}
.bsx nav.bsnav .tendina a{
  display:block;font-family:var(--stretto);font-size:12.5px;letter-spacing:.02em;
  text-transform:none;color:var(--ink2);padding:5px 16px;border:0;white-space:normal;
}
.bsx nav.bsnav .tendina a:hover{color:var(--rosso);background:#F0EFEA}
.bsx nav.bsnav .tendina.larga{min-width:640px;column-count:2;column-gap:0;left:0;right:auto}
.bsx nav.bsnav .tendina .tit{
  font-family:var(--stretto);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--rosso);font-weight:600;padding:8px 16px 3px;
}
.bsx .apri-menu{display:none}

/* ---------- sommario per rubrica ---------- */
.bsx .somm{display:flex;gap:0;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.bsx .somm div{
  flex:1;min-width:180px;padding:10px 16px;border-right:.5px solid var(--fil);
  font-family:var(--stretto);font-size:12.5px;line-height:1.4;color:var(--ink2);
}
.bsx .somm div:last-child{border-right:0}
.bsx .somm b{
  display:block;font-family:var(--stretto);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rosso);font-weight:600;margin-bottom:3px;
}

/* ---------- corpo a tre colonne ---------- */
.bsx .corpo{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1.15fr) 250px;gap:0;padding:0 0 30px}
.bsx .colonna{padding:20px 26px}
.bsx .c1{padding-left:0;border-right:.5px solid var(--fil)}
.bsx .c2{border-right:.5px solid var(--fil)}
.bsx .c3{padding-right:0}

/* le colonne seguono lo scroll: il filetto verticale resta sulla colonna,
   il contenuto scorre dentro il suo involucro */
.bsx .corpo > .colonna > .segue{position:sticky;top:calc(var(--bsnav-h,0px) + 16px)}

.bsx .kick{font-family:var(--stretto);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso)}
.bsx .ius{font-family:var(--stretto);font-size:10.5px;letter-spacing:.05em;color:var(--ink2);border:.5px solid var(--fil);padding:1px 5px}
.bsx .meta{font-family:var(--stretto);font-size:11.5px;color:var(--ink2)}

.bsx h1.apertura{font-family:var(--serif);font-size:38px;font-weight:600;line-height:1.1;margin:8px 0 10px;letter-spacing:-.01em;color:var(--ink)}
.bsx h1.apertura a:hover{color:var(--rosso)}
.bsx .occhio{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink2);margin:0 0 12px}
.bsx .testo{column-count:2;column-gap:26px;column-rule:.5px solid var(--fil);font-size:14.5px;color:#26251F}
.bsx .testo p{margin:0 0 10px}
.bsx .testo p:first-child::first-letter{float:left;font-size:44px;line-height:.86;padding:3px 7px 0 0;font-weight:600}
.bsx .rif{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:.5px solid var(--fil)}

.bsx h2.sez{
  font-family:var(--stretto);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);margin:26px 0 12px;
  padding-bottom:6px;border-bottom:2px solid var(--ink);
}
.bsx .c2 h2.sez:first-child,.bsx .c3 h2.sez:first-child{margin-top:0}

.bsx .art{padding-bottom:12px;margin-bottom:12px;border-bottom:.5px solid var(--fil)}
.bsx .art h3{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.24;margin:5px 0 5px;color:var(--ink)}
.bsx .art:hover h3{color:var(--rosso)}
.bsx .art p{font-size:13.5px;color:var(--ink2);margin:0}
.bsx .art .riga{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:7px}
.bsx .griglia2{column-count:2;column-gap:26px;column-rule:.5px solid var(--fil)}
.bsx .griglia2 .art{break-inside:avoid;-webkit-column-break-inside:avoid}
.bsx .c2 .art h3{font-size:16px;font-weight:400}

/* ---------- spalla destra ---------- */
.bsx .riquadro{border:.5px solid var(--ink);padding:14px;margin-bottom:20px;background:var(--bianco)}
.bsx .riquadro .k{font-family:var(--stretto);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rosso)}
.bsx .riquadro h4{font-family:var(--serif);font-size:19px;font-weight:600;margin:6px 0 6px;line-height:1.2}
.bsx .riquadro p{font-family:var(--stretto);font-size:12.5px;color:var(--ink2);margin:0 0 10px}
.bsx .riquadro a.piu{font-family:var(--stretto);font-size:12px;color:var(--rosso);font-weight:600}
.bsx .fasc{text-align:center;border:.5px solid var(--fil);padding:14px;margin-bottom:20px;background:var(--bianco)}
.bsx .fasc .n{font-family:var(--serif);font-size:28px;font-weight:600}
.bsx .fasc .tl{font-family:var(--stretto);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.bsx .fasc .n.rom{font-size:44px;line-height:1.04;letter-spacing:.05em}
.bsx .fasc .d{font-family:var(--stretto);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin:2px 0 10px}
.bsx .fasc a{font-family:var(--stretto);font-size:12px;color:var(--rosso);display:block;border-top:.5px solid var(--fil);padding-top:9px}
.bsx .lista a{display:block;font-family:var(--stretto);font-size:12.5px;line-height:1.38;color:var(--ink2);padding:7px 0;border-bottom:.5px solid var(--fil)}
.bsx .lista a:hover{color:var(--rosso)}
.bsx .reclame{margin:0 0 20px;text-align:center}

/* ---------- piede ---------- */
.bsx footer.bspiede{border-top:3px solid var(--ink);padding:26px 0 46px;background:none;color:var(--ink2)}
.bsx .piede{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px;font-family:var(--stretto);font-size:12.5px;color:var(--ink2)}
.bsx .piede h4{font-family:var(--stretto);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink);margin:0 0 10px;font-weight:600}
.bsx .piede a{display:block;padding:2px 0}
.bsx .piede p{margin:0;max-width:42ch}
.bsx .colo{
  margin-top:22px;padding-top:12px;border-top:.5px solid var(--fil);
  font-family:var(--stretto);font-size:11px;color:var(--ink2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
}

/* ---------- responsive ---------- */
@media(max-width:1060px){
  .bsx .corpo > .colonna > .segue{position:static!important;top:auto!important}
  .bsx .corpo{grid-template-columns:1fr}
  .bsx .colonna{padding:20px 0;border-right:0;border-bottom:.5px solid var(--fil)}
  .bsx .testo,.bsx .griglia2{column-count:1}
  .bsx .testata{grid-template-columns:1fr}
  .bsx .testata .lat{display:none}
  .bsx .piede{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .bsx .wrap{padding:0 16px}
  .bsx h1.apertura{font-size:29px}
  .bsx .piede{grid-template-columns:1fr}
  .bsx .apri-menu{
    display:block;width:100%;text-align:center;background:none;border:0;
    font-family:var(--stretto);font-size:12.5px;letter-spacing:.09em;
    text-transform:uppercase;color:var(--ink);padding:10px 0;
    border-bottom:.5px solid var(--fil);cursor:pointer;
  }
  .bsx nav.bsnav{display:none;flex-direction:column}
  .bsx nav.bsnav.aperta{display:flex}
  .bsx nav.bsnav > a,.bsx nav.bsnav .voce > a{border-left:0;border-right:0;border-bottom:.5px solid var(--fil);text-align:center}
  .bsx nav.bsnav .voce > .tendina,.bsx nav.bsnav .tendina.larga{position:static;display:none;border:0;box-shadow:none;min-width:0;column-count:1;background:#EDECE7;padding:6px 0 10px}
  .bsx nav.bsnav .voce.aperta > .tendina{display:block}
  .bsx nav.bsnav .tendina a{text-align:center;font-size:12px}
}

/* ---------- stampa ---------- */
@media print{
  .bsx nav.bsnav,.bsx .data,.bsx .reclame{display:none}
  .bsx .corpo{display:block}
}

/* =======================================================================
   PAGINA DEL CONTRIBUTO
   Derivato da demo-articolo-1-broadsheet.html
   ======================================================================= */

/* fascia di prodotto sotto la testata */
.bsx-prodotto{background:var(--rosso);color:#F7F3EE;font-family:var(--stretto)}
.bsx-prodotto .wrap{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.bsx-prodotto b{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.bsx-prodotto span{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.82}
.bsx-prodotto a{color:#F7F3EE}
.bsx-prodotto a:hover{color:#F7F3EE;opacity:.8}
.bsx-prodotto .alt{margin-left:auto;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid rgba(247,243,238,.45);padding-bottom:1px}

.bsx .briciole{font-family:var(--stretto);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);padding:14px 0 0;margin:0}
.bsx .briciole a:hover{color:var(--rosso)}

/* ---------- intestazione del contributo ---------- */
.bsx .doc-h{padding:20px 0 16px;border-bottom:2px solid var(--ink)}
.bsx .qualifica{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.bsx h1.doc-t{font-family:var(--serif);font-size:clamp(27px,3.5vw,43px);font-weight:600;line-height:1.08;margin:0 0 9px;letter-spacing:-.012em;max-width:32ch;color:var(--ink)}
.bsx .titoloen{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.28;color:var(--ink2);margin:0 0 16px;max-width:62ch}
.bsx .autori{display:flex;flex-wrap:wrap;gap:30px;padding:13px 0 0;border-top:.5px solid var(--fil)}
.bsx .autore .nome{font-family:var(--serif);font-size:17px;font-weight:600}
.bsx .autore .aff{font-family:var(--stretto);font-size:12px;color:var(--ink2);line-height:1.35;max-width:34ch}
.bsx .autore .aff .qualifica-autore{display:block}
.bsx .vig{display:flex;flex-wrap:wrap;gap:0;border-top:.5px solid var(--fil);margin-top:15px}
.bsx .vig > div{flex:1 1 172px;padding:12px 18px 12px 10px;border-right:.5px solid var(--fil)}
.bsx .vig > div:first-child{padding-left:0}
.bsx .vig > div:last-child{border-right:0;padding-right:0}
.bsx .vig dt{font-family:var(--stretto);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);margin-bottom:4px}
.bsx .vig dd{margin:0;font-family:var(--stretto);font-size:12.5px;line-height:1.45;color:var(--ink2)}
.bsx .vig dd b{color:var(--ink);font-weight:600}
.bsx .stato{display:inline-flex;align-items:center;gap:8px;font-family:var(--stretto);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--bianco);border:.5px solid var(--fil);padding:4px 10px;margin-top:14px;color:var(--ink2)}
.bsx .stato i{font-style:normal;width:6px;height:6px;border-radius:50%;background:#2F6B4F;display:inline-block}
.bsx .stato.attesa i{background:var(--rosso)}

/* ---------- tre colonne del documento ---------- */
.bsx .corpodoc{display:grid;grid-template-columns:250px minmax(0,1fr) 264px;gap:0;padding:0 0 30px}
.bsx .cx{padding:22px 30px;padding-left:0;border-right:.5px solid var(--fil)}
.bsx .cy{padding:22px 30px;border-right:.5px solid var(--fil)}
.bsx .cz{padding:22px 30px;padding-right:0}
/* la spalla destra segue lo scroll, come le colonne della home.
   align-self:start le impedisce di stirarsi su tutta l'altezza della
   griglia, che annullerebbe lo sticky. Il valore di top lo calcola
   articolo.asp: la colonna e' piu' alta della finestra e va agganciata
   dal basso, altrimenti se ne vedrebbe solo la testa. */
.bsx .corpodoc > .cz{position:sticky;top:calc(var(--bsnav-h,0px) + 16px);align-self:start}

/* sommario del contributo */
.bsx .indice{position:sticky;top:calc(var(--bsnav-h,0px) + 16px)}
.bsx .indice .k{font-family:var(--stretto);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.bsx .indice a{display:block;font-family:var(--stretto);font-size:12.5px;line-height:1.34;color:var(--ink2);padding:5px 0 5px 10px;border-left:2px solid transparent}
.bsx .indice a.sub{padding-left:24px;font-size:12px;opacity:.85}
.bsx .indice a:hover{color:var(--rosso)}
.bsx .indice a.qui{color:var(--rosso);border-left-color:var(--rosso);font-weight:600}
.bsx .indice .box{max-height:calc(100vh - 130px);overflow-y:auto;padding-right:6px}

/* note a margine, nella colonna di sinistra all'altezza del richiamo */
.bsx .corpodoc .cx{position:relative}
.bsx .nota-margine{
  position:absolute;left:0;width:100%;padding:2px 22px 0 0;
  font-family:var(--stretto);font-size:11.5px;line-height:1.35;
  font-style:italic;color:var(--ink2);border-top:.5px solid var(--fil);
}
.bsx .nota-margine .num{font-style:normal;font-weight:600;color:var(--rosso);margin-right:5px}
/* dentro una nota gia' corsiva i titoli delle opere tornano tondi */
.bsx .nota-margine em,.bsx .nota-margine i{font-style:normal}
.bsx .nota-margine a{color:var(--rosso)}
/* con le note a margine il sommario non insegue piu' lo scroll:
   occuperebbe lo spazio delle note */
.bsx .corpodoc.con-note .indice{position:static}
.bsx .corpodoc.con-note .indice .box{max-height:none}
.bsx .testodoc sup a{color:var(--rosso);font-weight:600}

/* corpo */
.bsx .abs{margin-bottom:15px}
.bsx .abs .lab{font-family:var(--stretto);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);display:block;margin-bottom:5px}
.bsx .abs p,.bsx .abs > div{margin:0 0 10px;font-size:15.5px;line-height:1.56;color:#26251F;max-width:74ch;text-align:justify}
.bsx .abs > div > p{margin:0 0 10px;max-width:none;font-size:inherit;line-height:inherit;text-align:justify}
.bsx .abs.en p,.bsx .abs.en > div{font-style:italic;color:var(--ink2)}
.bsx .abs.en .titoloen{margin-bottom:8px}
.bsx .chiavi{font-family:var(--stretto);font-size:12.5px;color:var(--ink2);padding:12px 0;border-top:.5px solid var(--fil);border-bottom:.5px solid var(--fil);margin-bottom:24px}
.bsx .chiavi b{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);margin-right:10px}
.bsx .chiavi a{color:var(--ink2)}
.bsx .chiavi a:hover{color:var(--rosso)}

.bsx .testodoc{font-size:16.5px;line-height:1.63;color:#1B1A16;max-width:70ch}
.bsx .testodoc h1,.bsx .testodoc h2{font-family:var(--serif);font-size:20px;font-weight:600;line-height:1.24;margin:30px 0 10px;scroll-margin-top:20px;color:var(--ink)}
.bsx .testodoc h3,.bsx .testodoc h4{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.26;margin:22px 0 8px;scroll-margin-top:20px;color:var(--ink)}
.bsx .testodoc p{margin:0 0 12px;text-align:justify;hyphens:auto}
.bsx .testodoc p.sez-testo{scroll-margin-top:20px;text-align:left;margin-top:28px}
.bsx .testodoc sup{font-size:.62em;vertical-align:super;color:var(--rosso);line-height:0;font-weight:600}
.bsx .testodoc blockquote{margin:16px 0;padding:2px 0 2px 16px;border-left:2px solid var(--fil);color:var(--ink2);font-size:15px}
.bsx .testodoc img{height:auto;margin:10px 0}
.bsx .testodoc table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
.bsx .testodoc td,.bsx .testodoc th{border:.5px solid var(--fil);padding:6px 8px;vertical-align:top}

.bsx .notedoc{margin-top:32px;padding-top:14px;border-top:2px solid var(--ink)}
.bsx .notedoc h2{font-family:var(--stretto);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;color:var(--ink)}
.bsx .notedoc,.bsx .notedoc p,.bsx .notedoc li{font-size:13.5px;line-height:1.5;color:var(--ink2)}
.bsx .notedoc ol,.bsx .notedoc ul{margin:0;padding-left:20px;max-width:82ch}
.bsx .notedoc li{margin-bottom:7px}

.bsx .cita{border:.5px solid var(--ink);background:var(--bianco);padding:14px 16px;margin-top:22px}
.bsx .cita .k{font-family:var(--stretto);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--rosso);display:block;margin-bottom:7px}
.bsx .cita p{margin:0;font-size:14.5px;line-height:1.5}
.bsx .cita .doi{font-family:var(--stretto);font-size:11.5px;color:var(--ink2);display:block;margin-top:8px;padding-top:8px;border-top:.5px solid var(--fil)}
.bsx .valutatori{font-family:var(--stretto);font-size:12px;line-height:1.5;color:var(--ink2);background:var(--bianco);border-left:2px solid var(--rosso);padding:11px 14px;margin-top:18px}
.bsx .valutatori b{color:var(--ink)}

/* riquadro di invito all'accesso */
.bsx .paywall{border:.5px solid var(--ink);background:var(--bianco);padding:20px;margin:0 0 18px;text-align:center}
.bsx .paywall p.forte{font-family:var(--serif);font-size:20px;font-weight:600;margin:0 0 10px}
.bsx .paywall p{font-family:var(--stretto);font-size:13px;line-height:1.5;color:var(--ink2);margin:0 0 12px}
.bsx .sfocato{filter:blur(4px);user-select:none;pointer-events:none;max-height:420px;overflow:hidden}

/* pulsanti della spalla */
.bsx .btn-doc{font-family:var(--stretto);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;border:.5px solid var(--ink);padding:9px 14px;background:var(--bianco);cursor:pointer;color:var(--ink);display:block;width:100%;text-align:center;margin-bottom:8px}
.bsx .btn-doc:hover{border-color:var(--rosso);color:var(--rosso)}
.bsx .btn-doc.pri{background:var(--rosso);border-color:var(--rosso);color:#F7F3EE}
.bsx .btn-doc.pri:hover{color:#F7F3EE;opacity:.9}
.bsx .lista a small{display:block;font-size:10.5px;opacity:.7;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.bsx .cz h2.sez:first-of-type{margin-top:22px}

.bsx .corpodoc.senza-indice{grid-template-columns:minmax(0,1fr) 264px}
/* Senza sommario il documento restava largo 1080px e la pagina non
   partiva dove parte la testata. Il corpo tiene ora la stessa misura
   della testata; a stringersi e' solo la colonna del testo, qui sotto. */
.bsx .wrap.doc-stretto{max-width:1320px}
.bsx .corpodoc.senza-indice .cx{display:none}
.bsx .corpodoc.senza-indice .cy{padding-left:0}
.bsx .corpodoc.senza-indice .abs p,
.bsx .corpodoc.senza-indice .abs > div,
.bsx .corpodoc.senza-indice .testodoc,
.bsx .corpodoc.senza-indice .notedoc ol,
.bsx .corpodoc.senza-indice .notedoc ul,
.bsx .corpodoc.senza-indice .notedoc p{max-width:none}

@media(max-width:1100px){
  .bsx .nota-margine{display:none}
  .bsx .corpodoc,.bsx .corpodoc.senza-indice{grid-template-columns:1fr}
  .bsx .cx,.bsx .cy,.bsx .cz{padding:20px 0;border-right:0;border-bottom:.5px solid var(--fil)}
  .bsx .indice{position:static}
  .bsx .corpodoc > .cz{position:static!important;top:auto!important}
  .bsx .indice .box{max-height:none}
}
@media print{
  .bsx .nota-margine{display:none}
  .bsx .cx,.bsx .cz,.bsx-prodotto,.bsx .briciole{display:none}
  .bsx .corpodoc{display:block}
}

/* Il paragrafo "Sommario:" dell'autore resta nel documento, perche' e' la
   sorgente dell'indice laterale, ma non si mostra: nella pagina lo
   sostituisce l'indice, nel PDF sta in prima pagina. */
.somm-autore{display:none}

/* =======================================================================
   VOCE ACCOUNT NELLA NAVIGAZIONE
   Al posto della parola "Account" ci sono ritratto, nome e livello; la
   tendina riprende quello che diceva il vecchio pannello laterale.
   ======================================================================= */
.bsx nav.bsnav .voce-conto > a{ display:flex; align-items:center; gap:7px; }
.bsx .voce-conto .ritratto{
  width:19px; height:19px; border-radius:50%; object-fit:cover;
  border:1px solid var(--fil); background:var(--bianco);
}
.bsx .voce-conto .liv{
  font-size:10.5px; letter-spacing:.06em; color:var(--fil);
  text-transform:none; margin-left:2px;
}
.bsx nav.bsnav .voce-conto:hover > a .liv{ color:var(--rosso); }

.bsx .tendina-conto{ min-width:290px; }
.bsx .tendina-conto .conto{
  display:flex; align-items:center; gap:10px;
  padding:10px 16px 11px; margin-bottom:5px;
  border-bottom:.5px solid var(--fil);
}
.bsx .tendina-conto .ritratto-g{
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:.5px solid var(--fil); background:var(--bianco); flex:0 0 40px;
}
.bsx .tendina-conto .chi{
  font-family:var(--stretto); font-size:11px; line-height:1.4; color:var(--ink2);
}
.bsx .tendina-conto .chi b{
  display:block; font-size:13.5px; color:var(--ink); font-weight:600;
}
.bsx .tendina-conto .nota{
  display:block; padding:2px 16px 8px;
  font-family:var(--stretto); font-size:11.5px; line-height:1.45; color:var(--ink2);
}
.bsx .tendina-conto .nota b{ color:var(--ink); font-weight:600; }
.bsx .tendina-conto .nota.ultimo{
  margin-top:4px; padding-top:8px; border-top:.5px solid var(--fil);
}
.bsx .tendina-conto ul.manca{
  margin:4px 0; padding-left:18px; list-style:disc;
}
.bsx .tendina-conto ul.manca li{ color:var(--rosso); font-size:11.5px; }

/* sloggato: il comando di accesso, non una tendina */
.bsx nav.bsnav a.accedi{
  display:block; font-family:var(--stretto); font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--rosso);
  padding:9px 16px; border-right:.5px solid var(--fil); white-space:nowrap;
}
.bsx nav.bsnav a.accedi:hover{ color:var(--ink); }

/* =======================================================================
   IL GIUDIZIO DEI LETTORI (include/voti-lettori.asp)
   Tre criteri da 1 a 5, in coda al contributo e prima delle note.
   ======================================================================= */
.bsx .vl{ margin-top:34px; padding-top:16px; border-top:2px solid var(--ink); }
.bsx .vl h2.sez{ margin-top:0; border-bottom:0; padding-bottom:0; }

/* --- l'esito --- */
.bsx .vl-esito{
  display:flex; gap:26px; align-items:flex-start; flex-wrap:wrap;
  background:var(--bianco); border:.5px solid var(--fil);
  padding:16px 18px; margin:0 0 18px;
}
.bsx .vl-media{ flex:0 0 auto; text-align:center; padding-right:22px; border-right:.5px solid var(--fil2, #E4E1DA); }
.bsx .vl-media b{ display:block; font-family:var(--serif); font-size:40px; font-weight:600; line-height:1; color:var(--ink); }
.bsx .vl-media span{ display:block; font-family:var(--stretto); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink2); margin-top:5px; }

.bsx .vl-criteri{ flex:1 1 260px; margin:0; }
.bsx .vl-criteri > div{ display:flex; align-items:center; gap:12px; padding:4px 0; }
.bsx .vl-criteri dt{
  flex:0 0 45%; font-family:var(--stretto); font-size:11.5px;
  letter-spacing:.04em; color:var(--ink2); font-weight:400;
}
.bsx .vl-criteri dd{ flex:1; display:flex; align-items:center; gap:9px; margin:0; }
.bsx .vl-barra{ flex:1; height:5px; background:#EDECE7; display:block; }
.bsx .vl-barra i{ display:block; height:100%; background:var(--rosso); }
.bsx .vl-criteri dd b{ font-family:var(--serif); font-size:15px; color:var(--ink); min-width:26px; text-align:right; }

.bsx .vl-vuoto,
.bsx .vl-nota,
.bsx .vl-privacy{
  font-family:var(--stretto); font-size:12.5px; line-height:1.5; color:var(--ink2); margin:0 0 12px;
}
.bsx .vl-nota a{ color:var(--rosso); border-bottom:1px solid var(--fil); }

/* --- la scheda --- */
.bsx .vl-form{ background:var(--carta); border-left:2px solid var(--rosso); padding:16px 18px 14px; }
.bsx .vl-invito{ font-family:var(--stretto); font-size:12.5px; color:var(--ink2); margin:0 0 12px; }
.bsx .vl-riga{ border:0; padding:0; margin:0 0 12px; }
.bsx .vl-riga legend{
  border:0; margin:0 0 5px; padding:0; width:auto;
  font-family:var(--stretto); font-size:11.5px; font-weight:600;
  letter-spacing:.05em; color:var(--ink);
}
.bsx .vl-riga legend small{
  display:block; font-weight:400; font-size:11px; color:var(--ink2); margin-top:1px;
}
.bsx .vl-scala{ display:flex; gap:6px; }
.bsx .vl-scala label{ margin:0; cursor:pointer; }
.bsx .vl-scala input{ position:absolute; opacity:0; width:0; height:0; }
.bsx .vl-scala span{
  display:block; width:34px; line-height:30px; text-align:center;
  border:.5px solid var(--fil); background:var(--bianco);
  font-family:var(--stretto); font-size:13px; color:var(--ink2);
}
.bsx .vl-scala label:hover span{ border-color:var(--rosso); color:var(--rosso); }
.bsx .vl-scala input:checked + span{ background:var(--rosso); border-color:var(--rosso); color:#F7F3EE; }
.bsx .vl-scala input:focus-visible + span{ outline:2px solid var(--ink); outline-offset:1px; }

.bsx .vl-invia{
  font-family:var(--stretto); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  background:var(--rosso); border:.5px solid var(--rosso); border-radius:0;
  color:#F7F3EE; padding:9px 18px; cursor:pointer; margin:4px 0 10px;
}
.bsx .vl-invia:hover{ opacity:.9; }
.bsx .vl-privacy{ margin:0; font-size:11px; }
.bsx .vl-fatto{
  font-family:var(--stretto); font-size:12.5px; color:#2F6B4F;
  border-left:2px solid #2F6B4F; padding:8px 12px; margin:14px 0 0; background:var(--bianco);
}

@media (max-width:600px){
  .bsx .vl-media{ border-right:0; padding-right:0; }
  .bsx .vl-criteri dt{ flex:0 0 100%; }
  .bsx .vl-criteri > div{ flex-wrap:wrap; }
}

/* il giudizio gia' dato: si legge, non si rifà */
.bsx .vl-dato{
  background:var(--carta); border-left:2px solid var(--rosso);
  padding:11px 14px; margin:0;
}
.bsx .vl-dato b{ color:var(--ink); font-weight:600; }

/* =======================================================================
   CONTATORE DEI SOSPESI nella riga in testa
   Allineato alle altre voci (prima era dentro un <sup>, quindi sollevato)
   e con un alone giallo che pulsa piano: si nota senza gridare.
   ======================================================================= */
.bsx .data .sospesi{
  font-style:normal; display:inline-flex; align-items:baseline; gap:5px;
}
.bsx .data .sospesi .bell{ font-size:11px; }
.bsx .data .sospesi-n{
  /* i contatori vivono dentro un <i>: senza questo uscirebbero in corsivo */
  font-style:normal;
  font-family:var(--stretto); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--rosso);
  animation:sospesi-alone 1.8s ease-in-out infinite;
}
@keyframes sospesi-alone{
  0%,100% { text-shadow:0 0 0 rgba(245,196,0,0); }
  50%     { text-shadow:0 0 6px rgba(245,196,0,.95), 0 0 2px rgba(245,196,0,.75); }
}
/* chi ha chiesto meno animazioni vede l'alone fermo, non lampeggiante */
@media (prefers-reduced-motion: reduce){
  .bsx .data .sospesi-n{ animation:none; text-shadow:0 0 5px rgba(245,196,0,.8); }
}

/* =======================================================================
   VOTO DEI LETTORI IN TESTA AL CONTRIBUTO
   Cinque stelle e la media, subito sotto i dati identificativi. Porta al
   modulo in fondo, dove si vota.
   ======================================================================= */
.bsx .autori a.stelle{
  margin-left:auto; align-self:center;
  display:inline-flex; align-items:baseline; gap:8px;
  padding:5px 11px;
  border:.5px solid var(--fil); background:var(--bianco);
  font-family:var(--stretto); white-space:nowrap;
}
.bsx a.stelle:hover{ border-color:var(--rosso); }
/* la fila grigia sta sotto, quella rossa sopra tagliata alla misura del voto */
.bsx a.stelle .astri{
  position:relative; display:inline-block; white-space:nowrap;
  font-size:13px; line-height:1; color:var(--fil); letter-spacing:1px;
}
.bsx a.stelle .astri i{
  position:absolute; left:0; top:0; overflow:hidden;
  font-style:normal; color:var(--rosso); letter-spacing:1px;
}
.bsx a.stelle b{ font-family:var(--serif); font-size:16px; color:var(--ink); }
.bsx a.stelle .quanti{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink2);
}
.bsx a.stelle:hover b,
.bsx a.stelle:hover .quanti{ color:var(--rosso); }


/* =======================================================================
   La barra del menu resta in alto mentre si scorre

   Il passaggio a position:fixed lo fa un copione in header.asp, non
   position:sticky: sticky vale solo dentro il proprio contenitore, e la
   testata (.wrap) e' alta 157px, quindi la barra si staccherebbe dopo
   pochissimo. Un distanziatore prende il posto della barra nel flusso,
   cosi' la pagina non salta nel momento del passaggio.

   Il fondo e' a tutta larghezza, ma le voci restano nella gabbia della
   testata: da qui il padding calcolato sui 1320px di .wrap.
   ======================================================================= */
.bsx nav.bsnav.fissa{
  position:fixed; top:0; left:0; right:0; z-index:900;
  background:var(--carta);
  border-bottom:.5px solid var(--ink);
  box-shadow:0 6px 16px rgba(20,20,18,.07);
  padding-left:26px; padding-right:26px;
  padding-left:max(26px, calc((100% - 1320px) / 2 + 26px));
  padding-right:max(26px, calc((100% - 1320px) / 2 + 26px));
}
/* Niente display qui: il distanziatore si accende e si spegne con
   l'attributo hidden, e una regola display:block lo vincerebbe,
   lasciando un vuoto della sua altezza anche a barra non fissa. */
.bsnav-spazio[hidden]{ display:none; }

/* Sotto i 760px il menu diventa un elenco che si apre a tendina: bloccato in
   alto coprirebbe lo schermo, quindi li' resta dov'e'. */
@media(max-width:760px){
  .bsx nav.bsnav.fissa{
    position:static; box-shadow:none; padding-left:0; padding-right:0;
    border-bottom:.5px solid var(--fil);
  }
  .bsnav-spazio{ display:none !important; }
}

/* I salti interni alla pagina (#voti, #note...) devono fermarsi sotto la
   barra fissa, altrimenti il punto di arrivo le finisce dietro. */
html{ scroll-padding-top:calc(var(--bsnav-h,0px) + 8px); }

/* =======================================================================
   La gabbia della testata, per le pagine che devono allinearsi a lei

   Il tema usa .container di Bootstrap: 1170px con 15px di margine interno.
   Testata, menu e piede della rivista usano .bsx .wrap: al massimo 1320px
   con 26px. I due bordi non coincidono e il contenuto risulta piu' stretto
   di tutto il resto della pagina.

   Si mette rcd-gabbia sul contenitore di pagina - di solito .main-content e
   .page-content - e i .container che stanno dentro prendono le misure
   della testata. Una riga per pagina, e la misura resta scritta in un
   posto solo: se cambia .bsx .wrap, si allinea qui.
   ======================================================================= */
.rcd-gabbia .container,
.container.rcd-gabbia{
  width:auto;
  max-width:1320px;
  padding-left:26px; padding-right:26px;
  margin-left:auto; margin-right:auto;
}

/* Lo stacco dalla testata, unificato sulla misura dell'anagrafica.
   Il tema mette 40px sopra .page-content, che si sommano ai 38 che gia'
   separano il contenuto dal filetto del menu: il contenuto finiva troppo
   in basso e ogni pagina partiva da un'altezza diversa. Sopra niente,
   sotto i 40 del tema restano. */
.rcd-gabbia .page-content,
.page-content.rcd-gabbia{ padding-top:0; }

/* La voce Condividi: stessa tendina delle altre, ma stretta e allineata a
   sinistra, perche' e' la prima della barra. */
.bsx nav.bsnav .tendina-social{ min-width:190px; left:0; right:auto; }

/* I marchi dei servizi sono disegnati in linea, non presi da un carattere
   di icone: il sito carica Font Awesome 4 e, sulle pagine che passano da
   head.asp, anche la 5, che vince e rinomina le marche. Cosi' le icone
   restavano vuote di qua o di la' a seconda della pagina. */
.bsx nav.bsnav .tendina-social a{ display:flex; align-items:center; }
.bsx nav.bsnav .tendina-social a .mrk{
  width:14px; height:14px; margin-right:8px; flex:0 0 14px;
  fill:var(--ink2);
}
.bsx nav.bsnav .tendina-social a:hover .mrk{ fill:var(--rosso); }

/* =======================================================================
   Codice QR del contributo (in cima alla spalla destra)
   ======================================================================= */
.bsx .corpodoc .qr{
  margin:0 0 18px; padding:0 0 14px;
  border-bottom:.5px solid var(--fil);
  text-align:center;
}
.bsx .corpodoc .qr[hidden]{ display:none; }
.bsx .corpodoc .qr .qr-tela{
  width:150px; height:150px; margin:0 auto;
  border:.5px solid var(--fil); background:var(--bianco);
}
.bsx .corpodoc .qr .qr-tela svg{ display:block; }
.bsx .corpodoc .qr figcaption{
  margin-top:7px;
  font-family:var(--stretto); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
  color:var(--ink2);
}
@media (max-width:1060px){
  /* nel telefono il codice non serve: la pagina e' gia' li' */
  .bsx .corpodoc .qr{ display:none; }
}
@media print{
  /* sulla carta invece e' il pezzo piu' utile: e' l'unico modo per
     tornare al contributo in rete */
  .bsx .corpodoc .qr{ display:block !important; }
}

/* Marchi dei servizi di accesso esterno (modal di login). Il disegno
   porta i propri colori, quindi niente fill ereditato. */
.btn-esterno .mrk{
  width:16px; height:16px; margin-right:8px;
  vertical-align:-3px; display:inline-block;
}

/* =======================================================================
   Le tendine di spiegazione
   Un attributo data-spiega su un'etichetta o su un comando, e assets/js/
   spiega.js fa comparire questo riquadro al passaggio del mouse.
   Le regole stavano nel foglio dell'assistenza: ora sono qui, perche' il
   meccanismo lo usano l'editor, l'assistenza e l'anagrafica, e domani
   qualunque altra pagina che metta l'attributo.
   ======================================================================= */
.rcd-spiega{
  position:absolute; z-index:1200;
  width:320px; max-width:calc(100vw - 24px);
  padding:12px 15px;
  background:var(--bianco,#FBFAF7);
  color:var(--ink,#141412);
  border:1px solid var(--fil,#C8C6BE);
  border-top:2px solid var(--rosso,#9B1B1B);
  box-shadow:0 14px 34px rgba(20,19,15,.22);
  font-family:var(--serif,'Newsreader',Georgia,serif);
  font-size:13px; line-height:1.55;
  text-transform:none; letter-spacing:0;
  pointer-events:none;   /* mai fra il mouse e il comando */
}
.rcd-spiega[hidden]{ display:none; }
.rcd-spiega b{
  display:block;
  font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink2,#54534E);
  margin:0 0 5px;
}
.rcd-spiega--libera{ position:fixed; top:auto; left:auto; margin-top:0; }

/* =======================================================================
   Bottone Aiuto in alto a destra del corpo pagina.
   Fondo bianco, bordo blu, icona help: piccolo e discreto, uguale su
   tutte le pagine .rcd-pagina. Il contenitore del corpo fa da riferimento.
   ======================================================================= */
.rcd-pagina .container{ position:relative; }
.rcd-aiuto-hd{
  position:absolute; top:4px; right:26px; z-index:6;
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px;
  background:#fff; color:#1a5fb4; border:1px solid #1a5fb4; border-radius:4px;
  font-family:var(--stretto,'Archivo Narrow'),Arial,sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; line-height:1; white-space:nowrap;
}
.rcd-aiuto-hd svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.rcd-aiuto-hd:hover{ background:#1a5fb4; color:#fff; }
.rcd-aiuto-hd:hover svg circle[fill]{ fill:#fff; }


/* Assistenza: le colonne hanno gia' una barra-titolo in cima; il bottone
   Aiuto va messo SOTTO quella barra, non sovrapposto. */
.rcd-assist .rcd-aiuto-hd{ top:-33px; }

/* Dashboard: struttura propria (non .rcd-pagina); do il contesto al bottone Aiuto. */
.rcd-dash .container{ position:relative; }
.rcd-dash .rightSidebar{ margin-top:44px; }  /* abbassa la colonna Risultati per lo spazio del bottone Aiuto */


/* Dashboard - Statistiche dei tuoi articoli: le colonne Bootstrap annidate
   dentro le card sprecavano ~15px di gutter per lato ciascuna, comprimendo i
   numeri in mezzo. Qui si azzera quel gutter interno per dare spazio al
   contenuto (l intelaiatura e il bordo della card restano). */
.rcd-dash .thumb-shadow > [class*="col-"]{ padding-left:3px; padding-right:3px; }
.rcd-dash .thumb-shadow .text-center{ padding-left:3px; padding-right:3px; }


/* Voci a destra della barra (Direzione, menu Utente): la tendina si apre al
   contrario - bordo DESTRO allineato alla voce, sviluppo verso SINISTRA -
   cosi non sfora oltre il bordo destro. */
.bsx nav.bsnav .voce-dx > .tendina{ left:auto; right:0; }