/* B35 — rifinitura UX/UI della home (Claude, 6 novembre 2026).
   Strato sopra la B34: togliendo il link a questo file e a ux-b35.js
   la pagina torna identica alla B34. Testi, struttura, palette e
   illustrazioni non cambiano. */

/* 1. Leggibilità: niente testo operativo sotto i 13px. */
@media (min-width: 1151px) {
  .site-header nav > a { font-size: 13px; }
}
@media (min-width: 1360px) {
  .site-header nav > a { font-size: 14px; }
}
.reading-option small { font-size: 14px; }
.reading-option .reading-platform,
.reading-platform { font-size: 13px; }
.footer-bottom { font-size: 13px; }

/* 2. Personaggi: ritratto e scheda vicini e centrati su PC. */
@media (min-width: 1151px) {
  #characters .character-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 5vw, 80px);
  }
  #characters .character-panel > .character-art { justify-self: end; margin-inline: auto 0; }
  #characters .character-panel > .character-copy { max-width: 46ch; }
}

/* 3. Fila dei personaggi: sfumatura ai bordi quando continua,
   così si capisce che ce ne sono altri (16 in tutto). */
#characters .character-tabs { scroll-behavior: smooth; }
#characters .character-tabs[data-more-end] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 72px), transparent);
}
#characters .character-tabs[data-more-start] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px);
          mask-image: linear-gradient(to right, transparent, #000 72px);
}
#characters .character-tabs[data-more-start][data-more-end] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
          mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
@media (prefers-reduced-motion: reduce) {
  #characters .character-tabs { scroll-behavior: auto; }
}
#characters .character-tabs:focus-within,
#characters .character-tabs[data-more-start][data-more-end]:focus-within {
  -webkit-mask-image: none;
          mask-image: none;
}

/* 4. Racconto: il pulsante "Start reading" segue la domanda finale
   invece di staccarsene di quasi 60px. */
#story .synopsis-closing { margin-bottom: 0; }
#story .synopsis-body > .button { margin-top: 32px; }

/* 5. Edizioni: una sola linea tra le card promo e l'edizione francese
   (prima erano due linee a 42px di distanza). */
.edition-extras + .french-edition { border-top: 0; margin-top: 0; }

/* 6. Merchandising: la nota non tocca più le immagini. */
.merch-development-note { margin-bottom: 28px; }

/* 7. Icona "ingrandisci": su PC più discreta finché il mouse non
   arriva sull'immagine; non copre più le scritte delle tavole e delle
   card promo. Su telefono resta visibile come prima. */
@media (hover: hover) and (pointer: fine) {
  .art-button .image-expand {
    opacity: .55;
    transform: scale(.85);
    transform-origin: bottom right;
    transition: opacity .18s ease, transform .18s ease;
  }
  .art-button:hover .image-expand,
  .art-button:focus-visible .image-expand {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .art-button .image-expand { transition: none; }
}

/* 8. Autore su tablet: il nome sulla foto stava su tre righe e
   copriva il viso. */
@media (min-width: 701px) and (max-width: 1100px) {
  .creator-section figcaption {
    left: 14px;
    right: 14px;
    bottom: 12px;
    font-size: clamp(16px, 2.1vw, 21px);
    line-height: 1.25;
    text-shadow: 0 1px 8px #0009;
  }
}

/* 9. Edizioni su tablet: il prezzo resta sulla stessa riga del titolo. */
@media (min-width: 701px) and (max-width: 1100px) {
  .edition h3 { font-size: clamp(17px, 2.1vw, 22px); }
  .edition-heading > span { white-space: nowrap; }
}

/* 10. Ultimi testi sotto i 13px, soprattutto su telefono, dove il
   pulsante d'acquisto dei volumi era a 12px. */
.manga-pages figcaption p { font-size: 13px; }
.edition-language { font-size: 13px; }
@media (max-width: 700px) {
  .edition .edition-buy { font-size: 13px; gap: 8px; }
  .edition .edition-buy > .icon { width: 18px; height: 18px; }
  .edition .muted.small { font-size: 13px; }
  .french-edition p { font-size: 14px; }
  .hero-signature { font-size: 13px; }
}
@media (max-width: 379px) {
  .edition .edition-buy { font-size: 12px; }
}

@media (min-width: 701px) { .hero-art-link { font-size: 13px; } }