/* ============================================================
   paolofollini.com — foglio di stile condiviso
   Barra, menu, caratteri, colori, pulsanti: definiti UNA volta.
   ============================================================ */

/* --- Caratteri (self-hosted) --- */
@font-face{font-family:"CMU Serif";src:url("/paolofollini/assets/fonts/cmu-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Anton";src:url("/paolofollini/fonts/anton-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Source Serif 4";src:url("/paolofollini/fonts/sourceserif-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Source Serif 4";src:url("/paolofollini/fonts/sourceserif-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Source Serif 4";src:url("/paolofollini/fonts/sourceserif-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Inter";src:url("/paolofollini/fonts/inter-400.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Inter";src:url("/paolofollini/fonts/inter-600.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"Inter";src:url("/paolofollini/fonts/inter-700.woff2") format("woff2");font-weight:700;font-display:swap;}

/* --- Colori e token --- */
:root{
  --inchiostro:#14140F;
  --carta:#F2EDE1;
  --sabbia-asciutta:#D9CDB4;
  --sabbia-bagnata:#6B6150;
  --sabbia-scura:#4A4238;
  --giallo:#F2C300;
  --schiuma:#FFFFFF;
  --fondo-corrente:#F2EDE1; /* aggiornato dal JS insieme al body */
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --serif-testo:"Source Serif 4",Georgia,"Times New Roman",serif;
  --manifesto:"Anton","Arial Narrow","Helvetica Neue",Impact,sans-serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-padding-top:calc(10px + env(safe-area-inset-top,0px)); background:var(--carta);}
body{margin:0; font-family:var(--ui); color:var(--inchiostro); background:transparent; line-height:1.6; overflow-x:hidden; transition:color .4s ease;}

/* --- Barra superiore (uguale su tutte le pagine) --- */
.topbar{
  transition:background-color .7s ease, color .4s ease;
  position:fixed; top:0; left:0; right:0; z-index:40; color:inherit;
  display:flex; align-items:center; gap:10px;
  padding:10px 20px; padding-top:calc(10px + env(safe-area-inset-top,0px));
  min-height:66px;
  font-family:var(--ui); font-size:14px; letter-spacing:.02em;
  background-color:var(--fondo-corrente); backdrop-filter:blur(6px);
}
.topbar .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.topbar .brand img{ height:52px; width:auto; display:block; }
@media(min-width:800px){ .topbar .brand img{ height:72px; } .topbar{ min-height:84px; } }
.topbar .brand .homelink{ font-family:var(--ui); font-size:14px; white-space:nowrap; }
.topbar .spacer{ flex:1 1 auto; }
.topbar .et{ font-family:var(--ui); font-size:12px; letter-spacing:.18em; text-transform:uppercase; opacity:.65; white-space:nowrap; }

/* --- Pulsante menu (lineette) --- SEMPRE ultimo elemento, sempre visibile --- */
.menu-btn{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; cursor:pointer; padding:0; margin:0;
  background:none; border:0; flex:0 0 auto;
  color:inherit; -webkit-tap-highlight-color:transparent;
}
.menu-btn{ color:var(--inchiostro)!important; -webkit-tap-highlight-color:transparent; }
.menu-btn span{ display:block; width:24px; height:2px; background:currentColor!important; transition:transform .3s, opacity .3s; }
body.menu-open .menu-btn span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .menu-btn span:nth-child(2){ opacity:0; }
body.menu-open .menu-btn span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* --- Menu a discesa che SPINGE GIÙ la pagina --- */
.menu-panel{
  position:fixed; top:64px; left:0; right:0; z-index:39;
  top:calc(70px + env(safe-area-inset-top,0px));
  background-color:var(--fondo-corrente);
  max-height:0; overflow:hidden;
  transition:max-height .32s ease;
}
body.menu-open .menu-panel{ max-height:var(--h-menu,320px); }
.menu-panel nav{ display:flex; flex-direction:column; padding:4px 20px 16px; max-width:480px; margin:0 auto; }
.menu-panel nav a{
  font-family:var(--serif); font-size:19px; padding:10px 4px;
  text-decoration:none; color:inherit; border-bottom:1px solid rgba(20,20,15,.08);
}
.menu-panel nav a:last-child{ border-bottom:0; }
.menu-panel nav a.attiva{ color:var(--giallo); font-weight:700; }
/* su fasce chiare il giallo pieno è poco leggibile: usa bruno scuro + grassetto + filetto */
.topbar:not(.scuro) ~ .menu-panel nav a.attiva,
.menu-panel:not(.scuro) nav a.attiva{ color:#5a4d20; font-weight:700; border-bottom:2px solid var(--giallo); }

/* il contenuto scende insieme al menu (stessa durata/curva) */
.page{ background:transparent; padding-top:calc(70px + env(safe-area-inset-top,0px)); transition:padding-top .32s ease; }
  body.menu-open .page{ background:transparent; padding-top:calc(54px + env(safe-area-inset-top,0px) + var(--h-menu,320px)); }

/* --- Pulsanti --- */
.btn{
  font-family:var(--ui); font-weight:600; font-size:16px; letter-spacing:.01em;
  padding:0 24px; border-radius:2px; border:2px solid var(--inchiostro);
  text-decoration:none; display:inline-flex; align-items:center; justify-content:center; text-align:center;
  min-height:52px; line-height:1.15; box-sizing:border-box; cursor:pointer; transition:transform .1s, background .2s;
}
.btn:active{ transform:translateY(1px); }
.btn-giallo{ background:var(--giallo); color:var(--inchiostro); }
.btn-giallo:hover{ background:#ffd21f; }
.btn-vuoto{ background:transparent; color:inherit; }
.btn-vuoto:hover{ background:rgba(0,0,0,.06); }
.cta-uno{ display:flex; justify-content:center; margin-top:8px; }
.cta-uno .btn{ width:min(100%,340px); min-height:58px; font-size:17px; }

/* --- Utility --- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.nobreak{ white-space:nowrap; }
.bozza{ position:fixed; bottom:0; right:0; z-index:60; background:var(--sabbia-scura); color:var(--carta);
  font-family:var(--ui); font-size:10px; letter-spacing:.1em; padding:4px 10px; border-top-left-radius:6px; text-transform:uppercase; opacity:.85;}

/* --- sotto i 420px: "← home" diventa solo freccia, titolo più piccolo --- */
@media(max-width:420px){
  .topbar .et{ font-size:11px; letter-spacing:.12em; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important;}
}

/* lineette chiare sulle fasce scure */
body.fondo-scuro .menu-btn span{ background:#F2EDE1!important; }
body.fondo-scuro .menu-btn{ color:#F2EDE1!important; }

/* selettore lingua nella barra */
.topbar .lingue{ display:inline-flex; gap:2px; align-items:center; margin-right:6px; }
.topbar .lingue a{ font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:.06em; color:inherit; text-decoration:none; opacity:.55; padding:8px 5px; }
.topbar .lingue a.attiva{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* blocco lingue in fondo al menu: separato da una riga, allineato a destra */
.menu-lingue{ margin:8px 20px 2px; padding-top:8px; border-top:1px solid rgba(20,20,15,.15);
  display:flex; gap:9px; justify-content:flex-end; align-items:center; }
.menu-lingue a{ font-family:var(--ui); font-size:12px; font-weight:500; letter-spacing:.03em;
  color:#9a9385; text-decoration:none; padding:1px 1px; }
.menu-lingue a.attiva{ color:var(--inchiostro); font-weight:700; }

body.fondo-scuro .menu-lingue a.attiva{ color:#F2EDE1; }
body.fondo-scuro .menu-lingue a{ color:rgba(242,237,225,.5); }


/* --- fasce: ogni sezione col suo colore, transizione graduale --- */

section[data-bg="carta"]{ background:transparent; }
section[data-bg="sabbia-asciutta"]{ background:transparent; }
section[data-bg="sabbia-bagnata"]{ background:transparent; }
section[data-bg="sabbia-scura"]{ background:transparent; }
section[data-bg="inchiostro"]{ background:transparent; }

/* barra su fascia scura: testo e lineette chiari */
body.barra-scura .topbar{ color:var(--carta); }
body.barra-scura .topbar .et{ color:var(--carta); }


/* fondo continuo che sfuma (dietro tutto) — su un elemento dedicato per iOS */
#sfondo{ position:fixed; inset:0; z-index:-1; background-color:var(--carta); transition:background-color .7s ease; }

footer .footrow{ margin-bottom:2px !important; }
footer .fcopy{ margin-top:0 !important; }
footer .frase{ margin-top:18px !important; }

/* FOOTER definitivo: righe strette, copyright attaccato */
footer{ padding:28px 0 36px !important; }
footer .in{ display:block !important; padding:0 24px !important; }
footer .footrow{ display:flex !important; flex-wrap:nowrap !important; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 1px !important; }
footer .fbrand{ font-family:var(--serif); font-size:19px; }
footer .footrow nav{ display:flex !important; gap:12px !important; justify-content:flex-end; white-space:nowrap; }
footer .footrow nav a{ margin:0 !important; }
footer .fcopy{ font-size:12px; opacity:.6; margin:0 !important; }
footer .frase{ margin:16px 0 0 !important; }

/* fascia scura: lineette e X del menu diventano chiare (come il testo) */
body.barra-scura .menu-btn{ color:var(--carta); }
body.barra-scura .menu-btn span{ background:var(--carta)!important; }
body.barra-scura .menu-close{ color:var(--carta)!important; }

/* badge lingue pubblicate nel catalogo */
.badge-row{ display:flex; gap:6px; margin:8px 0 12px; }
.lbadge{ display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  border:2px solid var(--inchiostro); font-family:var(--ui); font-size:12px; font-weight:700; letter-spacing:.02em; }

/* titolo BAJÍO della home nel font della copertina (CMU Serif), non Anton */
h1.title{ font-family:"CMU Serif", Georgia, "Times New Roman", serif !important; letter-spacing:.02em; font-weight:400; line-height:1.0 !important; margin-top:0 !important; }

/* larghezze su schermo grande (fisso) */
@media(min-width:800px){
  .wrap{ max-width:820px; }
  .storia p, .inizio .pagina, .autore .box, .bio, .disclaimer{ max-width:760px; margin-left:auto; margin-right:auto; }
  .quarta-home{ max-width:1000px; margin-inline:auto; }
  section .wrap{ max-width:1200px; }
}

.numeri .n small{ white-space:nowrap; }

/* QR nella pagina autore */
a.qr-autore{ text-decoration:none; color:inherit; }
.qr-autore{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:3em auto 0; }
.qr-autore img{ width:120px; height:120px; opacity:.9; }
.qr-autore span{ font-family:var(--ui); font-size:13px; letter-spacing:.04em; opacity:.7; }

/* fisso: copertina hero un po' più grande */
@media(min-width:860px){ .cover-wrap{ width:min(95%,440px); } }
/* 5) foto Hostal tirata su: meno margine sopra, allineata al testo */
@media(min-width:800px){  }

/* foto Hostal: dentro il testo (float su grande, centrata su piccolo) */

.quarta-home .foto img{ width:100%; height:auto; display:block; border:5px solid #fff; box-shadow:0 6px 18px rgba(20,20,15,.22); transform:rotate(-1.6deg); }
@media(max-width:620px){  }

/* allineo contenuto e menu all'altezza barra sul fisso (84px) */
@media(min-width:800px){
  .page{ padding-top:calc(90px + env(safe-area-inset-top,0px)); }
  body.menu-open .page{ padding-top:calc(90px + env(safe-area-inset-top,0px) + var(--h-menu,320px)); }
  .menu-panel{ top:calc(84px + env(safe-area-inset-top,0px)); }
}
/* le pagine SENZA fasce (wrap: autore/privacy/libri/riservata) scendono sotto la barra */
.wrap{ padding-top:calc(70px + env(safe-area-inset-top,0px)); }
@media(min-width:800px){ .wrap{ padding-top:calc(90px + env(safe-area-inset-top,0px)); } }

.libro .tit{ font-family:"CMU Serif",Georgia,serif !important; }

/* blocco testo + foto affiancati (grande), impilati (piccolo) */


.quarta-home .foto img{ width:100%; height:auto; display:block; border:5px solid #fff; box-shadow:0 6px 18px rgba(20,20,15,.22); transform:rotate(-1.6deg); }

@media(max-width:700px){ .blocco-foto img{ width:82%; max-width:320px; margin:0 auto; } }

/* catalogo: genere a capo, stato su una riga */
.libro .meta{ line-height:1.4; }
.libro .meta .gen{ display:block; margin-bottom:.15em; }
.libro .meta .stato{ display:block; white-space:nowrap; }

/* catalogo: Romanzo e In uscita vicini */
.libro .meta br{ display:none; }
.libro .meta .gen{ display:block; margin:0; }
.libro .meta .stato{ display:block; margin-top:4px; white-space:nowrap; }
/* catalogo mobile: copertina a sinistra, testo+pulsante a destra nell'altezza copertina */
@media(max-width:700px){
  .libro{ grid-template-columns:40% 1fr; gap:14px; align-items:start; }
  .libro img{ width:100%; height:auto; max-width:none; }
}



/* catalogo mobile: copertina grande a sinistra, tutto nell'altezza copertina */
@media(max-width:700px){
  .libro{ grid-template-columns:128px 1fr; gap:14px; align-items:center; }
  .libro > a img, .libro img{ width:128px; height:auto; display:block; max-width:128px; }
  .libro .tit{ margin:0; line-height:1.02; font-size:30px; }
  .libro .sot{ margin:2px 0 0; line-height:1.1; font-size:.95em; }
  .libro .meta{ margin:6px 0 0; line-height:1.1; }
  .libro .meta .gen{ display:block; margin:0; font-size:.82em; }
  .libro .meta .stato{ display:block; margin:2px 0 0; font-size:.82em; }
  .libro .vai, .libro a.vai{ display:inline-block; margin:8px 0 0; }
}

/* foto Hostal — float dentro la quarta (Code msg 61) */
.quarta-home .blocco-foto{ display:contents; }
.quarta-home .foto{ float:right; width:310px; margin:2px 0 14px 40px; }
.quarta-home .foto img{ width:100%; height:auto; display:block; border:5px solid #fff; box-shadow:0 6px 18px rgba(20,20,15,.22); transform:rotate(-1.6deg); }
.quarta-home::after{ content:""; display:table; clear:both; }
@media(max-width:700px){
  .quarta-home .foto{ float:none; width:82%; max-width:320px; margin:16px auto 0; }
}

.quarta-home p{ text-align:justify; hyphens:auto; -webkit-hyphens:auto; }