inline */
@media (max-width: 1023px) {
.chapter > aside.marginalia { display: none; }
}
/* -- 6b. Chapter hero wrapper full-bleed (AD v2 §6.1, UX v2 §5) -------- */
/* L'engine wrappa section.chapter-cover + h1 dentro div.chapter-hero.
100vw bleed via left: 50% + transform — robusto a ogni padding del reader. */
.chapter-hero {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
max-width: 100vw;
margin: 0 0 0; /* il frontispizio sotto gestisce il bottom rhythm */
overflow: hidden;
background-color: var(--ink); /* fallback durante il load dell'immagine */
}
.chapter-hero .chapter-cover {
/* Override stili v5: niente cornice, niente max-width, full-bleed reale. */
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
width: 100%;
height: clamp(50vh, 65vh, 75vh);
max-height: 1080px;
position: relative;
}
.chapter-hero .chapter-cover::after { content: none; } /* rimuove hairline v5 */
.chapter-hero .chapter-cover img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%; /* favorisce la parte alta della tavola */
}
/* Overlay gradient bottom — eccezione don't gradient AD v2 §10
leggibility del titolo sopraimpresso. */
.chapter-hero .chapter-cover__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(42, 31, 23, 0) 0%,
rgba(42, 31, 23, 0) 55%,
rgba(42, 31, 23, 0.5) 90%,
rgba(42, 31, 23, 0.65) 100%
);
pointer-events: none;
}
/* Titolo H1 sopraimpresso — bottom-center, cream, text-shadow legibility */
.chapter-hero .chapter-cover__title {
position: absolute;
left: 0;
right: 0;
bottom: clamp(2rem, 5vh, 5rem);
padding: 0 clamp(1.2rem, 6vw, 5rem);
text-align: center;
z-index: 2;
}
.chapter-hero .chapter-cover__title h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.6rem, 5vw + 1rem, 5.4rem);
line-height: 1.05;
letter-spacing: 0.01em;
color: var(--paper);
/* AD v2 §3.8 — eccezione don't shadow (unica, legibility booster) */
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(42, 31, 23, 0.25);
margin: 0 auto;
max-width: 22ch;
}
/* -- 6c. Frontispizio sotto-cover (AD v2 §6.2-bis) --------------------- */
.frontispiece {
text-align: center;
margin: clamp(2rem, 4vw, 3.2rem) auto clamp(2.4rem, 5vw, 4rem);
max-width: 32ch;
padding: clamp(0.4rem, 1vw, 1rem) 0;
}
.frontispiece .folio {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.1rem;
letter-spacing: 0.22em;
color: var(--ink-sepia);
margin: 0 0 0.8rem;
}
.frontispiece .eyebrow--small {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.36em;
text-transform: uppercase;
font-feature-settings: "smcp", "c2sc";
color: var(--ink-sepia);
margin: 0 0 0.9rem;
}
.frontispiece .readtime {
font-family: var(--font-body);
font-style: italic;
font-size: 0.92rem;
color: var(--ink-sepia);
opacity: 0.75;
margin: 0;
}
/* H2 / folio / reading-time della v5 vengono nascosti quando esiste .frontispiece
(l'engine v6 inietta il frontispizio e marca col data-attr per stile) */
.chapter[data-has-frontispiece="true"] > h2,
.chapter[data-has-frontispiece="true"] > .folio,
.chapter[data-has-frontispiece="true"] > .reading-time { display: none; }
/* -- 7. Headings (legacy v5 — usati solo per intro/colophon) ----------- */
.chapter h1 {
font-family: var(--font-display);
font-weight: 500;
font-size: clamp(2.4rem, 4.2vw + 1rem, 4.2rem);
letter-spacing: 0.01em;
line-height: 1.05;
color: var(--ink);
text-align: center;
margin: 0.6rem auto 0;
max-width: 18ch;
}
.chapter h2 {
font-family: var(--font-body);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-feature-settings: "smcp", "c2sc";
color: var(--ink-sepia);
text-align: center;
margin: 0.6rem 0 1.6rem;
}
.chapter h2::before, .chapter h2::after {
content: "—";
display: inline-block;
margin: 0 0.6em;
opacity: 0.6;
}
/* Folio + reading-time legacy (mostrate solo se manca frontispizio) */
.chapter .folio {
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.05rem;
letter-spacing: 0.18em;
text-align: center;
color: var(--ink-sepia);
margin: 1.6rem 0 0.4rem;
}
.chapter .reading-time {
font-family: var(--font-body);
font-style: italic;
font-size: 0.92rem;
color: var(--ink-sepia);
text-align: center;
margin: 0 0 2.4rem;
}
/* -- 8. Body paragraphs (AD v2 §7.2) ----------------------------------- */
/* -- robustness hardening (text-scaling/viewport safe) --
text-align:justify causes word-scatter at narrow/scaled columns (2–3 words
spanning full line width). Replaced with left for robustness.
overflow-wrap:anywhere + hyphens:auto prevent long uppercase tokens
(FRITTATA STREGATAAAA, QUARANTASETTE, onomatopoeia) from clipping/overflowing
the right edge at 190% text scaling. -webkit-hyphens kept for Safari/iOS. */
.chapter p {
max-width: 64ch;
margin: 0 0 1rem;
text-align: left;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hyphenate-limit-lines: 2;
overflow-wrap: anywhere;
text-indent: 0;
}
@supports not (hyphens: auto) {
.chapter p { text-align: left; }
}
/* indent on consecutive narrative paragraphs */
.chapter p + p:not(.sound):not(.dialogue):not(.folio):not(.reading-time) {
text-indent: 1.6em;
}
.chapter aside.marginalia + p:not(.sound):not(.dialogue):not(.folio):not(.reading-time) {
text-indent: 1.6em;
}
.chapter p.dialogue + p:not(.dialogue):not(.sound) { text-indent: 0; }
.chapter p.sound + p:not(.sound):not(.dialogue) { text-indent: 0; }
/* Reset indent dopo elementi a piena larghezza (AD v2 §7.3) */
.pull-quote + p,
.illustration--full + p,
.illustration--right-bleed + p,
.illustration--centered + p,
.chapter > .illustration + p {
text-indent: 0;
}
/* drop cap target paragraph: no indent */
.chapter > p.dropcap-target { text-indent: 0 !important; }
.chapter strong { font-weight: 600; }
.chapter em { font-style: italic; }
/* -- 9. Drop cap — fill cream-shadow DEFAULT (AD v2 §4.1-bis) ---------- */
.chapter > p.dropcap-target::first-letter {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(4.6rem, 8vw + 1rem, 7.8rem);
line-height: 0.82;
float: left;
padding: 0.14em 0.18em 0.04em 0.14em;
margin: 0.04em 0.14em 0 0;
color: var(--ink);
background: var(--paper-shadow); /* peso ottico subliminale */
}
/* -- 10. Dialogue with speaker medallion -------------------------------- */
/* -- robustness hardening (text-scaling/viewport safe) --
overflow-wrap:anywhere inherited from .chapter p but restated explicitly
here for clarity — dialogue bold text contains long uppercase onomatopoeia. */
.chapter p.dialogue {
position: relative;
margin: 1rem 0;
padding-left: 2.4rem;
text-indent: 0;
line-height: 1.7;
overflow-wrap: anywhere;
hyphens: auto;
-webkit-hyphens: auto;
}
.chapter p.dialogue::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--ink-sepia);
background-image: var(--speaker-img);
background-size: cover;
background-position: center;
background-color: var(--paper-shadow);
}
/* Failsafe: dialoghi senza speaker (orphan all'inizio capitolo o cori di gruppo).
Nasconde badge + rimuove padding-left per evitare il cerchio vuoto outlined. */
.chapter p.dialogue.dialogue--no-speaker {
padding-left: 0;
}
.chapter p.dialogue.dialogue--no-speaker::before {
display: none;
}
/* -- 11. Sound effect -------------------------------------------------- */
/* -- robustness hardening (text-scaling/viewport safe) --
.sound is uppercase centered mono — no justify issue. However uppercase
onomatopoeia tokens (STREGATAAAA, QUARANTASETTE) can overflow right edge at
190% text scaling without overflow-wrap. Added to prevent horizontal clip. */
.chapter p.sound {
font-family: var(--font-mono);
font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem);
letter-spacing: 0.08em;
color: var(--rust);
text-align: center;
margin: 1.6rem 0;
text-transform: uppercase;
text-indent: 0;
line-height: 1.2;
max-width: none;
overflow-wrap: anywhere;
}
/* -- 12. Illustration — tre varianti regia (AD v2 §6.6, UX v2 §2) ----- */
/* Base reset: rimuove cornice double-rule v5 per chiunque non abbia ancora
ricevuto una classe modifier (early paint state, sicurezza). */
.chapter .illustration {
margin: 2.4rem auto;
max-width: 100%;
padding: 0;
border: 0;
outline: 0;
background: transparent;
}
.chapter .illustration img {
display: block;
width: 100%;
height: auto;
}
.chapter .illustration figcaption,
.chapter .illustration + p.caption {
font-family: var(--font-body);
font-style: italic;
font-size: 0.92rem;
color: var(--ink-sepia);
text-align: center;
margin: 0.6rem auto 0;
max-width: 64ch;
}
/* 12.A — full-bleed 100vw — sfora il reader column */
.chapter .illustration--full {
position: relative;
left: 50%;
transform: translateX(-50%);
width: 100vw;
max-width: 100vw;
margin-top: 3.6rem;
margin-bottom: 3.6rem;
padding: 0;
border: 0;
background: var(--paper);
}
.chapter .illustration--full img {
display: block;
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
background: var(--paper);
}
.chapter .illustration--full figcaption,
.chapter .illustration--full + p.caption {
text-align: center;
max-width: 64ch;
margin: 0.8rem auto 0;
padding: 0 clamp(1.2rem, 4vw, 3rem);
}
/* 12.B — right-bleed asymmetric, body wrap left */
.chapter .illustration--right-bleed {
float: right;
width: 60%;
max-width: 720px;
margin: 0.6rem -4rem 1.4rem 2rem;
background: transparent;
border: 0;
padding: 0;
}
.chapter .illustration--right-bleed img {
display: block;
width: 100%;
height: auto;
background: var(--paper);
filter: saturate(0.95);
}
.chapter .illustration--right-bleed figcaption {
text-align: right;
margin: 0.4rem 0 0;
padding-right: 0.4rem;
}
/* Su 4K il bleed verso destra è più drammatico */
@media (min-width: 1440px) {
.chapter .illustration--right-bleed {
margin-right: -8rem;
}
}
/* Sotto 1024 il right-bleed perde drama → diventa centered */
@media (max-width: 1023px) {
.chapter .illustration--right-bleed {
float: none;
width: 100%;
max-width: 720px;
margin: 2rem auto;
}
.chapter .illustration--right-bleed figcaption { text-align: center; }
}
/* 12.C — centered sobrio: hairline 30% sepia sopra/sotto, NO double-rule */
.chapter .illustration--centered {
margin: 3rem auto;
max-width: 720px;
padding: 0;
background: transparent;
border: 0;
position: relative;
}
.chapter .illustration--centered::before,
.chapter .illustration--centered::after {
content: "";
display: block;
height: 1px;
background: var(--ink-sepia);
opacity: 0.4;
margin: 0 auto;
}
.chapter .illustration--centered::before { margin-bottom: 1rem; width: 30%; }
.chapter .illustration--centered::after { margin-top: 1rem; width: 30%; }
.chapter .illustration--centered img {
display: block;
width: 100%;
height: auto;
background: var(--paper);
filter: saturate(0.95) contrast(1.01);
}
.chapter .illustration--centered figcaption,
.chapter .illustration--centered + p.caption {
text-align: center;
margin: 0.8rem auto 0;
max-width: 56ch;
}
/* Mobile <600 illustration regia: tutte diventano "tavole editoriali" con
hairline top/bottom + max-height per non bombardare scroll + spacing ampio.
Era "block full-width senza ancore" v6 — sembravano foto. */
@media (max-width: 599px) {
.chapter .illustration,
.chapter .illustration--full,
.chapter .illustration--right-bleed,
.chapter .illustration--centered {
margin: 2.6rem auto;
width: 100%;
max-width: 100%;
padding: 0;
position: relative;
left: auto;
transform: none;
float: none;
}
.chapter .illustration::before,
.chapter .illustration--full::before,
.chapter .illustration--right-bleed::before,
.chapter .illustration--centered::before {
content: "";
display: block;
height: 1px;
background: var(--ink-sepia);
opacity: 0.4;
width: 30%;
margin: 0 auto 1rem;
}
.chapter .illustration::after,
.chapter .illustration--full::after,
.chapter .illustration--right-bleed::after,
.chapter .illustration--centered::after {
content: "";
display: block;
height: 1px;
background: var(--ink-sepia);
opacity: 0.4;
width: 30%;
margin: 1rem auto 0;
}
.chapter .illustration img {
max-height: 50vh; /* limit verticale: lo scroll non si fa bombardare */
object-fit: contain;
background: var(--paper);
width: 100%;
height: auto;
}
}
/* -- 13. Vignette — regia rotazione CSS pure (AD v2 §6.7) -------------- */
/* Nota: l'xhtml ha già class="vignette vignette--right" hardcoded. La
rotazione qui sotto sovrascrive via specificità + nth-of-type — no JS. */
.chapter span.vignette {
display: block;
margin: 0.2em 0 0.4em 1em;
width: 33%;
max-width: 220px;
clear: both;
}
.chapter span.vignette img {
display: block;
width: 100%;
height: auto;
filter: saturate(0.92) contrast(1.02);
}
/* 1ª vignette del capitolo: float LEFT */
.chapter span.vignette:nth-of-type(3n+1) {
float: left;
margin: 0.2em 1em 0.4em 0;
width: 33%;
max-width: 220px;
clear: left;
}
/* 2ª vignette: float RIGHT (standard) */
.chapter span.vignette:nth-of-type(3n+2) {
float: right;
margin: 0.2em 0 0.4em 1em;
width: 33%;
max-width: 220px;
clear: right;
}
/* 3ª vignette: drop-block centered con hairline sotto */
.chapter span.vignette:nth-of-type(3n+3) {
float: none;
display: block;
margin: 1.6rem auto;
width: 50%;
max-width: 320px;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(92, 70, 50, 0.35);
clear: both;
}
.chapter span.vignette + span.vignette { margin-top: 0.4em; }
/* Mobile <600: vignette restano accent inline float, side-by-side se consecutive.
Era block 70% centered v5 — troppo dominanti, sembravano foto. Ora 45% float right.
Doppie consecutive (es. cap_01 cappello+bacchetta) si dispongono fianco a fianco. */
@media (max-width: 599px) {
.chapter span.vignette,
.chapter span.vignette:nth-of-type(3n+1),
.chapter span.vignette:nth-of-type(3n+2),
.chapter span.vignette:nth-of-type(3n+3) {
float: right;
display: block;
margin: 0.3em 0 0.6em 0.6em;
width: 45%;
max-width: 150px;
border-bottom: 0;
padding-bottom: 0;
clear: none;
}
/* due vignette consecutive nello stesso : side-by-side */
.chapter span.vignette + span.vignette {
margin-left: 0.4em;
margin-top: 0.3em;
}
/* il paragrafo dopo le vignette deve consentire il flow */
.chapter span.vignette:last-of-type {
margin-bottom: 0.4em;
}
/* Paragrafo con 2+ vignette: le vignette diventano "riga" sopra il testo.
Float a 90% combinato schiacciava il body in colonnina inutilizzabile.
Soluzione: float left 47% cad → 2 affiancate top + clear:both per il testo. */
.chapter .p--multi-vignette {
overflow: hidden; /* clearfix container */
}
.chapter .p--multi-vignette span.vignette,
.chapter .p--multi-vignette span.vignette:nth-of-type(3n+1),
.chapter .p--multi-vignette span.vignette:nth-of-type(3n+2),
.chapter .p--multi-vignette span.vignette:nth-of-type(3n+3) {
float: left;
display: block;
width: 47%;
max-width: 47%;
margin: 0 1.5% 0.8em 1.5%;
clear: none;
}
.chapter .p--multi-vignette span.vignette:first-of-type {
margin-left: 0;
}
.chapter .p--multi-vignette span.vignette:last-of-type {
margin-right: 0;
}
}
/* -- 14. hr.break — scene-divider rotazione (invariato v5) ------------- */
.chapter hr.break {
border: 0;
text-align: center;
margin: 2.4rem 0;
height: auto;
overflow: visible;
max-width: 64ch;
}
.chapter hr.break::before {
font-family: var(--font-display);
font-size: 1.6rem;
color: var(--ink-sepia);
letter-spacing: 0.4em;
display: inline-block;
}
.chapter hr.break:nth-of-type(3n+1)::before { content: "❦"; }
.chapter hr.break:nth-of-type(3n+2)::before { content: "⁂"; }
.chapter hr.break:nth-of-type(3n+3)::before { content: "❧"; }
/* -- 15. Marginalia v6 — rinforzate (AD v2 §5) ------------------------- */
/* -- robustness hardening (text-scaling/viewport safe) --
Marginalia rail is 200px max-width — at high text scaling long handwritten
words can overflow its narrow column. overflow-wrap:anywhere + hyphens prevent
horizontal clip. */
.chapter aside.marginalia {
font-family: var(--font-hand);
font-weight: 400;
font-size: clamp(1.02rem, 0.32vw + 0.94rem, 1.18rem);
line-height: 1.45;
color: var(--ink-sepia); /* promosso da --ink-marginalia faded → 6.9:1 */
max-width: 200px;
padding-left: 1.4em;
border-left: 2px solid var(--rust); /* anchor visivo */
margin: 0.4rem 0;
position: relative;
overflow-wrap: anywhere;
hyphens: auto;
-webkit-hyphens: auto;
}
.chapter aside.marginalia::before {
content: "※";
position: absolute;
left: -1.6em;
top: 0.08em;
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--ink-marginalia); /* ok faded — è solo glyph decorativo */
opacity: 0.5;
}
.chapter aside.marginalia cite {
display: block;
margin-top: 0.3em;
font-style: italic;
font-size: 0.88rem;
color: var(--ink-sepia);
opacity: 0.85;
font-family: var(--font-body);
}
/* Marginalia inline su mobile/tablet (details) */
.chapter details.marginalia-inline {
margin: 1rem 0;
padding: 0.6rem 0.9rem 0.6rem 1rem;
background: var(--paper-shadow);
border-left: 2px solid var(--rust);
font-family: var(--font-hand);
font-size: 1.08rem;
color: var(--ink-sepia);
line-height: 1.45;
max-width: 64ch;
}
.chapter details.marginalia-inline summary {
cursor: pointer;
font-family: var(--font-body);
font-style: italic;
font-size: 0.92rem;
color: var(--ink-sepia);
list-style: none;
padding: 0.2rem 0;
}
.chapter details.marginalia-inline summary::-webkit-details-marker { display: none; }
.chapter details.marginalia-inline summary::before {
content: "※ ";
font-family: var(--font-body);
margin-right: 0.3em;
}
.chapter details.marginalia-inline[open] summary { margin-bottom: 0.4rem; }
.chapter details.marginalia-inline cite {
display: block;
margin-top: 0.4em;
font-family: var(--font-body);
font-style: italic;
font-size: 0.88rem;
color: var(--ink-sepia);
opacity: 0.85;
}
/* -- robustness hardening (text-scaling/viewport safe) --
.chapter blockquote covers .verse (incantation blocks) and any future blockquote
variant. The specific .pull-quote rule below overrides where needed.
overflow-wrap:anywhere prevents single long-token overflow (SOTTOSPAZIAMARINO). */
.chapter blockquote {
overflow-wrap: anywhere;
hyphens: auto;
-webkit-hyphens: auto;
}
/* -- 16. Pull-quote (AD v2 §6.9, UX v2 §4) ----------------------------- */
.chapter blockquote.pull-quote {
margin: 3.6rem auto;
padding: 1.4rem 1.6rem;
max-width: 60ch;
text-align: center;
border-top: 1px solid rgba(92, 70, 50, 0.35);
border-bottom: 1px solid rgba(92, 70, 50, 0.35);
background: transparent; /* la texture body traspare */
clear: both; /* scavalca eventuali float di vignette/right-bleed */
}
/* -- robustness hardening (text-scaling/viewport safe) --
Pull-quote is centered/italic prose: no justify issue. Added overflow-wrap
so a long quote word doesn't clip at high text-scaling on narrow viewports. */
.chapter blockquote.pull-quote p {
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.7rem, 2.2vw + 0.8rem, 2.6rem);
line-height: 1.25;
color: var(--ink-sepia);
margin: 0 0 0.8rem;
max-width: none;
text-align: center;
text-indent: 0;
hyphens: none;
overflow-wrap: anywhere;
letter-spacing: 0.005em;
}
.chapter blockquote.pull-quote cite {
display: block;
font-family: var(--font-body);
font-style: normal;
font-weight: 500;
font-size: clamp(0.85rem, 0.4vw + 0.7rem, 1rem);
letter-spacing: 0.18em;
text-transform: uppercase;
font-feature-settings: "smcp", "c2sc";
color: var(--ink-sepia);
opacity: 0.85;
}
@media (max-width: 599px) {
.chapter blockquote.pull-quote {
padding: 1.6rem 1.2rem;
margin: 2.8rem auto;
/* tint sottile per spezzare monotonia scroll */
background: var(--paper-shadow);
border-top: 1px solid var(--ink-sepia);
border-bottom: 1px solid var(--ink-sepia);
border-image: none;
}
}
/* -- 17. Cul-de-lampe (invariato v5) ----------------------------------- */
.chapter .culdelampe-wrap {
display: flex;
justify-content: center;
margin: 3.6rem 0 1rem;
clear: both;
}
.chapter .culdelampe {
width: clamp(110px, 14vw, 160px);
height: auto;
}
/* -- 18. Chapter nav footer (invariato v5) ----------------------------- */
.chapter .chapter-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 2rem 0 1rem;
margin-top: 1.6rem;
border-top: 1px solid rgba(92, 70, 50, 0.25);
flex-wrap: wrap;
clear: both;
}
.chapter .chapter-nav__prev,
.chapter .chapter-nav__next {
flex: 1 1 0;
min-height: 44px;
background: transparent;
border: 0;
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1rem, 0.4vw + 0.95rem, 1.15rem);
color: var(--ink);
cursor: pointer;
padding: 0.6rem 0.4rem;
line-height: 1.3;
letter-spacing: 0.01em;
}
.chapter .chapter-nav__prev { text-align: left; }
.chapter .chapter-nav__next { text-align: right; }
.chapter .chapter-nav__prev:hover,
.chapter .chapter-nav__next:hover { color: var(--rust); }
.chapter .chapter-nav__folio {
flex: 0 0 auto;
font-family: var(--font-display);
font-style: italic;
font-weight: 500;
font-size: 1.05rem;
letter-spacing: 0.18em;
color: var(--ink-sepia);
text-align: center;
padding: 0 0.8rem;
}
.chapter .chapter-nav__prev[data-disabled="true"] { visibility: hidden; }
/* -- 19. Intro and colophon variants (invariato v5) -------------------- */
.chapter.chapter--intro { text-align: center; }
.chapter.chapter--intro p {
max-width: 60ch;
margin-left: auto;
margin-right: auto;
text-align: center;
text-indent: 0 !important;
}
.chapter.chapter--colophon { text-align: center; }
.chapter.chapter--colophon p {
max-width: 60ch;
margin-left: auto;
margin-right: auto;
text-align: center;
text-indent: 0 !important;
font-style: italic;
}
.chapter.chapter--colophon h1 { max-width: 30ch; }
/* -- 20. Mobile degradation (AD v2 §8) --------------------------------- */
@media (max-width: 599px) {
/* Reader fluid su mobile: max-width 100% (era clamp(720,90vw,1400) → 720 min
vinceva su mobile 390, allargando il reader oltre viewport e shiftando tutto
a sinistra). */
.reader {
max-width: 100%;
padding-top: 4rem;
padding-left: clamp(1.2rem, 4vw, 1.6rem);
padding-right: clamp(1.2rem, 4vw, 1.6rem);
}
/* Chapter hero: torna full-width senza il bleed trick.
Su mobile il reader è già viewport-wide quindi width:100% + margin negativo
copre l'effetto edge-to-edge senza translateX trickery. */
.chapter-hero {
position: relative;
left: auto;
transform: none;
width: auto;
max-width: none;
margin-left: calc(-1 * clamp(1.2rem, 4vw, 1.6rem));
margin-right: calc(-1 * clamp(1.2rem, 4vw, 1.6rem));
}
.chapter-hero .chapter-cover {
height: clamp(45vh, 55vh, 65vh);
}
}
@media (max-width: 359px) {
.chapter span.vignette,
.chapter span.vignette:nth-of-type(3n+1),
.chapter span.vignette:nth-of-type(3n+2),
.chapter span.vignette:nth-of-type(3n+3) {
width: 80%;
}
}
/* -- 21. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
}
/* ============================================================
Audiolibro — FAB + dock flottante (usa le variabili tema,
quindi segue automaticamente la modalità notte)
============================================================ */
.audio-fab {
position: fixed; right: 1rem; bottom: 1rem; z-index: 60;
width: 3.2rem; height: 3.2rem; border-radius: 50%; border: none; cursor: pointer;
background: var(--rust); color: #fff; font-size: 1.4rem; line-height: 1;
box-shadow: 0 4px 14px rgba(42,31,23,.28); transition: transform .15s ease, opacity .2s ease;
}
.audio-fab:hover { transform: scale(1.06); }
.audio-fab[data-state="open"] { opacity: 0; pointer-events: none; }
.audio-dock {
position: fixed; right: 1rem; bottom: 1rem; z-index: 61;
display: flex; align-items: center; gap: .7rem;
width: min(92vw, 380px);
background: var(--paper); border: 1px solid var(--paper-shadow); border-radius: 14px;
padding: .6rem .7rem; box-shadow: 0 8px 28px rgba(42,31,23,.30);
transform: translateY(140%); opacity: 0; pointer-events: none;
transition: transform .25s ease, opacity .25s ease;
}
.audio-dock[data-state="open"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.audio-dock__play {
flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: none; cursor: pointer;
background: var(--rust); color: #fff; font-size: 1.1rem; line-height: 1;
}
.audio-dock__body { flex: 1 1 auto; min-width: 0; }
.audio-dock__meta { display: flex; flex-direction: column; line-height: 1.2; margin-bottom: .3rem; }
.audio-dock__label { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-marginalia); }
.audio-dock__title {
font-family: var(--font-display); font-size: .95rem; color: var(--ink);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.audio-dock__bar { display: flex; align-items: center; gap: .5rem; }
.audio-dock__seek { flex: 1 1 auto; accent-color: var(--rust); height: 1.1rem; }
.audio-dock__time { flex: 0 0 auto; font-size: .75rem; color: var(--ink-sepia); font-variant-numeric: tabular-nums; }
.audio-dock__close {
flex: 0 0 auto; background: none; border: none; cursor: pointer;
color: var(--ink-sepia); font-size: 1.3rem; line-height: 1; padding: 0 .2rem;
}
/* ---------------------------------------------------------------------------
Read-along: evidenziazione del paragrafo in lettura + toggle "segui"
--------------------------------------------------------------------------- */
.audio-dock__follow {
flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%; cursor: pointer;
border: 1px solid var(--rust); background: var(--rust); color: #fff;
font-family: var(--font-display); font-size: 1rem; line-height: 1; padding: 0;
}
.audio-dock__follow.is-off { background: transparent; color: var(--ink-sepia); border-color: var(--paper-shadow); }
.ra-active {
background: rgba(196, 90, 56, .12);
border-radius: .35em;
box-shadow: 0 0 0 .3em rgba(196, 90, 56, .12);
transition: background .35s ease, box-shadow .35s ease;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
.ra-active {
background: color-mix(in srgb, var(--rust) 14%, transparent);
box-shadow: 0 0 0 .3em color-mix(in srgb, var(--rust) 14%, transparent);
}
}
blockquote.verse.ra-active { box-shadow: 0 0 0 .5em color-mix(in srgb, var(--rust) 14%, transparent); }
/* Read-along livello parola: il paragrafo resta tinto leggero, la parola
corrente si accende piu' forte. */
.ra-w { border-radius: .25em; }
.ra-w.ra-on {
background: rgba(196, 90, 56, .32);
box-shadow: 0 0 0 .12em rgba(196, 90, 56, .32);
transition: background .12s ease;
}
@supports (background: color-mix(in srgb, red 10%, transparent)) {
.ra-w.ra-on {
background: color-mix(in srgb, var(--rust) 30%, transparent);
box-shadow: 0 0 0 .12em color-mix(in srgb, var(--rust) 30%, transparent);
}
}