:root { --carta:#faf8f2; --inchiostro:#22201c; --tenue:#6b665c; --filo:#ddd6c7; --risalto:#8a5a2b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --carta:#16150f; --inchiostro:#e8e3d8; --tenue:#98917f; --filo:#332f26; --risalto:#c89b62; } }
:root[data-theme="dark"] {
  --carta:#16150f; --inchiostro:#e8e3d8; --tenue:#98917f; --filo:#332f26; --risalto:#c89b62; }
* { box-sizing:border-box; }
body { margin:0; background:var(--carta); color:var(--inchiostro);
  font:400 19px/1.62 Georgia,"Iowan Old Style","Times New Roman",serif; }
a { color:var(--risalto); }

.testata { border-bottom:1px solid var(--filo); padding:1rem 16px; font-size:.78rem;
  letter-spacing:.09em; text-transform:uppercase; }
.testata a { color:var(--tenue); text-decoration:none; }
.testata a:hover { color:var(--risalto); }
main { padding:3rem 16px 5rem; max-width:36em; margin:0 auto; }
h1 { font-size:1.6rem; font-weight:400; line-height:1.3; margin:0 0 2rem; }
h2 { font-size:1.12rem; font-weight:400; line-height:1.4; margin:0 0 2.4rem;
  padding-bottom:.8rem; border-bottom:1px solid var(--filo);
  letter-spacing:.055em; color:var(--tenue); }
p { margin:0 0 1.15em; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
p.capolettera::first-letter { float:left; font-size:3.1em; line-height:.84;
  padding:.06em .09em 0 0; color:var(--risalto); }
.ancora { display:block; height:0; scroll-margin-top:2rem; }
.g { font-size:1.12em; }

figure { margin:2.6rem 0; }
@media (min-width:1100px) { figure { width:min(64vw,900px); margin-left:50%;
  transform:translateX(-50%); } }
figure img { width:100%; height:auto; display:block; cursor:zoom-in; background:#fff;
  border-radius:2px; }
figure.molte-2, figure.molte-3 { display:grid; gap:.8rem; }
figure.molte-2 { grid-template-columns:1fr 1fr; }
figure.molte-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:640px) { figure.molte-2, figure.molte-3 { grid-template-columns:1fr; } }
figcaption { grid-column:1/-1; font-size:.78rem; line-height:1.5; color:var(--tenue);
  margin-top:.8rem; text-align:left; }
figcaption .resto { display:none; }
figcaption.aperta .resto { display:inline; }

button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.espandi { display:block; margin-top:.35rem; font-size:.72rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--risalto); }
.richiamo { font-size:.62em; vertical-align:super; line-height:0; color:var(--risalto);
  padding:0 .12em; font-weight:700; }
.nota-aperta { border-left:2px solid var(--risalto);
  background:color-mix(in srgb,var(--risalto) 7%,transparent);
  padding:.8rem 1rem; margin:0 0 1.15em; font-size:.84rem; line-height:1.55; }
.nota-aperta b { color:var(--risalto); }
.rimando { color:inherit; text-decoration:underline; text-decoration-color:var(--filo);
  text-underline-offset:2px; }

.guida { color:var(--tenue); font-size:.92rem; margin:-1rem 0 2.6rem; text-align:left; }

.indice { list-style:none; padding:0; margin:0; }
.indice li { border-top:1px solid var(--filo); }
.indice li:last-child { border-bottom:1px solid var(--filo); }
.indice a { display:block; padding:1rem .2rem; text-decoration:none;
  color:var(--inchiostro); }
.indice a:hover { color:var(--risalto); background:color-mix(in srgb,var(--risalto) 5%,transparent); }
.indice .nome { display:block; }
.indice .dove { display:block; margin-top:.25rem; font-size:.72rem; color:var(--tenue);
  letter-spacing:.05em; text-transform:uppercase; }
/* Il frontespizio di parte fa da intestazione sopra i capitoli che introduce, ma resta
   apribile: nel cartaceo e' una pagina vera, con sopra il nome della parte. */
.indice li.parte { border:0; }
.indice li.parte a { padding:2.6rem .2rem .6rem; }
.indice li.parte .nome { font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--risalto); }
.indice li.parte .occhiello { display:block; margin-top:.5rem; color:var(--tenue);
  font-size:.88rem; line-height:1.45; }

/* La veduta di Firenze della copertina, tenuta sotto il testo: si vede che c'e', ma non
   compete con la lettura. Fissa, cosi' non scorre via alla prima rotellata. */
body.copertina::before { content:""; position:fixed; inset:0; z-index:-1;
  background:url(img/veduta.webp) center/cover no-repeat; opacity:.3; }
@media (prefers-color-scheme: dark) { body.copertina::before { opacity:.26; } }
/* Il quadro resta visibile ai lati, ma sotto il testo si posa un velo di carta: senza,
   le zone chiare del cielo si mangiano le lettere. */
.copertina main { max-width:34em; padding:3.4rem 2rem 4rem; border-radius:3px;
  background:color-mix(in srgb,var(--carta) 82%,transparent);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.copertina p { text-align:left; hyphens:none; -webkit-hyphens:none; }
.copertina h1 { font-size:2.05rem; line-height:1.18; margin-bottom:.6rem; }
.copertina .sottotitolo { font-size:1.05rem; color:var(--tenue); margin-bottom:1.6rem;
  text-align:left; }
.copertina .esergo { font-size:.95rem; color:var(--tenue); text-align:left;
  border-left:2px solid var(--filo); padding-left:1rem; margin-bottom:2.4rem; }
.copertina .vai { margin-bottom:2.8rem; text-align:left; }
.copertina .vai a { display:inline-block; padding:.7rem 1.4rem; text-decoration:none;
  border:1px solid var(--risalto); border-radius:2px; letter-spacing:.04em; }
.copertina .vai a:hover { background:var(--risalto); color:var(--carta); }
.copertina h2.chi { font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tenue); border:0; margin:3rem 0 1.4rem; padding:0; }

.avanzamento { display:flex; justify-content:space-between; gap:2rem; margin-top:4rem;
  padding-top:1.2rem; border-top:1px solid var(--filo); font-size:.72rem;
  letter-spacing:.05em; text-transform:uppercase; }
.avanzamento a { text-decoration:none; }

#lente { position:fixed; inset:0; background:#000d; display:none; place-items:center;
  padding:2rem; z-index:9; cursor:zoom-out; }
#lente.visibile { display:grid; }
#lente img { max-width:100%; max-height:100%; object-fit:contain; }