/* Tre composizioni, non tre riduzioni della stessa pagina.
   <700: dock e liste; 700–1199: rail e gallerie; ≥1200: sidebar e pannelli.
   I token accessibili e i componenti di registrazione restano in styles.css. */
/* Una pagina di apertura: testo originale, indipendente dalle sorprese animate. */
.book-dedication {
  margin: 0 0 2rem; padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--linea, #ded5c8); border-radius: var(--r-m);
  background: var(--carta, #fffdf8); color: var(--inchiostro, #302e29);
  border-top: .25rem solid #a76051; min-width: 0;
}
.book-dedication h2 { margin: .6rem 0 1rem; font-size: 1.4rem; line-height: 1.25; }
.book-dedication blockquote { margin: 0; padding: 0; border: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.8; }
@media (min-width: 700px) and (max-width: 1199px) {
  .book-workspace.has-dedication { grid-template-columns: minmax(0, 1fr); }
  .book-workspace.has-dedication .book-cover { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 24px; min-height: 0; }
  .book-workspace.has-dedication .book-cover > .eyebrow,
  .book-workspace.has-dedication .book-cover > .surprise-trigger { grid-column: 1 / -1; }
  .book-workspace.has-dedication .book-cover > .ui-icon { grid-column: 1; grid-row: 2 / 4; }
  .book-workspace.has-dedication .book-cover > h2,
  .book-workspace.has-dedication .book-cover > p:not(.eyebrow) { grid-column: 2; }
}
.ui-icon { width: 26px; height: 26px; flex: 0 0 auto; vertical-align: middle; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 150; background: var(--bianco); color: var(--primario); padding: 16px; border-radius: var(--r-m); }
.skip-link:focus { top: 12px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: var(--t-xs); font-weight: 650; letter-spacing: .065em; margin: 0 0 12px; }
body.con-barra #app { padding: calc(82px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(var(--barra-h) + var(--barra-aria) + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
body.registrando .family-navigation { display: none; }
.family-brand { display: flex; align-items: center; gap: 10px; color: var(--primario-scuro); text-decoration: none; font-weight: 750; font-size: 26px; letter-spacing: -.06em; }
.family-brand > .ui-icon { width: 32px; height: 32px; }
.family-brand small { display: none; font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--inchiostro-tenue); }
.family-brand { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; width: 100%; min-height: 64px; padding: 10px 20px; border-bottom: 1px solid var(--linea); }
.barra-menu { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; background: var(--bianco); border-top: 1px solid var(--linea); padding: 8px max(4px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); box-shadow: 0 -8px 32px #203b3408; }
.barra-menu button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 64px; border: 0; border-radius: var(--r-s); padding: 6px 2px; background: none; color: var(--inchiostro-tenue); font-size: clamp(17px, 3vw, .85rem); overflow-wrap: normal; }
.barra-menu button.attiva { background: var(--primario-chiaro); color: var(--primario-scuro); }
.family-library, .family-nav-footer { display: none; }
@media (max-width: 359px) {
  .barra-menu { gap: 4px; padding-left: 0; padding-right: 0; }
  .barra-menu button { padding: 6px 0; }
}
.testata { margin-bottom: 24px; }
.testata .btn-casa { background: transparent; border-color: var(--linea); font-size: var(--t-s); }
.testata h1 { font-weight: 750; letter-spacing: -.04em; }
.btn-primario, .btn-verde { background: var(--primario); box-shadow: none; text-shadow: none; }
.btn-primario .ui-icon { margin-right: 8px; }
.carta { box-shadow: none; border-radius: var(--r-m); }
.carta-vincenzo { background: #F0F4FA; }
.domanda-testo { font-size: 1.25rem; font-weight: 550; }
.home-workspace { display: grid; gap: 20px; }
.home-workspace > * { min-width: 0; margin: 0; }
.home-heading .eyebrow { color: var(--inchiostro-tenue); letter-spacing: .035em; }
.home-heading .saluto { font-size: 1.85rem; }
.home-heading .data-oggi { font-size: var(--t-s); }
.home-hero { position: relative; display: flex; align-items: center; background: var(--primario-scuro); color: white; border-radius: var(--r-m); padding: 24px; overflow: hidden; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.home-hero .eyebrow { color: #D0E2D2; }
.home-hero h2 { font: 650 clamp(1.5rem, 3.2vw, 2.5rem)/1.15 var(--titoli); letter-spacing: -.045em; margin: 0; max-width: 16ch; }
.invito-racconto { font-size: 1rem; color: #DCE9DF; margin: 18px 0 24px; max-width: 36ch; }
.home-racconta { width: auto; max-width: 100%; min-height: 68px; padding: 14px 18px; background: #F5B697; border: 0; color: #263D33; font-size: 1.05rem; font-weight: 750; border-radius: var(--r-m); }
.home-racconta:active { background: #EBAB8D; }
.hero-art { display: none; }
.home-collection { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 10px 16px; border: 1px solid var(--linea); background: #E7EDE2; padding: 20px; border-radius: var(--r-m); color: var(--inchiostro); text-decoration: none; }
.home-collection .eyebrow { display: none; }
.home-collection h2 { margin: 0; font-size: 1rem; line-height: 1.3; }
.collection-counts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.collection-counts > div { display: flex; align-items: baseline; gap: 6px; font-size: var(--t-s); }
.collection-counts strong { font-size: 1.25rem; font-weight: 700; }
.collection-link { grid-column: 2; display: flex; align-items: center; gap: 12px; font-size: var(--t-xs); text-decoration: underline; text-underline-offset: 4px; }
.home-question { background: #F7EDDE; border-color: #E6DACA; }
.home-question .etichetta { color: #6B5030; }
/* «Di cosa ti va di parlare oggi?»: tre domande nella stessa carta, separate da un filetto. */
.home-domande .domanda-scelta { padding: var(--sp-3) 0; border-top: 1px solid var(--linea); }
.home-domande .domanda-scelta:first-of-type { border-top: 0; padding-top: var(--sp-1); }
.home-domande .domanda-scelta.da-vincenzo { background: var(--blu-chiaro); border-radius: var(--r-m); padding: var(--sp-3); border-top: 0; margin-bottom: var(--sp-2); }
.home-domande .domanda-da { margin: 0 0 4px; font-size: var(--t-s); font-weight: 600; color: var(--inchiostro-tenue); }
.home-domande .da-vincenzo .domanda-da { color: var(--blu); }
.home-domande .domanda-testo { font-size: var(--t-xl); margin-bottom: 12px; }
.domanda-altro { margin-top: 4px; }
.domanda-altro summary { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tocco); min-height: var(--tocco); padding: 0; font-size: 1.6rem; line-height: 1; color: var(--inchiostro-tenue); list-style: none; }
.domanda-altro summary::-webkit-details-marker { display: none; }
.domanda-altro .btn-quieto { display: block; }
.home-sfoglia { margin-top: 8px; }
.sezione { font-size: 1.25rem; letter-spacing: -.02em; }
.menu-voce { background: var(--bianco); border: 1px solid var(--linea); box-shadow: none; border-radius: var(--r-m); padding: 20px; min-height: 150px; justify-content: start; gap: 10px; }
.menu-voce .icona { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--primario-chiaro); color: var(--primario); border-radius: var(--r-m); }
.menu-voce .menu-nome { font-size: 1rem; }
.menu-voce .sotto { margin-top: auto; }
.home-scorciatoie { margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-scorciatoie .menu-voce { padding: 16px; }
.menu-quaderno .menu-griglia { grid-template-columns: 1fr; }
.menu-quaderno .menu-voce { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 2px 16px; min-height: 104px; }
.menu-quaderno .menu-voce .icona { grid-row: 1 / 3; }
.menu-quaderno .menu-voce .sotto { grid-column: 2; }
.piede-home { border-top: 1px solid var(--linea); padding-top: 16px; }
.ricerca-quaderno { border: 0; padding: 20px; background: #E7EDE2; }
.ricerca-controlli .scrivi-testo { background: var(--bianco); border: 1px solid #AEBEB0; }
.story-visual { display: grid; place-items: center; flex: 0 0 56px !important; width: 56px; height: 64px; border-radius: var(--r-m); background: #E5ECDD; color: var(--primario); overflow: hidden; }
.story-visual .crono-thumb { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }
.story-title { font-weight: 650; }
.recent-stories { display: grid; gap: 12px; }
.recent-stories .storia-riga { margin: 0; gap: 14px; padding: 16px; }
.story-copy .quando { font-size: var(--t-xs); margin-top: 8px; }
.archive-chapters { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 20px; }
.archive-chapters .sezione { margin-top: 0; }
.archive-chapters .griglia-temi { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
.archive-chapters .tema-carta { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px 12px; align-items: center; text-align: left; min-height: 76px; background: #F4F6F2; border: 0; border-radius: var(--r-m); padding: 16px; font-size: 1rem; }
.archive-chapters .tema-carta > .conta { grid-column: 2; margin: 0; padding: 0; text-align: left; font-size: var(--t-xs); font-weight: 500; background: none; }
.archive-chapters .tema-copertina { display: none; }
/* Una colonna che non cresce col contenuto: la riga dei video (larga quanto i suoi video, si scorre di lato) allargava
   la galleria oltre la pagina, e `#app` ne tagliava la terza foto di ogni riga (#35, iPad, cinque video). */
.photo-workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.photo-intro { padding: 24px; border-radius: var(--r-m); background: #E7EDE2; }
.photo-intro h2 { font-size: 1.4rem; margin: 0 0 12px; line-height: 1.25; }
.photo-intro p { color: var(--inchiostro-tenue); }
.photo-intro .btn-secondario { margin-bottom: 0; }
.photo-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.photo-filters button { min-height: 56px; padding: 10px 14px; font-size: var(--t-xs); border: 1px solid var(--linea); border-radius: var(--r-m); }
.photo-filters button[aria-pressed='true'] { background: var(--primario); border-color: var(--primario); color: white; }
.griglia-foto { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.griglia-foto button { border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--bianco); text-align: left; color: var(--inchiostro); }
.griglia-foto img { height: auto; aspect-ratio: 1; }
.photo-caption { display: block; padding: 12px; font-size: var(--t-xs); font-weight: 550; }
.photo-caption small { display: block; margin-top: 8px; color: var(--inchiostro-tenue); font-size: inherit; font-weight: 400; }
.griglia-volti { grid-template-columns: 1fr; gap: 12px; }
.volto { display: flex; flex-direction: row; text-align: left; justify-content: start; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--linea); border-radius: var(--r-m); background: var(--bianco); box-shadow: none; }
.volto .cerchio { width: 56px; height: 56px; font-size: 26px; flex: 0 0 auto; margin: 0; }
.person-copy { min-width: 0; }
.person-copy > span { display: block; }
.family-intro { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: #E7EDE2; padding: 20px; border-radius: var(--r-m); margin-bottom: 24px; }
.family-intro p { margin: 0; flex: 1 1 180px; }
.family-intro button { width: auto; flex: 0 1 auto; font-size: 1rem; margin: 0; }
.story-workspace { display: grid; gap: 24px; }
.story-reading, .story-companion { min-width: 0; }
.story-reading { padding: 24px; border: 1px solid var(--linea); background: var(--bianco); border-radius: var(--r-m); }
.story-testo { font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; line-height: 1.8; }
.story-reading .figura-storia:first-child { margin-top: 0; }
.story-reading .foto-storia { max-height: 460px; width: 100%; object-fit: contain; background: var(--carta); }
/* Le foto di una storia, piccole e in fila (#33): quadrate, tre per riga sul telefono, quattro sull'iPad, cinque sugli
   schermi grandi. Toccandone una si apre intera; la didascalia qui ha due righe, nel dialogo è completa. */
.storia-foto-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: var(--sp-3) 0; }
.story-reading .storia-foto-griglia:first-child { margin-top: 0; }
.story-reading .storia-foto-griglia .figura-storia { margin: 0; min-width: 0; }
.story-reading .storia-foto-griglia .foto-storia { aspect-ratio: 1; height: auto; max-height: none; object-fit: cover; border-width: 1px; }
.storia-foto-griglia figcaption { font-size: var(--t-xs); line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (min-width: 700px) { .storia-foto-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1600px) { .storia-foto-griglia { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.story-workspace { margin-top: 20px; }
.story-companion { display: flex; flex-direction: column; gap: 16px; }
.story-companion > * { margin: 0; }
.story-companion .carta { padding: 20px; }
.story-companion .btn-secondario { font-size: 1rem; }
.story-workspace .storia-persone { margin-top: 24px; }
.book-workspace { display: grid; gap: 28px; align-items: start; }
.book-cover { position: relative; display: flex; flex-direction: column; gap: 28px; min-height: 340px; padding: 32px; color: #FFF6E4; background: #244E40; border-radius: var(--r-s) var(--r-l) var(--r-l) var(--r-s); border-left: 12px solid #17392F; box-shadow: 6px 6px 0 #D7DDD1, 12px 12px 0 #E6E9DF; }
.book-cover .ui-icon { width: 70px; height: 70px; opacity: .8; }
.book-cover h2 { font: 500 clamp(1.6rem, 4vw, 2.5rem)/1.2 Georgia, serif; margin: 0; }
.book-cover .eyebrow { color: #D9E5D1; margin-bottom: 0; }
.book-cover p:last-child { margin: auto 0 0; font-size: var(--t-s); }
.book-index { background: var(--bianco); border: 1px solid var(--linea); border-radius: var(--r-m); padding: 24px; }
.book-index h2 { margin-top: 0; }
.book-index .storia-riga { display: flex; gap: 18px; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0; margin: 0; padding: 20px 0; background: none; text-align: left; }
.chapter-number { color: var(--primario); font-size: 1.4rem; font-weight: 500; }
@media (max-width: 359px) {
  body.con-barra #app { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .home-heading .eyebrow { display: none; }
  .home-hero { padding: 20px; }
  .home-hero .eyebrow { font-size: 17px; }
  .home-racconta .ui-icon { display: none; }
  .home-scorciatoie { grid-template-columns: 1fr; }
  .griglia-foto { grid-template-columns: 1fr; gap: 16px; }
  .photo-caption { padding: 10px; }
  .story-reading { padding: 18px; }
}
/* Tablet: la navigazione diventa un rail. Le storie si sfogliano come un album. */
@media (min-width: 700px) {
  body.con-barra { padding-left: var(--barra-l); }
  body.con-barra #app { padding: 32px 28px 64px; }
  #app:is([data-schermata='home'], [data-schermata='ricordi'], [data-schermata='foto'], [data-schermata='famiglia'], [data-schermata='menu'], [data-schermata='libro'], [data-schermata='storia']) { max-width: 1400px; }
  .family-navigation { position: fixed; inset: 0 auto 0 0; width: var(--barra-l); z-index: 40; background: var(--bianco); border-right: 1px solid var(--linea); padding: max(24px, env(safe-area-inset-top)) 8px max(16px, env(safe-area-inset-bottom)); overflow-y: auto; display: flex; flex-direction: column; gap: 24px; }
  .family-brand { position: static; width: auto; min-height: 56px; justify-content: center; padding: 0; border: 0; }
  .family-brand > span { display: none; }
  .family-brand > .ui-icon { width: 38px; height: 38px; }
  .barra-menu { position: static; display: flex; flex-direction: column; gap: 12px; padding: 0; border: 0; box-shadow: none; }
  .barra-menu button { min-height: 80px; font-size: 17px; padding: 10px 0; }
  .home-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; }
  .home-heading .saluto { font-size: 2.3rem; }
  .home-hero { padding: 32px; min-height: 330px; }
  .hero-copy { flex: 1 1 auto; }
  .hero-art { display: block; position: relative; flex: 0 0 28%; height: 220px; margin-left: 20px; }
  .album-sheet { position: absolute; inset: 10px 0; border-radius: var(--r-s); background: #F4DDAC; color: var(--primario-scuro); transform: rotate(8deg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 14px; box-shadow: 0 12px 20px #0002; }
  .album-sheet span { font: italic 1.1rem/1.2 Georgia, serif; }
  .album-sheet .ui-icon { width: 44px; height: 44px; }
  .album-sheet-back { transform: rotate(-9deg); background: #CFDCC4; }
  .home-collection { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .collection-counts { grid-column: 3; grid-row: 1 / 3; }
  .collection-link { grid-column: 2; }
  .menu-quaderno .menu-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-quaderno .menu-voce { display: flex; min-height: 190px; }
  .recent-stories { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .recent-stories .storia-riga { display: flex; flex-direction: column; align-items: stretch; padding: 0; overflow: hidden; border-radius: var(--r-m); }
  .recent-stories .story-visual { width: 100%; height: 170px; flex: 0 0 170px !important; border-radius: 0; background: linear-gradient(135deg, #DAE4D5, #EDF1E6); }
  .recent-stories .storia-riga:nth-child(2n) .story-visual { background: linear-gradient(135deg, #F2D7BD, #F5E9D7); }
  .recent-stories .storia-riga:nth-child(3n) .story-visual { background: linear-gradient(135deg, #D2E0E2, #EAF0EB); }
  .recent-stories .story-visual .ui-icon { width: 52px; height: 52px; }
  .recent-stories .story-copy { padding: 8px 22px 24px; }
  .recent-stories .riga-freccia { display: none; }
  .archive-chapters .griglia-temi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .griglia-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .photo-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 24px; }
  .photo-intro > h2, .photo-intro > p { grid-column: 1; }
  .photo-intro > .btn-primario { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
  .photo-intro .btn-secondario { grid-column: 1 / -1; }
  .griglia-volti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .volto { flex-direction: column; text-align: center; padding: 28px 20px; gap: 20px; }
  .volto .cerchio { width: 92px; height: 92px; font-size: 40px; }
  .book-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .book-cover { min-height: 440px; }
}
@media (min-width: 940px) {
  .home-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .home-workspace > :is(.home-heading, .home-hero, .home-collection, .home-sfoglia, .piede-home) { grid-column: 1 / -1; }
  .home-scorciatoie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* PC: barra completa, dashboard a pannelli e indice sempre accanto alle storie. */
@media (min-width: 1200px) {
  body.con-barra { padding-left: 240px; }
  body.con-barra #app { padding: 44px 36px 80px; }
  .family-navigation { width: 240px; padding: 32px 20px 24px; gap: 36px; }
  .family-brand { gap: 12px; justify-content: start; font-size: 30px; }
  .family-brand > span, .family-brand small { display: block; }
  .family-brand small { max-width: 155px; line-height: 1.4; margin-top: 4px; }
  .barra-menu { gap: 8px; }
  .barra-menu button { flex-direction: row; justify-content: start; gap: 14px; padding: 14px; min-height: 60px; font-size: var(--t-s); }
  .barra-menu .pallino { top: 2px; right: 2px; }
  .family-library, .family-nav-footer { display: flex; flex-direction: column; gap: 8px; }
  .family-library > p { font-size: var(--t-xs); color: var(--inchiostro-tenue); margin: 0 0 12px; }
  .family-library a, .family-nav-footer a { display: flex; align-items: center; gap: 14px; color: var(--inchiostro-tenue); text-decoration: none; font-size: var(--t-xs); padding: 12px; min-height: 56px; border-radius: var(--r-m); }
  .family-nav-footer { margin-top: auto; border-top: 1px solid var(--linea); padding-top: 16px; }
  .family-library a[aria-current], .family-nav-footer a[aria-current] { background: var(--primario-chiaro); color: var(--primario-scuro); font-weight: 650; }
  .home-workspace { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
  .home-workspace > .home-hero { grid-column: span 4; min-height: 340px; }
  .home-workspace > .home-collection { grid-column: span 2; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 20px; padding: 28px; }
  .home-collection > .ui-icon { width: 36px; height: 36px; }
  .home-collection .eyebrow { display: block; font-size: var(--t-xs); }
  .home-collection h2 { font-size: 1.25rem; }
  .collection-counts { gap: 24px; }
  .collection-counts > div { flex-direction: column; gap: 0; }
  .collection-counts strong { font-size: 2rem; }
  .home-workspace > .carta { grid-column: span 3; }
  .hero-art { display: none; }
  .home-sfoglia { padding: 8px 0; }
  .home-scorciatoie .menu-voce { min-height: 168px; }
  .menu-quaderno .menu-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .archivio-sfoglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .48fr); gap: 28px; align-items: start; }
  .archivio-sfoglia > .archive-chapters { margin: 0; position: sticky; top: 24px; }
  /* Sul computer i racconti e i capitoli stanno affiancati: le altre porte vanno sotto, larghe. */
  .archivio-sfoglia > .archivio-modi { grid-column: 1 / -1; order: 1; }
  .archive-chapters .griglia-temi { grid-template-columns: 1fr; }
  .archive-recent .sezione { margin-top: 0; }
  .recent-stories { gap: 20px; }
  .recent-stories .story-visual { height: 190px; flex-basis: 190px !important; }
  .photo-workspace { grid-template-columns: 290px minmax(0, 1fr); align-items: start; }
  .photo-intro { display: flex; flex-direction: column; position: sticky; top: 24px; gap: 12px; }
  .photo-intro .btn-primario { font-size: 1rem; }
  .photo-intro p { margin: 0 0 8px; }
  .photo-intro .btn-secondario { font-size: 1rem; margin-top: 4px; }
  .griglia-foto { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .griglia-volti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-workspace { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 28px; }
  .story-companion { grid-column: 2; grid-row: 1; }
  .story-reading { grid-column: 1; grid-row: 1; padding: 36px; }
  .book-workspace { grid-template-columns: minmax(320px, .85fr) minmax(0, 1fr); gap: 56px; }
  .book-cover { min-height: 540px; padding: 44px; position: sticky; top: 32px; }
}
@media (min-width: 1600px) {
  .hero-art { display: block; }
  .griglia-foto, .griglia-volti { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (hover: hover) {
  .family-library a:hover, .family-nav-footer a:hover { background: var(--primario-chiaro); color: var(--primario-scuro); }
  .home-collection:hover, .storia-riga:hover { border-color: var(--primario); }
}
@media (prefers-reduced-motion: no-preference) {
  .home-racconta { transition: background 150ms ease; }
}

/* «Sfoglia in un altro modo» in Ricordi: tre porte piccole, sotto gli ultimi racconti. */
.archivio-modi-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.archivio-modi .menu-voce { min-height: 0; }
@media (max-width: 699px) {
  .archivio-modi .menu-voce .sotto { display: none; }
  .archivio-modi .menu-voce { padding: 12px 10px; gap: 8px; }
}

/* «I tuoi video» in griglia (richiesta #39): due colonne sul telefono, quattro dal tablet.
   Il lettore nella storia resta nella colonna di lettura, un po' più basso sul PC. */
.story-reading .video-storia:first-child { margin-top: 0; }
@media (min-width: 700px) {
  .video-riga-elenco { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .video-carica { padding: 24px; }
}
@media (min-width: 1200px) {
  .video-riga-elenco { gap: 20px; }
  .story-reading .video-figura video { max-height: 60vh; }
}