/* ---- La chiusa: l'ultima cosa del racconto, prima del progetto che segue (le pagine progetto non hanno piede).
   Sinistra: un invito che risponde a questo progetto + Scrivimi e i progetti. Destra: i servizi usati qui.
   Stessa griglia di .progetto (fianco 1/6, racconto 7/13). I bottoni della casa sono pensati sul nero: qui si rovesciano.
   La FASCIA ARANCIO con la grana (Francesco, 20/10/2026, fra nero · arancio · pietra): fine racconto, banner e progetto
   che segue si staccano col fondo, ⛔ col filetto. È l'unico arancio pieno della pagina (foglio di stile: «una sola»). */
.chiusa{display:grid;grid-template-columns:repeat(12,1fr);column-gap:1.15vw;align-items:start;position:relative;isolation:isolate;
  margin:var(--sezione) 0 0;padding:clamp(72px,9vw,150px) var(--gronda) clamp(80px,10vw,170px);background:var(--arancio);color:var(--nero)}
.chiusa::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
.chiusa__invito{grid-column:1/7}
.chiusa__servizi{grid-column:7/13}
.chiusa__k{color:rgba(53,30,28,.62)}
.chiusa__t{margin-top:clamp(20px,2.2vw,36px);max-width:17ch;font-weight:500;font-size:clamp(2.2rem,1.2rem + 3vw,5rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.chiusa__azioni{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15vw;max-width:34em;margin-top:clamp(32px,3.6vw,60px)}
.chiusa .bottone{border-color:var(--nero)}
.chiusa .bottone--pieno{background:var(--nero);color:var(--crema)}
/* sull'arancio l'hover della casa (arancio) sparirebbe: si accende crema */
.chiusa .bottone:focus-visible{background:var(--crema);border-color:var(--crema);color:var(--nero)}
@media (hover:hover){.chiusa .bottone:hover{background:var(--crema);border-color:var(--crema);color:var(--nero)}}

.chiusa__voci{margin:clamp(20px,2.2vw,36px) 0 0;list-style:none;border-top:1px solid rgba(53,30,28,.2)}
.chiusa__voci a{display:grid;grid-template-columns:2.6em minmax(0,1fr) auto 14px;column-gap:1.15vw;align-items:baseline;padding:18px 0 20px;border-bottom:1px solid rgba(53,30,28,.2);transition:color .5s cubic-bezier(.16,1,.3,1)}
.chiusa__voci .n,.chiusa__voci .tag{color:rgba(53,30,28,.62)}
.chiusa__voci .nome{font-weight:500;font-size:clamp(1.15rem,.95rem + .6vw,1.6rem);line-height:1.1;letter-spacing:-.025em}
.chiusa__voci svg,.chiusa__tutti svg{align-self:center;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.chiusa__tutti{display:inline-flex;align-items:center;gap:12px;margin-top:22px;transition:color .5s cubic-bezier(.16,1,.3,1)}
.chiusa__voci a:focus-visible,.chiusa__tutti:focus-visible{color:var(--crema)}
@media (hover:hover){
  .chiusa__voci a:hover,.chiusa__tutti:hover{color:var(--crema)}
  .chiusa__voci a:hover svg,.chiusa__tutti:hover svg{transform:translateX(4px)}
}

/* sotto i 1000 px le due metà vanno una sotto l'altra, come fianco e racconto */
@media (max-width:62.5em){
  .chiusa__invito,.chiusa__servizi{grid-column:1/-1}
  .chiusa__servizi{margin-top:clamp(56px,9vw,80px)}
}
/* sotto i 640 px: i due bottoni affiancati non ci stanno più col testo intero; la riga del servizio mette il tag sotto il nome */
@media (max-width:40em){
  .chiusa__azioni{grid-template-columns:1fr;gap:10px;max-width:none}
  .chiusa__voci a{grid-template-columns:2.6em minmax(0,1fr) 14px;row-gap:6px}
  .chiusa__voci .tag{grid-column:2;grid-row:2}
  .chiusa__voci svg{grid-column:3;grid-row:1}
}