/* EmmeQvadro — foglio unico del sito e del pannello (avvisi/pannello.py).
   Chiaro e scuro seguono il sistema; nessun font di terzi. */
:root{
  color-scheme:light dark;
  --carta:#f5f3ef; --superficie:#fff; --rilievo:#ebe8e1;
  --inchiostro:#14130f; --tenue:#5d5a52;
  --bordo:#dedad0; --bordo-forte:#c4bfb1;
  --th:#ebe8e1; --riga:#faf9f6; --riga-h:#f0ede5;
  --acc:#8a6a3e;
  --sans:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sp:clamp(1.25rem,5vw,4.5rem);
  --r:14px; --r-sm:8px;
  --ombra:0 1px 2px rgb(20 19 15/.14),0 8px 24px rgb(20 19 15/.16);
  --ombra-alta:0 2px 4px rgb(20 19 15/.16),0 22px 44px rgb(20 19 15/.28);
  --vetro:rgb(245 243 239/.78);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media(prefers-color-scheme:dark){
  :root{
    --carta:#0f0e0c; --superficie:#1a1916; --rilievo:#24221e;
    --inchiostro:#f3f0e8; --tenue:#a6a195;
    --bordo:#2e2c26; --bordo-forte:#46433a;
    --th:#24221e; --riga:#171613; --riga-h:#211f1b;
    --ombra:0 1px 2px rgb(0 0 0/.5),0 8px 24px rgb(0 0 0/.5);
    --ombra-alta:0 2px 4px rgb(0 0 0/.5),0 22px 44px rgb(0 0 0/.65);
    --vetro:rgb(15 14 12/.78);
  }
}
/* Il colore del libro, come testo: su fondo scuro le fasce delle copertine
   (rosso, blu, grigio) non si leggerebbero, quindi lo si schiarisce. */
:where(*){--acc-t:var(--acc);--acc-f:color-mix(in oklab,var(--acc) 11%,var(--superficie))}
@media(prefers-color-scheme:dark){
  :where(*){--acc-t:color-mix(in oklab,var(--acc) 48%,#fff);
    --acc-f:color-mix(in oklab,var(--acc) 22%,var(--superficie))}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:5rem}
@view-transition{navigation:auto}
/* Le copertine ruotate non devono mai allargare la pagina sul telefono. */
body{margin:0;overflow-x:clip;background:var(--carta);color:var(--inchiostro);
  font:400 17px/1.65 var(--serif);text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:color-mix(in oklab,var(--acc) 32%,transparent)}
:focus-visible{outline:3px solid var(--acc-t);outline-offset:3px;
  border-radius:4px}
h1,h2,h3{font-family:var(--sans);font-weight:750;text-wrap:balance}
.salta{position:absolute;left:-9999px;background:var(--inchiostro);
  color:var(--carta);padding:.8rem 1.2rem;z-index:30;border-radius:var(--r-sm)}
.salta:focus{left:1rem;top:1rem}

/* --- testata: vetro fisso in cima --- */
header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;
  gap:.6rem 2rem;align-items:center;justify-content:space-between;
  padding:.8rem var(--sp);background:var(--vetro);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid var(--bordo)}
.insegna{display:inline-flex;align-items:center;gap:.75rem;
  text-decoration:none;color:var(--inchiostro)}
.marchio{flex:none;display:block;width:44px;height:44px}
/* Capitali spaziate, da epigrafe: la V di EmmeQvadro ha senso solo cosi'. */
.insegna-nome{font:600 1.02rem/1 var(--sans);letter-spacing:.26em;
  display:flex;flex-direction:column;gap:.34rem}
.insegna-sotto{font:600 .7rem/1 var(--sans);letter-spacing:.5em;
  color:var(--tenue)}
nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2rem;
  font:500 .88rem/1 var(--sans)}
.gruppo{display:flex;flex-wrap:wrap;gap:.2rem}
.gruppo--autori{padding-left:1.2rem;margin-left:.2rem;
  border-left:1px solid var(--bordo-forte)}
nav a{color:var(--tenue);text-decoration:none;padding:.6rem .85rem;
  border-radius:999px;transition:background .2s var(--ease),color .2s}
nav a:hover{color:var(--inchiostro);background:var(--rilievo)}
nav a[aria-current]{color:var(--inchiostro);background:var(--rilievo)}
nav a.nav-cta{background:var(--inchiostro);color:var(--carta);font-weight:600}
nav a.nav-cta:hover{background:var(--acc);color:#fff}
nav a.nav-cta[aria-current]{background:var(--acc);color:#fff}

@media(max-width:700px){
  nav{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(var(--sp) * -1);padding-inline:var(--sp)}
  nav::-webkit-scrollbar{display:none}
  .gruppo{flex-wrap:nowrap}
  nav a{white-space:nowrap}
}
main{max-width:80rem;margin:0 auto;padding:clamp(2rem,6vw,5rem) var(--sp)}

/* --- apertura --- */
.apertura{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;
  margin-bottom:clamp(3rem,8vw,6rem)}
@media(min-width:900px){.apertura{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}
.apertura-txt{max-width:44rem}
.apertura h1{font-size:clamp(3rem,8.4vw,6.2rem);line-height:.94;
  letter-spacing:-.045em;margin:0 0 .3em;font-weight:800}
.claim{font-size:clamp(1.15rem,2.3vw,1.45rem);line-height:1.45;
  max-width:34ch;margin:0 0 1.6em;color:var(--tenue)}
.meta{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.meta li{font:500 .82rem/1 var(--sans);padding:.55rem .9rem;
  background:var(--superficie);border:1px solid var(--bordo);
  border-radius:999px;color:var(--tenue)}
/* Le copertine a ventaglio: una per collana, ognuna ruotata un poco di piu'.
   Solo transform, quindi niente ricalcolo della pagina al passaggio. */
.ventaglio{position:relative;height:clamp(16rem,38vw,26rem);
  max-width:36rem;width:100%;justify-self:center}
.ventaglio-cop{position:absolute;top:8%;width:36%;
  left:calc(4% + var(--i) * 13%);
  transform:rotate(calc((var(--i) - 2) * 4deg));
  transform-origin:50% 120%;
  transition:transform .45s var(--ease)}
.ventaglio-cop img{border-radius:6px;box-shadow:var(--ombra-alta)}
.ventaglio-cop:hover{transform:rotate(calc((var(--i) - 2) * 4deg))
  translateY(-16px);z-index:5}

/* --- libro in evidenza --- */
.evidenza{display:grid;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  background:var(--acc-f);border:1px solid var(--bordo);border-radius:calc(var(--r)*1.6);
  padding:clamp(1.5rem,4vw,3.2rem);margin-bottom:clamp(3rem,7vw,5rem)}
@media(min-width:760px){.evidenza{grid-template-columns:minmax(0,19rem) minmax(0,1fr)}}
.evidenza-cop{justify-self:center;width:min(100%,19rem)}
.evidenza-cop img{border-radius:6px;box-shadow:var(--ombra-alta)}
.evidenza-txt h2{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.02;
  letter-spacing:-.035em;margin:.3em 0 .25em}
.evidenza-txt h2 a{text-decoration:none}
.evidenza-txt h2 a:hover{color:var(--acc-t)}

/* --- collane --- */
.collana{margin:clamp(3.2rem,8vw,6rem) 0 0}
.collana-testa{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;
  align-items:end;justify-content:space-between}
.collana h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.05;margin:0;
  letter-spacing:-.03em}
.collana h2 a{text-decoration:none}
.collana h2 a:hover{color:var(--acc-t)}
.collana-testa .occhiello{margin-top:.5rem}
.tutta{font:600 .88rem/1 var(--sans);text-decoration:none;color:var(--acc-t);
  padding:.7rem 1rem;border-radius:999px;
  box-shadow:inset 0 0 0 1.5px color-mix(in oklab,var(--acc-t) 55%,transparent);
  transition:background .2s,color .2s}
.tutta:hover{background:var(--acc);color:#fff}

/* L'etichetta della collana: una pillola col suo colore, non un'insegna. */
.occhiello{display:inline-block;font:600 .8rem/1.3 var(--sans);
  color:var(--acc-t);margin:0}
.occhiello a{color:inherit;text-decoration:none}
.occhiello a:hover{text-decoration:underline}

/* --- griglia di copertine: sul telefono scorre di lato --- */
.griglia{display:grid;gap:clamp(1.6rem,3vw,2.6rem) clamp(1rem,2.4vw,1.8rem);
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));margin-top:1.8rem}
@media(max-width:620px){
  .collana .griglia{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--sp) * -1);padding:.4rem var(--sp) 1.2rem;
    scroll-padding-inline:var(--sp);scrollbar-width:none}
  .collana .griglia::-webkit-scrollbar{display:none}
  .collana .card{flex:0 0 min(46vw,11rem);scroll-snap-align:start}
}
.colonne{display:grid;gap:clamp(1.6rem,4vw,3rem);margin:clamp(2.5rem,6vw,4rem) 0 0}
@media(min-width:780px){.colonne{grid-template-columns:1fr 1fr}}
.colonna{background:var(--superficie);border:1px solid var(--bordo);
  border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem)}
.colonna h2{font-size:1.4rem;margin:0 0 .8em;letter-spacing:-.02em}
.colonna ul{margin:0;padding-left:1.1rem}
.colonna li{margin-bottom:.9em}
.colonna--no li{color:var(--tenue)}
.colonna--no li strong{color:var(--inchiostro)}
.patto,.regola{background:var(--acc-f);border:1px solid var(--bordo);
  border-radius:var(--r);padding:clamp(1.4rem,3.5vw,2.4rem);
  margin:clamp(2.5rem,6vw,4rem) 0 0;max-width:68ch}
.patto h2,.regola h2{font-size:1.45rem;margin:0 0 .5em;letter-spacing:-.02em}
.patto p,.regola p{margin:0}
.regola p{color:var(--tenue)}
.condizioni,.come-fare{margin:clamp(2.5rem,6vw,4rem) 0 0;max-width:68ch}
.condizioni h2,.come-fare h2{font-size:1.5rem;margin:0 0 1em;letter-spacing:-.02em}
.come-fare p{margin:0 0 1em}
.dati--larghi{grid-template-columns:minmax(9rem,auto) 1fr;font-size:.95rem;
  border-top:2px solid var(--inchiostro);padding-top:1.3rem;max-width:none}
.dati--larghi dt{align-self:start;padding-top:.15rem}
.dati--larghi dd{margin-bottom:.7rem}
.come{margin-top:1.8rem}
.cop{display:block;position:relative;border-radius:6px;overflow:hidden}
/* In fondo e a tutta larghezza, come la fascetta di carta che si mette
   davvero intorno a un libro. */
.fascetta{position:absolute;left:0;right:0;bottom:0;
  background:rgb(20 19 15/.88);color:#f5f3ef;text-align:center;
  font:700 .7rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:.55rem .4rem}
.libro-cop .fascetta,.evidenza-cop .fascetta{font-size:.74rem;
  letter-spacing:.17em;padding:.8rem .5rem}
.card{text-decoration:none;display:block}
.card-img{display:block}
.card .cop{box-shadow:var(--ombra);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.card:hover .cop,.card:focus-visible .cop{transform:translateY(-6px) scale(1.015);
  box-shadow:var(--ombra-alta)}
.card-t{display:block;margin-top:.9rem;font:650 .98rem/1.25 var(--sans);
  letter-spacing:-.01em}
.card:hover .card-t{color:var(--acc-t)}
.card-a{display:block;margin-top:.2rem;font:.8rem/1.4 var(--sans);
  color:var(--tenue)}

/* --- testate di sezione --- */
.testata{max-width:48ch;padding-top:.4rem}
.testata h1{font-size:clamp(2.4rem,6.4vw,4.4rem);line-height:1;
  letter-spacing:-.04em;margin:.25em 0 .2em;font-weight:800}
.testata .firma,.testata .riga{color:var(--tenue);margin:0 0 1.5em}
.testata .riga{font-style:italic;font-size:1.2rem;color:var(--acc-t)}
.testata--autore{max-width:54ch}
.conteggio{display:inline-block;font:600 .8rem/1 var(--sans);
  color:var(--tenue);margin-top:1.8em;padding:.5rem .8rem;
  background:var(--superficie);border:1px solid var(--bordo);border-radius:999px}
.corpo p{margin:0 0 1.05em}
.stretto{max-width:60ch}

/* --- pagina autori --- */
.autore-voce{margin:clamp(2.6rem,7vw,4.5rem) 0 0;
  padding:clamp(1.4rem,3.5vw,2.4rem);background:var(--acc-f);
  border:1px solid var(--bordo);border-radius:calc(var(--r)*1.4);
  max-width:56rem}
.autore-voce h2{font-size:clamp(2rem,4.4vw,3rem);line-height:1.03;
  letter-spacing:-.035em;margin:.25em 0 .1em}
.autore-voce h2 a{text-decoration:none}
.autore-voce h2 a:hover{color:var(--acc-t)}
.autore-voce .riga{font-style:italic;font-size:1.15rem;color:var(--acc-t);
  margin:0 0 1.3em}
.oltre{margin:1.6em 0 0;font:.92rem/1.5 var(--sans);display:flex;
  flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline}
.oltre a{color:var(--inchiostro);font-weight:600;text-decoration-thickness:1px;
  text-underline-offset:4px;min-height:44px;display:inline-flex;
  align-items:center}
.conteggio-in-riga{color:var(--tenue);font-size:.8rem}

/* --- scheda libro --- */
.libro{display:grid;gap:clamp(1.8rem,5vw,4.5rem)}
@media(min-width:780px){.libro{grid-template-columns:minmax(0,21rem) minmax(0,1fr);
  align-items:start}
  .libro-cop{position:sticky;top:6rem}}
.libro-cop{background:var(--acc-f);border:1px solid var(--bordo);
  border-radius:calc(var(--r)*1.4);padding:clamp(1.2rem,3vw,2rem)}
.libro-cop img{border-radius:4px;box-shadow:var(--ombra-alta)}
.libro h1{font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1;
  letter-spacing:-.04em;margin:.3em 0 .25em;font-weight:800}
.sottotitolo{font-size:1.15rem;line-height:1.5;color:var(--tenue);
  margin:0 0 1.5em;max-width:50ch}
.richiamo{font-style:italic;font-size:clamp(1.1rem,2.2vw,1.35rem);
  line-height:1.5;color:var(--inchiostro);background:var(--acc-f);
  border-radius:var(--r);padding:clamp(1rem,2.4vw,1.5rem);
  margin:0 0 1.8em;max-width:46ch}
.libro-txt .corpo{max-width:64ch}
.dati{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.6rem;
  font:.9rem/1.5 var(--sans);background:var(--superficie);
  border:1px solid var(--bordo);border-radius:var(--r);
  padding:1.1rem 1.3rem;margin:2.2rem 0 1.8rem;max-width:34rem}
.dati dt{color:var(--tenue);font-size:.78rem;font-weight:600;align-self:center}
.dati dd{margin:0;font-weight:500}
.compra{display:inline-flex;align-items:center;justify-content:center;
  padding:.95rem 1.9rem;background:var(--acc);color:#fff;
  text-decoration:none;font:650 .95rem/1 var(--sans);min-height:48px;
  border-radius:999px;transition:transform .25s var(--ease),filter .2s,
  box-shadow .25s}
.compra:hover{filter:brightness(1.12);transform:translateY(-2px);
  box-shadow:0 10px 24px color-mix(in oklab,var(--acc) 40%,transparent)}
.acquista{display:flex;flex-wrap:wrap;gap:.75rem}
.compra--kindle{background:transparent;color:var(--acc-t);
  box-shadow:inset 0 0 0 2px var(--acc-t)}
.compra--kindle:hover{filter:none;background:var(--acc);color:#fff;
  box-shadow:inset 0 0 0 2px var(--acc)}
.nota--amazon{margin:.7rem 0 0}

/* --- avvisami e proposta --- */
.avvisami{background:var(--superficie);border:1px solid var(--bordo);
  border-radius:var(--r);padding:clamp(1.2rem,3vw,1.8rem);max-width:34rem;
  margin-top:.5rem}
.avvisami h2{font-size:1.4rem;margin:0 0 .4em;letter-spacing:-.02em}
.avvisami p{margin:0 0 1em}
.avvisami label[for=email]{display:block;font:600 .8rem/1.4 var(--sans);
  color:var(--tenue);margin-bottom:.4rem}
.avvisami-riga{display:flex;flex-wrap:wrap;gap:.6rem}
.avvisami button{border:0;cursor:pointer}
.consenso{display:flex;gap:.7rem;align-items:flex-start;margin:1.1rem 0 .8rem;
  font:.88rem/1.5 var(--sans);cursor:pointer}
.consenso input{width:20px;height:20px;margin:.1rem 0 0;flex:none;
  accent-color:var(--acc)}
.proposta{margin:clamp(2.5rem,6vw,4rem) 0 0;max-width:44rem;
  background:var(--superficie);border:1px solid var(--bordo);
  border-radius:var(--r);padding:clamp(1.3rem,3vw,2rem)}
.proposta h2{font-size:1.5rem;margin:0 0 1.2rem;letter-spacing:-.02em}
.campi{display:grid;gap:1.2rem 1.4rem}
@media(min-width:700px){.campi{grid-template-columns:1fr 1fr}
  .campo--largo{grid-column:1/-1}}
.campo label{display:block;font:600 .8rem/1.4 var(--sans);color:var(--tenue);
  margin-bottom:.4rem}
.avvisami input[type=email],.campo input,.campo textarea,.campo select{
  width:100%;min-height:48px;font:1rem/1.5 var(--sans);padding:.7rem .95rem;
  border:1px solid var(--bordo-forte);border-radius:var(--r-sm);
  background:var(--carta);color:var(--inchiostro);
  transition:border-color .2s,box-shadow .2s}
.avvisami input[type=email]{flex:1 1 14rem;width:auto}
.avvisami input:focus,.campo input:focus,.campo textarea:focus,
.campo select:focus{outline:none;border-color:var(--acc-t);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--acc) 30%,transparent)}
input::placeholder,textarea::placeholder{color:var(--tenue);opacity:.8}
.campo input[type=file]{padding:.6rem;cursor:pointer}
.aiuto{font:.82rem/1.5 var(--sans);color:var(--tenue);margin:.35rem 0 0}
.proposta button{border:0;cursor:pointer;margin-top:.4rem}
.trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- pannello (servito da avvisi/pannello.py con questo stesso foglio) --- */
.pn-esci button{background:none;border:1px solid var(--bordo-forte);
  padding:.5rem 1rem;font:.85rem var(--sans);color:var(--tenue);
  cursor:pointer;min-height:40px;border-radius:999px}
.pn-errore{color:#c0343a;font:600 .95rem var(--sans);margin:0 0 1rem}
.pn-ok{background:var(--superficie);border:1px solid #2f6b3a;
  border-radius:var(--r-sm);padding:.8rem 1rem;font:.95rem var(--sans);
  margin:0 0 2rem}
.pn-sezione{margin:0 0 clamp(2.5rem,6vw,4rem)}
.pn-sezione h1{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 .4em;
  letter-spacing:-.03em}
.pn-tabella{overflow-x:auto;margin-top:1rem}
/* Una griglia vera, con i bordi di colonna e le righe alterne: senza, il
   numero di una colonna non si capiva a che intestazione appartenesse
   (Marco, 8 ottobre 2026). */
.pn-tabella table{width:100%;border-collapse:collapse;font:.92rem/1.4 var(--sans);
  background:var(--superficie);border:1px solid var(--bordo-forte)}
.pn-tabella th{text-align:left;font-size:.74rem;
  color:var(--inchiostro);background:var(--th);
  border:1px solid var(--bordo-forte);border-bottom:2px solid var(--inchiostro);
  padding:.6rem .7rem}
.pn-tabella td{border:1px solid var(--bordo);padding:.6rem .7rem;vertical-align:middle}
.pn-tabella tbody tr:nth-child(even) td{background:var(--riga)}
.pn-tabella tbody tr:hover td{background:var(--riga-h)}
.pn-strumenti{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.pn-strumenti form{margin:0}
.pn-icona{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--bordo-forte);
  color:var(--inchiostro);background:var(--carta);border-radius:var(--r-sm)}
.pn-icona:hover{background:var(--inchiostro);color:var(--carta)}
.pn-num{text-align:right;font-variant-numeric:tabular-nums}
.pn-bottone{background:var(--inchiostro);color:var(--carta);border:0;
  padding:.5rem .9rem;font:600 .82rem var(--sans);cursor:pointer;
  min-height:40px;border-radius:999px}
.pn-descrizione{background:var(--superficie);padding:1.2rem 1.4rem;
  margin:1.5rem 0;border-radius:var(--r)}
.pn-login{max-width:24rem}
.nota{font:.84rem/1.6 var(--sans);color:var(--tenue)}

/* --- piede --- */
footer{margin-top:clamp(4rem,9vw,7rem);padding:clamp(2.2rem,5vw,3.5rem) var(--sp);
  background:var(--rilievo);border-top:1px solid var(--bordo);
  font:.9rem/1.7 var(--sans);color:var(--tenue)}
footer p{margin:0 0 .35em;max-width:46ch}
.scrivici{margin-bottom:.9em}
.scrivici a{color:var(--inchiostro);text-decoration-thickness:1px;
  text-underline-offset:3px}
.piede-insegna{display:flex;align-items:center;gap:.75rem;
  font:600 .95rem/1 var(--sans);letter-spacing:.26em;
  color:var(--inchiostro);margin-bottom:1.1em}

/* --- movimento ----------------------------------------------------------
   Poco e scelto, solo CSS. Tre momenti: l'apertura della home, la riga di
   copertine che arriva in vista, la testata che si stringe scorrendo. Il
   resto è risposta al tocco (riflesso, rialzo). Tutto parte da un contenuto
   già visibile: dove il browser non sa fare l'animazione la pagina è ferma. */

/* Il campo di colore dietro l'apertura: tre colori di collana. Fermo; con
   lo scorrimento si sposta (vedi sotto). */
.apertura{position:relative;isolation:isolate}
.apertura::before{content:"";position:absolute;inset:-18% -12% -10% -12%;
  z-index:-1;pointer-events:none;
  background:
   radial-gradient(38% 46% at 78% 30%,color-mix(in oklab,#a84a2b 34%,transparent),transparent 70%),
   radial-gradient(34% 42% at 92% 72%,color-mix(in oklab,#1a2c3e 38%,transparent),transparent 70%),
   radial-gradient(30% 40% at 58% 18%,color-mix(in oklab,#8a6a3e 30%,transparent),transparent 70%)}

/* Ora in libreria: stesso passo delle collane. */
.scaffale{margin:0 0 clamp(3rem,7vw,5rem)}
.scaffale h2{font-size:clamp(1.7rem,3.6vw,2.5rem);line-height:1.05;margin:0;
  letter-spacing:-.03em}
.scaffale .occhiello{margin-top:.5rem}

/* Sul telefono la copertina è piccola: titolo e azione si vedono subito. */
@media(max-width:779px){
  .libro-cop{max-width:15rem;margin-inline:auto;padding:1rem}
  .libro{gap:1.4rem}
}

/* L'azione sta sotto il titolo, prima della quarta. */
.azione{margin:0 0 1.8rem}
.azione .avvisami{margin-top:0}

/* Sul telefono il tasto d'acquisto resta in fondo allo schermo. Sparisce
   quando il tasto grande entra in vista (dove il browser lo sa fare), così
   non ce ne sono due insieme. */
.barra-acquisto{display:none}
@media(max-width:779px){
  .con-barra{padding-bottom:5.5rem}
  .barra-acquisto{position:fixed;left:0;right:0;bottom:0;z-index:15;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.8rem var(--sp) calc(.8rem + env(safe-area-inset-bottom));
    background:var(--vetro);border-top:1px solid var(--bordo);
    -webkit-backdrop-filter:saturate(1.6) blur(16px);
    backdrop-filter:saturate(1.6) blur(16px)}
  .barra-acquisto span{font:.8rem/1.3 var(--sans);color:var(--tenue)}
  .barra-acquisto .compra{flex:1 1 auto;max-width:18rem}
}
@supports(timeline-scope:--acq){
  .con-barra{timeline-scope:--acq}
  .con-barra .acquista{view-timeline:--acq block}
  @media(max-width:779px){
    .barra-acquisto{animation:barra linear both;animation-timeline:--acq;
      animation-range:contain 0% contain 100%}
    @keyframes barra{from{translate:0 0;opacity:1}
      1%,99%{translate:0 110%;opacity:0}to{translate:0 0;opacity:1}}
  }
}

/* Riflesso che passa sulla copertina e rialzo, in pagina e sulle card. */
.card .cop::after,.evidenza-cop .cop::after,.libro-cop .cop::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgb(255 255 255/.34) 50%,transparent 65%);
  transform:translateX(-120%);transition:transform .8s var(--ease)}
.card:hover .cop::after,.card:focus-visible .cop::after,
.evidenza-cop:hover .cop::after,.libro-cop:hover .cop::after{
  transform:translateX(120%)}
.card{perspective:700px}
.card:hover .cop{transform:translateY(-8px) rotateX(3deg) rotateY(-5deg) scale(1.02)}

/* Il pulsante: la luce e la freccia. */
.compra{position:relative;overflow:hidden}
.compra::after{content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgb(255 255 255/.28) 50%,transparent 70%);
  transform:translateX(-120%)}
.compra:hover::after{transform:translateX(120%);transition:transform .7s var(--ease)}
.tutta span{display:inline-block;transition:transform .25s var(--ease)}
.tutta:hover span{transform:translateX(5px)}

@media(prefers-reduced-motion:no-preference){
  /* 1. L'apertura: il titolo sale, le copertine arrivano dal basso. Una volta. */
  .apertura h1{animation:sale .8s var(--ease) both}
  .claim,.meta{animation:sale .8s var(--ease) .12s both}
  .ventaglio-cop{animation:arriva .9s var(--ease) both;
    animation-delay:calc(.1s + var(--i) * .09s)}
  @keyframes sale{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  @keyframes arriva{from{opacity:0;translate:0 70px}to{opacity:1;translate:0 0}}
  /* La copertina della scheda arriva insieme alla pagina. */
  .libro-cop{animation:arriva .9s var(--ease) both}
}

@supports(animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    /* 2. Ogni riga di copertine, e i riquadri, entrano quando arrivano in vista. */
    .collana .griglia,.scaffale .griglia,.evidenza,.autore-voce,.patto,
    .regola,.proposta{animation:entra linear both;animation-timeline:view();
      animation-range:entry 0% entry 45%}
    @keyframes entra{from{opacity:0;translate:0 32px}to{opacity:1;translate:0 0}}
    /* Il campo di colore dell'apertura sale un po' più piano della pagina. */
    .apertura::before{animation:sposta linear both;animation-timeline:scroll();
      animation-range:0 90vh}
    @keyframes sposta{to{translate:0 -12%}}
    /* 3. La testata si stringe appena si scorre. */
    header{animation:stringi linear both;animation-timeline:scroll();
      animation-range:0 160px}
    @keyframes stringi{to{padding-block:.4rem;box-shadow:0 8px 28px rgb(0 0 0/.12)}}
    .marchio{animation:rimpicciolisci linear both;animation-timeline:scroll();
      animation-range:0 160px}
    @keyframes rimpicciolisci{to{width:34px;height:34px}}
  }
}
@media(prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition:none!important;
    scroll-behavior:auto!important}
}