:root{

      --rosso:#A01022;

      --arancio:#DF6138;

      --blu:#004F70;

      --azzurro:#00B0F0;

      --bg:#f8f8f8;

      --card:#ffffff;

      --border:#e9e9e9;

      --shadow:0 6px 18px rgba(0,0,0,.06);

      --radius:16px;

    }

    *{ box-sizing:border-box; }

    body{

      margin:0;

      font-family: Verdana, Arial, Helvetica, sans-serif;

      font-size:12px;

      color:#000;

      background:var(--bg);

      line-height:1.45;

    }

    a{ color:inherit; }

    a:hover{ color:#F59D3E; }

    img{ max-width:100%; height:auto; }



    .container{ max-width:1400px; margin:0 auto; padding:16px; }

    .card{

      background:var(--card);

      border:1px solid var(--border);

      border-radius:var(--radius);

      box-shadow:var(--shadow);

      padding:14px;

    }

    .card + .card{ margin-top:16px; }

    .sep{ border:0; border-top:1px solid var(--border); margin:12px 0; }

    .center{ text-align:center; }

    .justify{ text-align:justify; }

    .small{ font-size:11px; color:#333; }

    .muted{ color:#666; }

    .badge{

      display:inline-block; margin-left:6px; font-size:10px; padding:2px 6px;

      border-radius:999px; background:#ff0000; color:#fff; vertical-align:middle;

    }



    /* Header + nav */

    .site-header{ background:#fff; border-bottom:1px solid var(--border); }

    .brand{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; }

    .brand-left{ display:flex; align-items:center; gap:14px; min-width:0; }

    .brand-left img{ width:84px; }

    .brand-title{ margin:0; color:var(--blu); font-size:18px; line-height:1.2; }

    .brand-sub{ margin:2px 0 0; color:#666; font-size:12px; }

    .hero img{ width:100%; display:block; }



    

    .site-nav {

      background: transparent;   

      margin-top: 10px;

    }



    /* contenitore reale del menu */

    .site-nav .nav-inner {

      background: #a01022;       

      border-radius: 14px;       

      padding: 6px 12px;

    }



    /* lista menu */

    .nav-list {

      list-style: none;

      margin: 0;

      padding: 0;



      display: flex;

      flex-wrap: wrap;

      gap: 6px;



      justify-content: center;

    }



    /* voci menu */

    .nav-list a {

      display: block;

      padding: 8px 14px;



      color: #fff;

      text-decoration: none;

      font-weight: 600;

      border-radius: 999px;      /* pill */

      background: rgba(255,255,255,0.12);

      transition: background 0.2s ease;

    }



    .nav-list a:hover {

      background: rgba(255,255,255,0.25);

    }





    /* Layout */

    .page{

      display:grid;

      grid-template-columns:360px 1fr;

      gap:16px;

      padding:16px 0 30px;

      align-items:start;

    }

    @media (max-width:1024px){ .page{ grid-template-columns:1fr; } }



    /* Forms */

    .search-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

    .search-form input[type="search"]{

      flex:1; min-width:180px;

      padding:10px 12px;

      border:1px solid #d9d9d9;

      border-radius:12px;

      outline:none;

    }

    .btn{

      padding:10px 12px; border:0; border-radius:12px;

      background:var(--blu); color:#fff; cursor:pointer;

    }

    .btn:hover{ background:#003b56; }



    /* Lists */

    .link-list{ margin:6px 0 0; padding-left:18px; }

    .link-list li{ margin:4px 0; }



    /* Notice */

    .notice{

      background:#fff6f4;

      border:1px solid #ffd3ca;

      border-radius:14px;

      padding:12px;

    }

    .notice h3{ margin:0 0 6px; color:var(--rosso); font-size:13px; }



    /* Tables */

    .table-wrap{ overflow:auto; }

    table.data{

      width:100%;

      border-collapse:collapse;

      min-width:720px;

    }

    table.data th, table.data td{

      padding:8px 10px;

      border-bottom:1px solid var(--border);

      vertical-align:top;

    }

    table.data th{

      text-align:left;

      color:var(--blu);

      font-weight:700;

      background:#fafafa;

    }

    .ok{ color:var(--arancio); font-weight:700; }

    .danger{ color:#DF1B2D; font-weight:700; }

    .blu{ color:var(--blu); }

    .azzurro{ color:var(--azzurro); }



    /* Article grid */

    .grid-articles{

      display:grid;

      grid-template-columns:repeat(2,minmax(0,1fr));

      gap:12px;

    }

    @media (max-width:520px){ .grid-articles{ grid-template-columns:1fr; } }

    figure{ margin:0; }

    figure img{ border-radius:12px; border:1px solid var(--border); }

    figcaption{ margin-top:6px; font-size:11px; }



    footer{ margin-top:16px; padding:18px 0 28px; color:#444; }





/* elenco articoli */

.articles-list {

  display: flex;

  flex-direction: column;

  gap: 18px;

}



.article-row {

  display: grid;

  grid-template-columns: 120px 1fr;

  gap: 20px;

  align-items: center;



  padding: 12px;

  border-radius: 12px;

  background: #f7f7f7;

}



.article-row img {

  width: 120px;

  height: auto;

  border-radius: 6px;

}



.article-row h3 {

  margin: 0;

  font-size: 1.1rem;

}



.article-row p {

  margin: 4px 0 0;

}



@media (max-width: 640px) {

  .article-row {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .article-row img {

    margin: 0 auto;

  }

}



.article-row a {

  text-decoration: none;

  color: inherit;

}



.article-row h3 a:hover {

  text-decoration: underline;

}





.title-icon {

  width: 36px;

  height: auto;

}





.grid.books{

  display:grid;

  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  gap:16px;

  justify-items:center; /* centra ogni card nella colonna */

}



















.section-title {

  display: flex;

  justify-content: center;   /* CENTRO ORIZZONTALE */

  align-items: center;       /* ALLINEAMENTO VERTICALE */

  gap: 10px;

  width: 100%;

  text-align: center;

  font-size: large;

}



.section-title img {

  width: 50px;

  height: auto;

}





.rosso {

  color: var(--rosso);

}





.lead {

  font-size: 1.05rem;

  line-height: 1.6;

  margin-bottom: 16px;

}



.image-link {

  display: inline-block;

}



.book-cover {

  width: 140px;

  height: auto;

  margin: 8px auto;

}



.book-cover.large {

  width: 200px;

}







.opere-block {

  margin: 24px 0;

}



.opera-image {

  width: 140px;

  height: auto;

}



.opera-image-large {

  width: 200px;

  max-width: 100%;

  height: auto;

}



/* ================================

   COPERTINE OPERE / SAMURAI / JJMMP

   ================================ */



/* figura compatta */

.grid.books figure{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:6px;

}



/* box cliccabile fisso */

.grid.books figure > a{

  display:flex;

  align-items:center;

  justify-content:center;

  width:140px;

  height:199px;

  background:#fff;

}



/* OVERRIDE MIRATO DEL CSS GLOBALE img */

.grid.books figure > a > img{

  width:140px;

  height:199px;



  max-width:none;    /* 🔥 QUESTO È IL PUNTO CHIAVE */

  max-height:none;



  object-fit:contain; /* oppure cover se vuoi */

  display:block;

}





.grid.song{

  display:grid;

  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  gap:16px;

  justify-items:center; /* centra ogni card nella colonna */

}



.grid.song figure{

  display:flex;

  flex-direction:column;

  align-items:center;

  gap:6px;

}



/* box cliccabile fisso */

.grid.song figure > a{

  display:flex;

  align-items:center;

  justify-content:center;

  width:140px;

  height:199px;

  background:#fff;

}



/* OVERRIDE MIRATO DEL CSS GLOBALE img */

.grid.song figure > a > img{

  width:140px;

  height:199px;



  max-width:none;    /* 🔥 QUESTO È IL PUNTO CHIAVE */

  max-height:none;



  object-fit:contain; /* oppure cover se vuoi */

  display:block;

}



.grid.photo{

  display:grid;

  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

  gap:16px;

  justify-items:center; /* centra ogni card nella colonna */

}



.grid.photo figure > img{

  width:244px;

  height:248px;



  max-width:none;    /* 🔥 QUESTO È IL PUNTO CHIAVE */

  max-height:none;



  object-fit:contain; /* oppure cover se vuoi */

  display:block;

}