/* ═══════════════════════════════════════════════════════════════════════════
   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; }