@font-face{font-family:Inter;src:url("Inter.ttf");font-display:swap}
@font-face{font-family:Cinzel;src:url("Cinzel.ttf");font-display:swap}
@font-face{font-family:Cormorant;src:url("CormorantItalic.ttf");font-style:italic;font-display:swap}
:root{--carb:#1d1d1b;--crema:#faf7f0;--crema2:#f4efe4;--oro:#bf9a45;--testo:#3b3b36;--max:1180px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,Arial,sans-serif;color:var(--carb);background:var(--crema);
     -webkit-font-smoothing:antialiased;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.k{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.cz{font-family:Cinzel,Georgia,serif;font-weight:500;line-height:1.12;text-wrap:balance}
.it{font-family:Cormorant,Georgia,serif;font-style:italic}

/* ------------------------------------------------------------------ testata */
header{position:sticky;top:0;z-index:20;background:rgba(29,29,27,.94);backdrop-filter:blur(8px);
       border-bottom:1px solid rgba(255,255,255,.1)}
.nav{display:flex;align-items:center;gap:32px;min-height:74px}
.nav nav{margin-left:auto;display:flex;gap:28px;flex-wrap:wrap}
.nav nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:.82rem;letter-spacing:.1em;
       text-transform:uppercase;padding:6px 0;border-bottom:1px solid transparent}
.nav nav a:hover{color:#fff;border-bottom-color:var(--oro)}

/* ----------------------------------------------------------------- apertura */
.hero{position:relative;min-height:min(84vh,760px);display:flex;align-items:flex-end;
      background:var(--carb);overflow:hidden}
.hero .ph{position:absolute;inset:0;background:url("hero.jpg") center 62%/cover}
/* la velatura e' tarata sul marchio, non sulla foto: sopra la zona dove sta il logo e l'occhiello
   deve gia' essere abbastanza densa, altrimenti il bianco finisce sul cielo chiaro e sparisce */
.hero .vel{position:absolute;inset:0;background:linear-gradient(180deg,
      rgba(16,16,14,.60) 0%,rgba(16,16,14,.50) 18%,rgba(16,16,14,.66) 46%,
      rgba(16,16,14,.82) 72%,rgba(16,16,14,.95) 100%)}
.hero .wrap{position:relative;padding-top:96px;padding-bottom:72px;width:100%}
.hero .marchio{width:min(300px,62vw);margin-bottom:34px}
.hero .k{color:#e3caa0}   /* l'oro pieno, sopra una foto, non regge: schiarito */
.hero h1{color:#fff;font-size:clamp(2rem,4.6vw,3.4rem);margin:14px 0 18px;max-width:20ch}
.hero p.sott{font-size:clamp(1.15rem,2.3vw,1.6rem);color:rgba(255,255,255,.9);max-width:46ch}

/* ----------------------------------------------------------------- sezioni */
section{padding:clamp(56px,7vw,104px) 0}
.sez-t{font-size:clamp(1.6rem,3.2vw,2.4rem);margin:12px 0 20px}
.intro{font-size:1.06rem;color:var(--testo);max-width:62ch}
.scuro{background:var(--carb);color:#fff}
.scuro .intro{color:rgba(255,255,255,.78)}
.crema{background:var(--crema2)}
.griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;margin-top:44px}
.num{font-family:Cinzel,serif;font-size:1.9rem;color:var(--oro)}
.card h3{font-size:1.02rem;font-weight:600;margin:12px 0 8px}
.card p{font-size:.94rem;color:var(--testo)}
.riga{display:grid;grid-template-columns:150px 1fr auto;gap:20px;align-items:baseline;
      padding:22px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.riga .data{font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--oro)}
.riga h3{font-size:1.04rem;font-weight:600;color:#fff}
.riga p{font-size:.94rem;color:rgba(255,255,255,.72);margin-top:6px}
.riga .stato{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--oro);
      color:var(--oro);padding:4px 12px;border-radius:100px;white-space:nowrap}
.vuoto{padding:28px 0;color:#6f6f66;font-size:.96rem}

/* -------------------------------------------------------------------- piede */
footer{background:#00382e;color:#fff;padding:clamp(48px,6vw,80px) 0 0}
.piede{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:40px;
       padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.14)}
.piede h4{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.piede p,.piede a{font-size:.94rem;color:rgba(255,255,255,.8);text-decoration:none;line-height:1.75}
.piede a:hover{color:#fff}
.min{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;flex-wrap:wrap;padding:34px 0 40px}
.min .dic{font-size:.8rem;line-height:1.7;color:rgba(255,255,255,.72);max-width:60ch}
.min .dic b{color:#fff;font-weight:600}
/* il logo del Ministero sta sempre su pannello bianco, con la zona di rispetto del manuale MASAF */
/* Logo del Ministero senza nessun pannello, in trasparenza sul fondo. E' la terza colonna di
   pag. 16 del manuale, ammessa a una condizione: il fondo dev'essere il bianco o uno dei quattro
   colori ufficiali. Per questo il piede non e' piu' il carbone del sito ma il Secondario 2,
   R0 G56 B46 (PMS 3308) - un verde talmente scuro da leggersi quasi nero, e in palette.
   I 16px di margine sono la zona di rispetto sui 230px di logo. */
.masaf{padding:16px 0;display:flex;align-items:center;flex:none}
.masaf img{width:230px}
.bioue{width:76px}
.chiusura{border-top:1px solid rgba(255,255,255,.14);padding:20px 0;font-size:.78rem;
          color:rgba(255,255,255,.55);display:flex;gap:22px;flex-wrap:wrap}
.chiusura a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px}
.chiusura a:hover{color:#fff;border-bottom-color:var(--oro)}

@media (max-width:760px){
  .nav{flex-wrap:wrap;gap:14px;padding-top:14px;padding-bottom:14px}
  .nav nav{margin-left:0;gap:18px}
  .riga{grid-template-columns:1fr;gap:4px}
  .riga .stato{justify-self:start;margin-top:10px}
}