/* File: assets/style.css — Artifact v1.0
   Grissinopoli — sistema grafico "documento ufficiale + pannelli verticali".
   Un solo foglio di stile: token, tipografia, componenti, pagine, responsive.
   Convenzione selettori: una classe sola, nessun selettore di elemento nudo,
   per evitare che le regole si annullino a vicenda. */

/* ============================================================ 1. TOKEN */

:root{
  /* colore */
  --nero:#1A1614;
  --seppia:#3A2E22;
  --carta:#EDE6D6;
  --ceralacca:#B3261E;
  --oro:#C9A24B;

  --carta-riga:#D8CCB4;     /* filetti sulla carta */
  --carta-ombra:#C6B99E;
  --inchiostro:#241E19;     /* testo sulla carta */
  --inchiostro-tenue:#6A5B4A;
  --notte-riga:rgba(201,162,75,.28);  /* filetti sul fondo scuro */

  /* tipografia */
  --display:"Anton","Arial Narrow",Impact,sans-serif;
  --mono:"Courier Prime",ui-monospace,"Courier New",monospace;
  --serif:"Lora",Georgia,"Times New Roman",serif;

  --t-xs:clamp(10px,.72rem,12px);
  --t-sm:clamp(12px,.84rem,14px);
  --t-base:clamp(16px,1.02rem,18px);
  --t-lg:clamp(19px,1.3rem,23px);
  --t-xl:clamp(26px,3.4vw,38px);
  --t-2xl:clamp(34px,6vw,64px);
  --t-mega:clamp(58px,15.5vw,220px);

  /* spazio e misure */
  --gutter:clamp(18px,4vw,44px);
  --largo:1240px;
  --stretto:70ch;
  --fuga:5px;               /* la fuga tra i grissini */
}

/* ====================================================== 2. FONT LOCALI */

@font-face{
  font-family:"Anton"; src:url("/assets/fonts/anton.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Courier Prime"; src:url("/assets/fonts/courierprime.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Courier Prime"; src:url("/assets/fonts/courierprime-bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora"; src:url("/assets/fonts/lora.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Lora"; src:url("/assets/fonts/lora-italic.woff2") format("woff2");
  font-weight:400 600; font-style:italic; font-display:swap;
}

/* =========================================================== 3. BASE */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--nero);
  color:var(--carta);
  font-family:var(--serif);
  font-size:var(--t-base);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

a{color:inherit}

/* L'anello di focus cambia colore col fondo: l'oro su carta avorio fa 1,93:1
   e sarebbe invisibile. Ceralacca sulla carta (6,1:1), oro sul fondo scuro. */
:focus-visible{
  outline:3px solid var(--ceralacca);
  outline-offset:3px;
}
.protocollo :focus-visible,
.chiusura :focus-visible,
.foglio--scuro :focus-visible,
.salta:focus-visible{
  outline-color:var(--oro);
}

.salta{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ceralacca);color:var(--carta);
  padding:12px 18px;font-family:var(--mono);text-decoration:none;
}
.salta:focus{left:0}

/* =================================================== 4. UTILITÀ TESTO */

/* Sulla carta l'etichetta e' ceralacca (6,1:1); l'oro resta ai soli fondi scuri,
   dove ha contrasto — su avorio faceva 1,93:1, sotto qualunque soglia. */
.etichetta{
  font-family:var(--mono);
  font-size:var(--t-xs);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ceralacca);
  margin:0 0 14px;
  font-weight:700;
}
.foglio--scuro .etichetta,
.chiusura .etichetta,
.protocollo .etichetta{color:var(--oro)}

.occhiello{
  font-family:var(--mono);
  font-size:var(--t-sm);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ceralacca);
  margin:0 0 12px;
}

/* la riga di protocollo: etichetta … voce, con i puntini di guida */
.riga{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:var(--t-sm);
  margin:0 0 8px;
}
.riga__punti{
  flex:1;
  border-bottom:1px dotted currentColor;
  opacity:.45;
  transform:translateY(-3px);
}
.riga__sx{text-transform:uppercase;letter-spacing:.14em;white-space:nowrap}
.riga__dx{white-space:nowrap;font-weight:700}

/* timbro in ceralacca */
.timbro{
  display:inline-block;
  font-family:var(--mono);font-weight:700;
  font-size:var(--t-sm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--ceralacca);
  border:2.5px solid var(--ceralacca);
  padding:7px 14px;
  transform:rotate(-6deg);
  opacity:.92;
  mix-blend-mode:multiply;
}
.timbro--dritto{transform:rotate(0)}
.timbro--destra{transform:rotate(5deg)}

/* ================================================== 5. BARRA PROTOCOLLO */

.protocollo{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px var(--gutter);
  background:rgba(26,22,20,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--notte-riga);
}

.protocollo__ente{
  display:flex;align-items:center;gap:11px;
  text-decoration:none;color:var(--carta);flex:0 0 auto;
}
.protocollo__sigillo{width:30px;height:30px;color:var(--oro);flex:0 0 auto}
.protocollo__testo{display:flex;flex-direction:column;line-height:1.25}
.protocollo__testo b{
  font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.protocollo__testo i{
  font-family:var(--mono);font-style:normal;
  font-size:var(--t-xs);color:var(--oro);opacity:.75;letter-spacing:.1em;
}

.indice{overflow-x:auto;scrollbar-width:none}
.indice::-webkit-scrollbar{display:none}
.indice ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.indice a{
  display:flex;align-items:baseline;gap:6px;
  padding:7px 11px;text-decoration:none;
  font-family:var(--mono);font-size:var(--t-sm);
  letter-spacing:.08em;white-space:nowrap;
  border:1px solid transparent;
}
.indice a:hover{border-color:var(--notte-riga)}
.indice__num{color:var(--oro);font-size:var(--t-xs);font-weight:700}
.indice a[aria-current="page"]{
  border-color:var(--ceralacca);
  color:var(--carta);
}
.indice a[aria-current="page"] .indice__num{color:var(--ceralacca)}

/* ================================================= 6. PANNELLI (GRISSINI) */

/* il mosaico verticale: strisce strette come grissini nel vaso */
.vaso{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--fuga);
  background:var(--nero);
}
.vaso__strip{position:relative;overflow:hidden;min-height:0}

/* striscia senza foto: i rubatà disegnati, in piedi come nel vaso */
.grissino{
  position:relative;height:100%;
  background:
    url("/assets/grissino.svg") repeat-x center/64px 100%,
    linear-gradient(180deg,#2B2118,#171009);
}
.grissino::after{  /* la luce del forno, dall'alto */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(201,162,75,.10),transparent 45%);
}

/* --- duotone --- */
.duo{
  position:relative;margin:0;overflow:hidden;
  background:var(--seppia);
  height:100%;
}
/* Viraggio seppia con i filtri, non con i blend: le fotografie qui sono gia'
   scure e contrastate, e la doppia sovrapposizione screen+multiply le sbiancava.
   Cosi' i neri restano neri e il calore arriva dal seppia. */
.duo img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) sepia(.46) saturate(1.15) contrast(1.06) brightness(.98);
}
.duo::before{  /* un velo d'avorio nelle sole luci, appena percettibile */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--carta);mix-blend-mode:soft-light;opacity:.35;
}
.duo::after{   /* retino tipografico */
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(26,22,20,.5) .6px, transparent .7px);
  background-size:3px 3px;
  opacity:.20;
}
.duo__cap{
  position:absolute;left:0;bottom:0;z-index:4;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;
  background:var(--nero);color:var(--oro);
  padding:5px 9px;
}
/* segnaposto: dichiarato, non finto */
.duo--vuoto{
  display:flex;align-items:center;justify-content:center;
  background:
    repeating-linear-gradient(135deg,
      rgba(237,230,214,.05) 0 8px, transparent 8px 16px),
    var(--seppia);
  border:1px dashed rgba(237,230,214,.28);
}
.duo--vuoto::before,.duo--vuoto::after{display:none}
.duo__nota{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;color:rgba(237,230,214,.55);
  text-align:center;line-height:1.9;padding:12px;
}

/* fascia d'apertura delle pagine interne */
.vaso--fascia{height:min(38vh,340px)}

/* ============================================ 7. FRONTESPIZIO (HOME) */

.frontespizio{position:relative;padding-bottom:clamp(16px,2.5vw,34px)}

.frontespizio__vaso{height:min(64vh,560px)}

/* il titolo scavalca il bordo dei pannelli: è il timbro sulla fotografia.
   Stessa gabbia dei fogli (max-width + padding), così i bordi sinistri combaciano. */
.frontespizio__marchio{
  position:relative;z-index:5;
  margin:-.34em auto 0;
  max-width:var(--largo);
  padding:0 clamp(28px,5vw,64px);
}
.marchio{
  font-family:var(--display);
  font-size:var(--t-mega);
  line-height:.8;
  letter-spacing:-.015em;
  text-transform:uppercase;
  margin:0;
  color:var(--carta);
  text-shadow:0 6px 34px rgba(0,0,0,.55);
}
.marchio__punto{color:var(--ceralacca)}

.frontespizio__sotto{
  max-width:var(--largo);margin:18px auto 0;padding:0 clamp(28px,5vw,64px);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:baseline;
}
.frontespizio__sotto .sotto{
  font-family:var(--mono);font-size:var(--t-sm);letter-spacing:.16em;
  text-transform:uppercase;color:var(--oro);margin:0;
}
.frontespizio__sotto .claim{
  font-family:var(--serif);font-style:italic;font-size:var(--t-lg);
  color:var(--carta);opacity:.9;margin:0;
}

/* ========================================== 8. FOGLIO DI CARTA (BLOCCHI) */

.foglio{
  position:relative;
  background:var(--carta);
  color:var(--inchiostro);
  max-width:var(--largo);
  margin:clamp(28px,5vw,64px) auto;
  padding:clamp(28px,5vw,64px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
/* fibra della carta + macchia d'unto in un angolo */
.foglio::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(58,46,34,.055) .5px, transparent .6px),
    radial-gradient(120px 90px at 96% 4%, rgba(58,46,34,.07), transparent 70%);
  background-size:4px 4px, 100% 100%;
}
.foglio > *{position:relative}

.foglio--stretto{max-width:900px}
.foglio--scuro{
  background:var(--seppia);color:var(--carta);
}
.foglio--scuro .etichetta{color:var(--oro)}

.titolo{
  font-family:var(--display);
  font-size:var(--t-2xl);line-height:.94;letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0 0 18px;
  color:var(--inchiostro);
}
.foglio--scuro .titolo{color:var(--carta)}

.sottotitolo{
  font-family:var(--serif);font-style:italic;
  font-size:var(--t-lg);color:var(--inchiostro-tenue);
  margin:0 0 26px;max-width:var(--stretto);
}

.testo{max-width:var(--stretto)}
.testo p{margin:0 0 18px}
.testo__apertura{font-size:var(--t-lg);line-height:1.5;margin:0 0 18px}
.sottotitolo--chiaro{color:rgba(237,230,214,.75)}
.nota-fonte{
  font-family:var(--mono);font-size:var(--t-xs);line-height:1.7;
  color:var(--inchiostro-tenue);margin:16px 0 0;
  padding-top:12px;border-top:1px dotted var(--carta-ombra);
}
/* .testo__h e' un h2 (gerarchia corretta) vestito come un sottotitolo di documento */
.testo h3,
.testo__h{
  font-family:var(--mono);font-weight:700;
  font-size:var(--t-base);letter-spacing:.1em;text-transform:uppercase;
  margin:34px 0 12px;color:var(--seppia);
  padding-bottom:7px;border-bottom:1px solid var(--carta-riga);
}

.filetto{
  border:0;height:1px;background:var(--carta-riga);
  margin:clamp(26px,4vw,44px) 0;
}
.foglio--scuro .filetto{background:var(--notte-riga)}

/* citazione aurea */
.aurea{
  font-family:var(--display);
  font-size:clamp(22px,3.6vw,44px);line-height:1.06;
  text-transform:uppercase;letter-spacing:-.005em;
  color:var(--ceralacca);
  margin:0;max-width:20ch;
}
/* sul seppia il rosso faceva 2,02:1: sul fondo scuro la regola aurea si legge in oro (5:1) */
.foglio--scuro .aurea{color:var(--oro)}

/* ================================================= 9. INDICE DELLE SEZIONI */

.registro{list-style:none;margin:0;padding:0}
.registro__voce{border-top:1px solid var(--carta-riga)}
.registro__voce:last-child{border-bottom:1px solid var(--carta-riga)}
.registro__link{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;gap:clamp(14px,3vw,36px);
  padding:clamp(16px,2.4vw,26px) 4px;
  text-decoration:none;color:var(--inchiostro);
}
.registro__link:hover{background:rgba(179,38,30,.05)}
.registro__num{
  font-family:var(--mono);font-weight:700;font-size:var(--t-sm);
  color:var(--ceralacca);letter-spacing:.1em;
}
.registro__testo b{
  display:block;font-family:var(--display);text-transform:uppercase;
  font-size:var(--t-xl);line-height:1;font-weight:400;letter-spacing:0;
}
.registro__testo span{
  display:block;font-size:var(--t-sm);color:var(--inchiostro-tenue);margin-top:5px;
}
.registro__freccia{font-family:var(--mono);color:var(--inchiostro-tenue)}
.registro__link:hover .registro__freccia{color:var(--ceralacca)}

/* ================================================== 10. SCHEDA RICETTA */

.scheda{display:grid;grid-template-columns:minmax(240px,.85fr) 1.15fr;gap:clamp(26px,4vw,56px)}

.ingredienti{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:var(--t-sm);line-height:1.75}
.ingredienti li{
  display:flex;gap:11px;align-items:flex-start;
  padding:9px 0;border-bottom:1px dotted var(--carta-ombra);
}
.ingredienti li::before{
  content:"";flex:0 0 auto;width:9px;height:9px;margin-top:8px;
  border:1.5px solid var(--seppia);
}

.passi{list-style:none;margin:0;padding:0;counter-reset:passo}
.passi li{
  counter-increment:passo;
  display:grid;grid-template-columns:auto 1fr;gap:16px;
  padding:0 0 20px;
}
.passi li::before{
  content:counter(passo,decimal-leading-zero);
  font-family:var(--mono);font-weight:700;font-size:var(--t-sm);
  color:var(--ceralacca);padding-top:5px;
}

.note{
  background:rgba(58,46,34,.06);
  border-left:3px solid var(--oro);
  padding:18px 22px;margin:0;
}
.note ul{margin:0;padding-left:18px}
.note li{margin-bottom:8px}
.note li:last-child{margin-bottom:0}

/* =================================================== 11. DECLINAZIONI */

.declinazioni{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--fuga);list-style:none;margin:0;padding:0;
}
.declinazione{
  background:var(--carta);color:var(--inchiostro);
  padding:22px;display:flex;flex-direction:column;gap:9px;
  border-top:3px solid var(--seppia);
}
.declinazione--fuori{border-top-color:var(--ceralacca)}
.declinazione__sigla{
  font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.18em;color:var(--ceralacca);
}
.declinazione__titolo{
  font-family:var(--display);text-transform:uppercase;
  font-size:var(--t-lg);line-height:1.05;margin:0;font-weight:400;
}
.declinazione__testo{font-size:var(--t-sm);margin:0;color:var(--inchiostro-tenue);line-height:1.6}

/* =================================================== 12. DISCIPLINARE */

.atto__testata{
  display:flex;gap:clamp(18px,3vw,36px);align-items:flex-start;flex-wrap:wrap;
}
.atto__sigillo{
  width:clamp(88px,11vw,132px);height:auto;flex:0 0 auto;
  mix-blend-mode:multiply;opacity:.92;
}
.atto__doc{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--inchiostro-tenue);margin:0;
}

.atto{display:grid;grid-template-columns:190px 1fr;gap:clamp(24px,4vw,56px);align-items:start}

.atto__indice{position:sticky;top:78px}
.atto__indice ol{list-style:none;margin:0;padding:0}
.atto__indice a{
  display:block;padding:5px 0;text-decoration:none;
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--inchiostro-tenue);
  border-bottom:1px dotted var(--carta-ombra);
}
.atto__indice a:hover{color:var(--ceralacca)}

.articolo{margin:0 0 34px;scroll-margin-top:96px}
.articolo__testa{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 0 10px;padding-bottom:8px;
  border-bottom:1px solid var(--carta-riga);
}
.articolo__n{
  font-family:var(--mono);font-weight:700;font-size:var(--t-sm);
  color:var(--ceralacca);letter-spacing:.14em;white-space:nowrap;
}
.articolo__rubrica{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:var(--t-lg);line-height:1;margin:0;letter-spacing:0;
}
.articolo__testo{font-family:var(--mono);font-size:var(--t-sm);line-height:1.85;margin:0}

.preambolo{
  font-family:var(--mono);font-size:var(--t-sm);line-height:1.85;
  border:1px solid var(--carta-riga);padding:20px 22px;margin:0 0 34px;
  background:rgba(58,46,34,.04);
}

.sigilli{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:26px}

/* ========================================================= 13. DOVE */

.luoghi{list-style:none;margin:0;padding:0}
.luogo{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(14px,3vw,30px);
  padding:24px 0;border-top:1px solid var(--carta-riga);
}
.luogo:last-child{border-bottom:1px solid var(--carta-riga)}
.luogo__stato{
  font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--carta);background:var(--seppia);
  padding:5px 9px;height:max-content;white-space:nowrap;
}
.luogo__stato--carta{background:var(--ceralacca)}
.luogo__nome{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:var(--t-xl);line-height:1;margin:0 0 6px;
}
.luogo__meta{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;
  text-transform:uppercase;color:var(--inchiostro-tenue);margin:0 0 10px;
}
.luogo__testo{margin:0;max-width:60ch}

/* ================================================== 13-bis. MODULI */

.modulo__sigla{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--inchiostro-tenue);
  margin:0 0 22px;padding-bottom:10px;border-bottom:1px solid var(--carta-riga);
}

.modulo{max-width:640px;margin:0}

.campo{margin:0 0 22px}
.campo__eti{
  display:block;font-family:var(--mono);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--seppia);margin:0 0 7px;
}
.campo__opz{font-weight:400;letter-spacing:.1em;color:var(--inchiostro-tenue);text-transform:none}
.campo__ing{
  width:100%;
  font-family:var(--mono);font-size:var(--t-sm);line-height:1.6;color:var(--inchiostro);
  background:rgba(255,255,255,.45);
  border:1px solid var(--carta-ombra);border-bottom-width:2px;
  padding:11px 13px;
  border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.campo__ing:focus{
  outline:2px solid var(--oro);outline-offset:2px;
  background:#fff;border-bottom-color:var(--seppia);
}
.campo--errore .campo__ing{border-color:var(--ceralacca)}
.campo__err{
  font-family:var(--mono);font-size:var(--t-xs);color:var(--ceralacca);
  margin:7px 0 0;
}

/* la trappola per i robot: fuori dallo schermo, mai letta da chi vede */
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.modulo__nota{
  font-family:var(--mono);font-size:var(--t-xs);line-height:1.75;
  color:var(--inchiostro-tenue);max-width:60ch;margin:0 0 22px;
}

.bottone{
  display:inline-block;
  font-family:var(--mono);font-weight:700;font-size:var(--t-sm);
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--carta);background:var(--ceralacca);
  border:2px solid var(--ceralacca);
  padding:14px 26px;cursor:pointer;text-decoration:none;
  border-radius:0;-webkit-appearance:none;appearance:none;
  transition:background .15s ease,color .15s ease;
}
.bottone:hover{background:transparent;color:var(--ceralacca)}
.bottone--chiaro{color:var(--carta);background:var(--ceralacca);border-color:var(--ceralacca)}
.bottone--chiaro:hover{background:transparent;color:var(--carta);border-color:var(--carta)}

.avviso{
  font-family:var(--mono);font-size:var(--t-sm);line-height:1.7;
  border:2px solid var(--ceralacca);border-left-width:6px;
  padding:14px 18px;margin:0 0 26px;max-width:640px;
  color:var(--inchiostro);background:rgba(179,38,30,.06);
}

.ricevuta{
  border:1px solid var(--carta-riga);border-top:3px solid var(--ceralacca);
  padding:clamp(20px,3vw,32px);max-width:640px;
  background:rgba(58,46,34,.04);
}
.ricevuta__titolo{
  font-family:var(--display);text-transform:uppercase;font-weight:400;
  font-size:var(--t-xl);line-height:1;margin:0 0 18px;
}
.ricevuta .testo{margin-top:18px}

/* ======================================================= 14. CHIUSURA */

.chiusura{
  border-top:1px solid var(--notte-riga);
  padding:clamp(34px,5vw,60px) var(--gutter) 28px;
  background:var(--nero);
}
.chiusura__griglia{
  max-width:var(--largo);margin:0 auto;
  display:grid;grid-template-columns:1fr 260px;gap:clamp(26px,5vw,60px);
}
.chiusura__col--stretta{min-width:0}
.fonti{margin:0;padding-left:20px;font-size:var(--t-sm);line-height:1.6;color:rgba(237,230,214,.72)}
.fonti li{margin-bottom:11px}
.chiusura__nav{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:var(--t-sm)}
.chiusura__nav li{border-bottom:1px dotted rgba(237,230,214,.2)}
.chiusura__nav a{display:block;padding:8px 0;text-decoration:none}
.chiusura__nav a:hover{color:var(--oro)}
.chiusura__nav span{color:var(--oro);margin-right:8px}

.disclaimer{
  max-width:var(--largo);margin:clamp(28px,4vw,48px) auto 0;
  padding-top:20px;border-top:1px solid var(--notte-riga);
  font-family:var(--mono);font-size:var(--t-xs);line-height:1.8;
  color:rgba(237,230,214,.55);
}
.disclaimer p{margin:0 0 12px;max-width:100ch}
/* .62 e non .4: a 11-12px la firma faceva 3,3:1, sotto la soglia AA */
.disclaimer__firma{display:flex;gap:20px;flex-wrap:wrap;color:rgba(237,230,214,.62)}

/* ======================================================== 15. MOTION */

/* Lo stato "nascosto" vale solo se il JS è vivo (classe .js messa in <head>):
   senza JS il contenuto resta visibile, che è il requisito. */
.js .appare{opacity:0;transform:translateY(18px)}
.js .appare.visibile{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}

.js .timbro{opacity:0;transform:rotate(-6deg) scale(1.35)}
.js .timbro.visibile{
  opacity:.92;transform:rotate(-6deg) scale(1);
  transition:opacity .18s ease-out,transform .22s cubic-bezier(.2,1.4,.5,1);
}
.js .timbro--dritto.visibile{transform:rotate(0) scale(1)}
.js .timbro--destra{transform:rotate(5deg) scale(1.35)}
.js .timbro--destra.visibile{transform:rotate(5deg) scale(1)}

@media (prefers-reduced-motion:reduce){
  .js .appare,.js .appare.visibile{opacity:1;transform:none;transition:none}
  .js .timbro,.js .timbro.visibile{opacity:.92;transition:none}
  .js .timbro{transform:rotate(-6deg) scale(1)}
  .js .timbro--dritto{transform:none}
  .js .timbro--destra{transform:rotate(5deg) scale(1)}
  html{scroll-behavior:auto}
}

/* ===================================================== 16. RESPONSIVE */

@media (max-width:900px){
  .scheda{grid-template-columns:1fr}
  .atto{grid-template-columns:1fr}
  .atto__indice{position:static;
    border-bottom:1px solid var(--carta-riga);padding-bottom:14px;margin-bottom:22px}
  .atto__indice ol{display:flex;flex-wrap:wrap;gap:4px 14px}
  .atto__indice a{border:0;padding:2px 0}
  .chiusura__griglia{grid-template-columns:1fr}
}

@media (max-width:760px){
  .protocollo{flex-direction:column;align-items:stretch;gap:8px;padding-bottom:0}
  .protocollo__ente{justify-content:center}
  .indice ul{justify-content:flex-start;padding-bottom:6px}
  /* l'etichetta sparisce alla vista ma resta nel nome accessibile del link:
     con display:none i cinque link si sarebbero chiamati "01".."06" */
  .indice__label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
  }
  .indice a{padding:8px 12px}
  .indice__num{font-size:var(--t-sm)}

  /* i grissini si coricano: da 5 colonne a 2, e le strisce diventano riquadri */
  .vaso{grid-template-columns:repeat(2,1fr)}
  .frontespizio__vaso{height:auto}
  .frontespizio__vaso .vaso__strip{aspect-ratio:3/4}
  .vaso__strip--nascondi-mobile{display:none}

  .frontespizio__marchio{margin-top:-.18em}
  .luogo{grid-template-columns:1fr}
  .luogo__stato{justify-self:start}
}

@media (max-width:420px){
  .vaso{grid-template-columns:1fr}
  .frontespizio__vaso .vaso__strip{aspect-ratio:4/3}
}