/* Grand Line Chronicles · Manuale 2.0
   Su computer e tablet è un libro: pagine a due colonne che si sfogliano,
   carta avorio, inchiostro nero e rosso. Sul telefono resta una colonna che
   scorre, con la stessa carta. L'indice si apre e si chiude da un tasto
   sempre presente. */

:root{
  --carta:#efe5d2;
  --carta-alta:#f7f0e2;
  --carta-ombra:#ded1b6;
  --inchiostro:#1b1712;
  --inchiostro-tenue:#5d5344;
  --rosso:#9e2b23;
  --filo:#d9cbaf;
  --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --ui:'Manrope','Inter',system-ui,sans-serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --barra:58px;
  --gola:46px;                 /* distanza fra le due colonne della pagina */
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--carta);
  color:var(--inchiostro);
  font-family:var(--serif);
  font-size:18.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* clip e non hidden: con overflow:hidden il browser smette di «incollare»
     la testata in alto e l'indice sparisce appena si scende. */
  overflow-x:clip;
}
a{color:inherit;}

/* ---------- testata ---------- */
.man-top{
  position:sticky; top:0; z-index:40; height:var(--barra);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 clamp(12px,3vw,26px);
  background:rgba(239,229,210,.94);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--filo);
  font-family:var(--ui);
  transition:transform .22s ease;
}
/* Scendendo la testata si ritrae e lascia leggere; torna appena si risale. */
body.man-top-via .man-top{transform:translateY(-101%);}
@media (prefers-reduced-motion:reduce){
  .man-top,.man-gancio{transition:none;}
}
.man-marchio{display:flex; align-items:center; gap:9px; min-width:0; text-decoration:none;
  font-family:var(--display); font-size:15px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.man-marchio .anc{color:var(--rosso); font-size:17px;}
.man-strumenti{display:flex; align-items:center; gap:7px; min-width:0;}
.man-btn{
  font:600 11px var(--ui); letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--carta-ombra); background:var(--carta-alta); color:var(--inchiostro);
  border-radius:999px; padding:9px 15px; cursor:pointer; text-decoration:none; white-space:nowrap;
}
.man-btn:hover{background:#fff; border-color:var(--rosso); color:var(--rosso);}
.man-btn:focus-visible{outline:2px solid var(--rosso); outline-offset:2px;}
.man-btn[aria-expanded="true"]{background:var(--rosso); border-color:var(--rosso); color:var(--carta-alta);}

/* ---------- indice ---------- */
.man-indice{
  position:fixed; top:var(--barra); left:0; bottom:0; z-index:60;
  width:min(88vw,360px); padding:20px 16px 40px;
  background:var(--carta-alta); border-right:1px solid var(--filo);
  box-shadow:14px 0 40px rgba(70,52,20,.14);
  overflow:auto; overscroll-behavior:contain; font-family:var(--ui);
  transform:translateX(-102%); transition:transform .26s ease;
}
body.man-indice-aperto .man-indice{transform:none;}
.man-velo{position:fixed; inset:var(--barra) 0 0; z-index:55; background:rgba(40,30,12,.28);
  opacity:0; pointer-events:none; transition:opacity .26s ease;}
body.man-indice-aperto .man-velo{opacity:1; pointer-events:auto;}
.man-indice h2{font:600 10px var(--ui); letter-spacing:.2em; text-transform:uppercase; color:var(--inchiostro-tenue); margin:0 0 12px;}
.man-cerca{width:100%; font:400 13px var(--ui); color:var(--inchiostro);
  background:var(--carta); border:1px solid var(--carta-ombra); border-radius:999px; padding:10px 14px; margin-bottom:14px;}
.man-cerca:focus{outline:2px solid var(--rosso); outline-offset:1px;}
.man-indice ol{list-style:none; margin:0; padding:0;}
.man-i-cap{margin-bottom:4px;}
.man-i-cap>a{display:flex; gap:9px; align-items:baseline; text-decoration:none; padding:7px 10px; border-radius:8px;
  font-family:var(--display); font-size:17px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; line-height:1.15;}
.man-i-cap>a .n{font-family:var(--ui); font-size:11px; color:var(--rosso); flex:none; min-width:18px;}
.man-i-cap>a:hover{background:var(--carta);}
.man-i-sez{list-style:none; margin:0 0 10px; padding:0 0 0 28px;}
.man-i-sez a{display:block; text-decoration:none; font-size:12.5px; color:var(--inchiostro-tenue);
  padding:5px 9px; border-radius:6px; border-left:1px solid var(--filo);}
.man-i-sez a:hover{color:var(--inchiostro); background:var(--carta);}
.man-indice a.qui{background:var(--rosso); color:var(--carta-alta); border-left-color:var(--rosso);}
.man-indice a.qui .n{color:var(--carta-alta);}
.man-vuoto{font-size:12.5px; color:var(--inchiostro-tenue); padding:6px 9px;}

/* ---------- tasto dell'indice sempre a portata ---------- */
.man-gancio{
  position:fixed; z-index:50; left:clamp(12px,2vw,22px); bottom:clamp(14px,3vh,26px);
  display:flex; align-items:center; gap:8px;
  height:44px; padding:0 15px 0 13px;
  border:1px solid var(--carta-ombra); border-radius:999px;
  background:rgba(247,240,226,.92); color:var(--inchiostro);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(70,52,20,.18);
  font:600 11px var(--ui); letter-spacing:.1em; text-transform:uppercase;
  cursor:pointer; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, background .16s, color .16s;
}
.man-gancio .g-segno{font-size:15px; line-height:1;}
body.man-top-via .man-gancio{opacity:1; transform:none; pointer-events:auto;}
body.man-indice-aperto .man-gancio{opacity:0; transform:translateY(10px); pointer-events:none;}
.man-gancio:hover{background:var(--rosso); color:var(--carta-alta); border-color:var(--rosso);}
.man-gancio:focus-visible{outline:2px solid var(--rosso); outline-offset:3px;}

/* ---------- il libro ---------- */
.man-scena{position:relative; max-width:1600px; margin:0 auto; padding:0 clamp(12px,3vw,30px);}
.man-libro{position:relative;}
.man-foglio{font-size:18.5px; padding:26px 0 40px;}
.man-sfoglia,.man-piede{display:none;}

/* frontespizio */
.man-frontespizio{padding:10px 0 24px; border-bottom:2px solid var(--rosso); margin-bottom:20px;}
.man-frontespizio .occhiello{font:700 10px var(--ui); letter-spacing:.24em; text-transform:uppercase; color:var(--rosso); margin:0 0 10px;}
.man-frontespizio h1{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(38px,9vw,74px); line-height:.92; letter-spacing:.02em; margin:0;}
.man-frontespizio .sotto{font-family:var(--serif); font-style:italic; color:var(--inchiostro-tenue); margin:12px 0 0;}

/* capitoli e sezioni */
.man-cap{padding:0 0 6px;}
.man-cap-h{margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--filo);}
.man-cap-n{display:block; font:700 10px var(--ui); letter-spacing:.22em; text-transform:uppercase; color:var(--rosso); margin-bottom:6px;}
.man-cap-h h1{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,5vw,46px); line-height:1; letter-spacing:.02em; margin:0;}
h2.man-sez{display:flex; gap:10px; align-items:baseline; break-after:avoid;
  font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:22px; line-height:1.12; margin:24px 0 10px; padding-top:10px; border-top:1px solid var(--filo);
  scroll-margin-top:calc(var(--barra) + 14px);}
h2.man-sez .man-sez-n{font-family:var(--ui); font-size:11.5px; font-weight:700; color:var(--rosso); flex:none;}
h3.man-sub{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:17.5px; line-height:1.14; margin:18px 0 6px; break-after:avoid;}
h3.man-sub b{font-weight:inherit;}
h4.man-lab{font:700 10px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--rosso); margin:14px 0 4px; break-after:avoid;}
h4.man-lab b{font-weight:inherit;}
.man-foglio p{margin:0 0 11px;}
/* frasi che il documento aveva marcato come titolo ma che sono testo guida */
.man-guida{margin:14px 0 6px;}
.man-guida b{color:#000;}
.man-foglio b{color:#000; font-weight:700;}
.man-foglio :where(h1,h2,h3,h4,p,li,td,th){overflow-wrap:anywhere;}

/* elenchi */
.man-punti,.man-elenco{margin:0 0 12px; padding:0; list-style:none;}
.man-punti li,.man-elenco li{position:relative; padding:2px 0 2px 20px;}
.man-punti li::before,.man-elenco li::before{content:""; position:absolute; left:5px; top:.82em;
  width:5px; height:5px; border-radius:50%; background:var(--rosso);}
.man-elenco{background:var(--carta-alta); border:1px solid var(--filo); border-radius:6px;
  padding:9px 12px; margin:2px 0 14px; font-family:var(--ui); font-size:14px; line-height:1.5; break-inside:avoid;}
.man-elenco li{padding-left:18px;}

/* coppie «X → Y» */
.man-mappa{margin:4px 0 14px; font-family:var(--ui); break-inside:avoid;}
.man-riga{display:flex; align-items:baseline; gap:8px; justify-content:space-between;
  border-bottom:1px dotted var(--carta-ombra); padding:6px 2px; font-size:13.5px;}
.man-riga:last-child{border-bottom:0;}
.man-riga span{color:var(--inchiostro-tenue);}
.man-freccia{color:var(--rosso); font-style:normal; flex:none;}
.man-riga b{color:#000; font-weight:700; text-align:right;}

/* tabelle */
.man-tab-wrap{margin:6px 0 16px; max-width:100%; overflow-x:auto; break-inside:avoid;}
.man-tab{width:100%; border-collapse:collapse; font-family:var(--ui); font-size:13.5px; line-height:1.45;
  background:var(--carta-alta); border:1px solid var(--carta-ombra);}
.man-tab th{text-align:left; font:700 9.5px var(--ui); letter-spacing:.12em; text-transform:uppercase;
  color:var(--carta-alta); background:var(--rosso); padding:8px 10px;}
.man-tab td{padding:8px 10px; border-bottom:1px solid var(--filo); vertical-align:top;}
.man-tab tr:last-child td{border-bottom:0;}
.man-tab tbody tr:nth-child(even){background:rgba(158,43,35,.045);}
.man-tab td b{color:#000;}

.man-somm{display:none;}
.man-fine{display:block; height:1px;}

/* ---------- da tablet in su: il foglio che scorre ----------
   Una sola colonna che continua scendendo: il foglio riempie lo spazio invece
   di essere una paginetta rimpicciolita. Le due colonne restano dove hanno
   senso, cioè sulla carta stampata. */
@media(min-width:901px){
  .man-scena{padding:0 clamp(16px,4vw,40px) 70px;}
  .man-libro{
    max-width:1080px; margin:0 auto;
    background:var(--carta-alta); border:1px solid var(--carta-ombra);
    border-left:0; border-right:0;
    box-shadow:0 0 44px rgba(70,52,20,.10);
    padding:clamp(26px,3vw,54px) clamp(30px,4vw,72px) 60px;
  }
  /* La riga resta della lunghezza giusta per leggere: il foglio è largo, il
     testo tiene i suoi margini come su carta. */
  .man-foglio{font-size:17px; line-height:1.62; padding:0; max-width:82ch; margin:0 auto;}
  .man-frontespizio{padding:16px 0 30px;}
  .man-frontespizio h1{font-size:clamp(46px,5.4vw,78px);}
  .man-cap{padding:34px 0 8px;}
  .man-cap+.man-cap{border-top:1px solid var(--filo); margin-top:26px;}
  .man-cap-h h1{font-size:clamp(30px,3.4vw,44px);}
  h2.man-sez{font-size:clamp(21px,2.1vw,26px);}
  h3.man-sub{font-size:18px;}
  h4.man-lab{font-size:10px;}
  .man-tab{font-size:14px;}
  .man-elenco,.man-riga{font-size:14.5px;}
}

/* ---------- telefono: una colonna che scorre ---------- */
@media(max-width:900px){
  body{font-size:17.5px; line-height:1.6;}
  .man-scena{padding:0 16px 50px;}
  .man-libro{background:none; border:0; box-shadow:none; padding:0;}
  .man-foglio{font-size:17px; line-height:1.6; padding-top:16px; max-width:min(70ch,100%); margin:0 auto;}
  .man-cap{padding-top:22px;}
  .man-cap+.man-cap{border-top:1px solid var(--filo);}
  .man-frontespizio h1{font-size:clamp(34px,11vw,52px);}
  h2.man-sez{font-size:19.5px; flex-wrap:wrap; gap:8px;}
}
@media(max-width:470px){
  .man-marchio span:not(.anc){display:none;}
  .man-btn .man-etichetta{display:none;}
  #man-apri-indice .man-etichetta{display:inline;}
  .man-btn{padding:9px 12px; font-size:13px; line-height:1;}
}
@media(prefers-reduced-motion:reduce){
  .man-indice,.man-foglio,.man-scena{transition:none;}
}

/* ---------- stampa / PDF ---------- */
@page{size:A4; margin:18mm 16mm 20mm;}
@media print{
  html,body{background:#fff !important; color:#14110d !important; font-size:10.4pt; line-height:1.45; overflow:visible !important;}
  .man-top,.man-indice,.man-velo,.man-sfoglia,.man-piede,.man-gancio,.glc-bg,#manlock{display:none !important;}
  .man-scena{display:block !important; height:auto !important; padding:0 !important; max-width:none;}
  .man-libro{overflow:visible !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; background:none !important;}
  .man-libro::after{display:none;}
  .man-foglio{
    height:auto !important; transform:none !important; transition:none !important;
    column-count:1 !important; padding:0 !important; max-width:none !important; font-size:10.4pt;
  }
  .man-foglio>.man-cap,.man-foglio>.man-frontespizio{display:block !important;}
  .man-frontespizio{break-after:page; page-break-after:always; text-align:center;
    min-height:0; display:block; padding:46mm 0 0; border-bottom:0;}
  .man-frontespizio h1{font-size:40pt;}
  .man-somm{display:block; break-after:page; page-break-after:always;}
  .man-somm h2{font-family:var(--display); font-size:19pt; text-transform:uppercase; letter-spacing:.05em; margin:0 0 8mm;}
  .man-somm ol{list-style:none; margin:0; padding:0; font-family:var(--ui); font-size:9.5pt; columns:2; column-gap:10mm;}
  .man-somm .s-cap{font-weight:700; margin:4mm 0 1mm; text-transform:uppercase; letter-spacing:.05em; break-after:avoid;}
  .man-somm .s-sez{margin:0 0 .6mm 6mm; color:#4a4034;}
  .man-somm .s-sez b{color:var(--rosso); font-weight:600; margin-right:4px;}
  .man-cap{break-before:page; page-break-before:always;}
  .man-cap:first-of-type{break-before:avoid; page-break-before:auto;}
  .man-cap-corpo{columns:2; column-gap:9mm;}
  .man-cap-h h1{font-size:24pt;}
  h2.man-sez{font-size:14pt; break-after:avoid;}
  p,li{orphans:3; widows:3;}
  .man-tab-wrap,.man-elenco,.man-mappa{break-inside:avoid;}
  .man-tab{font-size:8.6pt;}
  .man-fine{display:none;}
}