/* =====================================================================
   sguardare.it
   Un archivio si legge, non si naviga. La carta è calda, la misura è
   quella di un libro, e le fotografie hanno il permesso di essere grandi.
   ===================================================================== */

:root{
  --carta:#faf7f2;
  --carta2:#ffffff;
  --inchiostro:#211e1b;
  --tenue:#6d665e;
  --filo:#e4ddd2;
  --acc:#a0521c;
  --acc2:#7d5e3c;
  --misura:36rem;
  --largo:74rem;
  --serif:Georgia,"Iowan Old Style","Palatino Linotype","Book Antiqua",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carta);color:var(--inchiostro);
  font-family:var(--serif);line-height:1.66;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-underline-offset:2px}
a:hover{color:var(--acc)}
h1,h2,h3{font-weight:600;line-height:1.22;letter-spacing:-.01em}

/* ---------------------------------------------------------- testata --- */
.testa{display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:baseline;
  padding:1.1rem 1.6rem;border-bottom:1px solid var(--filo);
  position:sticky;top:0;z-index:20;
  background:rgba(250,247,242,.93);backdrop-filter:saturate(1.4) blur(8px)}
.marchio{font-family:var(--sans);font-size:.92rem;font-weight:700;
  letter-spacing:.14em;text-decoration:none}
.marchio .esse{color:var(--acc)}
.testa nav{display:flex;flex-wrap:wrap;gap:1.15rem;margin-left:auto;
  font-family:var(--sans);font-size:.78rem;letter-spacing:.04em}
.testa nav a{color:var(--tenue);text-decoration:none}
.testa nav a:hover{color:var(--acc)}

/* ---------------------------------------------------------- impianto -- */
.guscio{max-width:var(--misura);margin:0 auto;padding:3rem 1.6rem 5rem}
.guscio.stretto{max-width:34rem}
.guscio.largo{max-width:var(--largo)}
.rubrica{font-family:var(--sans);font-size:.74rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  margin:4rem 0 .4rem}
.nota-rubrica{font-family:var(--sans);font-size:.8rem;color:var(--tenue);
  margin:0 0 1.6rem;max-width:30rem}
.intro{font-size:.98rem;color:var(--tenue);max-width:32rem}

/* ---------------------------------------------------------- la soglia - */
/* Non a meta' schermo: piu' in alto, cosi' l'occhio parte subito e il
   fondo resta libero. E soprattutto non alta quanto la finestra: se la
   soglia riempie tutto, nessuno immagina che sotto ci sia altro. Lasciarne
   fuori un quinto e' l'unico modo onesto per dire "continua". */
.soglia{min-height:70vh;display:flex;align-items:flex-start;justify-content:center;
  padding:3rem 1.6rem 5.5rem;position:relative;
  background:
    radial-gradient(120% 80% at 50% 0%, #fffdfa 0%, var(--carta) 60%),
    var(--carta)}
.soglia .dentro{max-width:33rem;text-align:center}
.soglia h1{font-family:var(--sans);font-size:clamp(2rem,7vw,3.4rem);
  letter-spacing:.08em;font-weight:800;margin:0 0 .55rem}
.soglia h1 .esse{color:var(--acc)}
/* Il sottotitolo sta sotto il nome come sta sotto una firma: piccolo,
   spaziato, senza gridare. E' quello che il nome promette. */
.soglia .insegna{font-family:var(--sans);font-size:.72rem;letter-spacing:.26em;
  text-transform:lowercase;color:var(--tenue);margin:0 0 1.9rem;font-weight:500}
.soglia .occhio{font-size:clamp(1.02rem,2.4vw,1.2rem);line-height:1.62;margin:0 0 2rem}
.soglia .chiave{font-family:var(--sans);font-size:.86rem;color:var(--tenue);margin:0}
.soglia .chiave a{color:var(--acc);text-decoration:none;white-space:nowrap}
.soglia .giu{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  text-decoration:none;color:var(--tenue);font-family:var(--sans);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  animation:respiro 2.6s ease-in-out infinite}
.soglia .giu i{width:2.4rem;height:2.4rem;line-height:2.3rem;text-align:center;
  border:1px solid var(--filo);border-radius:50%;background:var(--carta2);
  font-style:normal;font-size:1rem;color:var(--acc)}
.soglia .giu:hover{color:var(--acc)}
.soglia .giu:hover i{border-color:var(--acc)}
@keyframes respiro{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}
@keyframes respiro-fermo{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* il registro nell'area: molte righe, quindi righe basse e leggibili */
.registro li{padding:.42rem 0;font-size:.92rem}
.registro .cifre{font-size:.76rem}

/* ------------------------------------------------------- fuori la porta */
/* Chi non e' entrato non trova una pagina vuota: trova il motivo per
   entrare, scritto come si scrive a una persona e non come si scrive
   un avviso. */
.invito-grande{margin:0;padding:.5rem 0 1rem}
.invito-grande p{font-size:1.04rem;line-height:1.66;margin:0 0 1.1rem;max-width:36rem}
.invito-grande .comincia{margin:1.8rem 0 1.4rem}
.invito-grande .nota-rubrica{margin:0}
/* nella testa, la porta si distingue dalle stanze */
.testa nav .tessera{color:var(--acc)}

/* ---------------------------------------------------------- apertura -- */
.apertura{margin:0 0 3rem;padding:0 0 2.6rem;border-bottom:1px solid var(--filo)}
.apertura .figura{display:block;margin:0 0 1.4rem}
.apertura .figura img{border-radius:2px}
.apertura h2{font-size:clamp(1.5rem,4.4vw,2.05rem);margin:.3rem 0 .8rem}
.apertura h2 a{text-decoration:none}
.apertura .sommario{font-size:1.02rem;color:#3c3730;margin:0 0 1rem}

/* ---------------------------------------------------------- il flusso -
   Due colonne vere, non una griglia: le colonne si riempiono da sole e
   non lasciano buchi, perche' ogni scheda e' alta quanto il suo contenuto
   e non quanto la piu' alta della riga. */
.flusso{column-count:2;column-gap:2.4rem}
.flusso .scheda{break-inside:avoid;-webkit-column-break-inside:avoid;
  page-break-inside:avoid;display:inline-block;width:100%;
  margin:0 0 2.6rem;padding:0 0 2rem;border-bottom:1px solid var(--filo)}
.scheda h3{font-size:1.08rem;margin:.1rem 0 .5rem}
.scheda h3 a{text-decoration:none}
.scheda .parole{font-size:.94rem}
.scheda .parole p{margin:0 0 .75rem}
.scheda .parole p:last-child{margin-bottom:0}
.scheda .ancora{font-family:var(--sans);font-size:.76rem;margin:.5rem 0 0}
.scheda .ancora a{color:var(--acc);text-decoration:none}
.luogo{font-style:italic;text-transform:none;letter-spacing:0}

/* i provini: quante ne ha, tante ne mostra, in quadrati che si chiudono */
.provino{display:grid;gap:3px;margin:.8rem 0 0}
.provino a,.provino figure{margin:0;display:block;position:relative;overflow:hidden}
.provino a img{width:100%;height:100%;object-fit:cover;display:block;border-radius:1px}
.provino.p1,.provino.sola{grid-template-columns:1fr}
.provino.sola a img{height:auto;object-fit:contain}
.provino.p2{grid-template-columns:1fr 1fr}
.provino.p3,.provino.p5,.provino.p6{grid-template-columns:repeat(3,1fr)}
.provino.p4{grid-template-columns:1fr 1fr}
.provino.p7,.provino.p8,.provino.p9{grid-template-columns:repeat(3,1fr)}
.provino.p2 a,.provino.p4 a{aspect-ratio:1/1}
.provino.p3 a,.provino.p5 a,.provino.p6 a,
.provino.p7 a,.provino.p8 a,.provino.p9 a{aspect-ratio:1/1}
.provino .vid{grid-column:1/-1}
.provino .vid video{width:100%;border-radius:2px}

/* il video che si apre dove sta */
.cinema{position:relative;margin:.9rem 0 0;aspect-ratio:16/9;border-radius:2px;
  background:#1a1714 url(data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==);
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.cinema iframe,.cinema video{position:absolute;inset:0;width:100%;height:100%;border:0}
.cinema .play{width:3.4rem;height:3.4rem;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.92);color:#1a1714;font-size:1.1rem;padding-left:.2rem}
.cinema:hover .play{background:#fff}
.cinema .da{position:absolute;bottom:.5rem;right:.7rem;font-family:var(--sans);
  font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.dt{font-family:var(--sans);font-size:.72rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 .5rem;
  display:flex;flex-wrap:wrap;gap:.55rem;align-items:center}
.dt a{color:inherit;text-decoration:none}
.dt a:hover{color:var(--acc)}
.origine{color:var(--acc);border:1px solid currentColor;border-radius:2px;
  padding:.06rem .42rem;font-size:.66rem;text-decoration:none;letter-spacing:.06em}
.incerta{border-bottom:1px dotted;cursor:help}

/* ---------------------------------------------------------- lettura --- */
.lettura h1{font-size:clamp(1.55rem,5vw,2.15rem);margin:.4rem 0 1.2rem}
.testo p{margin:0 0 1.2rem}
.testo.lungo{font-size:1.06rem}
.testo.lungo p:first-child::first-letter{float:left;font-size:3.1rem;line-height:.84;
  padding:.18rem .5rem 0 0;color:var(--acc)}
.occhiello{color:var(--tenue);font-style:italic;margin:-.6rem 0 1.2rem}
.citato{border-left:2px solid var(--filo);margin:1.8rem 0;padding:.1rem 0 .1rem 1.2rem;
  color:var(--tenue);font-style:italic}
.nota{border:1px solid var(--filo);background:var(--carta2);border-radius:3px;
  padding:1.1rem 1.3rem;margin:2.2rem 0}
.nota h4{margin:0 0 .4rem;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.nota p{margin:0}
.altrove,.daalbum,.nel-libro{font-family:var(--sans);font-size:.82rem;color:var(--tenue)}
.video iframe{width:100%;aspect-ratio:16/9;border:0;margin:1.6rem 0}

/* ---------------------------------------------------------- lastre ---- */
.lastre{margin:1.8rem 0;display:grid;gap:.6rem}
.lastre figure{margin:0}
.lastre img{width:100%;border-radius:2px}
.lastre.n1 figure{margin:0 0 .4rem}
.lastre.n2,.lastre.n3,.lastre.n4{grid-template-columns:1fr 1fr}
.lastre.n3 figure:first-child,.lastre.n4 figure:nth-child(n+5){grid-column:1/-1}
figcaption{font-family:var(--sans);font-size:.74rem;color:var(--tenue);margin-top:.35rem}

/* ---------------------------------------------------------- il libro -- */
body.libro{background:#f6f2ec}
.foglio{max-width:40rem;margin:0 auto;padding:3.4rem 1.6rem 2rem;min-height:70vh}
.foglio h1{font-size:clamp(1.5rem,4.6vw,2.1rem);margin:.4rem 0 1.4rem}
.foglio .lastre{margin:1.4rem 0 2rem}
.foglio .testo{font-size:1.05rem}
.pie-foglio{font-family:var(--sans);font-size:.76rem;color:var(--tenue);
  margin:3rem 0 0;padding-top:1.1rem;border-top:1px solid var(--filo)}
.girapagina{position:fixed;inset:0;pointer-events:none;z-index:15}
.gira{position:absolute;top:0;bottom:0;width:clamp(3rem,9vw,7rem);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--tenue);font-size:2rem;
  pointer-events:auto;opacity:.32;transition:opacity .2s,background .2s}
.gira:hover{opacity:1;background:linear-gradient(90deg,rgba(0,0,0,.05),transparent)}
.gira.ava:hover{background:linear-gradient(-90deg,rgba(0,0,0,.05),transparent)}
.gira.ind{left:0}
.gira.ava{right:0}
.gira.vuota{opacity:.08;pointer-events:none}

/* ---------------------------------------------------------- saggio ---- */
.saggio h1{font-family:var(--sans);font-size:clamp(1.7rem,6vw,2.6rem);
  letter-spacing:.06em;font-weight:800;margin:0 0 1.6rem}
.saggio h1 .esse{color:var(--acc)}
.sopratitolo{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);margin:0 0 .5rem}
.saggio p{margin:0 0 1.25rem;font-size:1.04rem}
.saggio .attacco{font-size:1.16rem;line-height:1.6}
.saggio .stacco{text-align:center;font-style:italic;color:var(--tenue);
  margin:2rem 0;font-size:1.02rem}
.saggio .domanda{font-size:1.3rem;text-align:center;margin:2.2rem 0;color:var(--acc)}
.saggio .chiusa{border-top:1px solid var(--filo);padding-top:1.4rem;margin-top:2rem}
.saggio .chiusa.brindisi{font-style:italic;font-size:1.08rem}
.saggio .firma{font-family:var(--sans);font-size:.8rem;letter-spacing:.08em;
  color:var(--tenue);text-transform:uppercase;margin-top:2rem}
.saggio i{font-style:italic}
.saggio b{font-weight:600}
.dopo-saggio{display:grid;gap:.8rem;margin:3rem 0 0}
.dopo-saggio a{display:block;border:1px solid var(--filo);border-radius:3px;
  padding:1rem 1.2rem;text-decoration:none;background:var(--carta2);font-size:1rem}
.dopo-saggio a:hover{border-color:var(--acc)}
.dopo-saggio span{display:block;font-family:var(--sans);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.2rem}
.bottone{display:inline-block;background:var(--inchiostro);color:var(--carta);
  padding:.8rem 1.6rem;border-radius:3px;text-decoration:none;
  font-family:var(--sans);font-size:.86rem;letter-spacing:.03em}
.bottone:hover{background:var(--acc);color:#fff}
.comincia{margin:2.6rem 0 0}

/* ---------------------------------------------------------- anni ------ */
.anni{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.5rem}
.anni a{display:block;border:1px solid var(--filo);border-radius:3px;padding:.6rem .7rem;
  text-decoration:none;background:var(--carta2);font-family:var(--sans)}
.anni a:hover{border-color:var(--acc)}
.anni b{display:block;font-size:1.02rem}
.anni span{display:block;font-size:.7rem;color:var(--tenue);margin-bottom:.35rem}
.anni i{display:block;height:3px;background:var(--acc);border-radius:2px;min-width:2px}

/* ---------------------------------------------------------- etichette - */
.nuvola{line-height:2.5;margin:0}
.etic{display:inline-block;text-decoration:none;color:var(--acc2);
  border:1px solid var(--filo);border-radius:2px;padding:.1rem .5rem;
  font-family:var(--sans);background:var(--carta2)}
.etic:hover{border-color:var(--acc);color:var(--acc)}
.etic span{color:var(--tenue);font-size:.68em;margin-left:.35rem}
.etichette{margin:2rem 0 0;line-height:2.2}

/* ---------------------------------------------------------- numeri ---- */
.numeri{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1rem;margin:4rem 0 0;padding-top:2.4rem;border-top:1px solid var(--filo)}
.invito{text-decoration:none;text-align:center;padding:.6rem}
.invito .grande{display:block;font-size:1.9rem;color:var(--acc);line-height:1.1}
.invito .grande em{font-style:normal;font-size:1rem}
.invito .piccolo{display:block;font-family:var(--sans);font-size:.74rem;
  color:var(--tenue);margin-top:.3rem}

/* ---------------------------------------------------------- archivio -- */
.cerniera{display:grid;grid-template-columns:1fr 13rem;gap:3rem;align-items:start}
.filtri{position:sticky;top:5rem;font-family:var(--sans);font-size:.84rem}
.apri-filtri{display:none}
.filtri h4{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);margin:1.6rem 0 .5rem;font-weight:700}
.filtri h4:first-child{margin-top:0}
.scelte{list-style:none;margin:0;padding:0}
.scelte li{margin:0 0 .18rem}
.scelte a{display:flex;align-items:center;gap:.45rem;text-decoration:none;
  color:var(--tenue);padding:.16rem 0;line-height:1.3}
.scelte a:hover{color:var(--acc)}
.scelte i{flex:none;width:.72rem;height:.72rem;border:1px solid var(--filo);
  border-radius:2px;background:var(--carta2)}
.scelte a.presa{color:var(--inchiostro)}
.scelte a.presa i{background:var(--acc);border-color:var(--acc)}
.scelte span{margin-left:auto;font-size:.72rem;color:var(--filo)}
.scelte a:hover span{color:var(--tenue)}
.minuta{font-size:.76rem;color:var(--tenue);margin:.5rem 0 0}
.minuta a{color:var(--acc);text-decoration:none}
.anni-minuti{display:flex;flex-wrap:wrap;gap:.3rem;margin:0;font-size:.76rem}
.anni-minuti a{text-decoration:none;color:var(--tenue);border:1px solid var(--filo);
  border-radius:2px;padding:.05rem .35rem;background:var(--carta2)}
.anni-minuti a.presa{background:var(--acc);border-color:var(--acc);color:#fff}
.nuvola.minuta{line-height:1.9}
.nuvola.minuta .etic{font-size:.74rem;padding:.04rem .34rem}
.etic.presa{background:var(--acc);border-color:var(--acc);color:#fff}
.azzera{margin:1.6rem 0 0;font-size:.78rem}
.azzera a{color:var(--acc)}
.conta{font-family:var(--sans);font-size:.85rem;color:var(--tenue);margin:0 0 2rem}
.conta a{color:var(--acc);text-decoration:none}
.vuoto{color:var(--tenue);padding:2rem 0}

/* ---------------------------------------------------------- pagine ---- */
.pagine{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin:3.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--filo);
  font-family:var(--sans);font-size:.84rem}
.pagine a{color:var(--acc);text-decoration:none}
.pagine span{color:var(--tenue)}
.oltre{font-family:var(--sans);font-size:.85rem;color:var(--acc);text-decoration:none}
.oltre-riga{margin:2.4rem 0 0}
.intorno{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:3.4rem 0 0;
  padding-top:1.6rem;border-top:1px solid var(--filo)}
.intorno a{text-decoration:none;font-size:.9rem;color:var(--tenue)}
.intorno a span{display:block;font-family:var(--sans);font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.25rem}
.intorno .dopo{text-align:right}

/* ---------------------------------------------------------- cerca ----- */
.cerca{display:flex;gap:.6rem;margin:0 0 2.4rem}
.cerca input{flex:1;padding:.8rem 1rem;border:1px solid var(--filo);border-radius:3px;
  font-size:1.02rem;font-family:inherit;background:var(--carta2);color:inherit}
.cerca input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.cerca button{padding:.8rem 1.4rem;border:0;border-radius:3px;cursor:pointer;
  background:var(--inchiostro);color:var(--carta);font-family:var(--sans);font-size:.86rem}

/* ---------------------------------------------------------- origini --- */
.origini{list-style:none;padding:0;margin:2.4rem 0}
.origini li{padding:1rem 0;border-bottom:1px solid var(--filo)}
.origini a{font-size:1.14rem;text-decoration:none;display:block}
.cifre{display:block;font-family:var(--sans);font-size:.74rem;color:var(--tenue);margin-top:.2rem}

/* ---------------------------------------------------------- piede ----- */
.piede{border-top:1px solid var(--filo);padding:2.4rem 1.6rem 3.4rem;
  font-family:var(--sans);font-size:.78rem;color:var(--tenue);text-align:center}
.piede p{margin:.3rem 0}
.piede .minuto a{color:var(--tenue)}
body.libro .piede{border:0;opacity:.6}

/* ---------------------------------------------------------- telefono -- */
@media (max-width:900px){
  /* Sul telefono la soglia prende tutta la finestra e non lascia vedere
     niente sotto: si arriva, si legge, e si decide di scendere. Il titolo
     ha aria sopra, e la freccia gli sta vicino invece di stare inchiodata
     in fondo allo schermo, dove sembrava appartenere a un'altra pagina.
     100dvh e non 100vh: sul telefono la barra degli indirizzi si ritira
     e 100vh e' sempre un po' piu' alto della finestra vera. */
  .soglia{min-height:100vh;min-height:100dvh;flex-direction:column;
    align-items:center;justify-content:flex-start;padding:5.5rem 1.4rem 2rem;
    overflow:hidden}
  .soglia .dentro{max-width:none}
  .soglia h1{margin-bottom:.5rem}
  .soglia .insegna{margin-bottom:1.6rem}
  .soglia .occhio{margin-bottom:1.5rem}
  .soglia .giu{position:static;transform:none;left:auto;bottom:auto;
    margin:2.2rem 0 0;animation:respiro-fermo 2.6s ease-in-out infinite}
  .cerniera{grid-template-columns:1fr;gap:1.4rem}
  .filtri{position:static;order:-1;border:1px solid var(--filo);border-radius:3px;
    padding:0;background:var(--carta2)}
  .apri-filtri{display:block;width:100%;border:0;background:none;padding:.8rem 1rem;
    font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
    color:var(--acc);cursor:pointer;text-align:left}
  .apri-filtri::after{content:'+';float:right}
  .apri-filtri[aria-expanded="true"]::after{content:'\2212'}
  .dentro-filtri{display:none;padding:0 1rem 1.2rem}
  .filtri.aperti .dentro-filtri{display:block}
}
@media (max-width:640px){
  html{font-size:16px}
  .guscio{padding:2rem 1.15rem 3.4rem}
  .testa{padding:.9rem 1.15rem}
  .testa nav{gap:.85rem;font-size:.74rem;width:100%;margin-left:0}
  .flusso{column-count:1}
  .intorno{grid-template-columns:1fr}
  .intorno .dopo{text-align:left}
  .lastre.n2,.lastre.n3,.lastre.n4{grid-template-columns:1fr}
  .lastre.n3 figure:first-child,.lastre.n4 figure:nth-child(n+5){grid-column:auto}
  .foglio{padding:2.2rem 1.15rem 4rem}
  .gira{width:2.6rem;opacity:.5}
  .testo.lungo p:first-child::first-letter{font-size:2.6rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   IL FLUSSO CONTINUO
   Il sistema del volume integrale, portato dentro il sito: una colonna
   sola, ogni forma con la sua pagina, e niente pagine da voltare.
   Sta in fondo perche' quello che viene dopo ha ragione.
   ===================================================================== */

.carta{max-width:74rem;margin:0 auto;padding:2.6rem 1.6rem 6rem}
.carta .cerniera{grid-template-columns:minmax(0,1fr) 12.5rem;gap:3.4rem}
.colonna-viva{max-width:44rem;margin:0 auto;min-width:0}

/* ---------------------------------------------------------- la nota --- */
.nota{margin:0 0 3rem}
.nota h2{font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc);margin:0 0 1rem}
.nota p{font-size:.96rem;line-height:1.7;color:var(--tenue);margin:0 0 .8rem}
.nota em{font-style:italic;color:var(--inchiostro)}
.nota .conta{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--filo)}

/* ------------------------------------------------- il mese si annuncia - */
.mese{display:flex;align-items:center;gap:1rem;margin:4.2rem 0 1.8rem}
.mese span{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--acc2);white-space:nowrap}
.mese i{flex:1;height:1px;background:var(--filo)}
#corpo > .mese:first-child{margin-top:1rem}

/* ---------------------------------------------------------- la data --- */
.v .testata{display:flex;flex-wrap:wrap;align-items:baseline;gap:.9rem;margin:0 0 .6rem}
.v .dt{font-family:var(--sans);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--tenue);text-decoration:none}
.v .dt:hover{color:var(--acc)}
.v .lg,.v .og{font-family:var(--sans);font-size:.68rem;color:var(--lieve,#a9998a);
  font-style:italic;text-decoration:none}
.v .og{font-style:normal;letter-spacing:.06em;color:var(--acc2)}
.v .lg:hover,.v .og:hover{color:var(--acc)}
.v h3{font-size:1.16rem;margin:.1rem 0 .7rem;font-weight:600}
.v h3 a{text-decoration:none}

/* ---------------------------------------------------- il testo lungo --- */
.v.testo{margin:0 0 4.6rem}
.v.testo figure.cop{margin:0 0 1.2rem}
.v.testo figure.cop img{width:100%;cursor:zoom-in}
.v.testo p{margin:0 0 .25rem;text-indent:1.3em;text-align:justify;hyphens:auto;
  font-size:1.02rem;line-height:1.66}
.v.testo p.incipit{text-indent:0}
.v.testo.versi p{text-indent:0;text-align:left}
.v.testo .altre{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1.1rem}
.v.testo .altre img{width:100%;cursor:zoom-in}
.v.testo .altre .vid{grid-column:1/-1;margin:0}

/* -------------------------------------------------- il foto-pensiero --- */
.v.pensiero{margin:0 0 4rem}
.v.pensiero > figure{margin:0 0 .7rem;background:var(--filo)}
.v.pensiero > figure img{width:100%;cursor:zoom-in}
.v.pensiero .piu{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin:.35rem 0 .7rem}
.v.pensiero .piu img{width:100%;cursor:zoom-in}
.v.pensiero .piu .vid{grid-column:1/-1;margin:0}
.v.pensiero .corpo p{margin:.35rem 0 0;font-size:1rem;line-height:1.6}

/* -------------------------------------------------- i pensieri brevi --- */
.haiku-blocco{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;
  margin:0 0 4rem}
.haiku{flex:0 1 calc(50% - .35rem);min-width:13rem;border:1px solid var(--filo);
  padding:1.2rem 1.1rem 1.3rem;text-align:center;background:var(--carta2);
  display:flex;flex-direction:column;justify-content:center;min-height:7rem}
.haiku .dt{display:block;margin-bottom:.6rem;font-size:.6rem}
.haiku .ft{font-style:italic;font-size:1rem;line-height:1.5}
.haiku.corto .ft{font-size:1.16rem}

/* ------------------------------------------------------- le gallerie --- */
.v.galleria{margin:0 0 4rem}
.gal-testa{border-top:1px solid var(--filo);padding-top:.7rem;margin-bottom:.9rem;
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.gal-t{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--inchiostro);text-decoration:none}
.gal-t:hover{color:var(--acc)}
.gal-d{font-family:var(--sans);font-size:.66rem;letter-spacing:.06em;color:var(--tenue)}
.gal-d a{color:var(--acc2);text-decoration:none}
.gal-parole{margin:0 0 .9rem}
.gal-parole p{margin:.2rem 0;font-size:.98rem}
.gal-griglia{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.gal-griglia figure{margin:0;aspect-ratio:1/1;display:flex;align-items:center;
  justify-content:center;background:var(--filo);overflow:hidden}
.gal-griglia img{max-width:100%;max-height:100%;width:auto;height:auto;
  cursor:zoom-in;transition:opacity .18s}
.gal-griglia img:hover{opacity:.76}
.gal-griglia video{width:100%;height:100%;object-fit:cover}
.gal-griglia.medi{grid-template-columns:repeat(4,1fr);gap:6px}
.gal-griglia.pochi{grid-template-columns:repeat(3,1fr);gap:8px}
.gal-griglia.due{grid-template-columns:repeat(2,1fr);gap:10px}
.gal-griglia.due figure,.gal-griglia.pochi figure,.gal-griglia.medi figure{aspect-ratio:4/3}
.gal-griglia.sola{grid-template-columns:1fr}
.gal-griglia.sola figure{aspect-ratio:auto;background:none}
.gal-griglia.sola img{max-height:80vh;width:auto;margin:0 auto}
.gal-piu{font-family:var(--sans);font-size:.72rem;margin:.7rem 0 0}
.gal-piu a{color:var(--acc);text-decoration:none}

/* ---------------------------------------------------------- il video --- */
.v.video{margin:0 0 4rem}
.vbox{position:relative;aspect-ratio:16/9;background:#0d0c0b;display:flex;
  align-items:center;justify-content:center;cursor:pointer;overflow:hidden;
  margin:0 0 .5rem}
.vbox iframe,.vbox video{position:absolute;inset:0;width:100%;height:100%;border:0}
.vplay{width:3.4rem;height:3.4rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.55);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:1.1rem;background:rgba(0,0,0,.25)}
.vbox:hover .vplay{background:rgba(255,255,255,.16)}
.vbox .vsrc{position:absolute;bottom:.5rem;right:.7rem;font-family:var(--sans);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#cdc4b8}
.vmeta{display:flex;gap:.9rem;align-items:baseline;flex-wrap:wrap;margin:0 0 .4rem}
.v.video .corpo p{margin:.25rem 0 0;font-size:1rem}
.v.pensiero .vbox,.v.testo .vbox{margin:1rem 0 .4rem}

/* ------------------------------------------------------------ la coda -- */
.carica{padding:3.4rem 0 1rem;text-align:center;font-family:var(--sans);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}
.carica .fine{color:var(--filo)}

/* ------------------------------------------------------------ la lente - */
.lente{position:fixed;inset:0;z-index:90;background:rgba(10,9,8,.985);display:none;
  align-items:center;justify-content:center;flex-direction:column}
.lente.on{display:flex}
.lente img{max-width:94vw;max-height:84vh;object-fit:contain}
.lente .cap{color:#b9b0a4;font-family:var(--sans);font-size:.76rem;margin-top:.9rem;
  text-align:center;max-width:70ch;padding:0 1.2rem;line-height:1.5;word-break:break-all}
.lente .cap b{color:#e4ddd2;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  font-size:.64rem;display:block;margin-bottom:.35rem;word-break:normal}
.lente .x,.lente .pr,.lente .ne{position:absolute;background:none;border:0;
  color:#cdc4b8;font-size:1.7rem;cursor:pointer;padding:1rem;line-height:1;
  font-family:inherit}
.lente .x{top:.4rem;right:.7rem;font-size:2rem}
.lente .pr{left:.2rem;top:50%;transform:translateY(-50%)}
.lente .ne{right:.2rem;top:50%;transform:translateY(-50%)}
.lente .x:hover,.lente .pr:hover,.lente .ne:hover{color:#fff}
.lente .num{position:absolute;top:.9rem;left:1.1rem;color:#8a8178;
  font-family:var(--sans);font-size:.7rem;letter-spacing:.12em}

/* ------------------------------------------- niente piu' due colonne --- */
.flusso{column-count:1;column-gap:0}

/* ---------------------------------------------------------- stretto ---- */
@media (max-width:900px){
  .carta .cerniera{grid-template-columns:1fr}
  .colonna-viva{max-width:none}
  .gal-griglia{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:640px){
  .carta{padding:1.6rem 1.15rem 4rem}
  .haiku{flex:0 1 100%}
  .gal-griglia{grid-template-columns:repeat(3,1fr)}
  .v.testo .altre{grid-template-columns:1fr}
  .mese{margin:3rem 0 1.4rem}
}
.guscio.lettura{max-width:44rem}

/* le due porte del libro: dal principio, o dalla fine */
.comincia{display:flex;flex-wrap:wrap;gap:.7rem}
a.bottone.vino{background:none;color:var(--acc);border:1px solid var(--filo)}
a.bottone.vino:hover{background:var(--acc);color:#fff;border-color:var(--acc)}

/* il frontespizio: che cosa succede se apri una delle due porte */
.nota-porte{font-family:var(--sans);font-size:.8rem;color:var(--tenue);
  margin:.9rem 0 0;max-width:30rem}
/* i contatti stanno in fondo alla barra, ma si vedono */
.testa nav a.contatti{color:var(--acc)}

/* ------------------------------------- l'introduzione: il libro si apre qui */
.nota .sopratitolo{font-family:var(--sans);font-size:.66rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin:0 0 .3rem}
.nota h2.titolone{font-family:var(--serif);font-size:clamp(1.6rem,4.4vw,2.3rem);
  font-weight:600;text-transform:none;letter-spacing:-.015em;line-height:1.14;
  margin:0 0 1.2rem;color:var(--inchiostro)}
.nota .attacco{font-size:1.06rem;line-height:1.66;color:var(--inchiostro);
  margin:0 0 1rem}
.nota .chiusa{font-size:1.02rem;font-style:italic;color:var(--inchiostro);
  margin:0 0 1.1rem}
.nota .firma{font-family:var(--sans);font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tenue);margin:0 0 1.8rem}
.nota .comincia{margin:0 0 1.4rem}
.come-si-legge{font-family:var(--sans);font-size:.8rem;line-height:1.62;
  color:var(--tenue);margin:0;padding-top:1.1rem;border-top:1px solid var(--filo)}
.come-si-legge b{color:var(--inchiostro)}
.interruttore{margin:.9rem 0 0;padding-top:.7rem;border-top:1px dotted var(--filo)}
/* le due porte dentro la soglia: piccole, e la fine davanti */
.soglia .comincia{margin:2rem 0 0;justify-content:center}
.soglia .comincia .bottone{padding:.6rem 1.2rem;font-size:.8rem}
.porte{margin:4rem 0 0;padding-top:2rem;border-top:1px solid var(--filo)}
.porte .comincia{margin:1.4rem 0 0}

/* ---------------------------------------------------- manda a qualcuno --- */
.spartire{margin:2.6rem 0 0;padding-top:1.2rem;border-top:1px solid var(--filo);
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  font-family:var(--sans);font-size:.76rem}
.spartire span{color:var(--tenue);margin-right:.3rem}
.sp{border:1px solid var(--filo);border-radius:99px;padding:.28rem .8rem;
  text-decoration:none;color:var(--tenue);background:var(--carta2);
  font:inherit;cursor:pointer}
.sp:hover{border-color:var(--acc);color:var(--acc)}
.sp.fatto{border-color:var(--acc);color:var(--acc)}

/* =====================================================================
   I MODULI: iscrizione, accesso, area riservata
   ===================================================================== */
.scheda-modulo{margin:2rem 0 0;max-width:30rem}
.scheda-modulo label{display:block;font-family:var(--sans);font-size:.76rem;
  letter-spacing:.06em;color:var(--tenue);margin:1.2rem 0 .3rem}
.scheda-modulo label span{color:var(--filo)}
.scheda-modulo input[type=text],
.scheda-modulo input[type=email],
.scheda-modulo input[type=password]{width:100%;padding:.7rem .9rem;
  border:1px solid var(--filo);border-radius:3px;background:var(--carta2);
  font-family:inherit;font-size:1rem;color:inherit}
.scheda-modulo input:focus{outline:2px solid var(--acc);outline-offset:-1px}
.scheda-modulo .spunta{display:flex;gap:.6rem;align-items:flex-start;
  margin:1.4rem 0 0;font-size:.82rem;line-height:1.5;color:var(--tenue);
  letter-spacing:0;text-transform:none}
.scheda-modulo .spunta input{margin-top:.25rem;flex:none}
.scheda-modulo .spunta i{font-style:italic;color:var(--filo)}
.scheda-modulo .bottone{margin-top:1.6rem;border:0;cursor:pointer}
.scheda-modulo .minuta{margin-top:1rem}
/* il campo che solo i robot compilano */
.lontano{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.errore{background:#fdf1ec;border-left:3px solid var(--acc);padding:.8rem 1rem;
  font-size:.92rem;margin:1.4rem 0 0}
body.modulo .guscio{padding-top:3.4rem}

/* ---------------------------------------------------------- i cookie --- */
.consenso{position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(250,247,242,.985);border-top:1px solid var(--filo);
  box-shadow:0 -10px 40px rgba(90,75,55,.10)}
.consenso .dentro{max-width:52rem;margin:0 auto;padding:1.2rem 1.6rem 1.4rem}
.consenso p{margin:0;font-family:var(--sans);font-size:.84rem;line-height:1.6;
  color:var(--tenue)}
.consenso b{color:var(--inchiostro)}
.consenso a{color:var(--acc)}
.scelte-consenso{display:flex;gap:.6rem;margin-top:.9rem!important;flex-wrap:wrap}
.consenso .bottone{border:0;cursor:pointer;padding:.55rem 1.2rem;font-size:.82rem}
.consenso a.bottone.vino,.consenso button.bottone.vino{border:1px solid var(--filo)}
@media (max-width:640px){ .consenso .dentro{padding:1rem 1.15rem 1.2rem} }
.richiamo{margin:4rem 0 0;padding:2rem 1.8rem;background:var(--carta2);
  border:1px solid var(--filo);border-radius:3px}
.richiamo .rubrica{margin-top:0}
.richiamo p{font-size:.98rem;color:var(--tenue);margin:0;max-width:34rem}
.richiamo .comincia{margin-top:1.4rem}

/* =====================================================================
   LA REDAZIONE
   Il banco dove si lavora non deve somigliare al sito: deve somigliare
   a un tavolo. Righe fitte, niente aria decorativa, tutto leggibile
   in verticale con un colpo d'occhio.
   ===================================================================== */
.guscio.largo{max-width:64rem}
.banco-testa{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:1rem;margin:0 0 .4rem}
.banco-testa h1{margin:0}
.banco-testa .comincia{margin:0}
.briciole{font-family:var(--sans);font-size:.78rem;color:var(--tenue);margin:0 0 1.2rem}
.briciole a{color:var(--tenue);text-decoration:none}
.briciole a:hover{color:var(--acc)}

.cernita{display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;
  font-family:var(--sans);font-size:.8rem;margin:1.6rem 0 .4rem;
  padding:0 0 .7rem;border-bottom:1px solid var(--filo)}
.cernita a{color:var(--tenue);text-decoration:none}
.cernita a:hover{color:var(--acc)}
.cernita a.qui{color:var(--inch);font-weight:600;box-shadow:inset 0 -2px 0 var(--acc)}
.cernita b{font-weight:400;opacity:.55}
.cernita .sbarra{width:1px;height:1rem;background:var(--filo)}
.cernita.minuta{font-size:.74rem;border:0;margin-top:.7rem}

.cerca-banco{display:flex;gap:.5rem;margin:1.2rem 0 1.6rem;flex-wrap:wrap}
.cerca-banco input[type=search]{flex:1;min-width:12rem;padding:.55rem .75rem;
  border:1px solid var(--filo);border-radius:3px;background:var(--carta2);
  font-family:var(--sans);font-size:.88rem}
.cerca-banco select{padding:.55rem;border:1px solid var(--filo);border-radius:3px;
  background:var(--carta2);font-family:var(--sans);font-size:.85rem}

.banco-elenco{width:100%;border-collapse:collapse}
.banco-elenco tr{border-bottom:1px solid var(--filo)}
.banco-elenco td{padding:.75rem .6rem;vertical-align:top}
.banco-elenco .b-tit a{text-decoration:none;font-size:1.02rem}
.banco-elenco .b-sotto{display:block;font-family:var(--sans);font-size:.72rem;
  color:var(--tenue);margin-top:.22rem}
.occhio-banco{display:block;font-family:var(--sans);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:.15rem}
.banco-elenco .b-seg{white-space:nowrap;width:1%}
.banco-elenco .b-fare{white-space:nowrap;width:1%;font-family:var(--sans);font-size:.78rem}
.banco-elenco .b-fare a{color:var(--acc);text-decoration:none}
.in-riga{display:inline}
button.nudo{border:0;background:none;padding:0;color:var(--acc);cursor:pointer;
  font-family:var(--sans);font-size:.78rem}

.bollo{display:inline-block;font-family:var(--sans);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.16rem .45rem;border-radius:2px;
  border:1px solid var(--filo);color:var(--tenue);margin-right:.25rem}
.bollo.s-pubblicato{border-color:#7a8f6a;color:#5d7050}
.bollo.s-bozza{border-color:var(--filo);color:var(--tenue)}
.bollo.s-ritirato{border-color:#c0a0a0;color:#9a6a6a}
.bollo.aperto{border-color:var(--acc);color:var(--acc)}
.bollo.chiuso{border-color:var(--filo);color:var(--tenue)}
.bollo.hero{border-color:var(--acc);background:var(--acc);color:#fff}
.bollo.usata{border-color:#c0a0a0;color:#9a6a6a}

/* ------------------------------------------------------------ il tavolo */
.tavolo-modulo{display:grid;grid-template-columns:1fr 17rem;gap:1.6rem 2rem;align-items:start}
.colonna-larga{grid-column:1/-1}
.tavolo-modulo > .colonna-larga:first-child{grid-column:1/2}
.colonna-stretta{grid-column:2/3;grid-row:1}
.tavolo-modulo label{display:block;font-family:var(--sans);font-size:.74rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin:1.1rem 0 .35rem}
.tavolo-modulo label span{text-transform:none;letter-spacing:0;opacity:.75}
.tavolo-modulo input[type=text],.tavolo-modulo input[type=date],.tavolo-modulo textarea{
  width:100%;padding:.6rem .7rem;border:1px solid var(--filo);border-radius:3px;
  background:var(--carta2);font-family:var(--serif);font-size:1rem;color:var(--inch)}
.tavolo-modulo input.grande{font-size:1.45rem;font-weight:600}
.tavolo-modulo textarea{font-size:.95rem;resize:vertical}

.barretta{display:flex;gap:.2rem;align-items:center;border:1px solid var(--filo);
  border-bottom:0;border-radius:3px 3px 0 0;background:var(--carta2);padding:.3rem}
.barretta button{width:2rem;height:2rem;border:0;background:none;cursor:pointer;
  color:var(--tenue);font-size:.95rem;border-radius:2px}
.barretta button:hover{background:var(--carta);color:var(--acc)}
.barretta .conta{margin-left:auto;padding-right:.5rem;font-family:var(--sans);
  font-size:.7rem;color:var(--tenue)}
.foglio{min-height:20rem;border:1px solid var(--filo);border-radius:0 0 3px 3px;
  background:var(--carta2);padding:1.4rem 1.6rem;font-size:1.04rem;line-height:1.7;
  outline:none}
.foglio:focus{border-color:var(--acc)}
.foglio p{margin:0 0 1rem}
.foglio h3{font-size:1.2rem;margin:1.6rem 0 .6rem}
.foglio blockquote{margin:1.2rem 0;padding-left:1rem;border-left:2px solid var(--acc);
  color:#55504a;font-style:italic}

.cassetto{border:1px solid var(--filo);border-radius:3px;background:var(--carta2);
  padding:.9rem 1rem 1.1rem;margin:0 0 1rem}
.cassetto h3{font-family:var(--sans);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc);margin:0 0 .6rem}
.cassetto .minuta{font-size:.74rem;color:var(--tenue);margin:.5rem 0 0;line-height:1.45}
.cassetto label{margin:0}
.cassetto input[type=date]{width:100%}
.fondo-tavolo{display:flex;gap:.7rem;flex-wrap:wrap;padding-top:1.4rem;
  border-top:1px solid var(--filo);margin-top:1rem}
.riuscito{font-family:var(--sans);font-size:.85rem;color:#5d7050;
  border-left:2px solid #7a8f6a;padding-left:.8rem;margin:0 0 1rem}

.voci-attaccate{list-style:none;padding:0;margin:0}
.voci-attaccate li{display:flex;gap:1rem;align-items:baseline;padding:.6rem 0;
  border-bottom:1px solid var(--filo);font-size:.92rem}
.va-data{font-family:var(--sans);font-size:.72rem;color:var(--tenue);white-space:nowrap;min-width:6rem}
.va-testo{flex:1;color:#4a443d}
.va-fare{font-family:var(--sans);font-size:.74rem;white-space:nowrap}
.va-fare a{color:var(--acc);text-decoration:none}

.gal-scelta{display:flex;flex-wrap:wrap;gap:.8rem}
.gal-scelta .fs{position:relative;width:11rem;margin:0;padding:.4rem;
  border:1px solid var(--filo);border-radius:3px;background:var(--carta2);opacity:.5}
.gal-scelta .fs.presa{opacity:1;border-color:var(--acc)}
.gal-scelta .fs img{width:100%;height:7.5rem;object-fit:cover;display:block;border-radius:2px}
.fs-spunta{position:absolute;top:.6rem;left:.6rem;margin:0!important;z-index:2}
.fs-doppia{position:absolute;top:.6rem;right:.6rem;font-family:var(--sans);font-size:.6rem;
  background:rgba(0,0,0,.6);color:#fff;padding:.1rem .35rem;border-radius:2px}
.fs-nome{margin-top:.4rem;font-size:.8rem!important;padding:.3rem .4rem!important}
.fs-cop{margin:.35rem 0 0!important;font-size:.66rem!important;text-transform:none!important;
  letter-spacing:0!important;display:flex!important;gap:.3rem;align-items:center}

.scelta-voci{list-style:none;padding:0;margin:0}
.scelta-voci li{display:flex;gap:1rem;align-items:flex-start;padding:.7rem 0;
  border-bottom:1px solid var(--filo)}
.scelta-voci .spunta{flex:1;margin:0}
.scelta-voci .sbircia{font-family:var(--sans);font-size:.74rem;color:var(--acc);
  text-decoration:none;white-space:nowrap}

/* =====================================================================
   I PEZZI, IN PAGINA
   ===================================================================== */
.pz-testa{margin:0 0 1.6rem}
.pz-testa .titolone{margin:.3rem 0 .5rem}
.pz-copertina{margin:0 0 1.8rem}
.pz-copertina img{width:100%;border-radius:2px;display:block}
.pz-testo{font-size:1.08rem;line-height:1.72}
.pz-testo h3{font-size:1.25rem;margin:2rem 0 .7rem}
.pz-testo blockquote{margin:1.5rem 0;padding-left:1.1rem;border-left:2px solid var(--acc);
  font-style:italic;color:#55504a}
.pz-testo a{color:var(--acc)}

/* la voce di allora: un'altra carta, un altro corpo, un altro tempo */
.rubrica-filo{display:flex;align-items:center;gap:1rem;font-family:var(--sans);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);
  margin:2.8rem 0 1.4rem;font-weight:500}
.rubrica-filo::after{content:'';flex:1;height:1px;background:var(--filo)}
.pz-allora .allora{margin:0 0 1.6rem;padding:1.3rem 1.5rem;background:var(--carta2);
  border-left:2px solid var(--filo);border-radius:0 3px 3px 0}
.pz-allora .allora .dt{margin:0 0 .5rem}
.pz-allora .allora .dt a{color:var(--tenue);text-decoration:none;font-size:.74rem}
.pz-allora .allora-tit{font-weight:600;margin:0 0 .5rem}
.pz-allora .allora-testo p{margin:0 0 .7rem;font-size:.98rem;line-height:1.65;color:#4a443d}
.pz-allora .allora-testo p:last-child{margin-bottom:0}
.pz-temi{margin-top:2.4rem}
.etic.rubrica{border-color:var(--acc);color:var(--acc)}

.scheda-pezzo{display:grid;gap:1.2rem;margin:0 0 2.2rem;padding:0 0 1.8rem;
  border-bottom:1px solid var(--filo)}
.scheda-pezzo.confoto{grid-template-columns:14rem 1fr}
.scheda-pezzo .figura img{width:100%;border-radius:2px;display:block}
.scheda-pezzo h2{font-size:1.4rem;margin:.2rem 0 .6rem}
.scheda-pezzo h2 a{text-decoration:none}

/* un pezzo dentro il flusso: si riconosce da lontano ma non urla */
.pezzo-in-flusso{margin:0 0 2.6rem;padding:1.6rem 0 2rem;
  border-top:2px solid var(--acc);border-bottom:1px solid var(--filo)}
.pezzo-in-flusso.confoto{display:grid;grid-template-columns:1fr;gap:1.2rem}
.pezzo-in-flusso .figura img{width:100%;border-radius:2px;display:block}
.pezzo-in-flusso .titolone{font-size:clamp(1.5rem,4vw,2.1rem);margin:.3rem 0 .7rem}
.pezzo-in-flusso .titolone a{text-decoration:none}

/* ------------------------------------------------------------ l'apertura */
.apre{margin:0 0 3rem;padding:0 0 1rem;overflow:hidden}
.apre-nastro{display:flex;transition:transform .45s ease}
.apre-uno{flex:0 0 100%;min-width:100%}
.apre-uno.confoto .figura img{width:100%;border-radius:2px;display:block;margin:0 0 1.3rem}
.apre-uno .titolone{font-size:clamp(1.7rem,5vw,2.6rem);margin:.3rem 0 .8rem}
.apre-uno .titolone a{text-decoration:none}
.apre-timone{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.2rem}
.apre-timone button{width:2.2rem;height:2.2rem;border:1px solid var(--filo);border-radius:50%;
  background:var(--carta2);color:var(--acc);cursor:pointer;font-size:1rem;line-height:1}
.apre-timone button:hover{border-color:var(--acc)}
.pallini{display:flex;gap:.4rem}
.pallini button{width:.5rem;height:.5rem;padding:0;border:0;border-radius:50%;
  background:var(--filo);cursor:pointer}
.pallini button.qui{background:var(--acc)}

@media (max-width:820px){
  .tavolo-modulo{grid-template-columns:1fr}
  .tavolo-modulo > .colonna-larga:first-child{grid-column:1/-1}
  .colonna-stretta{grid-column:1/-1;grid-row:auto}
  .scheda-pezzo.confoto{grid-template-columns:1fr}
  .banco-elenco,.banco-elenco tbody,.banco-elenco tr,.banco-elenco td{display:block;width:auto}
  .banco-elenco td{padding:.35rem 0}
  .banco-elenco tr{padding:.8rem 0}
  .gal-scelta .fs{width:calc(50% - .4rem)}
}

/* =====================================================================
   SCEGLIERE DALL'ARCHIVIO
   Si sceglie con gli occhi. Una riga di testo e una data non bastano a
   decidere: servono i provini, quanto e' lungo, quante foto ha, da dove
   viene. Tutto in una riga alta abbastanza da guardarla, bassa abbastanza
   da scorrerne ottanta.
   ===================================================================== */
.scelta-voci{list-style:none;padding:0;margin:0 0 6rem}
.scelta-voci .sv{display:grid;grid-template-columns:2rem 13rem 1fr;gap:1rem;
  align-items:start;padding:1rem .8rem;border-bottom:1px solid var(--filo);
  border-left:3px solid transparent;transition:background .15s}
.scelta-voci .sv:hover{background:var(--carta2)}
.scelta-voci .sv.scelta{background:var(--carta2);border-left-color:var(--acc)}
.scelta-voci .sv.sv-usata{opacity:.72}
.scelta-voci .sv.sv-usata.scelta{opacity:1}
.sv-spunta{margin:0!important;padding-top:.15rem;cursor:pointer}
.sv-spunta input{width:1.1rem;height:1.1rem;cursor:pointer}

.sv-provini{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.sv-provini img{width:100%;height:4.6rem;object-fit:cover;display:block;border-radius:2px;
  background:var(--carta2)}
.sv-provini img:only-child{grid-column:1/-1;height:9.5rem}
.sv-altre{position:absolute;right:.25rem;bottom:.25rem;font-family:var(--sans);
  font-size:.62rem;background:rgba(0,0,0,.62);color:#fff;padding:.1rem .35rem;border-radius:2px}
/* niente :has(): non tutti i browser lo conoscono, e la classe la sa
   gia' il server, che al momento di scrivere la riga sa se ci sono
   fotografie oppure no */
.scelta-voci .sv.senzafoto{grid-template-columns:2rem 1fr}

.sv-corpo{min-width:0}
.sv-riga{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:0 0 .4rem;
  font-family:var(--sans);font-size:.74rem;color:var(--tenue)}
.sv-riga b{font-weight:600;color:var(--inch);margin-right:.35rem}
.sv-tit{font-weight:600;margin:0 0 .35rem;font-size:1.02rem}
.sv-testo{font-size:.93rem;line-height:1.6;color:#4a443d;position:relative}
.sv-testo p{margin:0 0 .55rem}
.sv-testo p:last-child{margin-bottom:0}
.sv-testo.accorciato{max-height:7.4rem;overflow:hidden}
.sv-testo.accorciato::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.6rem;
  background:linear-gradient(to bottom, rgba(250,248,244,0), var(--carta))}
.sv:hover .sv-testo.accorciato::after{background:linear-gradient(to bottom, rgba(247,244,239,0), var(--carta2))}
.sv-tutto{border:0;background:none;padding:.2rem 0 0;cursor:pointer;color:var(--acc);
  font-family:var(--sans);font-size:.74rem}
.sv-muto{font-family:var(--sans);font-size:.78rem;color:var(--tenue);font-style:italic;margin:0}
.sv-fare{margin:.5rem 0 0;font-family:var(--sans);font-size:.74rem}
.sv-fare a{color:var(--acc);text-decoration:none}

/* il tasto che raccoglie non deve stare in fondo a ottanta voci */
.fondo-appiccicato{position:sticky;bottom:0;display:flex;gap:1rem;align-items:center;
  justify-content:flex-end;padding:.9rem 1rem;margin:0 -1rem;
  background:rgba(250,248,244,.94);border-top:1px solid var(--filo);
  backdrop-filter:blur(6px);z-index:5}
.quante{font-family:var(--sans);font-size:.76rem;color:var(--tenue)}
.cernita .tutte,.cernita .nessuna{color:var(--acc)}

@media (max-width:760px){
  .scelta-voci .sv{grid-template-columns:1.8rem 1fr;gap:.7rem}
  .sv-provini{grid-column:2/-1;grid-template-columns:repeat(4,1fr)}
  .sv-provini img,.sv-provini img:only-child{height:4rem}
  .sv-corpo{grid-column:2/-1}
}

/* I numeri, a chi non e' ancora entrato, non sono collegamenti: dicono
   quanto c'e' dentro, non aprono niente. Un numero che sembra cliccabile
   e non porta da nessuna parte e' una piccola bugia. */
.numeri.muti .invito{cursor:default}
.numeri.muti .invito:hover{color:inherit;border-color:var(--filo)}

/* Fra una voce e l'altra dentro una ripubblicazione: la data fa da
   giuntura, perche' due post diversi non sono un post lungo. */
.pz-testo .fra-voci{margin:2.2rem 0 .9rem;padding-top:1.2rem;
  border-top:1px solid var(--filo);font-family:var(--sans);font-size:.74rem}
.pz-testo .fra-voci a{color:var(--tenue);text-decoration:none}
.pz-testo .fra-voci a:hover{color:var(--acc)}
.spiega{font-size:.82rem;line-height:1.5;color:var(--tenue);margin:.1rem 0 .6rem;
  max-width:42rem}

/* Una voce tolta dal flusso: si vede che c'e' e si vede che e' fuori.
   Non si cancella niente, quindi non deve sembrare cancellata. */
.scelta-voci .sv.sv-tolta{opacity:.55;background:repeating-linear-gradient(
  135deg, transparent, transparent 9px, rgba(0,0,0,.022) 9px, rgba(0,0,0,.022) 18px)}
.scelta-voci .sv.sv-tolta:hover{opacity:.8}
.sv-fare .togli{color:var(--tenue)}
.sv-fare .togli:hover{color:#9a6a6a}
.sv-fare .rimetti,.sv-fare .subito{color:var(--acc)}

/* buttare una bozza non e' un'azione da bottone grosso: e' una parola,
   in fondo, lontana da quelle che fanno uscire le cose */
.butta{margin-left:auto;border:0;background:none;padding:.6rem 0;cursor:pointer;
  font-family:var(--sans);font-size:.78rem;color:var(--tenue)}
.butta:hover{color:#9a6a6a;text-decoration:underline}

/* il video dentro un pezzo del flusso */
.pezzo-in-flusso .vbox{margin:0 0 1.2rem}