/* ═══════════════════════════════════════════════════════════════════════════
   SPINE INDEX — Stylesheet
   Ottimizzato per Safari 14+, Chrome, Firefox, Edge
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── RESET + TOKENS ────────────────────────────────────────────────────── */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;padding:0;
  -webkit-tap-highlight-color:transparent;
}

:root{
  --bg:#e8e6e1;
  --ink:#111;
  --ink-light:#999;
  --ink-mid:#666;
  --border:#c8c5be;
  --white:#fff;
  --font:'Opale','Futura','Century Gothic',sans-serif;
}

html{
  font-size:21.2px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  min-height:100vh;
  min-height:-webkit-fill-available; /* fix Safari mobile 100vh */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block;}
button,input{font:inherit;color:inherit;}

/* ─── NAV ───────────────────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  display:flex;justify-content:flex-end;align-items:flex-start;
  padding:22px 28px;
  background:var(--bg);
  pointer-events:none;
}
nav>*{pointer-events:all;}

.nav-logo{
  position:absolute;
  left:28px;
  top:22px;
  font-size:clamp(11px,3.2vh,50px) !important;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.1;
  cursor:pointer;text-align:left;
  -webkit-user-select:none;-ms-user-select:none;user-select:none;
}
.nav-logo:hover{opacity:.5;}

.hamburger{
  background:none;border:none;cursor:pointer;
  display:flex;flex-direction:column;gap:20px;
  padding:4px;
}
.hamburger span{
  display:block;
  width:68px;height:0;
  border-top:1.5px solid var(--ink);
}

/* ─── PAGES ─────────────────────────────────────────────────────────────── */
.page{display:none;padding-top:80px;min-height:100vh;}
.page.active{display:block;}

/* ─── HOME ──────────────────────────────────────────────────────────────── */
#page-home{padding-top:0;}
.home-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:100vh;
}
.home-left{
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  justify-content:flex-start;
  position:relative;
  padding-top:115px;
}
.home-hero{
  font-weight:400;
  font-size:clamp(103px,12.6vw,194px);
  line-height:.92;letter-spacing:-.02em;
  text-transform:uppercase;
  margin-top:40px;
  /* allinea otticamente la "F" alla "S" del logo (compensa la spalla sx del glifo grande) */
  margin-left:-0.074em;
}
.home-search-icon{
  position:absolute;bottom:32px;right:40px;
  cursor:pointer;opacity:.55;
  -webkit-transition:opacity .2s ease;
          transition:opacity .2s ease;
  z-index:10;
}
.home-search-icon:hover{opacity:1;}
.home-right{
  display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-end;
  position:relative;
  min-height:100vh;
  pointer-events:none;
}
.home-cover{
  width:44%;
  aspect-ratio:var(--cover-ar,3/4);
  background:#ccc;
  overflow:hidden;
  position:relative;
  flex-shrink:0;
  pointer-events:auto;
  margin-right:28px;margin-bottom:32px;
}
/* Fallback aspect-ratio per Safari < 15.4 */
@supports not (aspect-ratio:3/4){
  .home-cover::before{content:'';display:block;padding-top:133.33%;}
  .home-cover>*{position:absolute;inset:0;}
}
/* ─── COME CAMBIA LA COPERTINA IN HOME (v50, 28/09/2026) ───────────────────
   Matteo: «la transizione dei libri non mi piace, e poi vorrei che fosse
   sincronizzata al titolo; forse userei delle transizioni random giusto per non
   standardizzare troppo».
   Quindi cinque movimenti invece di uno, tirati a sorte a ogni cambio e mai due
   volte di fila lo stesso. Non sono cinque effetti tanto per fare: sono cinque
   modi in cui si maneggia un libro, e tutti finiscono fermi e diritti.
     · fessura   scoperta da sinistra, come tirandola fuori per il dorso;
     · tendina   scoperta dal basso, come alzandola dalla pila;
     · velo      appare intera e si assesta, il modo più quieto;
     · salita    sale da sotto e si ferma;
     · sfoglio   entra da destra mentre la vecchia esce a sinistra, come voltando pagina.
   La durata la decide il JavaScript e arriva qui dentro --d, così le parole sotto
   la copertina si muovono sullo stesso orologio: sono loro la parte «sincronizzata
   al titolo» che mancava, prima partivano per conto loro con quattro decimi di
   ritardo fisso. Ogni movimento porta con sé anche la DIREZIONE delle parole: se
   la copertina viene da sinistra vengono da sinistra anche loro, se sale salgono,
   e il cambio si legge come un gesto solo invece che come due cose vicine.
   L'immagine nuova si scarica PRIMA di cominciare, se no il movimento si
   aprirebbe sul vuoto. */
.slide{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  opacity:0;
  -webkit-clip-path:inset(0% 0% 0% 0%); clip-path:inset(0% 0% 0% 0%);
  -webkit-transition:opacity calc(var(--d, 950ms) * .55) ease,
                     -webkit-clip-path var(--d, 950ms) var(--anim-ease),
                     -webkit-transform calc(var(--d, 950ms) * 1.1) var(--anim-ease);
          transition:opacity calc(var(--d, 950ms) * .55) ease,
                     clip-path var(--d, 950ms) var(--anim-ease),
                     transform calc(var(--d, 950ms) * 1.1) var(--anim-ease);
}
/* da dove arriva, secondo il movimento tirato a sorte */
.slide.tr-fessura{ -webkit-clip-path:inset(0% 100% 0% 0%); clip-path:inset(0% 100% 0% 0%); -webkit-transform:scale(1.015); transform:scale(1.015); }
.slide.tr-tendina{ -webkit-clip-path:inset(100% 0% 0% 0%); clip-path:inset(100% 0% 0% 0%); -webkit-transform:scale(1.015); transform:scale(1.015); }
.slide.tr-velo{    -webkit-transform:scale(1.035); transform:scale(1.035); }
.slide.tr-salita{  -webkit-transform:translateY(7%) scale(1.02); transform:translateY(7%) scale(1.02); }
.slide.tr-sfoglio{ -webkit-transform:translateX(9%) scale(1.01); transform:translateX(9%) scale(1.01); }

/* Dove arriva: ferma e diritta, qualunque strada abbia fatto. Sta DOPO i
   movimenti apposta, perché pesa uguale e deve vincere lei. */
.slide.on{
  opacity:1; z-index:2;
  -webkit-clip-path:inset(0% 0% 0% 0%); clip-path:inset(0% 0% 0% 0%);
  -webkit-transform:none; transform:none;
}

/* Un fotogramma di silenzio. Quando la slide che aveva finito il suo turno
   torna al punto di partenza, quel ritorno è a sua volta una transizione:
   parte, e il movimento vero non trova più strada da fare. Con questa classe il
   ritorno avviene di colpo, poi si toglie. */
.slide.zitto{ -webkit-transition:none !important; transition:none !important; }

/* Chi esce non torna indietro per la strada da cui era entrata: resta intera,
   si spegne e si sposta appena dalla parte opposta a quella che arriva. */
.slide.esce{
  opacity:0; z-index:1;
  -webkit-clip-path:inset(0% 0% 0% 0%); clip-path:inset(0% 0% 0% 0%);
  -webkit-transform:scale(.988); transform:scale(.988);
  -webkit-transition:opacity calc(var(--d, 950ms) * .62) ease,
                     -webkit-transform calc(var(--d, 950ms) * 1.1) var(--anim-ease);
          transition:opacity calc(var(--d, 950ms) * .62) ease,
                     transform calc(var(--d, 950ms) * 1.1) var(--anim-ease);
}
.slide.esce.tr-salita{  -webkit-transform:translateY(-3%) scale(.99); transform:translateY(-3%) scale(.99); }
.slide.esce.tr-sfoglio{ -webkit-transform:translateX(-7%) scale(.99); transform:translateX(-7%) scale(.99); }
.slide.esce.tr-velo{    -webkit-transform:scale(.978); transform:scale(.978); }
/* «cover» riempie il riquadro tagliando quello che avanza. Qui il riquadro ha
   già la proporzione della copertina (--cover-ar, che il JavaScript legge
   dall'immagine vera), quindi non ci sarebbe niente da tagliare: ma nei momenti
   in cui la proporzione non è ancora arrivata, o sta cambiando da un libro
   all'altro, «cover» taglia davvero, ed è quello che Matteo vede. «contain»
   non taglia mai: al massimo lascia una striscia di fondo per un attimo. */
.slide img,.home-cover img{
  width:100%;height:100%;
  object-fit:contain;
  display:block;
}
.cm-author,.cm-title{
  -webkit-transition:opacity var(--dm, 420ms) ease, -webkit-transform var(--dm, 420ms) var(--anim-ease);
          transition:opacity var(--dm, 420ms) ease, transform var(--dm, 420ms) var(--anim-ease);
}
/* Le due righe si spostano nella direzione da cui arriva la copertina e con la
   sua stessa durata: è questo che rende il cambio un gesto solo. La direzione la
   mette il JavaScript sul riquadro che le contiene, insieme al movimento. */
.cm-author.via,.cm-title.via{ opacity:0; }
.m-velo .cm-author.via,.m-velo .cm-title.via{ -webkit-transform:none; transform:none; }
.m-sx   .cm-author.via,.m-sx   .cm-title.via{ -webkit-transform:translateX(-9px); transform:translateX(-9px); }
.m-dx   .cm-author.via,.m-dx   .cm-title.via{ -webkit-transform:translateX(9px);  transform:translateX(9px); }
.m-su   .cm-author.via,.m-su   .cm-title.via{ -webkit-transform:translateY(7px);  transform:translateY(7px); }
.m-giu  .cm-author.via,.m-giu  .cm-title.via{ -webkit-transform:translateY(7px);  transform:translateY(7px); }
.home-cover-meta{
  position:absolute;bottom:32px;left:32px;
  text-align:left;
  pointer-events:none;
  width:calc(44% - 60px);
  max-width:calc(44% - 60px);
}
.cm-author{
  font-size:clamp(14.9px,1.2vw,20.7px);
  line-height:1.3;margin-bottom:6px;
  word-break:break-word;overflow-wrap:break-word;
}
.cm-title{
  font-size:clamp(14.9px,1.2vw,20.7px);
  line-height:1.3;color:var(--ink-mid);
  word-break:break-word;overflow-wrap:break-word;
}

/* ─── SEARCH ────────────────────────────────────────────────────────────── */
.mode-bar{
  padding:22px 28px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;
}
.mode-btn{
  background:none;border:none;cursor:pointer;
  font-family:var(--font);
  font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-light);
  -webkit-transition:color .2s ease;
          transition:color .2s ease;
}
.mode-btn.active{color:var(--ink);}
.mode-sep{padding:0 10px;color:var(--ink-light);font-size:14.5px;}

.free-wrap{border-left:2px solid var(--ink);}
.free-input{
  width:100%;
  background:transparent;border:none;outline:none;
  font-family:var(--font);color:var(--ink);
  font-size:clamp(64px,15vh,240px);
  font-weight:300;line-height:1;
  letter-spacing:-.02em;
  text-transform:uppercase;
  padding:6px 28px;
  caret-color:var(--ink);
  -webkit-appearance:none;
          appearance:none;
}
.free-input::-webkit-input-placeholder{color:var(--ink);opacity:.12;}
.free-input::placeholder{color:var(--ink);opacity:.12;}

.autocomplete-line{
  padding:0 28px 6px;
  font-size:clamp(46px,6vw,103.5px);
  line-height:1;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--ink-light);
  overflow:hidden;
  border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;
}

/* ─── RESULTS ───────────────────────────────────────────────────────────── */
.results-area{display:none;padding-bottom:120px;}
.results-area.show{display:block;}
.results-header{
  padding:24px 28px;
  font-size:clamp(23px,3.5vw,55.2px);
  letter-spacing:-.01em;text-transform:uppercase;
  border-bottom:1px solid var(--border);
}
.results-grid{display:grid;grid-template-columns:1fr 1fr;}
.results-load-more{
  grid-column:1/-1;
  display:flex;flex-direction:column;
  align-items:center;gap:8px;
  padding:24px 28px;
  border-bottom:1px solid var(--border);
}
.results-count{font-size:14.5px;letter-spacing:.06em;color:var(--ink-mid);}
.results-load-btn{
  background:none;border:1px solid var(--border);
  font-family:var(--font);
  font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;
  padding:10px 28px;cursor:pointer;
  -webkit-transition:background .15s ease,color .15s ease;
          transition:background .15s ease,color .15s ease;
}
.results-load-btn:hover{background:var(--ink);color:var(--white);}

.result-card{
  padding:24px 28px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr 130px;
  grid-template-rows:auto 1fr auto;
  gap:0 18px;
  cursor:pointer;
  -webkit-transition:background .12s ease;
          transition:background .12s ease;
}
.result-card:hover{background:rgba(0,0,0,.03);}
.result-card:nth-child(2n){border-right:none;}
.rc-author{
  font-size:15.9px;letter-spacing:.06em;
  text-transform:uppercase;
  grid-column:1;grid-row:1;
  padding-bottom:6px;
}
.rc-title{
  font-size:15.9px;letter-spacing:.04em;
  color:var(--ink-mid);
  grid-column:1;grid-row:2;
  padding-bottom:18px;line-height:1.5;
}
.rc-cover{
  grid-column:2;grid-row:1/4;
  aspect-ratio:var(--cover-ar,3/4);   /* si adatta al rapporto reale: 3:4 verticale, 4:3 orizzontale */
  overflow:hidden;align-self:start;
}
@supports not (aspect-ratio:3/4){
  .rc-cover{position:relative;}
  .rc-cover::before{content:'';display:block;padding-top:133.33%;}
  .rc-cover>*{position:absolute;inset:0;}
}
.rc-cover img{
  width:100%;height:100%;
  object-fit:contain;display:block;   /* mostra la cover intera, nessun ritaglio */
}
.rc-cover.land{ align-self:end; }   /* cover ORIZZONTALI: spostate in basso, allineate alla riga editore/anno */
.rc-cover-ph{width:100%;height:100%;}
.rc-meta{
  grid-column:1;grid-row:3;
  display:flex;justify-content:space-between;
  align-items:flex-end;
}
.rc-pub{
  font-size:14.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-mid);
}
.rc-year{font-size:14.5px;letter-spacing:.06em;}

/* ─── TAGS BAR ──────────────────────────────────────────────────────────── */
.tags-bar{
  position:fixed;bottom:0;left:0;right:0;
  border-top:1px solid var(--border);
  background:var(--bg);
  z-index:50;
  padding:14px 28px;
  display:flex;gap:14px;align-items:flex-start;
}
.tags-label{
  font-size:13.2px;letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;padding-top:2px;
  flex-shrink:0;
}
.tags-list-wrap{flex:1;position:relative;}
.tags-list{
  display:flex;flex-wrap:wrap;
  gap:6px 16px;
  max-height:calc(2 * (11px * 1.6 + 6px));
  overflow:hidden;
  -webkit-transition:max-height .4s ease;
          transition:max-height .4s ease;
}
.tags-list.expanded{max-height:calc(100vh - 112px);max-height:calc(100dvh - 112px);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.tag-item{
  font-size:14.5px;letter-spacing:.04em;
  cursor:pointer;padding:2px 0;
  -webkit-transition:opacity .2s ease;
          transition:opacity .2s ease;
}
.tag-item:hover{opacity:.5;}
.tags-toggle{
  background:none;border:none;cursor:pointer;
  flex-shrink:0;color:var(--ink-mid);
  display:none;padding:0 0 2px;
  -webkit-transition:-webkit-transform .3s ease;
          transition:transform .3s ease;
  align-self:flex-end;
}
.tags-toggle.expanded{
  -webkit-transform:rotate(180deg);
          transform:rotate(180deg);
}
.tags-toggle:hover{opacity:.5;}
.tags-bar .search-go{display:none;}

/* ─── ADVANCED SEARCH ───────────────────────────────────────────────────── */
.adv-row{
  display:flex;align-items:baseline;
  border-bottom:1px solid var(--border);
  padding:0 28px;
  min-height:88px;
  cursor:text;
  -webkit-transition:background .1s ease;
          transition:background .1s ease;
  position:relative;
}
.adv-row:hover{background:rgba(0,0,0,.02);}
.adv-label{
  font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;
  width:160px;flex-shrink:0;
  padding:30px 0;color:var(--ink);
}
.adv-input{
  flex:1;
  background:transparent;border:none;outline:none;
  font-family:var(--font);color:var(--ink);
  font-size:clamp(32.2px,4vw,69px);
  letter-spacing:-.01em;text-transform:uppercase;
  padding:18px 0;caret-color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
.adv-ghost{
  position:absolute;
  left:188px;right:28px;top:0;bottom:0;
  display:flex;align-items:center;
  pointer-events:none;overflow:hidden;
}
.adv-ghost span{
  font-size:clamp(32.2px,4vw,69px);
  letter-spacing:-.01em;text-transform:uppercase;
  color:var(--ink-light);white-space:nowrap;
}
.adv-bottom{
  position:fixed;bottom:0;left:0;right:0;
  border-top:1px solid var(--border);
  background:var(--bg);z-index:50;
  display:flex;justify-content:flex-end;
  padding:14px 28px;
}

/* ─── ARCHIVE ───────────────────────────────────────────────────────────── */
.archive-sticky{
  position:-webkit-sticky;
  position:sticky;
  top:80px;z-index:50;
  background:var(--bg);
  isolation:isolate;
}
.archive-title{
  font-size:clamp(82.8px,11vw,172.5px);
  line-height:.88;letter-spacing:-.02em;
  text-transform:uppercase;
  padding:36px 28px 0;
}
.sort-bar{
  padding:0 28px;                 /* lo stesso delle righe: vedi .archive-row */
  display:flex;align-items:center;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-top:36px;
}
.sort-col{
  display:flex;align-items:center;gap:6px;
  padding:14px 28px;cursor:pointer;
  font-size:13.2px;letter-spacing:.14em;
  text-transform:uppercase;
  -webkit-transition:opacity .2s ease;
          transition:opacity .2s ease;
  border-right:1px solid var(--border);
  -webkit-user-select:none;-ms-user-select:none;user-select:none;
}
.sort-col:hover{opacity:.5;}
.sort-col.active{font-weight:700;}
.sort-col:last-child{border-right:none;}
.sort-col svg{width:12px;height:12px;flex-shrink:0;}
.s-author{flex:2.5;}
.s-title{flex:3;}
.s-pub{flex:2.5;}
.s-year{flex:1.2;}
.s-act{flex:0 0 100px;border-right:none!important;}

.alpha-bar,.decade-bar{
  display:flex;flex-wrap:wrap;
  border-bottom:1px solid var(--border);
  padding:10px 28px;
}
.filter-btn{
  background:none;border:none;cursor:pointer;
  font-family:var(--font);
  font-size:15.9px;letter-spacing:.06em;
  padding:3px 7px;color:var(--ink-mid);
  -webkit-transition:color .15s ease;
          transition:color .15s ease;
  text-transform:uppercase;
}
.filter-btn:hover{color:var(--ink);}
.filter-btn.active{color:var(--ink);text-decoration:underline;}

.archive-row{
  display:flex;align-items:center;
  border-bottom:1px solid var(--border);
  padding:0 28px;
  min-height:80px;cursor:pointer;
  -webkit-transition:background .1s ease;
          transition:background .1s ease;
}
.archive-row:hover{background:rgba(0,0,0,.025);}

.load-more-wrap{
  display:flex;justify-content:center;
  padding:32px 28px;
  border-top:1px solid var(--border);
}
.load-more-btn{
  background:none;border:1px solid var(--border);
  font-family:var(--font);
  font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;
  padding:12px 32px;cursor:pointer;
  -webkit-transition:background .15s ease,color .15s ease;
          transition:background .15s ease,color .15s ease;
}
.load-more-btn:hover{background:var(--ink);color:var(--white);}
.archive-count{
  font-size:14.5px;letter-spacing:.06em;
  color:var(--ink-mid);
  padding:12px 28px;text-align:right;
}
.ar-author{
  flex:2.5;font-size:17.1px;letter-spacing:.04em;
  padding-right:16px;
}
.ar-title{
  flex:3;font-size:17.1px;letter-spacing:.04em;
  color:var(--ink-mid);padding-right:16px;
}
.ar-pub{
  flex:2.5;font-size:17.1px;letter-spacing:.04em;
  color:var(--ink-mid);padding-right:16px;
}
.ar-year{flex:1.2;font-size:17.1px;letter-spacing:.04em;padding-right:16px;}
.ar-act{
  flex:0 0 100px;
  display:flex;align-items:center;justify-content:flex-end;
}
/* La miniatura dell'archivio stava in un riquadro fisso 48×64, cioè 3:4, con
   «cover»: una copertina quadrata, o 2:3, o un libro alla francese, veniva
   tagliata. Adesso il riquadro resta 48×64 per tenere allineate le colonne, ma
   l'immagine ci sta dentro intera e si appoggia in basso, come un libro su uno
   scaffale. */
.ar-thumb{
  width:48px;height:64px;
  object-fit:contain;object-position:bottom;display:block;
}
.ar-thumb.land{ width:64px;height:64px;object-fit:contain;object-position:bottom; }
.ar-thumb-ph{width:48px;height:64px;display:block;}

/* ═══════════════════════════════════════════════════════════════════════════
   BOOK DETAIL OVERLAY
   ═══════════════════════════════════════════════════════════════════════════ */
/* Overlay full-screen: colonna flex (meccanismo ORIGINALE che funziona su Safari) */
.detail-overlay .nav-logo{left:48px !important;}
.detail-overlay{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:var(--bg);
  z-index:200;
  overflow:hidden; /* la pagina NON scrolla: scrollano solo i pannelli interni */
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
}
.detail-overlay.open{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}

/* Box centrale: occupa tutto lo spazio sopra la bottom bar */
.detail-box{
  -webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;
  display:-ms-grid;
  display:grid;
  grid-template-columns:1fr 1fr;
  border-top:1px solid var(--border);
  overflow:hidden;
  min-height:0;
}

/* Pannello sinistro: scrollabile, contenuto sotto la nav */
.detail-left{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  border-right:1px solid var(--border);
}
.detail-header{padding:110px 48px 0;}
/* In home la colonna della copertina ha «pointer-events:none», così il clic
   passa oltre e prende solo la copertina. Il guaio è che il mouse non toccava
   nemmeno l'autore e il titolo sotto: il browser leggeva il cursore del fondo, e
   lì restava il pallino pieno qualunque cosa dicesse il foglio di stile. Era il
   «sui titoli dei libri random che scorrono in home non funziona» di Matteo, e
   nessuna delle regole scritte prima poteva funzionare. Si riaccende il tocco
   sulle due parole e basta: attorno resta spento, quindi il fondo continua a
   lasciar passare il clic alla copertina. */
.cm-author, .cm-title{ pointer-events:auto; }

/* Sotto gli 820 px la scheda della copertina è centrata: un riquadro stretto da
   fit-content si appoggerebbe a sinistra invece di stare in mezzo. */
@media (max-width:820px){ .cm-author, .cm-title{ margin-inline:auto; } }

/* fit-content: il riquadro si stringe sulle lettere, così il pallino trasparente
   finisce dove finisce la parola e sul fondo attorno torna nero (28/09/2026). */
.detail-author-name, .detail-title-name, .cm-author, .cm-title, .detail-bc-lbl,
.results-header, .rc-title, .rc-author, .rc-why, .results-count, #dTags,
.archive-title, .loading-msg, .home-hero,
.about-title, .pub-letter,
.ac-label, .ac-nota, .ac-msg,
.pr-nome-grande, .pr-email, .pr-vuoto, .sc-testa, .sc-nota{
  width:fit-content; max-width:100%;
}
/* il conteggio dell'archivio è allineato a destra: senza il margine automatico
   il riquadro stretto scivolerebbe a sinistra */
.archive-count{ width:fit-content; max-width:100%; margin-left:auto; }

/* Il filetto sotto l'intestazione dei risultati passa al riquadro dei risultati.
   Disegna la stessa riga nello stesso posto, ma smette di appartenere a un
   elemento che adesso è largo quanto le sue lettere: se restasse lì, il filetto
   si accorcerebbe con il titolo. */
.results-header{ border-bottom:0; }
.results-grid{ border-top:1px solid var(--border); }
/* In archivio no: le colonne sono una tabella, e lì la cella INTERA è l'area da
   leggere. Provato a stringerle sul testo, il grid non le stringe comunque. */
.detail-author-name{
  font-size:clamp(40px,5.2vw,92px);
  line-height:1.14;            /* prima 1: tagliava gli accenti alti (á š di "Tomáš") */
  padding-top:.06em;           /* spazio per i diacritici sopra le maiuscole */
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:.1em;
}
.detail-title-name{
  font-size:clamp(30px,3.8vw,68px);
  line-height:1.14;            /* idem: gli accenti non vengono più tagliati */
  letter-spacing:-.02em;
  color:var(--ink-mid);
  margin-top:-.05em;
}
.detail-divider{
  display:none;
}
.detail-description{
  padding:48px 48px 48px;
  font-size:clamp(18px,1.9vw,30px);
  line-height:1.35;color:var(--ink);
}
.detail-description p{margin:0;}

/* Pannello destro: cover centrata nella sezione (sotto la nav) */
.detail-right{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;
  -webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;
  padding:105px 28px 20px 28px;
  overflow:hidden !important;
  scrollbar-width:none;
}
.detail-right::-webkit-scrollbar{display:none;}
.detail-right img{
  display:block;
  width:auto;
  max-width:90%;
  height:auto;
  max-height:calc(100% - 110px);
  object-fit:contain;
}
.detail-right::-webkit-scrollbar{display:none;}
.detail-cover-ph{
  width:260px;
  height:360px;
  -ms-flex-negative:0;flex-shrink:0;
}

/* Bottom bar: 100px, voci centrate verticalmente, lato dx scrollabile */
.detail-bottom-bar{
  -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
  border-top:1px solid var(--border);
  display:-ms-grid;
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--bg);
  height:auto;
  min-height:80px;
  overflow:visible;
}
.detail-bl{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  -webkit-box-align:start;-ms-flex-align:start;align-items:start;
  border-right:1px solid var(--border);
  padding:16px 28px;
  overflow:visible;
}
.detail-br{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  -webkit-box-align:start;-ms-flex-align:start;align-items:start;
  padding:16px 28px;
  overflow:visible;
}
/* Ogni colonna: etichetta + valore, altezza uniforme così le etichette restano allineate */
.detail-bc{
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  min-width:0;
}
.detail-bc-lbl{
  -ms-flex-negative:0;flex-shrink:0;
  font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-mid);
  margin-bottom:8px;
}
/* Valore: altezza fissa con scroll (lato dx scorrevole) */
.detail-bc-val{
  height:auto;
  overflow-y:visible;
  font-size:17px;color:var(--ink);
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-orient:vertical;-webkit-box-direction:normal;
  -ms-flex-direction:column;flex-direction:column;
  gap:6px;
  word-break:break-word;
  overflow-wrap:break-word;
}
/* Blocco tag: stessa altezza fissa, scroll, flusso inline (niente quirk flex) */
#dTags{
  height:auto;
  max-height:calc(1.6em * 3);
  overflow:hidden;
  line-height:1.6;
}
#dTags #dTags 
#dTags .detail-tag::after{
  content:', ';
}
#dTags .detail-tag:last-child::after{
  content:'';
}

.detail-tag:hover{opacity:.5;}
/* Scrollbar sottile e visibile per indicare che è scorrevole */
.detail-bc-val::-webkit-scrollbar,
#dTags::-webkit-scrollbar{width:5px;}
.detail-bc-val::-webkit-scrollbar-thumb,
#dTags::-webkit-scrollbar-thumb{background:var(--ink-mid);border-radius:3px;}
.detail-bc-val::-webkit-scrollbar-track,
#dTags::-webkit-scrollbar-track{background:transparent;}
.detail-tag{
  font-size:13.2px;letter-spacing:.04em;
  text-transform:lowercase !important;
  border:none;
  padding:0;cursor:pointer;
  -webkit-transition:opacity .15s ease;
          transition:opacity .15s ease;
}
.detail-tag:hover{opacity:.5;}
.detail-tag-more{font-weight:700;}

/* Pulsante "+" per espandere le specifiche prodotto */
.detail-more-btn{
  -ms-flex-item-align:start;
  align-self:flex-start;
  margin-top:6px;
  min-width:28px;
  text-align:center;
  font-weight:700;
  border:1px solid var(--ink);
  padding:1px 9px;
  cursor:pointer;
  -webkit-transition:background .15s ease,color .15s ease;
          transition:background .15s ease,color .15s ease;
}
.detail-more-btn:hover{background:var(--ink);color:var(--white);}

/* ─── MENU DRAWER ───────────────────────────────────────────────────────── */
.menu-drawer{
  display:none;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  z-index:300;
  background:var(--bg);
  flex-direction:column;
  padding-bottom:6.2vh;
}
.menu-drawer.open{display:flex;}
.menu-nav-row{
  flex:1;
  display:flex;justify-content:space-between;
  align-items:flex-start;
  padding:22px 28px 0;
  border-bottom:1px solid var(--border);
  flex-shrink:0;min-height:0;
}
.menu-logo{
  font-size:clamp(11px,3.2vh,50px);
  letter-spacing:.06em;text-transform:uppercase;
  line-height:1.1;cursor:pointer;
}
.menu-logo:hover{opacity:.5;}
/* La misura delle voci era scritta quattro volte, una per punto di rottura, e
   sul telefono restava piccola: 64 px su uno schermo da 375, con novanta pixel
   di vuoto a destra della parola più lunga. Matteo la vuole «più grossa, simil
   sito web», cioè come sullo schermo grande, dove riempie la riga.
   Adesso è una formula sola e vale dovunque. Due limiti, e vince il più stretto:
     · la LARGHEZZA: «ARCHIVE», la parola più lunga, in Opale maiuscolo misura
       3,90 volte il corpo. Perché stia dentro lo schermo meno i margini serve
       corpo = (100vw − 52) / 3,90, cioè 25,6vw − 13px. I 52 px sono i 16+16 di
       margine più venti di sicurezza, che servono se Opale non arriva e il
       browser ripiega su un carattere più largo;
     · l'ALTEZZA: 15vh, perché le voci sono cinque e devono starci tutte senza
       far scorrere la pagina. È lo stesso numero di prima.
   Su un telefono da 375 vince la larghezza e viene 83 px invece di 64; su uno
   schermo grande vince l'altezza e non cambia niente rispetto a prima. */
.menu-item{
  /* Due note che vengono dalla prova sul telefono vero:
     · la parola più lunga non è ARCHIVE ma MY SPINE, che compare al posto di
       LOGIN quando si è entrati, e misura 4,05 volte il corpo invece di 3,90:
       il divisore è quello, se no la voce esce dallo schermo proprio a chi ha
       l'account;
     · con il telefono di traverso lo schermo è alto 375 px e con 15vh le cinque
       voci non ci stavano: si vedevano tagliate sopra e sotto. «svh» è
       l'altezza vera, senza la barra del browser, e 13 invece di 15 lascia
       respirare le righe. La riga in vh resta sopra per i browser che non
       conoscono svh. */
  white-space:nowrap;
  font-size:clamp(34px, min(calc(21.5vw - 11px), 15vh), 240px);
  font-size:clamp(34px, min(calc(21.5vw - 11px), 15svh), 240px);
  font-weight:300;line-height:1;
  letter-spacing:-.01em;
  text-transform:uppercase;
  padding:0 28px;
  border-bottom:1px solid var(--border);
  cursor:pointer;
  -webkit-transition:color .15s ease;
          transition:color .15s ease;
  display:flex;align-items:center;
  flex:1;min-height:0;overflow:hidden;
  color:var(--ink);
}
.menu-item:hover{color:var(--ink-mid);}
.menu-item.inactive{cursor:default;}
.menu-item.inactive:hover{color:var(--ink);}
/* La X è il tasto del menu in un altro stato, quindi ha la misura e il peso del
   menu: 44 px, l'altezza esatta delle sue tre righe, e lo stesso nero. Era 32 px
   (26 nella scheda) e grigia al 70 per cento, e accanto alle righe da 68 px
   sembrava un segno di un altro sito. L'ha notato Antonio il 22/09/2026.
   Al passaggio del mouse schiarisce come il logo e le voci, non il contrario. */
/* L'immagine della X è in linea con il testo, quindi si porta dietro lo spazio
   sotto la riga di base: il tasto risultava alto 51 px invece di 44, e dentro una
   barra allineata in alto la X finiva tre pixel e mezzo più su del menu che le sta
   a fianco. Con display:block lo spazio sparisce e le due misure tornano a dire
   la verità. Visto da Matteo il 26/09/2026. */
.menu-close svg{display:block;}
.menu-close{
  background:none;border:none;cursor:pointer;
  padding:0;opacity:1;
  -webkit-transition:opacity .2s ease;
          transition:opacity .2s ease;
}
.menu-close:hover{opacity:.5;}

/* ─── ABOUT ─────────────────────────────────────────────────────────────── */
.about-wrap{
  display:flex;flex-direction:column;
  height:calc(100vh - 80px);
}
.about-split{
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:0;
}
.about-left{
  padding:40px;
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.about-right{
  padding:40px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* ─── INDICE CASE EDITRICI (About, lato destro) ─────────────────────────────── */
.pub-index{
  /* allineato in alto con il titolo ABOUT della colonna sinistra */
}
.pub-group{margin-bottom:26px;}
.pub-group:last-child{margin-bottom:0;}
.pub-letter{
  font-size:clamp(18px,1.9vw,30px);   /* = descrizione scheda libro */
  font-weight:700;                    /* lettere A,B,C… in grassetto */
  /* Opale ha un solo peso: ispessisco i tratti per un grassetto netto e coerente */
  -webkit-text-stroke:0.025em var(--ink);
  text-stroke:0.025em var(--ink);
  letter-spacing:.02em;color:var(--ink);
  margin:0 0 8px;line-height:1;
}
.pub-names{
  -webkit-column-count:2;column-count:2;
  -webkit-column-gap:24px;column-gap:24px;
}
.pub-item{
  display:block;
  font-size:clamp(18px,1.9vw,30px);letter-spacing:.02em;line-height:1.35;  /* = descrizione scheda libro */
  color:var(--ink);                  /* nero */
  text-decoration:none;
  padding:3px 6px;margin:0 -6px;
  -webkit-column-break-inside:avoid;break-inside:avoid;
  -webkit-transition:background .1s ease;transition:background .1s ease;
}
.pub-item:hover{background:rgba(0,0,0,.03);}   /* stesso overlay di .result-card/.archive-row */

/* La bandiera del paese (27/09/2026): larga quanto tre lettere, sempre, quindi il
   nome della casa editrice non va più a capo per farle posto. È misurata in em, così
   cresce insieme al nome. Il filo di contorno lo disegna l'svg: senza, il Giappone e
   la Svizzera, che sono quasi bianche, si scioglierebbero nella carta. Il nome del
   paese non sparisce: sta nel title e nell'aria-label, quindi si legge col mouse e
   con i lettori di schermo. */
.pub-bandiera{
  display:inline-block;
  width:clamp(13px,.58em,19px);
  margin-left:.42em;
  vertical-align:.02em;
  line-height:0;
}
.pub-bandiera svg{ display:block; width:100%; height:auto; }

/* Il paese scritto per esteso resta per i paesi senza bandiera disegnata.
   Il paese, accanto al nome (23/09/2026, idea di Antonio: lo fa anche Edcat).
   Più piccolo e grigio, così l'indice si legge ancora come una colonna di nomi e
   il paese resta un'informazione di servizio. #666 su carta fa 5:1, sopra il minimo.
   Misura rivista lo stesso giorno: a 15 px il paese era largo quanto mezzo nome e
   i nomi lunghi non ci stavano più nella colonna, così «United Kingdom» finiva
   sotto «Café Royal Books». Adesso è più piccolo e sta più vicino, e quando anche
   così non basta ci pensa adattaEditori() in app, che stringe il paese di quella
   riga sola invece di mandarlo a capo. */
.pub-paese{
  font-size:clamp(10px,.8vw,12.5px);
  color:var(--ink-mid);
  letter-spacing:.03em;
  white-space:nowrap;
  margin-left:.38em;
}

/* ─── GATE / LOGIN (sblocco Search + Archive) ───────────────────────────────── */
.gate-page{
  display:flex;flex-direction:column;
  height:calc(100vh - 80px);
  background:var(--bg);                 /* colore di sfondo del sito */
}
.gate-wrap{
  flex:1;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:40px;
}
.gate-box{width:min(620px,94%);}
.gate-label{
  font-size:clamp(48px,8vw,118px);
  font-weight:400;letter-spacing:-.02em;line-height:.9;
  text-transform:uppercase;margin-bottom:22px;
}
.gate-sub{
  font-size:15px;letter-spacing:.04em;color:var(--ink-mid);
  margin-bottom:38px;
}
.gate-form{
  display:flex;align-items:stretch;
  border-bottom:2px solid var(--ink);
}
.gate-input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  font-family:var(--font);color:var(--ink);
  font-size:clamp(22px,3vw,34px);letter-spacing:.06em;
  padding:10px 4px;caret-color:var(--ink);
}
.gate-input::-webkit-input-placeholder{color:var(--ink);opacity:.16;letter-spacing:.2em;}
.gate-input::placeholder{color:var(--ink);opacity:.16;letter-spacing:.2em;}
.gate-btn{
  background:none;border:none;cursor:pointer;
  font-family:var(--font);color:var(--ink);
  font-size:14px;letter-spacing:.16em;text-transform:uppercase;
  padding:0 4px 0 22px;white-space:nowrap;
  -webkit-transition:opacity .15s ease;transition:opacity .15s ease;
}
.gate-btn:hover{opacity:.5;}
.gate-error{
  min-height:22px;margin-top:18px;
  font-size:14px;letter-spacing:.04em;color:var(--ink-mid);
  opacity:0;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;
}
.gate-error.show{opacity:1;}
@keyframes gate-shake{
  10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(3px);}
  30%,50%,70%{transform:translateX(-5px);} 40%,60%{transform:translateX(5px);}
}
.gate-input.shake{animation:gate-shake .38s;}
@media (max-width:768px){
  .gate-page{height:auto;min-height:calc(100vh - 80px);}
  .gate-wrap{padding:24px 20px;align-items:flex-start;padding-top:12vh;}
  .gate-label{font-size:clamp(44px,15vw,84px);}
}
.about-title{
  font-size:clamp(64px,10vw,160px);
  font-weight:400;letter-spacing:-.02em;
  text-transform:uppercase;line-height:.92;
  flex-shrink:0;margin-bottom:40px;
}
.about-body{
  font-size:clamp(18px,1.9vw,30px);   /* = descrizione scheda libro (.detail-description) */
  font-weight:300;color:var(--ink);
  line-height:1.35;letter-spacing:-.02em;
}
.about-footer-bar{
  flex-shrink:0;
  border-top:1px solid var(--border);
  padding:0 40px;
}
.about-footer-row{
  display:flex;justify-content:space-between;
  align-items:center;
  padding:18px 0;
}
.about-footer-links{display:flex;gap:36px;}
.about-footer-links a{
  font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.about-footer-links a:hover{opacity:.5;}

/* ─── AUTOCOMPLETE DROPDOWN ─────────────────────────────────────────────── */
.free-input-wrap{position:relative;}
.ac-dropdown{
  position:absolute;
  top:100%;left:0;right:0;
  background:var(--bg);
  border:1px solid var(--ink);
  border-top:none;
  z-index:100;
  display:none;
  max-height:300px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  -webkit-box-shadow:0 8px 24px rgba(0,0,0,.08);
          box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.ac-dropdown.open{display:block;}
.ac-item{
  display:flex;align-items:baseline;
  gap:12px;padding:11px 16px;cursor:pointer;
  border-bottom:1px solid var(--border);
  -webkit-transition:background .1s ease;
          transition:background .1s ease;
}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item.ac-active{background:#d8d6d0;}
.ac-author{
  font-size:13.2px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-mid);
  white-space:nowrap;flex-shrink:0;min-width:120px;
}
.ac-title{
  font-size:15.9px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink);
  white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;
}
.ac-title mark{background:none;font-weight:700;color:var(--ink);}

/* ─── UTILS ─────────────────────────────────────────────────────────────── */
.pb120{padding-bottom:120px;}
.loading-msg{
  padding:40px 28px;
  font-size:14.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-light);
}
.error-msg{
  padding:28px;
  font-size:17.1px;line-height:1.7;
  color:#c0392b;
  border-left:3px solid #c0392b;
  margin:28px;background:#fff8f8;
}

/* ─── RESPONSIVE ──────────────────────────────────────────────────────────
   Stessa identità grafica del desktop (tipo grande, righe-griglia, proporzioni
   3/4 sulle copertine): le griglie a 2 colonne collassano a 1, e i font giganti
   delle clamp() scendono in modo proporzionato su tablet e smartphone.
   Breakpoint:  ≤1024 tablet orizzontale · ≤820 tablet verticale / phablet ·
                ≤480 smartphone · ≤360 smartphone piccolo.                      */

/* ===== TABLET ORIZZONTALE / LAPTOP PICCOLO (≤1024px) ===================== */
@media (max-width:1024px){
  .home-cover,.home-cover-meta{width:64%;max-width:460px;}
  .detail-header{padding:100px 32px 0;}
  .detail-description{padding:32px;}
  .detail-right{padding:96px 24px 16px;}
  .about-right{padding:28px;}
}

/* ===== TABLET VERTICALE / PHABLET (≤820px): tutto a una colonna ========== */
@media (max-width:820px){
  /* — NAV / HAMBURGER — */
  nav{padding:16px;}
  .nav-logo{left:16px;top:16px;font-size:clamp(11px,2.4vh,20px) !important;}
  .hamburger span{width:42px;}

  /* — HOME: copertina sotto, eroe sopra (una colonna) — */
  .home-split{grid-template-columns:1fr;min-height:0;}
  .home-left{border-right:none;border-bottom:1px solid var(--border);min-height:auto;}
  .home-hero{font-size:clamp(60px,16vw,132px) !important;margin-bottom:40px;}
  .home-search-icon{position:static;margin:0 28px 32px auto;}
  .home-search-icon svg{width:96px;height:96px;}
  .home-right{display:flex;flex-direction:column;align-items:center;
              justify-content:center;min-height:auto;padding:32px 20px 48px;}
  .home-cover{position:static;width:74%;max-width:360px;margin:0 0 18px;}
  .home-cover-meta{position:static;width:74%;max-width:360px;margin:0;
                   left:auto;bottom:auto;text-align:center;}

  /* — SEARCH (free) — */
  .mode-bar{margin-top:24px !important;}
  .free-input{font-size:clamp(44px,11vw,96px);}
  .autocomplete-line{font-size:clamp(28px,7vw,60px);}
  .results-grid{grid-template-columns:1fr;}
  .result-card{border-right:none;}

  /* — SEARCH (advanced) — */
  .adv-row{min-height:74px;}
  .adv-input,.adv-ghost span{font-size:clamp(26px,6.4vw,52px);}

  /* — ARCHIVE — */
  .archive-title{font-size:clamp(56px,14vw,118px);}
  .sort-col{font-size:11px;letter-spacing:.06em;padding-left:12px;padding-right:12px;}
  .s-pub,.ar-pub{display:none;}
  .ar-author,.ar-title,.ar-year{font-size:15px;}

  /* — DETAIL: colonna unica scrollabile, COPERTINA IN ALTO — */
  .detail-overlay .nav-logo{left:16px !important;}
  .detail-overlay.open{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .detail-box{display:flex;flex-direction:column;
              -webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;
              overflow:visible;min-height:0;}
  .detail-right{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1;
                display:block;overflow:visible !important;padding:84px 20px 4px;}
  .detail-right img{display:block !important;width:auto;
                    max-width:58%;max-height:50vh;margin:0 auto;}
  .detail-cover-ph{position:static;margin:0 auto;width:200px;height:280px;}
  .detail-left{overflow:visible;border-right:none;}
  .detail-header{padding:24px 20px 0;}
  .detail-author-name{font-size:clamp(32px,8vw,60px);}
  .detail-title-name{font-size:clamp(23px,6vw,46px);}
  .detail-description{padding:20px;font-size:clamp(16px,4.4vw,22px);}
  .detail-bottom-bar{display:block;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;}
  .detail-bl,.detail-br{display:block;padding:18px 20px;}
  .detail-bl{border-right:none;border-bottom:1px solid var(--border);}
  .detail-bc{margin-bottom:18px;padding-left:0 !important;}
  .detail-bc:last-child{margin-bottom:0;}
  #dTags{max-height:none !important;}

  /* — ABOUT: una colonna — */
  .about-wrap{height:auto;min-height:calc(100vh - 80px);}
  .about-split{grid-template-columns:1fr;}
  .about-left{border-right:none;border-bottom:1px solid var(--border);
              padding:24px 20px 32px !important;}
  .about-right{display:block;overflow:visible;
               padding:26px 20px 40px !important;}
  .pub-letter{font-size:clamp(16px,4.4vw,22px);}                     /* = .detail-description */
  .pub-item{font-size:clamp(16px,4.4vw,22px);}                      /* = .detail-description */
  .pub-paese{font-size:clamp(10px,2.4vw,12px);}
  .about-title{font-size:clamp(52px,15vw,118px) !important;}
  .about-body{font-size:clamp(16px,4.4vw,22px);line-height:1.35;}   /* = .detail-description */
  .about-footer-bar{padding-left:20px;padding-right:20px;}
  .about-footer-row{flex-wrap:wrap;gap:14px;}
  .about-footer-links{gap:18px;flex-wrap:wrap;}

  /* — MENU DRAWER: voci più piccole così entrano tutte — */
  .menu-nav-row{padding:16px 16px 0;}
  /* Solo qui il tetto scende da 15 a 13: con il telefono coricato lo schermo è
     alto 375 px e con 15 le cinque voci si tagliavano sopra e sotto. Avevo
     abbassato il numero nella regola generale, e così il menu si era
     rimpicciolito anche sullo schermo grande, da 135 a 117 px: esattamente il
     contrario di quello che Matteo aveva chiesto. */
  .menu-item{ padding-left:16px; padding-right:16px;
              font-size:clamp(34px, min(calc(21.5vw - 11px), 13vh), 240px);
              font-size:clamp(34px, min(calc(21.5vw - 11px), 13svh), 240px); }

  /* — TAGS BAR — */
  .tags-bar{padding:12px 16px;}
}

/* ===== SMARTPHONE (≤480px): compattazione tipografica =================== */
@media (max-width:480px){
  .home-hero{font-size:clamp(50px,15vw,84px) !important;}
  .home-search-icon svg{width:72px;height:72px;}
  .home-cover,.home-cover-meta{width:86%;}

  .free-input{font-size:clamp(34px,11vw,60px);}
  .autocomplete-line{font-size:clamp(22px,7vw,42px);}
  .mode-btn,.mode-sep{font-size:12px;}

  .adv-input,.adv-ghost span{font-size:clamp(23px,7vw,40px);}

  .archive-title{font-size:clamp(44px,15vw,76px);}
  .ar-author,.ar-title,.ar-year{font-size:14px;}

  .detail-author-name{font-size:clamp(28px,9vw,46px);}
  .detail-title-name{font-size:clamp(20px,7vw,36px);}
  .detail-right img{max-width:92%;max-height:46vh;max-height:46svh;}
  .detail-description{font-size:clamp(16px,4.6vw,20px);}

  .about-title{font-size:clamp(44px,16vw,84px) !important;}
  .about-body{font-size:clamp(16px,4.6vw,20px);}                    /* = .detail-description */
  .pub-letter,.pub-item{font-size:clamp(16px,4.6vw,20px);}         /* = .detail-description */
  .pub-paese{font-size:clamp(10px,2.6vw,12px);}

}

/* ===== SMARTPHONE PICCOLO (≤360px) ====================================== */
@media (max-width:360px){
  .home-hero{font-size:clamp(44px,14vw,64px) !important;}
  .free-input{font-size:clamp(30px,11vw,48px);}
  .about-body{font-size:clamp(16px,4.6vw,20px);}                    /* = .detail-description */
}

/* ─── PRINT (opzionale, pulisce per stampa) ─────────────────────────────── */
@media print{
  nav,.menu-drawer,.tags-bar,.adv-bottom,.load-more-wrap{display:none!important;}
  .detail-overlay .nav-logo{left:48px !important;}
.detail-overlay{position:static;display:block!important;}
  .detail-box{display:block;}
}

/* ═══ FIX RESPONSIVE v11 — risultati e archivio più fruibili su mobile ═══════ */
@media (max-width:820px){
  /* RISULTATI: card compatte, niente vuoto sotto al titolo, copertina più piccola */
  .result-card{
    grid-template-columns:1fr 84px;
    grid-template-rows:auto auto auto;
    padding:14px 20px;
    gap:2px 14px;
    align-items:start;
  }
  .rc-cover{ grid-column:2; grid-row:1 / 4; align-self:center; }
  .rc-author{ font-size:13.5px; padding-bottom:2px; }
  .rc-title{ font-size:13.5px; line-height:1.34; padding-bottom:4px; }
  .rc-meta{ align-items:center; }
  .rc-pub{ font-size:12.5px; }
  .rc-year{ font-size:12.5px; }

  /* ARCHIVIO: miniatura più piccola -> più spazio al titolo */
  .archive-row{ padding:0 16px; min-height:66px; }
  .ar-act{ flex:0 0 50px; }
  .ar-thumb,.ar-thumb-ph{ width:38px; height:51px; }
  .ar-thumb.land{ width:51px;height:51px; }
}

/* ═══ ANIMAZIONI v13 — più percepibili (mobile + tablet + desktop) ═══════════ */
:root{ --anim-ease: cubic-bezier(.2,.6,.2,1); }
@keyframes spFadeIn{ from{opacity:0} to{opacity:1} }
@keyframes spRise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* 4) Transizione pagine: fade + rise */
.page.active{ animation: spRise .34s var(--anim-ease) both; }

/* 1) Scheda libro: overlay in dissolvenza + box che sale (marcato) */
.detail-overlay{ overscroll-behavior: contain; }              /* stop "trasparenza" pagina sotto su iOS */
.detail-overlay.open{ animation: spFadeIn .26s var(--anim-ease) both; }
.detail-overlay.open .detail-box{ animation: spDetailBox .40s var(--anim-ease) both; }
@keyframes spDetailBox{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }

/* 2) Copertine: fade-in al caricamento (classi da anim-v1.js, fail-safe) */
.cover-fade{ opacity:0; }
.cover-fade.is-loaded{ opacity:1; transition:opacity .5s var(--anim-ease); }

/* 3) Risultati / archivio: entrata fade+rise scaglionata (visibile) */
.result-card, .archive-row{ animation: spRowIn .5s var(--anim-ease) both; }
@keyframes spRowIn{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
.result-card:nth-child(1),.archive-row:nth-child(1){ animation-delay:0s; }
.result-card:nth-child(2),.archive-row:nth-child(2){ animation-delay:.05s; }
.result-card:nth-child(3),.archive-row:nth-child(3){ animation-delay:.10s; }
.result-card:nth-child(4),.archive-row:nth-child(4){ animation-delay:.15s; }
.result-card:nth-child(5),.archive-row:nth-child(5){ animation-delay:.20s; }
.result-card:nth-child(6),.archive-row:nth-child(6){ animation-delay:.25s; }
.result-card:nth-child(7),.archive-row:nth-child(7){ animation-delay:.30s; }
.result-card:nth-child(8),.archive-row:nth-child(8){ animation-delay:.35s; }

/* 5) Menu a tutto schermo: dissolvenza + voci in stagger (marcato) */
.menu-drawer.open{ animation: spFadeIn .24s var(--anim-ease) both; }
.menu-drawer.open .menu-item{ animation: spMenuItem .5s var(--anim-ease) both; }
.menu-drawer.open .menu-item:nth-child(2){ animation-delay:.06s; }
.menu-drawer.open .menu-item:nth-child(3){ animation-delay:.12s; }
.menu-drawer.open .menu-item:nth-child(4){ animation-delay:.18s; }
.menu-drawer.open .menu-item:nth-child(5){ animation-delay:.24s; }
.menu-drawer.open .menu-item:nth-child(6){ animation-delay:.30s; }
/* Fino a dieci: le voci del menu sono sette dal 26/10/2026 (e entrata Publisher) e la
   settima, LOGIN, restava senza ritardo e scendeva per prima, rompendo la cascata. */
.menu-drawer.open .menu-item:nth-child(7){ animation-delay:.36s; }
.menu-drawer.open .menu-item:nth-child(8){ animation-delay:.42s; }
.menu-drawer.open .menu-item:nth-child(9){ animation-delay:.48s; }
.menu-drawer.open .menu-item:nth-child(10){ animation-delay:.54s; }
@keyframes spMenuItem{ from{opacity:0; transform:translateY(-20px)} to{opacity:1; transform:none} }

/* 6) Feedback al tocco (solo dispositivi touch: niente hover) */
@media (hover:none){
  .result-card:active,.archive-row:active,.menu-item:active,.mode-btn:active,
  .tag-item:active,.filter-btn:active,.results-load-btn:active,.load-more-btn:active,
  .search-go:active,.tags-toggle:active{ transform: scale(.96); transition: transform .09s ease; }
  .result-card:active,.archive-row:active{ background: rgba(0,0,0,.06); }
}

/* Accessibilità: rispetta "Riduci movimento" (iOS/macOS) */
@media (prefers-reduced-motion: reduce){
  .page.active,.detail-overlay.open,.detail-overlay.open .detail-box,
  .menu-drawer.open,.menu-drawer.open .menu-item,
  .result-card,.archive-row{ animation:none !important; }
  .cover-fade{ opacity:1 !important; }
  .cover-fade.is-loaded{ transition:none !important; }
}

/* ─── FIX v14: lente di ricerca su mobile ────────────────────────────────────
   Su smartphone/tablet la lente fa la stessa cosa dell'hamburger (apre il menu):
   scrollando fino in fondo finiva incastrata sotto l'hamburger. La nascondo:
   la ricerca resta accessibile dall'hamburger. */
@media (max-width:820px){
  .home-search-icon{ display:none !important; }
}

/* ─── HOME mobile v16: composizione bilanciata (eroe → copertina vicina, niente vuoto) ── */
@media (max-width:820px){
  #page-home{ padding-top:0; }
  .home-split{ grid-template-columns:1fr; grid-template-rows:auto auto; min-height:auto; }
  .home-left{ padding:82px 28px 0 !important; min-height:auto; }
  .home-hero{ font-size:clamp(46px,12.5vw,94px) !important; margin:6px 0 24px !important; }
  /* «1fr» non vuol dire «larga quanto lo spazio»: una casella di griglia non
     scende mai sotto la misura minima del suo contenuto, se non le si dice
     min-width:0. Senza, la copertina larga 92vw più i venti pixel di margine di
     questa colonna facevano 385 px su uno schermo da 375, e la home scorreva di
     lato. La copertina adesso si misura sul 100% di QUESTA colonna, margini già
     tolti, e la colonna può stringersi. */
  .home-split{ min-width:0; }
  .home-left, .home-right{ min-width:0; }
  .home-right{ min-height:0; justify-content:flex-start !important; align-items:center;
               padding:26px 20px 24px !important; }
  /* La copertina deve stare dentro DUE limiti: la larghezza dello schermo (92vw)
     e l'altezza che le si vuole dare (48svh). Prima ne teneva uno solo: c'erano
     due «max-width» nella stessa regola, 92vw e poi «none», e vinceva la seconda,
     quindi una copertina orizzontale usciva dallo schermo di lato. Adesso la
     larghezza è la più piccola fra i due, calcolata dalla proporzione vera della
     copertina, e l'altezza viene da sé: nessun taglio e niente che sborda.
     «svh» e non «vh» perché sul telefono la barra del browser compare e sparisce,
     e con vh la copertina saltava di venti pixel a ogni scorrimento. */
  /* ECCO PERCHÉ LE COPERTINE ERANO TAGLIATE SUL TELEFONO. Le due immagini che si
     alternano stanno «in posizione assoluta, attaccate ai quattro lati» del loro
     riquadro. Ma qui una vecchia regola rimetteva la copertina a «position:static»,
     e un elemento statico non fa da riferimento a niente: le immagini andavano ad
     attaccarsi ai lati della COLONNA, 375×498 invece di 292×390, e si vedevano
     stirate e tagliate fuori dal loro riquadro, sopra il titolo. Il riquadro con
     il suo filetto restava lì vuoto, dietro. Bastava questa riga. */
  .home-cover{ position:relative;
               width:min(100%, calc(48svh * var(--cover-ar, .75))) !important;
               height:auto; aspect-ratio:var(--cover-ar, .75);
               max-width:100%; margin:0 auto 14px !important; }
  .home-cover-meta{ width:auto !important; max-width:84vw; text-align:center; margin:0 auto !important; }
}

/* ─── CURSORE freccia SPINE INDEX (solo desktop col mouse). Una sola freccia:
   tenue di default, SOLIDA sui cliccabili (affordance via opacità, niente manina).
   Le regole vere stanno in fondo al foglio, nel blocco del 14/09: qui c'erano
   quelle della freccia rossa, tolte perché puntavano a due file che non esistono
   più e restavano lì da leggere come se contassero ancora. ── */

/* ─── FLUIDITÀ v18: hover IMMEDIATI + home cover cliccabile + entrate più rapide ── */
/* aumento di opacità/colore al hover praticamente istantaneo (era .2s) */
.nav-logo, .menu-logo, .menu-item, .tag-item, .tags-toggle, .sort-col, .filter-btn,
.mode-btn, .home-search-icon, .alpha-bar button, .decade-bar button, .ac-item,
.results-load-btn, .load-more-btn, .menu-close{
  -webkit-transition: opacity .05s linear, color .05s linear !important;
          transition: opacity .05s linear, color .05s linear !important;
}
/* la copertina random della home (immagine + autore/titolo) è cliccabile:
   il puntatore glielo dà il blocco del 14/09 in fondo al foglio */
#homeCover{ -webkit-transition:opacity .12s ease; transition:opacity .12s ease; }
/* entrate risultati/archivio un filo più rapide = più "immediate" */
.result-card, .archive-row{ animation-duration:.34s !important; }
.result-card:nth-child(1),.archive-row:nth-child(1){ animation-delay:0s !important; }
.result-card:nth-child(2),.archive-row:nth-child(2){ animation-delay:.03s !important; }
.result-card:nth-child(3),.archive-row:nth-child(3){ animation-delay:.06s !important; }
.result-card:nth-child(4),.archive-row:nth-child(4){ animation-delay:.09s !important; }
.result-card:nth-child(5),.archive-row:nth-child(5){ animation-delay:.12s !important; }
.result-card:nth-child(6),.archive-row:nth-child(6){ animation-delay:.15s !important; }
.result-card:nth-child(7),.archive-row:nth-child(7){ animation-delay:.18s !important; }
.result-card:nth-child(8),.archive-row:nth-child(8){ animation-delay:.21s !important; }

/* ─── FIX v19: "FIND A BOOK" allineato a "SPINE INDEX" (mobile/tablet) ── */
@media (max-width:820px){
  .home-left{ padding-left:16px !important; padding-right:16px !important; }
  .home-hero{ padding-left:0 !important; padding-right:0 !important; }
}

/* ─── FIX v23: freccia visibile ANCHE in fondo (barre fisse in basso) ─────────
   Chrome rimette la "manina" quando il cursore custom sborderebbe sotto il bordo
   della finestra. La freccia è alta ~30px: diamo ~34px d'aria sotto le barre
   ancorate in basso, così la punta non esce mai e la freccia resta sempre.
   Solo su desktop (mouse): su touch non c'è cursore e il layout resta compatto. */
@media (hover:hover){
  .tags-bar{ padding-bottom:34px; }
  .adv-bottom{ padding-bottom:34px; }
  .detail-bottom-bar{ padding-bottom:34px; }
}

/* ─── v24: TENDINA TAG estesa = pannello scorrevole a tutto schermo ───────────
   Aperta dalla freccetta, copre la pagina lasciando visibili solo logo+burger;
   tutti i tag sono raggiungibili scorrendo. Scrollbar sottile coerente col sito. */
.tags-list.expanded{ padding-bottom:8px; }
.tags-list.expanded::-webkit-scrollbar{ width:6px; }
.tags-list.expanded::-webkit-scrollbar-thumb{ background:var(--ink-mid); border-radius:3px; }
.tags-list.expanded::-webkit-scrollbar-track{ background:transparent; }
.tags-list.expanded{ scrollbar-width:thin; scrollbar-color:var(--ink-mid) transparent; }

/* ═══════════════════════════════════════════════════════════════════════════
   FILTRI A FACCETTE  (v31, 04/09/2026)
   Stessa lingua del resto: maiuscolo, lettere spaziate, filetti sottili, niente
   riquadri colorati. I pannelli si aprono sotto la riga dei bottoni e non
   coprono i risultati, così si vede cambiare il conteggio mentre si filtra.
   ═══════════════════════════════════════════════════════════════════════════ */
.filter-bar{ border-top:1px solid var(--border); }
.filter-bar:empty{ border-top:none; }

.fc-riga{
  display:flex; flex-wrap:wrap; align-items:center; gap:0;
  padding:0 28px;
}
.fc-btn{
  background:none; border:none; cursor:pointer;
  font-family:var(--font); color:var(--ink-mid);
  font-size:13.2px; letter-spacing:.12em; text-transform:uppercase;
  padding:14px 18px 14px 0;
  display:inline-flex; align-items:center; gap:7px;
  transition:color .2s ease;
}
.fc-btn:hover{ color:var(--ink); }
.fc-btn.on{ color:var(--ink); }
.fc-btn.aperto{ color:var(--ink); }
.fc-caret{ font-size:10px; transition:transform .25s ease; display:inline-block; }
.fc-btn.aperto .fc-caret{ transform:rotate(180deg); }
.fc-spazio{ flex:1; }
.fc-sort{
  background:none; border:none; cursor:pointer;
  font-family:var(--font); color:var(--ink-mid);
  font-size:13.2px; letter-spacing:.08em;
  padding:14px 0;
}
.fc-sort:focus{ outline:none; color:var(--ink); }

.fc-pannello{
  border-top:1px solid var(--border);
  padding:18px 28px 22px;
  animation:spFadeIn .25s ease;
}
.fc-cerca{
  width:100%; max-width:340px;
  background:transparent; border:none; border-bottom:1px solid var(--border);
  outline:none; font-family:var(--font); color:var(--ink);
  font-size:14.5px; padding:4px 0 7px; margin-bottom:14px;
}
.fc-cerca::placeholder{ color:var(--ink-light); }
.fc-voci{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:2px 24px; max-height:280px; overflow-y:auto;
}
.fc-voce{
  background:none; border:none; cursor:pointer; text-align:left;
  font-family:var(--font); color:var(--ink); font-size:14.5px;
  padding:3px 0; display:flex; justify-content:space-between; gap:12px;
  transition:opacity .2s ease;
}
.fc-voce:hover{ opacity:.55; }
.fc-voce.on{ font-weight:600; }
.fc-voce.on .fc-v::before{ content:'× '; color:var(--ink-mid); }
.fc-voce.fc-zero{ opacity:.28; cursor:default; }
.fc-n{ color:var(--ink-light); font-size:12.5px; flex-shrink:0; }

.fc-anno{ display:flex; gap:28px; align-items:center; font-size:14.5px; }
.fc-anno label{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-mid); }
.fc-anno-in{
  width:88px; background:transparent; border:none; border-bottom:1px solid var(--border);
  outline:none; font-family:var(--font); color:var(--ink); font-size:16px; padding:2px 0 5px;
}

.fc-pills{ display:flex; flex-wrap:wrap; gap:8px; padding:0 28px; }
.fc-pills:empty{ display:none; }
.fc-pills{ padding-bottom:14px; }
.fc-pill{
  background:none; border:1px solid var(--ink); cursor:pointer;
  font-family:var(--font); color:var(--ink);
  font-size:12.5px; letter-spacing:.06em;
  padding:4px 10px; border-radius:999px;
  display:inline-flex; align-items:center; gap:7px;
  transition:background .2s ease,color .2s ease;
}
.fc-pill:hover{ background:var(--ink); color:var(--bg); }
.fc-x{ font-size:14px; line-height:1; }
.fc-clear{
  background:none; border:none; cursor:pointer;
  font-family:var(--font); color:var(--ink-mid);
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 0; text-decoration:underline; text-underline-offset:3px;
}
.fc-clear:hover{ color:var(--ink); }

.fc-vuoto{
  grid-column:1/-1; padding:38px 28px;
  border-bottom:1px solid var(--border);
  font-size:16px; line-height:1.6; color:var(--ink-mid);
}
.fc-vuoto p{ margin:0 0 10px; }
.fc-vuoto strong{ color:var(--ink); }

@media (max-width:760px){
  .fc-riga{ padding:0 16px; }
  .fc-btn{ padding:11px 14px 11px 0; font-size:12px; }
  .fc-pannello{ padding:14px 16px 18px; }
  .fc-voci{ grid-template-columns:1fr; max-height:240px; }
  .fc-pills{ padding:0 16px 12px; }
  .fc-spazio{ flex-basis:100%; height:0; }
  .fc-sort{ padding:0 0 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCOUNT, AREA PERSONALE, BOTTONE "+"   (v32, 07/09/2026)
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-form{ max-width:420px; padding:34px 28px 60px; }
.ac-label{
  display:block; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-mid); margin:22px 0 6px;
}
.ac-hint{ text-transform:none; letter-spacing:.02em; color:var(--ink-light); }
.ac-input{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--ink);
  outline:none; font-family:var(--font); color:var(--ink);
  font-size:20px; padding:4px 0 8px;
}
.ac-input:focus{ border-bottom-width:2px; }
.ac-check{
  display:flex; align-items:center; gap:10px; margin:26px 0 0;
  font-size:14.5px; color:var(--ink); cursor:pointer;
}
.ac-nota{ font-size:13px; line-height:1.55; color:var(--ink-mid); margin:16px 0 0; }
.ac-nota a{ color:var(--ink); text-underline-offset:3px; }
.ac-btn{
  margin-top:28px; background:var(--ink); color:var(--bg); border:none; cursor:pointer;
  font-family:var(--font); font-size:13.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:13px 26px; transition:opacity .2s ease;
}
.ac-btn:hover{ opacity:.8; }
.ac-btn.pr-piccolo{ margin-top:0; padding:10px 18px; font-size:12px; }
.ac-link{
  display:block; margin-top:16px; background:none; border:none; cursor:pointer;
  font-family:var(--font); color:var(--ink-mid); font-size:13px;
  text-decoration:underline; text-underline-offset:3px; padding:0;
}
.ac-link:hover{ color:var(--ink); }
.ac-msg{ min-height:20px; margin-top:18px; font-size:14px; }
.ac-msg.errore{ color:#8a1c1c; }
.ac-msg.avviso{ color:var(--ink-mid); }

/* ── area personale ── */
.pr-testa{
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:34px 28px 22px; border-bottom:1px solid var(--border);
}
.pr-nome-grande{ font-size:clamp(28px,5vw,54px); text-transform:uppercase; line-height:1; }
.pr-email{ font-size:13px; color:var(--ink-mid); margin-top:8px; }
.pr-nuova{ display:flex; gap:14px; align-items:center; padding:20px 28px; }
.pr-nome{ max-width:320px; font-size:15px; }
.pr-collezioni{ padding:0 28px 6px; }
.pr-col{
  display:flex; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--border);
}
.pr-col.aperta .pr-col-nome{ font-weight:600; }
.pr-col-nome{
  background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--font); color:var(--ink); font-size:17px; text-align:left;
}
.pr-col-nome:hover{ opacity:.6; }
.pr-col-n{ color:var(--ink-light); font-size:12.5px; }
.pr-col-az{
  background:none; border:none; cursor:pointer; padding:0; margin-left:auto;
  font-family:var(--font); color:var(--ink-light); font-size:12px;
  text-decoration:underline; text-underline-offset:3px;
}
.pr-col-az:hover{ color:var(--ink); }
.pr-libri{ display:grid; grid-template-columns:1fr 1fr; }
.pr-vuoto{ padding:40px 28px; color:var(--ink-mid); font-size:16px; line-height:1.6; }
.pr-fondo{ padding:36px 28px 60px; border-top:1px solid var(--border); margin-top:30px; }
.pr-pericolo{ color:#8a1c1c; }
.pr-pericolo:hover{ color:#5e1212; }

/* ── il "+" ── */
.piu{
  background:none; border:1px solid var(--ink-light); border-radius:50%;
  width:26px; height:26px; line-height:1; cursor:pointer;
  font-family:var(--font); color:var(--ink-mid); font-size:15px;
  display:inline-flex; align-items:center; justify-content:center;
  margin-left:auto; flex-shrink:0;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.piu:hover{ border-color:var(--ink); color:var(--ink); }
.piu.on{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.rc-meta{ display:flex; align-items:center; gap:10px; }

@media (max-width:760px){
  .ac-form{ padding:24px 16px 50px; }
  .pr-testa, .pr-nuova, .pr-collezioni, .pr-fondo{ padding-left:16px; padding-right:16px; }
  .pr-libri{ grid-template-columns:1fr; }
}
.detail-bl.con-salva{ grid-template-columns:repeat(4,1fr); }
.detail-bc-salva .piu{ margin-left:0; margin-top:2px; }
@media (max-width:760px){ .detail-bl.con-salva{ grid-template-columns:repeat(2,1fr); } }
.ac-input:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
/* L'unico cursore di sistema rimasto in tutto il sito, e ci resta apposta: è
   l'orologio mentre il modulo sta salvando, cioè l'unico momento in cui serve
   dire «aspetta» e non «premi». Se un giorno si conta di nuovo chi sfugge, non
   è una dimenticanza (28/09/2026). */
.ac-btn:disabled{ opacity:.45; cursor:wait; }
.ac-avviso{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--bg); font-family:var(--font); font-size:14px;
  padding:11px 18px; border-radius:3px; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:9999; max-width:90vw;
}
.ac-avviso.on{ opacity:1; transform:translateX(-50%) translateY(0); }


/* ── scheda renderizzata dal server (visibile solo senza JavaScript o prima del boot) ── */
.ssr-book{ max-width:720px; padding:34px 28px 60px; font-size:16px; line-height:1.6; }
.ssr-book img{ max-width:320px; height:auto; display:block; margin-bottom:22px; }
.ssr-book h1{ font-size:clamp(28px,5vw,48px); line-height:1.05; margin:0 0 6px; font-weight:400; }
.ssr-author{ font-size:20px; color:var(--ink-mid); margin:0 0 22px; }
.ssr-book dl{ display:grid; grid-template-columns:max-content 1fr; gap:6px 22px; margin:0 0 22px; }
.ssr-book dt{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); padding-top:4px; }
.ssr-book dd{ margin:0; }
.ssr-book a{ color:var(--ink); text-underline-offset:3px; }
.ssr-more h2{ font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); margin:26px 0 8px; font-weight:400; }
.ssr-more ul{ margin:0; padding-left:18px; }
.ssr-nav{ margin-top:34px; font-size:13px; }
.spa-ready .ssr-book{ display:none; }

/* ═══════════════════════════════════════════════════════════════════════════
   v33 (08/09/2026): accessibilità e precisione, dall'audit
   ═══════════════════════════════════════════════════════════════════════════ */
/* contrasto: il grigio chiaro sale a 3,6:1 e resta solo per ciò che è marginale */
:root{ --ink-light:#666666; --gutter:28px; }   /* 4,6:1 sul fondo #e8e6e1 (il #767676 dava 3,6) */
@media (max-width:820px){ :root{ --gutter:20px; } }
.mode-btn, .fc-n, .ac-hint, .pr-col-n, .pr-col-az, .autocomplete-line, .adv-ghost span, .fc-cerca::placeholder{ color:var(--ink-mid); }
.mode-btn.active{ color:var(--ink); text-decoration:underline; text-underline-offset:5px; }
.piu{ border-color:var(--ink-mid); }
.fc-voce.fc-zero{ opacity:.45; cursor:default; }
.menu-item.inactive, .menu-item.inactive:hover{ color:var(--ink-light); cursor:default; }

/* menu: i <button> ereditano lo stile delle vecchie voci */
.menu-item{ background:none; border:0; border-bottom:1px solid var(--border); width:100%; text-align:left;  color:var(--ink); cursor:pointer; }
.menu-item:focus-visible{ outline:2px solid var(--ink); outline-offset:-4px; }

/* focus visibile dappertutto, mai col mouse */
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
:focus:not(:focus-visible){ outline:none; }
.free-input:focus-visible{ outline-offset:-3px; }
.fc-cerca:focus-visible, .fc-anno-in:focus-visible, .ac-input:focus-visible, .adv-input:focus-visible{ outline:none; border-bottom:2px solid var(--ink); }
.fc-sort:focus-visible{ outline:2px solid var(--ink); }
.result-card:focus-visible, .archive-row:focus-visible{ outline-offset:-3px; }
.page:focus, .detail-left:focus{ outline:none; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* bottoni veri dentro liste e schede: si azzera lo stile del bottone */
.rc-title, .ar-title, .tag-item, .detail-tag, .home-cover-btn{ background:none; border:0; padding:0;  color:inherit; text-align:left; }
/* il titolo di colonna tiene il margine a destra delle celle sotto, se no la
   freccina del verso finisce attaccata alla colonna seguente */
/* Il ripristino dei bottoni aveva tolto l'imbottitura anche a queste, e la
   riga dei titoli di colonna era alta sedici pixel: si vedeva sottile e si
   premeva male. Torna quella che aveva la regola del componente, con il margine
   a destra uguale a quello delle celle sotto. */
.sort-col{ background:none; border:0; padding:14px 16px 14px 0; color:inherit; text-align:left; }
.s-act{ padding-right:0; }
/* il cursore di questi lo decide il blocco dei trasparenti più in fondo: sono
   parole da leggere, anche quando sono bottoni (28/09/2026) */
.sort-col, .home-cover-btn{ cursor:pointer; }
.sort-col.active{ font-weight:700; text-decoration:underline; text-underline-offset:4px; }   /* il grassetto era tuo, l'underline si aggiunge */
.sort-col.desc svg, .sort-col[aria-sort="descending"] svg{ transform:rotate(180deg); }
.home-cover-btn{ display:block; width:100%; height:100%; }

/* la scheda: X per chiudere, logo fermo, margini allineati, ISBN su una riga */
/* Il segno del PDF accanto al link: sta sulla riga del testo, staccato di sei
   pixel, e non è sottolineato perché la sottolineatura resta al testo. */
.pdf-segno{ display:inline-block; vertical-align:-1px; margin-left:6px; }

/* La X e il menu, uno accanto all'altro, centrati sulla stessa linea: hanno
   altezze diverse (44 e 53 px) e allineati in alto non combaciavano. */
.detail-overlay nav{ gap:18px; align-items:center; }
.detail-overlay .nav-logo{ left:var(--gutter) !important; }
.detail-close{ margin-right:6px; }
.detail-header, .detail-description{ padding-left:var(--gutter); padding-right:var(--gutter); }
@media (min-width:821px){
  .detail-bl.con-salva{ grid-template-columns:minmax(0,1.4fr) max-content minmax(0,1.2fr) max-content; column-gap:24px; }
  .detail-br{ grid-template-columns:minmax(0,1.4fr) max-content minmax(0,1fr); column-gap:24px; }
  #dIsbn{ white-space:nowrap; word-break:normal; overflow-wrap:normal; }
}

/* ricerca avanzata sul telefono: dentro lo schermo, lente visibile */
@media (max-width:820px){
  .adv-input{ min-width:0; width:100%; }
  .adv-label{ width:96px; }
  .adv-ghost{ left:116px; right:16px; }
  .adv-row{ padding:0 16px; }
}
/* area personale: indirizzi lunghi, azioni vicine, Esci toccabile */
.pr-nome-grande{ overflow-wrap:anywhere; }
.pr-col-az{ margin-left:0; font-size:13px; padding:6px 0; }
.pr-col-n + .pr-col-az{ margin-left:auto; }
#prEsci{ padding:8px 0 8px 12px; }
/* home fra 821 e 1024: la didascalia sotto la copertina, non sopra */
@media (max-width:1024px) and (min-width:821px){
  .home-right{ justify-content:flex-end; align-items:flex-end; }
  .home-cover{ margin-bottom:14px; }
  .home-cover-meta{ position:static; width:64%; max-width:460px; margin:0 28px 32px auto; text-align:left; }
}
.home-cover{ background:transparent; border:1px solid var(--border); }
/* barra dei tag: discendenti non rasati */
.tag-item{ line-height:1.5; padding:2px 0; }
.tags-list{ max-height:calc(2 * (14.5px * 1.5 + 4px) + 6px); }
/* pannelli dei filtri: conteggio accanto alla voce, campo cerca visibile */
.fc-voce{ justify-content:flex-start; gap:8px; }
.fc-voci{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); }
.fc-cerca{ border-bottom-color:var(--ink-mid); }
.ac-author{ max-width:45%; overflow:hidden; text-overflow:ellipsis; }
.ac-item{ gap:10px; }
/* footer dell'About: mail cliccabili, colonne che reggono al telefono */
.about-mail{ display:block; color:var(--ink); text-decoration:none; font-size:13px; letter-spacing:.02em; }
.about-mail:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:820px){ .about-footer-links{ flex-basis:100% !important; padding-left:0 !important; gap:18px; display:flex !important; flex-wrap:wrap; } }
/* stato vuoto della ricerca */
.ricerca-vuota{ grid-column:1/-1; padding:38px var(--gutter); border-bottom:1px solid var(--border); font-size:16px; line-height:1.6; color:var(--ink-mid); }
.ricerca-vuota strong{ color:var(--ink); }
.ricerca-vuota button{ background:none; border:0; padding:0;  color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
/* perché è qui: parola evidenziata e riga del tag */
.rc-title mark, .rc-author mark{ background:none; color:inherit; font-weight:600; }
.rc-why{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); margin-top:4px; grid-column:1/-1; }
/* suggerimenti a entità e correzione */
.ac-item.ac-ent{ font-weight:600; }
.ac-ent .ac-tipo{ font-weight:400; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mid); margin-right:8px; }
.ac-count{ margin-left:auto; color:var(--ink-mid); font-size:12.5px; }
.ac-item.ac-fix{ font-style:italic; }
/* bersagli toccabili sul telefono */
@media (hover:none){
  .mode-bar{ padding:8px var(--gutter); } .mode-btn{ padding:14px 0; }
  .fc-pill{ padding:9px 14px; }
  .fc-clear, .ac-link, .pr-col-az, #prEsci, #contactsToggle{ padding:10px 0; }
  /* 21/10/2026: il padding di sopra spostava CONTACTS 10px piu' in basso di NEWSLETTER e PRIVACY POLICY, nel piede dell'About:
     il bersaglio resta alto 36px, il testo risale e si allinea alle altre due scritte */
  #contactsToggle{ margin-top:-10px; }
  .fc-btn{ padding:14px 14px 14px 0; }
  .piu{ width:36px; height:36px; }
  .tags-toggle{ padding:12px; }
  .results-load-btn, .ac-btn, .ac-btn.pr-piccolo{ padding:14px 28px; }
  .detail-tag{ display:inline-block; padding:6px 0; }
  .menu-close, .detail-close{ padding:8px; }
  .tag-item{ padding:6px 0; }
  .tags-list{ gap:2px 16px; max-height:calc(2 * (14.5px * 1.5 + 12px) + 2px); }
  .alpha-bar button, .decade-bar button{ padding:8px 6px; }
}
/* riduci movimento: anche quello che il blocco precedente non copriva */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .fc-pannello{ animation:none; }
  .tags-list, .slide, .cm-author, .cm-title, .fc-caret, .home-cover{ transition:none; }
  .slide{ -webkit-clip-path:none; clip-path:none; -webkit-transform:none; transform:none; }
  #dTags.tags-tutti{ max-height:none; overflow:visible; }
}

/* v33b: le colonne di ordinamento dell'archivio sono bottoni veri (tastiera + aria-sort) */
button.sort-col{background:none;border-top:0;border-bottom:0;border-left:0;border-radius:0;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;}
button.sort-col:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;}

/* v33c: loghi, contatti e titoli delle schede sono bottoni veri, senza cambiare aspetto */
button.nav-logo,button.menu-logo,button.contacts-toggle{background:none;border:0;padding:0;margin:0;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;}
button.nav-logo:focus-visible,button.menu-logo:focus-visible,button.contacts-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}
.rc-open{display:block;width:100%;background:none;border:0;padding:0;margin:0;color:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none;}
.rc-open .rc-author,.rc-open .rc-title{display:block;}
.rc-open:focus-visible{outline:2px solid var(--ink);outline-offset:2px;}
.result-card:focus-visible{outline:none;}

/* ═══ v35 (9 settembre) ═══════════════════════════════════════════════════ */

/* Il campo della ricerca non si mette più dentro un riquadro nero. Aprendo la
   pagina il fuoco ci finisce da solo, e i browser disegnano il contorno anche
   quando il fuoco è arrivato per programma: si vedeva un rettangolo attorno alla
   scritta SEARCH a ogni apertura. Al suo posto la barra verticale a sinistra, che
   è già il segno grafico del campo, diventa più spessa. Nessuno spostamento di
   layout, perché è un'ombra interna e non un bordo. */
.free-input:focus-visible{ outline:none; }
.free-wrap{ transition:box-shadow .18s ease; }
/* La barra si ingrossa SOLO per chi sta navigando da tastiera (classe messa al primo
   Tab). Con il mouse, o aprendo la pagina, il campo resta com'era disegnato. */
html.tastiera .free-wrap:focus-within{ box-shadow:inset 5px 0 0 -1px var(--ink); }

/* ── pannello «salva in» ────────────────────────────────────────────────── */
.sc-pop{
  position:fixed; z-index:10000;
  min-width:236px; max-width:min(330px, calc(100vw - 16px));
  background:var(--bg); border:1px solid var(--ink);
  box-shadow:0 8px 30px rgba(0,0,0,.14);
  font-family:var(--font); color:var(--ink);
}
.sc-testa{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mid);
  padding:10px 14px 8px; border-bottom:1px solid var(--border);
}
.sc-lista{ list-style:none; margin:0; padding:0; max-height:44vh; overflow-y:auto; }
.sc-lista li{ margin:0; }
.sc-riga{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; border-bottom:1px solid var(--border);
  padding:9px 14px; cursor:pointer; text-align:left;
  font-family:var(--font); font-size:14.5px; color:var(--ink);
}
.sc-riga:hover{ background:rgba(0,0,0,.045); }
.sc-tick{ width:13px; flex-shrink:0; font-size:13px; line-height:1; }
.sc-nome{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-riga.on .sc-nome{ font-weight:700; }
.sc-n{ color:var(--ink-light); font-size:12px; flex-shrink:0; }
.sc-nuova-riga{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px; border-bottom:1px solid var(--border);
}
.sc-nuova{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font); font-size:13.5px; color:var(--ink-mid);
}
.sc-nuova:hover{ color:var(--ink); }
.sc-input{
  flex:1; min-width:0; background:none; border:0; border-bottom:1px solid var(--ink);
  font-family:var(--font); font-size:14px; color:var(--ink); padding:2px 0;
}
.sc-ok{
  background:var(--ink); color:var(--bg); border:0; cursor:pointer; flex-shrink:0;
  font-family:var(--font); font-size:11px; letter-spacing:.1em; padding:5px 9px;
}
.sc-ok[disabled]{ opacity:.5; cursor:default; }
.sc-togli{
  display:block; width:100%; background:none; border:0; border-bottom:1px solid var(--border);
  padding:9px 14px; text-align:left; cursor:pointer;
  font-family:var(--font); font-size:13px; color:var(--ink-mid);
  text-decoration:underline; text-underline-offset:3px;
}
.sc-togli:hover{ color:var(--ink); }
.sc-nota{ padding:9px 14px 11px; font-size:11.5px; line-height:1.45; color:var(--ink-mid); }
.sc-riga:focus-visible, .sc-nuova:focus-visible, .sc-togli:focus-visible,
.sc-ok:focus-visible, .sc-input:focus-visible{ outline:2px solid var(--ink); outline-offset:-2px; }

/* ── «sposta» sotto i libri dell'area personale ─────────────────────────── */
.pr-sposta{
  background:none; border:1px solid var(--ink-light); cursor:pointer;
  margin-left:auto; flex-shrink:0;
  font-family:var(--font); color:var(--ink-mid);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px;
  transition:border-color .18s ease, color .18s ease;
}
.pr-sposta:hover{ border-color:var(--ink); color:var(--ink); }

/* col dito le righe vogliono più carne */
@media (hover:none){
  .sc-riga, .sc-togli{ padding-top:13px; padding-bottom:13px; }
  .sc-nuova-riga{ padding-top:12px; padding-bottom:12px; }
  .pr-sposta{ padding:9px 12px; }
}

/* ─── v36 · 13/09/2026 ───────────────────────────────────────────────────────
   Due cose.

   1. Il numero di versione. I file col numero nel nome vengono tenuti dal browser
      per un anno con `immutable`, cioè senza nemmeno richiederli di nuovo. Io avevo
      corretto il riquadro nero del campo SEARCH dentro spine-v35.css lasciandogli
      lo stesso nome: sul server la correzione c'era, ma il browser di chi aveva già
      aperto il sito continuava a usare la copia vecchia, col riquadro. Da qui in poi
      si cambia numero a ogni modifica, che è l'unica cosa che fa arrivare il file
      nuovo a tutti.

   2. La sottolineatura di FREE RESEARCH. Quando la finestra è stretta la scritta va
      a capo, e la sottolineatura della prima riga taglia in mezzo la seconda: sembra
      una riga cancellata. Le due voci stanno su una riga sola e ci stanno anche sul
      telefono, quindi si impedisce l'andata a capo. */
.mode-btn{ white-space:nowrap; }

/* ─── v37 · 13/09/2026 · la barretta nera a sinistra del campo SEARCH ────────
   Era lì dal principio (sta in spine-v26.css di giugno) e io l'avevo difesa come
   segno d'autore. Matteo la legge come un errore, e guardandola misurata ha ragione
   lui: è un tratto nero da 2 px alto quanto tutto il campo, in una pagina dove ogni
   altra linea è un filetto grigio chiarissimo da 1 px. Non si aggancia a niente e
   nella ricerca avanzata non c'è, quindi le due modalità non si somigliavano.

   Adesso il bordo resta largo 2 px ma trasparente, così non si sposta né il testo né
   il segnaposto SEARCH, e ricompare nero SOLO per chi sta navigando da tastiera, cioè
   quando è l'unico modo per sapere dove si trova il fuoco. Col mouse, e aprendo la
   pagina, il campo è pulito.

   Chi resta visibile è il cursore del testo, la lineetta che lampeggia dove comincia
   la scrittura: quello lo disegna il browser, è il segno che il campo è pronto, e non
   si tocca. */
.free-wrap{ border-left-color:transparent; -webkit-transition:border-color .18s ease; transition:border-color .18s ease; }
html.tastiera .free-wrap:focus-within{ box-shadow:none; border-left-color:var(--ink); }

/* ─── v37 · 14/09/2026 · il puntatore, disegnato da Opale ───────────────────
   Quello di prima era una freccia ROSSA, e il rosso è l'unico colore saturo di
   tutto il sito. Questa è disegnata come se fosse una lettera del carattere del
   marchio: ho letto i contorni veri di Opale e ne ho ricavato tre regole.

   1. I tratti non sono dritti. Nel fusto della K lo spessore passa da 83 unità
      agli estremi a 71 a metà altezza, e le diagonali della A cambiano angolo
      esattamente a metà. La freccia fa lo stesso: asta e barbe si assottigliano
      nel mezzo. A questa misura l'occhio non lo legge come un difetto, lo legge
      come una cosa disegnata a mano invece che tirata col righello.
   2. I terminali si tagliano lungo l'asse più vicino: orizzontali sui tratti
      ripidi (A, K, X), verticali su quelli piatti (i bracci della E, il piede
      della L). La barba che scende a sinistra è piatta, quindi ha il taglio
      verticale: è la ragione per cui non finisce a scheggia.
   3. Gli apici sono tagliati piatti, mai a punta viva: la A in cima e la V in
      fondo finiscono con un segmento, non con un vertice. Anche la punta della
      freccia quindi è smussata, ed è il suo tratto più riconoscibile.

   L'irregolarità è circa una volta e mezza quella del font, perché a ventisei
   pixel d'altezza quella vera varrebbe un quarto di pixel e sparirebbe. È quello
   che si fa tagliando un corpo piccolo: si esagera per conservare il carattere.

   L'alone color carta non si vede sul fondo del sito, e tiene la freccia
   leggibile sopra le copertine scure: senza, sul nero spariva. Il file @2x è per
   gli schermi retina. La prima riga di ogni blocco è il ripiego per i browser
   che non conoscono image-set. */
/* ─── v50 · 28/09/2026 · cinque modi di cambiare copertina ─────────────────
   Il puntatore non cambia dalla v49. Qui cambia la home: cinque movimenti
   tirati a sorte invece di uno sempre uguale, e le parole sotto la copertina
   che si muovono sullo stesso orologio e nella stessa direzione. Il blocco sta
   più su, vicino a «.slide».
   ─── v49 · 28/09/2026 · dove ci sono lettere, il pallino si schiarisce ────
   Matteo, terza volta sullo stesso punto e con tre fotografie: le bandiere, la
   barra dell'archivio (AUTHOR TITLE PUBLISHER YEAR e le lettere sotto) e il
   piede dell'About (CONTACTS, NEWSLETTER, PRIVACY, COOKIE). Avevo diviso le
   parole in due, quelle da leggere e quelle da premere, e tenuto piene le
   seconde. È una distinzione che sta in piedi a parole e non guardando lo
   schermo: AUTHOR è una parola come le altre, e il pallino nero ci si appoggia
   sopra.
   Il criterio quindi è uno solo, e non ha eccezioni da ricordare:
     · ci sono LETTERE o una FIGURA → il pallino si schiarisce;
     · non c'è niente, è fondo      → resta pieno.
   Restano pieni solo i comandi che non hanno lettere (la X, le tre righe del
   menu, la lente, le frecce) e i bottoni che sono una forma piena o un riquadro
   (ENTRA, CREA L'ACCOUNT, LOAD MORE): lì la figura è il bottone stesso, e il
   pieno dice che si preme. E resta pieno il vuoto attorno alle parole, che è
   quello che Matteo aveva chiesto stamattina.
   ─── v48 · 28/09/2026 · lo stesso puntatore in tutte le pagine ───────────
   Matteo: «dovrebbe però funzionare così anche nelle altre pagine, tipo about e
   archive». Fin qui il trasparente esisteva in home, nella scheda del libro e a
   metà in archivio: nelle altre pagine il pallino restava pieno anche sopra le
   parole. Adesso il criterio è uno solo e vale dovunque:

     · si LEGGE   → pallino trasparente, attaccato alle lettere;
     · si PREME   → pallino pieno più grande;
     · il resto   → pallino pieno piccolo.
   I campi da riempire restano come sono da settembre, cioè pallino pieno: dentro
   il campo la barretta che lampeggia la disegna il browser, ed è quella a dire
   dove si sta scrivendo.

   Il criterio è che cosa fa l'occhio, non che cosa fa il dito: il titolo di un
   libro è un bottone ma prima di tutto è una parola, e infatti si legge. Restano
   pieni i comandi veri, cioè le voci di menu, i tasti di ordinamento, i filtri,
   ENTRA e CREA L'ACCOUNT, le frecce e le X.

   Due modi per attaccare il trasparente alle lettere, e si sceglie guardando il
   riquadro:
     · width:fit-content quando il riquadro non ha niente di suo da disegnare;
     · uno <span class="riga-testo"> dentro, quando il riquadro serve al disegno
       (un filetto, un fondo che si accende, una colonna che deve restare
       allineata) o quando è una cella di un contenitore flessibile, dove la
       larghezza la decide il contenitore e fit-content non può niente. Sono le
       celle dell'archivio e i nomi degli editori nell'About.
   Terzo caso, che non ha bisogno di niente: un riquadro che disegna già sé
   stesso, cioè ha un fondo o un filetto suo, come il messaggio d'errore rosso,
   l'avviso nero in basso e gli stati vuoti della ricerca. Lì il riquadro È il
   testo, e prenderlo tutto è giusto.
   ─── v47 · 28/09/2026 · il trasparente attaccato alle lettere, davvero ────
   Restava chiaro nel vuoto a destra del titolo, e la ragione era che dentro
   «.detail-desc-big» ci sta anche l'intestazione con autore e titolo: il cursore
   si eredita, quindi tutta quell'area, spazi vuoti compresi, prendeva il
   trasparente dal contenitore. Adesso il contenitore non ha più niente e la
   regola sta sulle righe vere: ogni paragrafo della descrizione porta il testo
   dentro uno span, che è un riquadro «in linea» e finisce dove finisce l'ultima
   lettera di ogni riga. Aggiunti anche le etichette della barra in fondo
   (PUBLISHER, YEAR, LINK, SAVE, PRODUCT SPECIFICATIONS) e il «+» per salvare,
   che Matteo vuole trasparenti come il resto di quella riga.
   ─── v46 · 28/09/2026 · il trasparente solo sulle lettere ─────────────────
   La regola stava sui CONTENITORI, per non farla sfarfallare, e così restava
   trasparente anche sul fondo vuoto attorno alle parole. Matteo: «rimane in
   overlay anche quando mi sposto sullo sfondo, lì vorrei che tornasse nero,
   deve reagire solo con i font e i libri». Adesso sta sugli elementi che SONO il
   testo, e i pochi che erano blocchi larghi quanto la colonna (titolo e autore
   della scheda, titolo e autore in home) si stringono sulle lettere con
   width:fit-content: il riquadro finisce dove finisce la parola.
   ─── v45 · 28/09/2026 · il testo è testo dovunque stia ────────────────────
   Restavano fuori tre colonne che si leggono come le altre: publisher e year in
   archivio, e le specifiche del prodotto nella scheda. Adesso tutta la barra in
   fondo alla scheda è «testo», link compresi: sono righe da leggere, non tasti,
   e l'unico tasto vero che c'è dentro, il «+» per salvare, resta cliccabile.
   ─── v44 · 28/09/2026 · tre stati, e l'overlay solo dove serve ─────────────
   Tre disegni invece di due, perché servono tre cose diverse:
     · 13 px pieno, dappertutto: dove sei;
     · 16 px pieno, sopra le cose che si premono: qui si clicca;
     · 16 px trasparente, sopra le descrizioni e i titoli dei libri: qui stai
       leggendo, e il puntatore non deve coprire le parole.
   Prima il trasparente era attaccato a tutto quello che si preme, quindi
   compariva anche sopra i tasti (dove non serve) e non compariva sopra i titoli
   in home (che non sono un link ma un blocco cliccabile). L'elenco delle due
   aree trasparenti sta poco più sotto, insieme al perché sta sui contenitori.
   ─── v42 · 27/09/2026 · il pallino che si schiarisce ───────────────────────
   Matteo: «vorrei che quando si passa sopra un testo o una copertina il pallino
   vada in overlay, ovvero si schiarisca per farmi comunque vedere quello che c'è
   sotto». Fatto con la trasparenza dell'immagine, non con un disegno che insegue
   il mouse: il puntatore resta quello del sistema, quindi non ha ritardo. A riposo
   è nero pieno e più grande di prima, 13 px invece di 11; sopra le cose cliccabili
   diventa 16 px e nero al 42 per cento, e sotto si legge. Anche l'anello di carta
   si schiarisce, se no sarebbe lui a coprire.
   ─── il pallino pieno, v41, era questo ─────────────────────────────────────
   Matteo, provato il pallino vuoto: «lo vorrei pieno e leggermente più grande».
   Adesso è pieno in tutti e due gli stati e cresce invece di riempirsi: 11 px a
   riposo, 14 sopra le cose cliccabili. Il punto che preme resta il centro, che
   però adesso è coperto: si mira con il centro del disco, che a undici pixel
   l'occhio trova da solo. Sopra una copertina scura il nero sparisce nel nero e
   resta l'anello color carta, che è il modo in cui il segno sopravvive lì.
   ─── il pallino vuoto, v40, era questo ─────────────────────────────────────
   La freccia a filo è durata un'ora: «troppo lunga e spessa», e Matteo ha chiesto
   il pallino che aveva proposto Antonio. È il cerchio della lente della home
   ridotto a nove pixel: vuoto quando non c'è niente da premere, pieno sopra le
   cose cliccabili. Il punto esatto dove si preme è il centro del cerchio, che è
   vuoto: si mira meglio che con la punta di una freccia, e non c'è nessuna
   direzione da leggere. Anello color carta sotto, come prima, se no sulle
   copertine scure sparisce. I file v5 e v6 restano sul server: i browser che
   hanno in memoria un foglio di stile vecchio continuano a chiederli.
   ─── la freccia a filo, v39, era questa ────────────────────────────────────
   Antonio: «la freccia non mecca con l'estetica del sito». Non era il colore.
   La v5 aveva il tratto spesso quattro pixel, e in un sito dove la X, il menu,
   la lente e tutti i filetti sono tirati con una riga da 1,2-1,5 px era l'unico
   segno pesante. Questa è la stessa freccia, stessa inclinazione e stesso taglio
   piatto della punta (miterlimit 1,5: l'apice viene smussato come gli apici di
   Opale), ma disegnata con la riga del sito: 1,6 px a riposo, 2,4 sopra le cose
   cliccabili, che è il modo di dire «qui si preme» senza cambiare colore.
   L'alone color carta resta: senza, sulle copertine scure la freccia sparisce.
   I file v5 restano sul server perché i browser che hanno in cache il foglio
   di stile vecchio continuano a chiederli. */
html, body{
  cursor:url('/cur-idle-v10.png') 10 10, auto;
  cursor:-webkit-image-set(url('/cur-idle-v10.png') 1x, url('/cur-idle-v10@2x.png') 2x) 10 10, auto;
  cursor:image-set(url('/cur-idle-v10.png') 1x, url('/cur-idle-v10@2x.png') 2x) 10 10, auto;
}
a, button, [role="button"],
.menu-item:not(.inactive), .result-card, .archive-row, .tag-item, .filter-btn,
.home-search-icon, #homeCover, .home-cover-meta, .cm-author, .cm-title,
.nav-logo, .menu-logo, .menu-close, .hamburger,
.mode-btn, .sort-col, .results-load-btn, .load-more-btn, .tags-toggle, .search-go,
.ac-item, .detail-bc a,
input, textarea, .free-input, .adv-input,
/* Questi quattro avevano già la manina di sistema e nessuno se n'era accorto:
   `button.nav-logo` e `button.sort-col` pesano più di `.nav-logo` e `.sort-col`
   nella cascata, quindi il loro `cursor:pointer` batteva la freccia. Valeva anche
   per quella rossa: sul logo SPINE INDEX il puntatore del sito non si è mai visto. */
button.nav-logo, button.menu-logo, button.contacts-toggle, button.sort-col{
  cursor:url('/cur-active-v10.png') 10 10, pointer;
  cursor:-webkit-image-set(url('/cur-active-v10.png') 1x, url('/cur-active-v10@2x.png') 2x) 10 10, pointer;
  cursor:image-set(url('/cur-active-v10.png') 1x, url('/cur-active-v10@2x.png') 2x) 10 10, pointer;
}


/* Nei campi da riempire il disegno è lo stesso dei comandi, ma il ripiego è
   «text» e non «pointer»: se l'immagine non arrivasse, sopra un campo di
   scrittura la manina direbbe una bugia, la barretta no. */
input, textarea, .free-input, .adv-input, .ac-input, .sc-input, .pr-nome, .fc-cerca, .fc-anno-in{
  cursor:url('/cur-active-v10.png') 10 10, text;
  cursor:-webkit-image-set(url('/cur-active-v10.png') 1x, url('/cur-active-v10@2x.png') 2x) 10 10, text;
  cursor:image-set(url('/cur-active-v10.png') 1x, url('/cur-active-v10@2x.png') 2x) 10 10, text;
}

/* ─── DOVE IL PALLINO DIVENTA TRASPARENTE (v44, 28/09/2026) ─────────────────
   Matteo: «vorrei che andasse in overlay solo sui testi di descrizione e sui
   titoli dei libri, tutto il resto no», e «adesso funziona e non funziona»,
   che è il sintomo di regole appiccicate a pezzetti di testo: passando il mouse
   si attraversano i buchi fra un pezzo e l'altro e il pallino sfarfalla. Qui la
   regola sta sul CONTENITORE, non sulle parole: dentro quell'area il pallino è
   trasparente e basta, senza buchi da attraversare.
   Le aree sono due sole, come chiesto: quello che si LEGGE (la descrizione del
   libro) e i TITOLI dei libri, dovunque compaiano — sotto la copertina in home,
   in cima alla scheda, nell'elenco dei risultati, nelle righe dell'archivio.
   Il ripiego è «auto» e non «pointer»: se l'immagine non arrivasse, sopra un
   testo la manina direbbe una bugia. */
/* le lettere, dovunque stiano: ogni <span class="riga-testo"> messo apposta
   attorno a un testo che vive dentro un riquadro più largo di lui */
.riga-testo,
/* le immagini: una copertina, una miniatura, il rettangolo colorato che sta al
   posto di una copertina che non c'è. Sopra una figura il pallino si schiarisce
   per la stessa ragione per cui si schiarisce sopra una parola: non deve
   coprire quello che stai guardando. */
img, .ar-thumb-ph,
/* le bandiere accanto al nome dell'editore: piccole, ma sono contenuto, dicono
   il paese. Stanno dentro un nome cliccabile e prima prendevano il pieno da lui */
.pub-bandiera, .pub-bandiera svg,
/* le parole che sono anche comandi: le colonne di ordinamento dell'archivio
   (il segno del verso compreso, che sta appiccicato alla parola), le lettere e i
   decenni delle due barre, le voci del menu, CONTACTS e le due voci legali del
   piede, i nomi delle collezioni, il marchio. Sono parole, e si leggono prima di
   premerle. */
.sort-col svg, .filter-btn, .alpha-bar button, .decade-bar button,
.mode-btn, .fc-btn, .fc-sort, .gate-btn, .ac-link,
.about-footer-links a, .pr-col-nome, .pr-col-az, .sc-nuova, .sc-togli,
.nav-logo, .menu-logo, button.nav-logo, button.menu-logo, button.contacts-toggle,
/* scheda del libro */
.detail-bc-lbl, .detail-bc-val, .detail-bc a, .detail-tag, #dTags, .piu,
.detail-author-name, .detail-title-name,
/* home */
.home-hero, .cm-author, .cm-title,
/* risultati della ricerca, stati vuoti e messaggi compresi */
.results-header, .rc-title, .rc-author, .rc-pub, .rc-year, .rc-why,
.results-count, .ricerca-vuota, .fc-vuoto, .error-msg,
/* i valori dentro il pannello dei filtri: sono nomi del catalogo, si leggono
   per trovare quello giusto, mentre i tasti che aprono il pannello no */
.fc-v, .fc-n, .fc-anno label,
/* barra dei tag */
.tags-label, .tag-item,
/* archivio: il titolone e il conteggio; le celle delle righe hanno il loro span */
.archive-title, .archive-count, .loading-msg,
/* about: titolo, presentazione, lettere dell'indice, piede */
.about-title, .pub-letter, .pub-paese,
.about-footer-row > span, .about-mail,
/* accesso e ricerca avanzata: anche i link dentro la nota, perché sono parole
   in mezzo a una frase e prima di premerle si leggono */
.ac-label, .ac-hint, .ac-nota, .ac-nota a, .ac-msg,
/* area personale e pannello delle collezioni */
.pr-nome-grande, .pr-email, .pr-vuoto, .pr-col-n, .sc-testa, .sc-nota, .sc-n{
  cursor:url('/cur-text-v10.png') 10 10, auto;
  cursor:-webkit-image-set(url('/cur-text-v10.png') 1x, url('/cur-text-v10@2x.png') 2x) 10 10, auto;
  cursor:image-set(url('/cur-text-v10.png') 1x, url('/cur-text-v10@2x.png') 2x) 10 10, auto;
}

/* ─── NESSUNO SFUGGE ───────────────────────────────────────────────────────
   Questi elementi hanno il cursore scritto dentro la regola del loro componente
   («cursor:pointer» sui tasti, «cursor:text» sui campi finti della ricerca
   avanzata, «cursor:default» sulle etichette). Quella regola pesa come la nostra
   perché è scritta con una classe, quindi la nostra, che parla di «button» e di
   «a», perdeva: ecco da dove spuntava la manina di sistema in mezzo ai pallini.
   Qui si rimettono a posto uno per uno, in fondo a tutto. L'unico che resta
   fuori è «option», che è la tendina disegnata dal sistema operativo e non si
   può vestire. Il caso più insidioso è il <label>: il foglio di sistema del
   browser gli mette «cursor:default» addosso, quindi un'etichetta non eredita
   mai il puntatore dal suo riquadro, e va nominata sempre. */
/* Qui restano SOLO i comandi senza lettere e i bottoni che sono una forma
   piena o un riquadro. Quelli fatti di parole (ENTRA no, è un rettangolo nero,
   ma «Ho dimenticato la password», PUBLISHER del pannello filtri, i nomi delle
   collezioni) stanno nell'elenco dei trasparenti qui sopra, e siccome pesano
   uguale vince quello che viene dopo: se li si rimette anche qui tornano pieni,
   ed è l'errore che ho fatto scrivendo la v49. */
.ac-btn, .ac-check, .rc-open, .home-cover-btn, .detail-more-btn,
.fc-caret, .fc-voce, .fc-pill, .fc-clear,
.pr-sposta, .sc-riga, .sc-ok,
/* questo pesa di più di una classe sola: sta dentro lo stato vuoto della
   ricerca, che è tutto trasparente, e senza nominarlo per intero il bottone
   «vedi tutto l'archivio» resterebbe l'unica manina della pagina */
.ricerca-vuota button{
  cursor:url('/cur-active-v10.png') 10 10, pointer;
  cursor:-webkit-image-set(url('/cur-active-v10.png') 1x, url('/cur-active-v10@2x.png') 2x) 10 10, pointer;
  cursor:image-set(url('/cur-active-v10.png') 1x, url('/cur-active-v10@2x.png') 2x) 10 10, pointer;
}
/* «.menu-item.inactive:hover» va scritto per esteso: pesa tre classi e batte
   quella sola, e succede proprio mentre il mouse ci sta sopra, cioè nell'unico
   momento in cui il cursore si vede. Un difetto che una passata a schermo non
   trova, perché senza il mouse fermo lì la regola non è attiva. */
.adv-label, .adv-row, .adv-ghost, .fc-voce.fc-zero,
.menu-item.inactive, .menu-item.inactive:hover, .sc-ok[disabled]{
  cursor:url('/cur-idle-v10.png') 10 10, default;
  cursor:-webkit-image-set(url('/cur-idle-v10.png') 1x, url('/cur-idle-v10@2x.png') 2x) 10 10, default;
  cursor:image-set(url('/cur-idle-v10.png') 1x, url('/cur-idle-v10@2x.png') 2x) 10 10, default;
}


/* Le parole lunghe non sono un guaio del solo telefono: su un tablet in
   orizzontale, o con la finestra a mezzo schermo, un titolo attaccato sfondava
   il bordo destro di centosettanta pixel. Questa riga vale a ogni misura. */
.rc-author, .rc-title, .results-header,
.detail-author-name, .detail-title-name,
.detail-desc-big .riga-testo, .detail-bc-val{ overflow-wrap:anywhere; }

/* ═══ TELEFONO: le cose che sul dito non funzionavano (v51, 28/09/2026) ══════
   Misurato su uno schermo da 375×812. Le tre cose che Matteo ha nominato (voci
   del menu, copertine tagliate, copertina della home che usciva) stanno più su,
   nelle regole che le riguardano. Qui c'è il resto di quello che la misura ha
   tirato fuori. */
@media (max-width:820px){
  /* Un bersaglio più piccolo di 44 px si sbaglia: è la misura del polpastrello,
     e viene dalle linee guida di Apple, non da un'opinione. Le colonne di
     ordinamento dell'archivio erano ALTE 13 PIXEL: la parola c'era, l'area da
     toccare no, perché il ripristino dei bottoni aveva tolto loro l'imbottitura
     verticale e nessuno l'aveva rimessa per il telefono. */
  /* La barra dei titoli di colonna non aveva margini laterali, quindi AUTHOR
     partiva appiccicato al bordo dello schermo mentre le righe sotto cominciano
     a sedici pixel: le intestazioni non stavano sopra le loro colonne. Le
     proporzioni delle colonne sono già le stesse (2,5 / 3 / 2,5 / 1,2 / 100px),
     quindi basta dare alla barra lo stesso margine delle righe e si incolonnano
     da sole. Vale anche sullo schermo grande, dove erano sfalsate di 28 px. */
  .sort-bar{ padding:0 16px; }
  /* l'ultima colonna dell'intestazione teneva cento pixel per la miniatura,
     mentre nelle righe la miniatura ne occupa cinquanta: bastava quello a far
     scivolare tutte le altre */
  .s-act{ flex:0 0 50px; }
  /* Perché le colonne coincidano davvero non basta la stessa proporzione: lo
     spazio da dividere è quello che resta TOLTI i margini interni, e nelle righe
     titolo e anno non ne avevano mentre nell'intestazione sì. Stesso margine
     dappertutto, e le due griglie combaciano. */
  .ar-title{ padding-right:16px; }
  .sort-col{ padding-top:15px; padding-bottom:15px; }
  /* scritto come «.alpha-bar button» e non come «.filter-btn» perché più in su
     c'è già una regola con quella forma, che pesa di più e vincerebbe */
  .alpha-bar button, .decade-bar button{ padding:12px 10px; }
  .tag-item{ padding:11px 0; }
  .tags-toggle{ padding:10px 0 12px; }

  /* La barra dell'alfabeto sono ventotto bottoni: andando a capo occupava 126
     pixel, un sesto dello schermo, per delle lettere. Adesso è una riga sola che
     si scorre con il dito, alta 44: si vede subito che continua perché l'ultima
     lettera è tagliata dal bordo. */
  .alpha-bar, .decade-bar{
    flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:2px 16px; scrollbar-width:none;
  }
  .alpha-bar::-webkit-scrollbar, .decade-bar::-webkit-scrollbar{ display:none; }
  .alpha-bar button, .decade-bar button{ flex:0 0 auto; }

  /* Sotto i 16 px iPhone ingrandisce la pagina da solo appena tocchi il campo,
     e poi ci resta. Sono tre, e quello del pannello «salva in» è il peggiore
     perché il pannello è fisso e ingrandendo finisce fuori schermo. */
  .pr-nome, .sc-input, .fc-cerca{ font-size:16px; }

  /* Le parole lunghe. Un titolo tedesco come «Bewerberinnen/Bewerber» o un nome
     di editore attaccato non hanno un punto dove andare a capo, e una casella
     che non può stringersi sotto la sua parola più lunga allarga tutta la riga:
     la pagina scorreva di lato di duecento pixel e dentro il telefono si
     rimpiccioliva tutto. «anywhere» dà il permesso di spezzare la parola, e
     min-width:0 toglie alla casella il diritto di non stringersi. */
  .ar-author, .ar-title, .ar-pub, .ar-year{ min-width:0; overflow-wrap:anywhere; }
  .pub-item{ overflow-wrap:anywhere; }
  /* i nomi delle collezioni: bastava una collezione chiamata senza spazi e
     tutta l'area personale scorreva di lato */
  .pr-col-nome{ min-width:0; overflow-wrap:anywhere; }

  /* L'indice delle case editrici era su due colonne: a 375 px la colonna è
     larga 164 e sedici nomi su centosessantuno andavano a capo in mezzo. Una
     colonna sola, e ci stanno tutti. */
  .pub-names{ -webkit-column-count:1; column-count:1; }

  /* Bersagli da dito: la X per uscire dall'area personale era larga ventuno
     pixel, e i tre indirizzi di posta nel piede dell'About stanno uno sull'altro
     a sedici pixel di distanza. */
  .pr-testa #prEsci{ flex:0 0 auto; padding:12px 0 12px 16px; }
  .about-mail{ padding:14px 0; }
  /* passati a una colonna, i 161 nomi sono righe larghe tutta la pagina e alte
     ventinove, incollate una all'altra: undici pixel sopra e sotto li portano a
     quarantaquattro e li staccano */
  .pub-item{ padding:11px 6px; }

  /* Il bordo alto della copertina nella scheda finiva sotto la barra del
     marchio: mancavano sette pixel, e su una copertina con la cornice si vedeva. */
  .detail-right{ padding-top:104px; }

  /* La copertina nella scheda del libro stava in poco più di due terzi della
     larghezza. Su un telefono la copertina È la scheda: tanto vale guardarla. */
  .detail-right img{ max-width:88%; max-height:52svh; }

  /* «vh» sul telefono conta anche la striscia coperta dalla barra del browser:
     la pagina diventa più alta dello schermo e scorre di sessanta pixel per
     niente, e quando la barra si nasconde salta. «svh» è la misura piccola,
     quella sempre vera. La riga con «vh» resta sopra per i browser vecchi. */
  .page{ min-height:100svh; }
  .about-wrap{ min-height:calc(100svh - 80px); }
  .sc-lista{ max-height:44svh; }
}


/* ─── PAGINA PUBLISHER (23/10/2026) ──────────────────────────────────────────────
   Il vecchio About era diviso in due: il testo a sinistra, l'indice delle case editrici a
   destra. Adesso l'indice ha una pagina sua, «Publisher», e occupa tutta la larghezza
   su quattro colonne; il testo sta in una pagina «About» nuova, con la stessa impaginazione
   di prima ma la colonna di destra vuota. Il titolo è lo stesso stile di ABOUT. */
.pub-page{
  flex:1;min-height:0;
  padding:40px 40px 0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.pub-page .about-title{margin-bottom:34px;}
.pub-page .pub-index{
  -webkit-column-count:4;column-count:4;
  -webkit-column-gap:44px;column-gap:44px;
  padding-bottom:40px;
}
/* le lettere si dividono fra le colonne come il resto: nessun gruppo resta intero e lascia buchi */
/* Un gruppo non si spezza fra due colonne: restano dei vuoti in fondo, ma una colonna che
   comincia a meta della lettera K, senza la K sopra, non si capisce. */
.pub-page .pub-group{margin-bottom:22px;-webkit-column-break-inside:avoid;break-inside:avoid;}
.pub-page .pub-letter{
  font-size:clamp(16px,1.35vw,24px);
  margin-bottom:6px;
  -webkit-column-break-after:avoid;break-after:avoid;
}
.pub-page .pub-names{-webkit-column-count:1;column-count:1;}
.pub-page .pub-item{font-size:clamp(15px,1.3vw,23px);line-height:1.35;}
.pub-page .pub-paese{font-size:clamp(9.5px,.72vw,12px);}
@media (max-width:1180px){ .pub-page .pub-index{-webkit-column-count:3;column-count:3;-webkit-column-gap:32px;column-gap:32px;} .pub-page .pub-item{font-size:clamp(15px,1.7vw,20px);} }
@media (max-width:820px){
  .pub-page{overflow:visible;padding:24px 20px 40px;}
  .pub-page .about-title{margin-bottom:26px;}
  .pub-page .pub-index{-webkit-column-count:2;column-count:2;-webkit-column-gap:22px;column-gap:22px;}
  .pub-page .pub-letter{font-size:clamp(16px,4.4vw,22px);}
  .pub-page .pub-item{font-size:clamp(15px,3.6vw,19px);}
  .pub-page .pub-paese{font-size:clamp(9.5px,2.2vw,11.5px);}
}
@media (max-width:540px){
  .pub-page .pub-index{-webkit-column-count:1;column-count:1;}
  .pub-page .pub-item{font-size:clamp(16px,4.6vw,20px);}
}
/* l'About senza indice: la colonna di destra resta vuota, ma sul telefono non deve lasciare un vuoto sotto il testo */
@media (max-width:820px){ #page-about .about-right:empty{display:none;} }


/* ─── MENU: la parola più lunga adesso è PUBLISHER, e le lettere stanno al centro della riga (23/10/2026) ──
   1) La larghezza. La formula del corpo delle voci era calcolata sulla parola più lunga, che era MY SPINE
      (4,07 volte il corpo; ARCHIVE 3,90). Con la voce PUBLISHER, in Opale maiuscolo 4,62 volte il corpo, sul
      telefono usciva dallo schermo («PUBLISHE» e un pezzo di R). Il divisore è passato da 4,05 a 4,65:
      (100vw − 52px) / 4,65 = 21,5vw − 11px. Sullo schermo grande e sul tablet vince l'altezza (15svh / 13svh)
      e non cambia niente; sul telefono il corpo scende da circa 83 a 73 px, il minimo per far stare la parola.
   2) Il centro. Con line-height:1 le maiuscole di Opale occupano il riquadro da 0,07em a 0,77em dall'alto:
      il loro centro sta 0,08em sopra il centro della riga, e con sei voci le lettere toccavano la riga di sopra
      (3 px) e lasciavano 45 px sotto. Si scende di 0,08em: in em, così vale a ogni misura. Il corpo non cambia. */
.menu-item .riga-testo{ position:relative; top:.08em; }


/* ── About: la colonna destra e vuota dal 26/10/2026 ───────────────────────────
   Finche non si decide che cosa ci va (i numeri del catalogo e i ringraziamenti sono
   l'ipotesi), la pagina non deve mostrare mezzo schermo bianco con un filetto in mezzo.
   Quando il riquadro si riempie, queste regole si disattivano da sole. */
#page-about .about-right:empty{ display:none; }
#page-about .about-split:has(.about-right:empty) .about-left{ border-right:none; }

/* ─── 27/10/2026 · TELEFONO: hamburger = misura del logo, piede dell'About a tutta riga ───────────────
   1) L'hamburger (3 linee) era alto 44 px contro i ~35 px del blocco SPINE/INDEX: ora le tre linee vanno
      dalla cima delle maiuscole di SPINE alla base di INDEX, e la misura segue il corpo del logo
      (--logo-fs = lo stesso clamp usato da .nav-logo sotto i 820 px).
   2) Nel piede dell'About CONTACTS, NEWSLETTER e PRIVACY POLICY occupano tutta la riga (CONTACTS a
      sinistra, PRIVACY POLICY/COOKIE POLICY a destra) con lo stesso spazio fra l'una e l'altra.
      Le e-mail di CONTACTS vanno su una riga a parte a tutta larghezza (prima spingevano le altre voci). */
@media (max-width:820px){
  nav{ --logo-fs:clamp(11px,2.4vh,20px); }
  .hamburger{ padding:0; margin-top:calc(var(--logo-fs) * .07); gap:calc(var(--logo-fs) * .875 - 1.5px); }
  .hamburger span{ width:calc(var(--logo-fs) * 1.75); }
  .detail-overlay .hamburger{ margin-top:0; }   /* nella scheda libro e nella pagina editore resta centrato sulla stessa linea della X */

  .about-footer-links{
    display:grid !important;
    grid-template-columns:auto auto auto !important;
    justify-content:space-between !important;
    column-gap:12px; row-gap:0;
    flex:0 0 100% !important; width:100%; padding-left:0 !important;
  }
  .about-footer-links > div:first-child{ display:contents !important; }
  .about-footer-links #contactsToggle{ grid-row:1; grid-column:1; justify-self:start; }
  .about-footer-links > span{ grid-row:1; grid-column:2; justify-self:center; }
  .about-footer-links > div:nth-child(3){ grid-row:1; grid-column:3; justify-self:end; align-items:flex-start; }
  .about-footer-links #aboutContactsRow{ grid-row:2; grid-column:1 / -1; }
}
/* schermi molto stretti (≤340 px): le tre voci del piede devono comunque stare sulla riga */
@media (max-width:340px){
  .about-footer-links{ column-gap:8px; }
  .about-footer-links a, .about-footer-links > span, .about-footer-links #contactsToggle{ font-size:12px !important; letter-spacing:.05em !important; }
}

/* ─── PUBLISHER: raggruppa per paese + barra delle iniziali, come Archive (01/11/2026) ──────────
   Antonio: «nella pagina publisher fai come nella pagina archive» e, vista la prima prova
   (due strisce, una con l'elenco dei 27 paesi): «al posto di author metti country. non mi piace
   l'elenco, e poi stessa grafica per All a b c, non a-z», poi «è necessaria la scritta publisher
   accanto a country? in archive se clicchi all li mette in ordine alfabetico».
   Quindi è il meccanismo di Archive, con la sola colonna COUNTRY (.sort-bar/.sort-col) e sotto la
   barra ALL A B C … # (.alpha-bar/.filter-btn). ALL = tutte le case editrici in ordine alfabetico,
   per nome, come prima; le lettere filtrano per l'iniziale del nome. COUNTRY accesa (grassetto e
   sottolineata) = le case editrici raggruppate sotto il paese, e le lettere diventano le iniziali
   dei paesi (U = United Kingdom + United States). Riclicca COUNTRY per tornare all'elenco per nome;
   cambiando vista si riparte da ALL. Le due righe restano ferme in cima mentre si scorre.
   Senza JavaScript l'elenco resta com'era. */
.pub-filtri{
  position:-webkit-sticky;
  position:sticky;
  top:0;z-index:50;
  background:var(--bg);
  isolation:isolate;
  margin:0 -40px;                       /* a tutta larghezza, come l'intestazione di Archive */
}
.pub-filtri .sort-bar{ margin-top:0; padding:0 40px; }       /* le colonne partono dal filo del titolo */
.pub-filtri .sort-col{ flex:0 0 auto; padding-right:44px; } /* larghe quanto la parola: qui non ci sono righe da allineare */
.pub-filtri .sort-col:last-child{ padding-right:0; }
.pub-filtri .alpha-bar{ padding:10px 33px; }                /* 40 di margine pagina − 7 di imbottitura del bottone */
.pub-filtri .alpha-bar:empty{ display:none; }
.pub-page .archive-count{ padding:12px 0; }
/* Le quattro colonne (tre sotto i 1180 px, due sotto gli 820, una sotto i 540: come l'elenco di prima)
   vanno riempite anche quando i gruppi sono pochi: con un solo paese scelto, o una sola lettera,
   l'elenco restava tutto in una colonna perché un gruppo non si spezzava. Quelli lunghi (.pub-lungo)
   ora possono passare alla colonna dopo; il titoletto resta attaccato al suo primo nome.
   Il contenitore dei nomi, che era una colonna sola, torna un blocco normale: un'impaginazione a
   colonne dentro un'altra impedisce al gruppo di spezzarsi. */
.pub-page .pub-index:not(.pub-index-ssr) .pub-names{ -webkit-column-count:auto; column-count:auto; }
.pub-page .pub-group.pub-lungo{ -webkit-column-break-inside:auto; break-inside:auto; }
/* con JavaScript l'elenco lo ridisegna publisher-v1.js (per paese o per lettera); quello scritto dal
   server resta nella pagina, nascosto: è quello che leggono Google e chi non ha JavaScript */
.pub-page .pub-index.pub-index-ssr{ display:none; }
/* nella vista per paese il paese sta nel titoletto, quindi non si ripete accanto a ogni nome */
.pub-vista-paese .pub-item .pub-bandiera,
.pub-vista-paese .pub-item .pub-paese{ display:none; }
.pub-vista-paese .pub-letter .pub-bandiera{ margin-left:.5em; }
/* La pagina scorre dentro .pub-page, che ha 40 px di imbottitura in cima: un sticky con top:0 si ferma
   a quaranta pixel dal bordo (cosi' fa Chrome) e sopra le barre resterebbe una fascia dove l'elenco
   scorre in vista. Si toglie l'imbottitura in cima e la si rimette come margine del titolo. */
@media (min-width:821px){
  .pub-page{ padding-top:0; }
  .pub-page .about-title{ margin-top:40px; }
}
@media (max-width:820px){
  .pub-filtri{ top:80px; margin:0 -20px; }       /* qui scorre la finestra, non la pagina: sotto la barra del marchio, come Archive */
  /* fra il fondo della barra del marchio (69 px a 812 di altezza, meno su schermi più bassi) e le barre
     ferme a 80 px resta una fascia dove l'elenco scorre in vista: la copre una striscia del colore della carta */
  .pub-filtri::before{ content:''; position:absolute; left:0; right:0; bottom:100%; height:28px; background:var(--bg); }
  .pub-filtri .sort-bar{ padding:0 20px; }
  .pub-filtri .sort-col{ padding-right:30px; }
  .pub-filtri .alpha-bar{ padding:2px 10px; }
}

/* ─── ABOUT: la firma del web design nel piede (01/11/2026) ─────────────────────────────────
   Antonio: «metti nella pagina About nel footer a sx Web Design © 2026 Enrica Lamia, distanzialo
   bene da spineindex»; sul desktop «lascialo com'è, è giusto»; sul telefono «a fianco di spineindex»
   (e tutto a destra).
   Desktop/tablet (> 820 px): sulla riga del piede, subito dopo @SPINEINDEX, con un vuoto largo in
   mezzo (da 40 a 120 px, il 6 % della larghezza); i link restano a destra.
   Telefono (≤ 820 px): sulla stessa riga di @SPINEINDEX, spinta tutta a destra; CONTACTS / NEWSLETTER /
   PRIVACY restano sulla riga sotto. A ≤ 400 px il corpo scende a 12 px per far stare tutto sulla riga;
   se anche così non ci sta (schermi molto stretti) scende da sola sulla riga dopo, a destra.
   È un figlio diretto della riga, quindi prende il cursore dei testi (.about-footer-row > span).
   Corpo, interlettera e maiuscolo come le altre voci. */
.about-credito{
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  margin-left:clamp(40px,6vw,120px);margin-right:auto;
}
@media (max-width:820px){
  .about-credito{ margin:0 0 0 auto; text-align:right; }
}
@media (max-width:400px){
  .about-credito{ font-size:12px; letter-spacing:.05em; }
}

/* ─── ABOUT, solo telefono: via @SPINEINDEX e «Web Design © 2026 Enrica Lamia» dal piede (02/11/2026) ───
   Antonio: «nella pagina About, solo nella versione per smartphone, togli Enrica Lamia e SpineIndex nel footer».
   Sono i due <span> figli diretti della riga del piede (@SPINEINDEX e .about-credito): sul telefono restano
   solo CONTACTS / NEWSLETTER / PRIVACY POLICY. Sopra gli 820 px nulla cambia. Stessa soglia del resto del piede. */
@media (max-width:820px){
  .about-footer-row > span{ display:none !important; }
}


/* ═══ spine-v62 — RICERCA AVANZATA a una pagina ═══════════════════════════════
   Le sette righe (AUTHOR, TITLE, PUBLISHER, YEAR, THEME, ISBN, CREDIT) riempiono
   l'altezza dello schermo, grandi come le voci del menu, con poco spazio fra una
   riga e l'altra. Riga vuota: la parola è grande e grigia. Riga compilata: la parola
   diventa una didascalia piccola in alto e il valore scritto prende il posto, in nero.
   (Il centro delle maiuscole di questo font sta 0,08 em sopra il centro della riga: lo dice anche
   «.menu-item .riga-testo{top:.08em}» qui sopra. Parola, suggerimento, testo scritto e suggerimento
   grigio scendono tutti di 0,08 em, così le lettere stanno a metà fra le due linee.)
   Il suggerimento a destra («full or partial») sta sulla linea di base della parola
   grande, non al centro. La lente è quella della home, senza barra né bordo. */
#page-advanced.active{display:flex;flex-direction:column;height:100vh;height:100svh;min-height:0;padding:80px 0 0;overflow:hidden;}
#page-advanced .mode-bar{flex:none;margin-top:0;padding:18px 28px;}
#page-advanced .adv-rows{
  flex:1 1 0;min-height:0;display:flex;flex-direction:column;
  --fs:clamp(30px,calc((100vh - 240px) / 7 * 1.1),150px);
  --fs:clamp(30px,calc((100svh - 240px) / 7 * 1.1),150px);
}
#page-advanced .adv-row{
  flex:1 1 0;min-height:0;position:relative;display:flex;align-items:center;
  padding:0 28px;border-bottom:1px solid var(--border);cursor:text;
}
#page-advanced .adv-row:hover{background:none;}
/* parola e suggerimento stanno nello stesso contenitore: align-items:baseline li mette
   sulla stessa linea di base, qualunque sia il corpo della parola */
#page-advanced .adv-head{
  position:absolute;left:28px;right:28px;top:calc(50% + var(--fs) * .08);transform:translateY(-50%);
  display:flex;justify-content:space-between;align-items:baseline;
  pointer-events:none;
  transition:top .18s ease,transform .18s ease;
}
#page-advanced .adv-label{
  width:auto;padding:0;font-size:var(--fs);line-height:1;letter-spacing:0;
  text-transform:uppercase;color:var(--ink);
  transition:font-size .18s ease,color .18s ease;
}
#page-advanced .adv-hint{
  flex:none;padding-left:24px;white-space:nowrap;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-light);
}
#page-advanced .adv-input{
  position:relative;width:100%;min-width:0;height:100%;padding:calc(var(--fs) * .16) 0 0;
  font-size:var(--fs);line-height:1;letter-spacing:0;color:var(--ink-mid);   /* il testo scritto è grigio, come la voce del menu «selezionata» */
  caret-color:var(--ink);
  background:transparent;border:0;outline:0;text-transform:uppercase;
}
#page-advanced .adv-ghost{left:28px;right:28px;top:0;bottom:0;align-items:center;padding-top:calc(var(--fs) * .16);}
/* il suggerimento di completamento è PIÙ CHIARO del testo scritto (#666): sul sito --ink-light e --ink-mid valgono entrambi #666 (contrasto 4,6:1), quindi senza un grigio apposta suggerimento e testo scritto sarebbero uguali. #838381 fa 3,1:1 sul fondo, sopra il 3:1 che si chiede al testo grande (qui 60-100 px). */
#page-advanced .adv-ghost span{font-size:var(--fs);line-height:1;letter-spacing:0;color:#838381;}
/* riga con un valore */
#page-advanced .adv-row.has-val .adv-head{top:7px;transform:none;justify-content:flex-start;}
#page-advanced .adv-row.has-val .adv-label{font-size:11.5px;letter-spacing:.1em;color:var(--ink-light);}
#page-advanced .adv-row.has-val .adv-hint{display:none;}
#page-advanced .adv-row.has-val .adv-input{padding-top:calc(20px + var(--fs) * .128);font-size:calc(var(--fs) * .8);}
#page-advanced .adv-row.has-val .adv-ghost{top:20px;padding-top:calc(var(--fs) * .128);}
#page-advanced .adv-row.has-val .adv-ghost span{font-size:calc(var(--fs) * .8);}
/* come le voci del menu: nere, grigie al passaggio del mouse e quando ci si scrive dentro */
#page-advanced .adv-row:not(.has-val):focus-within .adv-label{color:var(--ink-mid);}
@media (hover:hover){ #page-advanced .adv-row:not(.has-val):hover .adv-label{color:var(--ink-mid);} }
#page-advanced .adv-input:focus-visible{border-bottom:2px solid var(--ink);}
/* la lente: come quella della home, senza barra bianca né bordo */
#page-advanced .adv-bottom{
  position:static;flex:none;height:104px;border:0;background:transparent;z-index:auto;
  padding:0 40px 0 28px;display:flex;justify-content:flex-end;align-items:center;
}
#page-advanced .search-go{background:none;border:0;cursor:pointer;opacity:.55;display:block;transition:opacity .2s ease;}
#page-advanced .search-go:hover{opacity:1;}
#page-advanced .search-go svg{width:76px;height:76px;display:block;}
@media (max-width:820px){
  #page-advanced.active{padding-top:72px;}
  #page-advanced .mode-bar{padding:14px 16px;}
  #page-advanced .adv-rows{
    --fs:clamp(26px,calc((100vh - 216px) / 7),90px);
    --fs:clamp(26px,calc((100svh - 216px) / 7),90px);
  }
  #page-advanced .adv-row{padding:0 16px;}
  #page-advanced .adv-head{left:16px;right:16px;}
  #page-advanced .adv-hint{display:none;}
  #page-advanced .adv-ghost{left:16px;right:16px;}
  #page-advanced .adv-bottom{height:92px;padding:0 24px 0 16px;}
  #page-advanced .search-go svg{width:62px;height:62px;}
}
/* schermo troppo basso (telefono di traverso): righe a misura fissa e la pagina scorre */
@media (max-height:520px){
  #page-advanced.active{height:auto;min-height:100svh;overflow:visible;}
  #page-advanced .adv-rows{flex:none;--fs:34px;}
  #page-advanced .adv-row{flex:none;height:64px;}
  #page-advanced .adv-bottom{height:84px;}
}