/* Istituto ISR — nero, bianco, rosso. Georgia per la prosa, Verdana per l'apparato. */

:root{
  --inchiostro:#000;
  --carta:#fff;
  --rosso:#c00;
  --grigio-scuro:#333;
  --grigio:#636363;
  --grigio-chiaro:#999;
  --filo:#ccc;
  --fondo:#f4f4f2;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--carta);
  color:var(--inchiostro);
  font:16px/1.65 Georgia,"Times New Roman",serif;
}
img{max-width:100%;height:auto}
a{color:var(--inchiostro);text-decoration:none;border-bottom:1px solid var(--filo)}
a:hover{color:var(--rosso);border-bottom-color:var(--rosso)}

/* ---- testata ---- */
.testata{border-bottom:1px solid var(--filo);background:var(--carta)}
.testata-dentro{
  max-width:1060px;margin:0 auto;padding:22px 24px 14px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
}
.marchio{display:flex;align-items:center;gap:16px;border:0}
.marchio:hover{color:inherit}
.sigillo{width:58px;height:53px;flex:0 0 auto}
.marchio-parole strong{
  display:block;font:400 30px/1.1 Georgia,serif;letter-spacing:.5px;
}
.marchio-parole span{
  display:block;margin-top:5px;max-width:30em;
  font:400 13px/1.45 Georgia,serif;color:var(--grigio);
}
.marchio:hover .marchio-parole strong{color:var(--rosso)}
.motto{
  margin:0;display:flex;align-items:flex-end;gap:14px;text-align:right;
}
.motto img{width:66px;height:80px;flex:0 0 auto;opacity:.92}
.motto figcaption{padding-bottom:4px}
.motto q{
  display:block;quotes:none;font:italic 15px/1.4 Georgia,serif;color:var(--inchiostro);
}
.motto q::before,.motto q::after{content:""}
.motto cite{
  display:block;margin-top:4px;
  font:400 11px/1.4 Verdana,Tahoma,sans-serif;color:var(--grigio-chiaro);font-style:normal;
}

/* ---- menu ---- */
.menu{background:var(--inchiostro)}
.menu ul{
  max-width:1060px;margin:0 auto;padding:0 16px;list-style:none;
  display:flex;flex-wrap:wrap;
}
.menu a{
  display:block;padding:11px 14px;border:0;color:#fff;
  font:400 12px/1 Verdana,Tahoma,sans-serif;letter-spacing:.7px;text-transform:uppercase;
}
.menu a:hover{background:var(--rosso);color:#fff}
.menu a.qui{color:#fff;background:var(--grigio-scuro)}

/* ---- impaginato ---- */
.foglio{max-width:760px;margin:0 auto;padding:34px 24px 60px}
.foglio.largo{max-width:1060px}
h1{font:400 32px/1.2 Georgia,serif;margin:0 0 6px}
h2{font:400 24px/1.25 Georgia,serif;margin:36px 0 10px}
h3{font:400 19px/1.3 Georgia,serif;margin:28px 0 8px}
h4{font:700 12px/1.3 Verdana,Tahoma,sans-serif;text-transform:uppercase;letter-spacing:1px;margin:0 0 10px}
p{margin:0 0 14px}
blockquote{margin:18px 0;padding:2px 0 2px 18px;border-left:3px solid var(--rosso);color:var(--grigio-scuro)}

.occhiello{
  font:400 11px/1 Verdana,Tahoma,sans-serif;text-transform:uppercase;letter-spacing:1.4px;
  color:var(--rosso);margin:0 0 10px;
}
.riga-data{
  font:400 12px/1.5 Verdana,Tahoma,sans-serif;color:var(--grigio-chiaro);margin:0 0 22px;
}
.sommario{font:italic 19px/1.5 Georgia,serif;color:var(--grigio-scuro);margin:0 0 22px}
.regola{border:0;border-top:1px solid var(--filo);margin:34px 0}

/* ---- elenchi di voci ---- */
.lista{list-style:none;margin:0;padding:0}
.lista > li{padding:18px 0;border-bottom:1px solid var(--filo)}
.lista h3{margin:0 0 4px;font-size:20px}
.lista h3 a{border:0}
.lista .riga-data{margin:0 0 6px}
.lista p{margin:0;color:var(--grigio-scuro)}

.griglia{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px;margin:22px 0}
.scheda{border-top:3px solid var(--inchiostro);padding-top:12px}
.scheda h3{margin:0 0 6px;font-size:19px}
.scheda h3 a{border:0}
.scheda p{margin:0;font-size:15px;color:var(--grigio-scuro)}

/* ---- filtri e ricerca ---- */
.attrezzi{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:0 0 20px;padding:14px 0;border-top:1px solid var(--filo);border-bottom:1px solid var(--filo);
}
.attrezzi input[type=search]{
  flex:1 1 220px;min-width:180px;padding:8px 10px;border:1px solid var(--filo);
  font:15px/1.3 Georgia,serif;background:var(--carta);color:var(--inchiostro);
}
.attrezzi input[type=search]:focus{outline:0;border-color:var(--rosso)}
.filtro{
  border:1px solid var(--filo);background:var(--carta);cursor:pointer;
  padding:7px 12px;font:11px/1 Verdana,Tahoma,sans-serif;text-transform:uppercase;letter-spacing:.8px;
  color:var(--grigio);
}
.filtro:hover{border-color:var(--inchiostro);color:var(--inchiostro)}
.filtro[aria-pressed=true]{background:var(--rosso);border-color:var(--rosso);color:#fff}
.conteggio{font:12px/1 Verdana,Tahoma,sans-serif;color:var(--grigio-chiaro);margin:0 0 18px}

/* ---- persone ---- */
.persona{display:flex;gap:22px;padding:24px 0;border-bottom:1px solid var(--filo)}
.persona img{
  width:120px;height:150px;flex:0 0 120px;border:1px solid var(--filo);
  object-fit:cover;object-position:center top;background:var(--fondo);
}
.persona h3{margin:0 0 2px}
.persona .ruolo{
  font:400 11px/1 Verdana,Tahoma,sans-serif;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--rosso);margin:0 0 10px;
}

/* ---- libri ---- */
.libri{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:0 44px;
}
.libro{
  display:flex;gap:22px;padding:24px 0;border-bottom:1px solid var(--filo);
}
.libro .copertina{
  flex:0 0 128px;width:128px;align-self:flex-start;
  border:1px solid var(--filo);background:var(--fondo);
}
.libro h3{margin:0 0 4px;font-size:21px;line-height:1.25}
.libro .firma{
  font:400 11px/1.5 Verdana,Tahoma,sans-serif;text-transform:uppercase;letter-spacing:1px;
  color:var(--rosso);margin:0 0 10px;
}
.libro p{margin:0 0 10px}
.libro .paratesto{font-size:14px;color:var(--grigio)}
.libro blockquote{margin:14px 0 10px;font-size:15px}
.libro blockquote cite{
  display:block;margin-top:8px;font:400 11px/1.5 Verdana,Tahoma,sans-serif;
  color:var(--grigio-chiaro);font-style:normal;
}

@media (max-width:620px){
  .libro{gap:18px}
  .libro .copertina{flex:0 0 110px;width:110px}
  .libro h3{font-size:19px}
}

/* ---- allegati ---- */
.allegati{list-style:none;margin:16px 0 0;padding:0}
.allegati li{padding:7px 0;border-bottom:1px solid var(--filo);font:14px/1.4 Georgia,serif}
.allegati .peso{font:11px/1 Verdana,Tahoma,sans-serif;color:var(--grigio-chiaro);margin-left:8px}
.mancante{color:var(--grigio-chiaro);font-style:italic}
.figura{margin:0 0 24px}
.figura img{border:1px solid var(--filo)}
.figura figcaption{
  margin-top:6px;font:11px/1.45 Verdana,Tahoma,sans-serif;color:var(--grigio-chiaro);
}

/* ---- video ---- */
.video{position:relative;padding-bottom:56.25%;height:0;margin:22px 0;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- richiami ---- */
.richiamo{background:var(--fondo);border-left:3px solid var(--rosso);padding:18px 20px;margin:26px 0}
.richiamo h3{margin:0 0 8px}
.richiamo p:last-child{margin:0}

/* ---- piede ---- */
.piede{border-top:3px solid var(--inchiostro);background:var(--fondo);margin-top:50px}
.piede-dentro{
  max-width:1060px;margin:0 auto;padding:30px 24px 10px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;
}
.piede-colonna p,.piede-colonna li{font:13px/1.6 Georgia,serif;color:var(--grigio-scuro)}
.piede-colonna ul{list-style:none;margin:0;padding:0}
.riga-finale{
  max-width:1060px;margin:0 auto;padding:16px 24px 26px;
  font:11px/1.6 Verdana,Tahoma,sans-serif;color:var(--grigio-chiaro);
}

/* ---- schermi stretti ---- */
@media (max-width:820px){
  .testata-dentro{flex-direction:column;align-items:flex-start;gap:18px}
  .motto{text-align:left}
  .marchio-parole strong{font-size:25px}
  .menu ul{padding:0 8px}
  .menu a{padding:10px 10px;font-size:11px}
  .persona{flex-direction:column}
  .persona img{width:120px;flex:0 0 auto}
}

/* ---- carta ---- */
@media print{
  .menu,.attrezzi,.piede{display:none}
  body{font-size:11pt}
  a{border:0}
}