/* L’edizione come libro d’arte: fogli a due pagine con la piega al centro, testatine e folio,
   tavole con didascalia, frontespizio, epigrafe, colophon e carta di guardia. */

#scena-edizione { background: var(--carta); }

/* due colonne uguali qualunque cosa contengano: la piega cade sempre al centro */
.foglio {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: max(100svh, 680px);
}
.foglio::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 9vw; transform: translateX(-50%);
  pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(28, 27, 34, .035) 34%, rgba(28, 27, 34, .11) 50%, rgba(28, 27, 34, .035) 66%, transparent);
}

.pagina {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  padding: calc(var(--testata-h) + 4.4rem) 5vw 6rem 7vw;
  background-color: var(--carta); background-image: var(--grana); background-size: 240px 240px;
  color: var(--inchiostro);
}
.pagina.recto { padding-left: 5vw; padding-right: 7vw; }
.pagina.tinta { background-color: var(--tela); }
.pagina[data-tono="chiaro"] { color: var(--chiaro); }
.pagina-corpo { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; }
.testatina { position: absolute; top: calc(var(--testata-h) + 1.4rem); }
.verso .testatina { left: 7vw; }
.recto .testatina { right: 7vw; }
.folio { position: absolute; bottom: 2.6rem; font-size: 1rem; font-variant-numeric: oldstyle-nums; }
.verso .folio { left: 7vw; }
.recto .folio { right: 7vw; }

/* ---------- Tavole ---------- */
.tavola { display: flex; flex-direction: column; align-items: flex-start; width: min-content; max-width: 100%; }
.tavola-carta { width: max-content; max-width: 100%; }
.pagina .tavola .foto {
  width: min(38vw, var(--max-w), calc(min(100svh - var(--testata-h) - 15rem, var(--max-h)) * var(--rapporto)));
}
.pagina .tavola.media .foto {
  width: min(27vw, var(--max-w), calc(min(100svh - var(--testata-h) - 21rem, var(--max-h)) * var(--rapporto)));
}
/* posa: la tavola pende dalla riga alta del foglio, o siede sul margine basso */
.posa-alto .pagina-corpo { justify-content: flex-start; padding-top: 3vh; }
.posa-basso .pagina-corpo { justify-content: flex-end; padding-bottom: 1.5vh; }
.posa-alto .pagina-corpo, .posa-basso .pagina-corpo { align-items: flex-start; }
.recto.posa-alto .pagina-corpo, .recto.posa-basso .pagina-corpo { align-items: flex-end; }
.tavola figcaption, .tavola-doppia figcaption {
  margin-top: 1rem; max-width: 34rem; font-size: .98rem; line-height: 1.45;
}
.tav { margin-right: .5em; }
.dida { font-style: italic; }
.nota { display: block; margin-top: .3rem; }
.nota cite { font-style: normal; font-family: var(--f-lap); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; }
.credito { display: block; margin-top: .3rem; font-size: .9rem; }
.tavola.incollata { align-items: center; }
.tavola.incollata figcaption { text-align: center; }

/* Tavola doppia: a tutta larghezza, sopra la piega */
.foglio.doppia {
  display: block; min-height: 0; padding: var(--testata-h) 0 5.5rem;
  background: var(--carta) var(--grana); background-size: 240px 240px;
}
.foglio.doppia::after { display: none; }
.tavola-doppia .foto { width: 100%; height: min(calc(100svh - var(--testata-h)), calc(100vw / var(--rapporto))); aspect-ratio: auto; }
.tavola-doppia figcaption { margin: 1.1rem 0 0 7vw; max-width: 40rem; }
.foglio.doppia .folio { bottom: 2rem; }
.foglio.doppia .folio-sx { left: 7vw; }
.foglio.doppia .folio-dx { right: 7vw; }

/* Quartina: piccole tavole a misura dei loro pixel, sulla stessa riga alta nelle due pagine */
.pagina-quartina .pagina-corpo { justify-content: flex-start; padding-top: 4vh; }
.quartina { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 2rem; align-items: start; width: min(100%, 36rem); }
.quartina .tavola .foto { width: min(16.5rem, 16.5vw, var(--max-w)); }
.quartina figcaption { font-size: .9rem; }

/* Dettaglio e particolare: piccola tavola applicata, col suo titolo sopra */
.pagina-dettaglio .tavola-dettaglio .tavola-carta { padding: clamp(8px, .8vw, 12px); }
.pagina-dettaglio .tavola .foto { width: min(34vw, var(--max-w)); }
.pagina-dettaglio .tavola .foto-dettaglio { width: min(34vw, var(--w)); }
.dettaglio-titolo {
  align-self: center; margin-bottom: 2.2rem; font-family: var(--f-lap); font-size: .85rem; letter-spacing: .34em;
  text-transform: uppercase; margin-right: -.34em; white-space: nowrap;
}

/* ---------- Frontespizio ---------- */
.frontespizio .tavola .foto { width: min(36vw, var(--max-w), calc(min(100svh - var(--testata-h) - 13rem, var(--max-h), 780px) * var(--rapporto))); }
/* il titolo si misura sulla pagina, come in copertina: la riga più lunga non supera la giustezza */
.fr { align-self: stretch; container-type: inline-size; display: flex; flex-direction: column; align-items: center; text-align: center; }
.fr-numero { font-family: var(--f-lap); font-size: .8rem; letter-spacing: .46em; text-transform: uppercase; color: var(--accento); margin: 0 -.46em 2.2rem 0; }
.fr-titolo {
  font-family: var(--f-lap); text-transform: uppercase; letter-spacing: .1em; line-height: 1.08;
  font-size: min(4.6rem, calc(100cqi / (var(--em) + .5))); margin: 0 0 2rem;
}
.fr-riga { margin-right: -.1em; }
.fr-luogo { font-style: italic; font-size: 1.35rem; }
.fr-anno { font-family: var(--f-lap); letter-spacing: .32em; font-size: .95rem; margin: .5rem -.32em 0 0; }
.fr-anno-testo { font-family: var(--f-testo); letter-spacing: 0; font-size: 1.1rem; font-style: italic; margin: .2rem 0 0; }
.fr-intervento { margin-top: 2.4rem; font-size: 1.05rem; }
.fr-marchio {
  display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: 4.5rem;
  font-family: var(--f-lap); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase;
}
.fr-marchio .marca { font-size: 1.15rem; letter-spacing: 0; text-transform: none; margin-bottom: .3rem; }
.fr-sedi { font-size: .75rem; letter-spacing: .24em; }

/* ---------- Epigrafe e testo ---------- */
.pagina-epigrafe .pagina-corpo { justify-content: flex-start; align-items: flex-end; padding-top: 18svh; }
.epigrafe { max-width: min(100%, 25rem); text-align: right; }
.epigrafe p { font-style: italic; font-size: clamp(1.7rem, 2.5vw, 2.4rem); line-height: 1.28; }
.epigrafe.lunga { max-width: min(100%, 26rem); }
.epigrafe.lunga p { font-size: clamp(1.4rem, 1.85vw, 1.8rem); line-height: 1.34; }
.epigrafe footer {
  margin-top: 1.4rem; font-family: var(--f-lap); font-size: .75rem; letter-spacing: .3em; text-transform: uppercase;
}
.testo { max-width: 31em; }
.testo p { font-size: 1.25rem; line-height: 1.62; }
.testo p + p { text-indent: 1.6em; }
.capolettera::first-letter {
  float: left; font-family: var(--f-lap); font-size: 3.32em; line-height: .8; margin: .1em .1em 0 -.03em;
  color: var(--accento);
}
.recto .pagina-corpo:has(.testo) { align-items: flex-start; }

/* ---------- Colophon e carta di guardia ---------- */
.colophon { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 30rem; }
.colophon .marca { font-size: 1.1rem; margin-bottom: 1.6rem; }
.colophon-titolo { font-family: var(--f-lap); font-size: .82rem; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 2.2rem; }
.colophon-voci { display: grid; gap: 1.15rem; margin-bottom: 2.2rem; }
.colophon-voci dt { font-family: var(--f-lap); font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; }
.colophon-voci dd { font-size: 1.08rem; line-height: 1.45; margin-top: .2rem; }
.colophon-nota, .colophon-chiusa { font-size: .95rem; font-style: italic; line-height: 1.5; }
.colophon-chiusa:first-of-type { margin-top: 1.4rem; }

.risguardo { background-image: var(--motivo), var(--grana); background-size: auto, 240px 240px; }
.cartiglio {
  background: var(--carta-tavola); color: var(--inchiostro); padding: 2.4rem 2.6rem 2.6rem; max-width: 26rem; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 2px rgba(28, 27, 34, .3), 4px 10px 22px -8px rgba(28, 27, 34, .45);
}
.cartiglio-titolo { font-family: var(--f-lap); font-size: 1.05rem; letter-spacing: .24em; text-transform: uppercase; line-height: 1.4; margin-bottom: 1rem; }
.cartiglio p { font-size: 1.08rem; line-height: 1.5; font-style: italic; margin-bottom: 1.6rem; }
.prossima {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.2rem; padding-top: 1.6rem;
  box-shadow: inset 0 1px 0 rgba(28, 27, 34, .16);
}
.prossima a { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .3rem; text-decoration: none; }
.prossima a:hover .prossima-t { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.prossima-n { font-family: var(--f-lap); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; }
.prossima-t { font-size: 1.02rem; line-height: 1.3; }

/* ---------- Telefono: i fogli si impilano, la piega diventa orizzontale ---------- */
@media (max-width: 899px) {
  .foglio { display: block; min-height: 0; }
  .foglio::after { display: none; }
  .pagina { padding: 3.6rem 1.4rem 3.4rem; min-height: 0; }
  .pagina.recto { padding-left: 1.4rem; padding-right: 1.4rem; }
  .pagina.recto::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2.2rem; pointer-events: none;
    background: linear-gradient(rgba(28, 27, 34, .09), transparent);
  }
  .pagina.verso::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6rem; pointer-events: none;
    background: linear-gradient(transparent, rgba(28, 27, 34, .05));
  }
  .testatina { top: 1.3rem; font-size: .75rem; letter-spacing: .22em; }
  .verso .testatina { left: 1.4rem; }
  .recto .testatina { right: 1.4rem; }
  .folio { bottom: 1.1rem; font-size: .9rem; }
  .verso .folio { left: 1.4rem; }
  .recto .folio { right: 1.4rem; }
  .pagina .tavola .foto, .pagina-dettaglio .tavola .foto { width: min(calc(100vw - 2.8rem), var(--max-w)); }
  .pagina .tavola-carta .foto, .pagina-dettaglio .tavola .foto-dettaglio { width: min(calc(100vw - 2.8rem - 20px), var(--max-w), var(--w, 100vw)); }
  .scena > .foglio:first-child > .pagina:first-child { padding-top: calc(var(--testata-h) + 2.2rem); }
  .scena > .foglio:first-child > .pagina:first-child .testatina { top: calc(var(--testata-h) + .6rem); }
  .frontespizio .tavola .foto { width: min(calc(100vw - 2.8rem - 16px), var(--max-w), calc(min(58svh, var(--max-h)) * var(--rapporto))); }
  .quartina .tavola .foto { width: min(17rem, calc(100vw - 2.8rem), var(--max-w)); }
  .fr-titolo { font-size: min(2.8rem, calc(100cqi / (var(--em) + .5))); }
  .fr-marchio { margin-top: 3rem; }
  .pagina-epigrafe .pagina-corpo { padding: 4rem 0 3rem; }
  .epigrafe p { font-size: 1.55rem; }
  .testo p { font-size: 1.125rem; }
  .foglio.doppia { padding: 2.6rem 0 3.6rem; }
  .tavola-doppia .foto { height: auto; aspect-ratio: var(--ar); }
  .tavola-doppia figcaption { margin: .9rem 1.4rem 0; }
  .foglio.doppia .folio-sx { left: 1.4rem; }
  .foglio.doppia .folio-dx { display: none; }
  .pagina-quartina .pagina-corpo { padding-top: 0; }
  .quartina { grid-template-columns: 1fr; justify-items: center; gap: 2.6rem; }
  .pagina .tavola.media .foto { width: min(calc(78vw - 1rem), var(--max-w)); }
  .recto .tavola.media { align-self: flex-end; }
  .verso .tavola.media { align-self: flex-start; }
  .posa-alto .pagina-corpo, .posa-basso .pagina-corpo { padding: 0; }
  .dettaglio-titolo { margin-bottom: 1.6rem; font-size: .8rem; letter-spacing: .28em; margin-right: -.28em; }
  .cartiglio { padding: 2rem 1.5rem; }
}

/* Telefono in orizzontale: le tavole si misurano sull’altezza dello schermo, non sulla larghezza */
@media (max-width: 899px) and (max-height: 560px) {
  .pagina .tavola .foto, .pagina-dettaglio .tavola .foto, .pagina .tavola.media .foto, .quartina .tavola .foto {
    width: min(calc(100vw - 2.8rem), var(--max-w), calc((100svh - 5rem) * var(--rapporto)));
  }
  .frontespizio .tavola .foto { width: min(calc(100vw - 2.8rem - 16px), var(--max-w), calc((100svh - 6rem) * var(--rapporto))); }
  .tavola-doppia .foto { height: calc(100svh - var(--testata-h)); aspect-ratio: auto; }
  .tavola-doppia figcaption { margin: .9rem 6vw 0; }
  .pagina, .pagina.recto { padding-left: 6vw; padding-right: 6vw; }
}