/* La Notte delle Lumere — il primo atto impaginato come un libro (schermo e stampa). Richiede tokens.css + site.css. */

.btn-stampa { min-height: 40px; padding: .35em .9em; font-size: .95rem; flex: none; }
.libro { max-width: calc(38rem + 2 * var(--gutter)); margin: 0 auto; padding: var(--s-7) var(--gutter) var(--s-8); font-size: 1.0625rem; line-height: 1.68; hyphens: auto; -webkit-hyphens: auto; }
.libro p { margin: 0 0 var(--s-4); }
.frontespizio { text-align: center; padding: var(--s-6) 0 var(--s-5); border-bottom: 3px double var(--line); margin-bottom: var(--s-6); }
.frontespizio img { margin: 0 auto var(--s-3); }
.frontespizio .sc { color: var(--testo-accento); margin-bottom: var(--s-2); }
.frontespizio h1 { font-size: clamp(2.3rem, 1.6rem + 3.5vw, 3.8rem); margin-bottom: var(--s-3); text-wrap: balance; }
.sottotitolo-libro { font-style: italic; color: var(--fg-muted); max-width: 30rem; margin: 0 auto !important; }

.indice { margin: 0 0 var(--s-7); padding: var(--s-4) var(--s-5); background: var(--bg-card); border: 1px solid var(--line); }
.indice ol { margin: 0; padding-left: 1.4em; columns: 2 14rem; column-gap: var(--s-6); }
.indice li { break-inside: avoid; margin-bottom: var(--s-1); }

.libro h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.3rem); text-align: center; margin: var(--s-7) 0 var(--s-4); text-wrap: balance; }
.libro h2::after { content: "✦"; display: block; font-size: .9rem; color: var(--c-brace); margin-top: var(--s-2); }
.libro h3 { font-size: 1.55rem; margin: var(--s-6) 0 var(--s-2); }
.scena > h2 + .durata { text-align: center; color: var(--fg-muted); margin-top: calc(-1 * var(--s-2)); }
hr.fregio { border: 0; height: 1.5rem; margin: var(--s-6) 0; text-align: center; overflow: visible; }
hr.fregio::before { content: "❦"; color: var(--fg-muted); font-size: 1.3rem; }

/* box da leggere ad alta voce */
.ad-alta-voce { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--bg-card); border-left: 4px solid var(--c-brace); box-shadow: var(--sh-1); font-size: 1.08rem; }
.ad-alta-voce p:last-child { margin-bottom: 0; }
.voce-et { font-family: var(--font-sc); letter-spacing: var(--tracking-sc); text-transform: lowercase; color: var(--testo-accento); font-size: .95rem; margin-bottom: var(--s-2) !important; }

/* lettera e filastrocca */
.lettera { margin: var(--s-5) 0; padding: var(--s-5) var(--s-6); background: var(--c-carta-chiara); color: var(--c-inchiostro); border: 1px solid rgba(31, 25, 19, .3); box-shadow: var(--sh-2); font-family: var(--font-display); font-size: 1.15rem; line-height: 1.55; transform: rotate(-.4deg); }
.lettera em { font-style: italic; }
.filastrocca { margin: var(--s-5) auto; padding: 0 0 0 var(--s-4); max-width: 26rem; border-left: 2px solid var(--line); font-style: italic; font-size: 1.12rem; line-height: 1.6; }
.filastrocca em { font-style: normal; font-family: var(--font-sc); letter-spacing: .04em; color: var(--testo-accento); }

/* tabelle */
.tabella { overflow-x: auto; margin: var(--s-4) 0 var(--s-5); }
.libro table { border-collapse: collapse; width: 100%; font-size: .98rem; }
.libro th, .libro td { text-align: left; vertical-align: top; padding: .45em .6em; border-bottom: 1px solid var(--line); }
.libro th { font-family: var(--font-sc); letter-spacing: .06em; text-transform: lowercase; font-weight: 400; border-bottom: 2px solid var(--fg); }

/* stat block 5e */
.statblock { margin: var(--s-6) 0; padding: var(--s-4) var(--s-5) var(--s-5); background: var(--bg-card); border-top: 5px solid var(--c-brace-scura); border-bottom: 5px solid var(--c-brace-scura); box-shadow: var(--sh-2); font-size: .98rem; line-height: 1.5; }
.statblock h3 { font-family: var(--font-sc); letter-spacing: .04em; font-size: 1.6rem; margin: 0; color: var(--testo-accento); }
.sb-tipo { margin: 0 0 var(--s-3) !important; }
.sb-attr { list-style: none; border-top: 2px solid var(--c-brace-scura); padding: var(--s-2) 0 0; margin-bottom: var(--s-2); }
.sb-attr li { margin: 0 0 2px; }
.sb-car { text-align: center; border-top: 2px solid var(--c-brace-scura); border-bottom: 2px solid var(--c-brace-scura); margin: var(--s-1) 0; }
.sb-car th, .sb-car td { text-align: center; border: 0; padding: .3em .2em; }
.sb-car th { border: 0; font-weight: 600; text-transform: none; font-family: var(--font-body); letter-spacing: 0; }
.statblock .tabella { margin: var(--s-2) 0; }
.sb-azioni { font-family: var(--font-sc); letter-spacing: .06em; font-weight: 400; font-size: 1.3rem; color: var(--testo-accento); border-bottom: 1px solid var(--c-brace-scura); padding-bottom: 2px; margin: var(--s-4) 0 var(--s-2); }

.licenza { font-size: .85rem; color: var(--fg-muted); border-top: 1px solid var(--line); padding-top: var(--s-4); margin-top: var(--s-6) !important; }
.licenza a { overflow-wrap: anywhere; }
.torna-sito { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-7) !important; }

@media (max-width: 480px) {
  .lettera { padding: var(--s-4); transform: none; }
  .statblock { padding: var(--s-3) var(--s-4) var(--s-4); }
  .sb-car { font-size: .88rem; }
}

/* ---------- stampa */
@page { size: A4; margin: 18mm 16mm 20mm; }
@media print {
  :root, :root[data-theme="dark"] {
    --bg: #fff; --bg-alt: #fff; --bg-card: #fff; --fg: #000; --fg-muted: #333; --line: #999;
    --testo-accento: #5a2c06; --sh-1: none; --sh-2: none; color-scheme: light;
  }
  html, body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  .testata, .salta, .torna-sito, .indice { display: none !important; }
  .libro { max-width: none; padding: 0; font-size: 11pt; line-height: 1.45; }
  .frontespizio { padding-top: 0; }
  .libro h2 { break-after: avoid; page-break-after: avoid; break-inside: avoid; page-break-inside: avoid; margin-top: 1.4em; }
  .libro h2 + p, .scena > h2 + .durata { break-before: avoid; page-break-before: avoid; }
  .libro h3 { break-after: avoid; page-break-after: avoid; }
  .scena { break-before: page; page-break-before: always; }
  .ad-alta-voce, .lettera, .filastrocca, .statblock, .tabella, table, .sb-car { break-inside: avoid; page-break-inside: avoid; }
  .ad-alta-voce { border-left: 3pt solid #000; background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lettera { transform: none; box-shadow: none; background: #fff !important; border: 1pt solid #000; }
  .statblock { border-top: 4pt solid #5a2c06; border-bottom: 4pt solid #5a2c06; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
  .libro h2::after, hr.fregio::before { color: #000; }
  p, li { orphans: 3; widows: 3; }
}