/* ═══════════════════════════════════════════════════════════════════════════
   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;}
}
.slide{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  opacity:0;
  -webkit-transition:opacity 1.2s ease;
          transition:opacity 1.2s ease;
}
.slide.on{opacity:1;}
.slide img,.home-cover img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.cm-author,.cm-title{
  -webkit-transition:opacity .5s ease;
          transition:opacity .5s ease;
}
.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{
  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;}
.ar-act{
  flex:0 0 100px;
  display:flex;align-items:center;justify-content:flex-end;
}
.ar-thumb{
  width:48px;height:64px;
  object-fit:cover;display:block;
}
.ar-thumb.land{ width:auto;height:64px;max-width:96px;object-fit:contain; }
.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;}
.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;}
.menu-item{
  font-size:clamp(64px,15vh,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);}
.menu-close{
  background:none;border:none;cursor:pointer;
  padding:0;opacity:.7;
  -webkit-transition:opacity .2s ease;
          transition:opacity .2s ease;
}
.menu-close:hover{opacity:1;}

/* ─── 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 */

/* ─── 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 */
  .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;}
  .menu-item{font-size:clamp(40px,9vh,86px) !important;padding-left:16px;padding-right:16px;}

  /* — 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:72%;max-height:46vh;}
  .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 */

  .menu-item{font-size:clamp(34px,8.2vh,64px) !important;}
}

/* ===== SMARTPHONE PICCOLO (≤360px) ====================================== */
@media (max-width:360px){
  .home-hero{font-size:clamp(44px,14vw,64px) !important;}
  .free-input{font-size:clamp(30px,11vw,48px);}
  .menu-item{font-size:clamp(30px,7.6vh,52px) !important;}
  .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:38px;height:auto;max-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; }
@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; }
  .home-right{ min-height:0; justify-content:flex-start !important; align-items:center;
               padding:26px 20px 24px !important; }
  .home-cover{ width:auto !important; height:min(48svh, 92vw); aspect-ratio:var(--cover-ar,3/4); max-width:92vw;
               max-width:none; 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). ── */
html, body{ cursor:url('/cur-idle-v3.png') 10 0, auto; }
a, button, [role="button"],
.menu-item:not(.inactive), .result-card, .archive-row, .tag-item, .filter-btn,
.home-search-icon, #homeCover, .nav-logo, .menu-logo, .menu-close, .hamburger,
.mode-btn, .sort-col, .results-load-btn, .load-more-btn, .tags-toggle, .search-go,
.alpha-bar button, .decade-bar button, .ac-item, .detail-bc a,
input, textarea, .free-input, .adv-input{
  cursor:url('/cur-active-v3.png') 10 0, pointer;
}

/* ─── 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 */
#homeCover, .home-cover-meta, .cm-author, .cm-title{
  cursor: url('/cur-active-v3.png') 10 0, pointer;
}
#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; }
.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, .sort-col, .detail-tag, .home-cover-btn{ background:none; border:0; padding:0;  color:inherit; text-align:left; 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 */
.detail-overlay nav{ gap:18px; }
.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; }
  .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{ transition: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;}