@font-face{font-family:Roboto;src:url('assets/fonts/roboto-latin.woff') format('woff');font-weight:100 900;font-display:swap}
@font-face{font-family:Roboto;src:url('assets/fonts/roboto-latin-italic.woff') format('woff');font-style:italic;font-weight:100 900;font-display:swap}
:root{--wine:#9f3044;--ink:#343031;--paper:#faf8f7;--line:#dfc9cd}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 Roboto,Arial,sans-serif}a{color:inherit}img{display:block;max-width:100%;height:auto}h1,h2,h3,p,figure,blockquote{margin:0}p+p{margin-top:1.1em}h1,h2,h3{line-height:1.15}a:focus-visible{outline:3px solid var(--wine);outline-offset:6px}.wrap{width:min(1160px,calc(100% - 80px));margin:auto}.skip{position:absolute;left:1rem;top:-100px;background:white;padding:1rem;z-index:5}.skip:focus{top:1rem}.header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:24px 0;border-bottom:1px solid var(--line)}.wordmark{text-decoration:none;font-size:1.45rem;font-weight:300;letter-spacing:-.06em;color:var(--wine);line-height:1.2}.wordmark strong{font-weight:850}.nav{display:flex;gap:2rem;font-size:.85rem}.nav a{text-decoration:none}.nav a:hover{text-decoration:underline;text-underline-offset:.3em}.hero{display:grid;grid-template-columns:minmax(240px,360px) minmax(0,1fr);gap:clamp(40px,7vw,96px);padding:64px 0 72px;align-items:start}.cover{position:sticky;top:36px}.cover img{width:100%;box-shadow:0 18px 35px -15px #36232a55}.eyebrow{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}.release{color:var(--wine);margin-bottom:28px}.release time{display:block;font-size:clamp(2rem,4vw,3.8rem);font-weight:800;line-height:1.1;letter-spacing:-.055em;margin-top:8px}.questions{font-size:1.15rem;font-weight:650;line-height:1.45;margin-bottom:28px}.questions p+p:before{content:'';display:block;width:26px;border-top:1px solid var(--wine);margin:15px 0}.synopsis{font-size:1rem;line-height:1.65}.byline{color:var(--wine);font-weight:650;margin-top:24px}.characters{border-top:1px solid var(--wine);padding:38px 0 56px}.characters h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--wine);letter-spacing:-.035em;margin-bottom:36px}.folders{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:28px}.card{grid-column:span 2;min-width:0;position:relative}.card:nth-child(5){grid-column:2/span 2}.card-link{display:block;text-decoration:none;transition:transform .2s}.card-link:hover{transform:translateY(-6px)}.folder-art{position:relative;overflow:hidden;aspect-ratio:4/4.35;border-radius:3px}.folder-art img{position:absolute;width:100%;max-width:none;top:-14.9%;height:114.9%;object-fit:cover}.card-label{background:var(--paper);padding:16px 2px}.card-label h3{font-size:1.25rem;color:var(--wine)}.card-label p{font-size:.85rem;margin:3px 0 13px}.button{display:inline-block;background:var(--wine);color:white;padding:9px 18px;text-decoration:none;font-size:.9rem;font-weight:550;border-radius:2px}.closed{position:relative;aspect-ratio:4/4.35;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20%;background:url('assets/fascicolo-chiuso.png') center/100% 100% no-repeat}.stamp{color:var(--wine);border:1px solid var(--wine);padding:4px 9px;transform:rotate(-7deg);text-transform:uppercase;letter-spacing:.07em;font-size:.75rem;font-weight:650;background:#faf8f755}.footer{border-top:1px solid var(--line);padding:24px 0 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:.8rem}.publisher{max-width:170px;line-height:1.3;color:var(--wine)}.hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.profile{padding:56px 0 64px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:center}.profile .folder-art{width:100%}.profile h1{font-size:clamp(3.5rem,7vw,6rem);color:var(--wine);letter-spacing:-.065em;margin:12px 0 0}.role{font-size:2rem;font-weight:300;color:var(--wine);margin-bottom:32px}.quote{font-size:clamp(1.25rem,2.15vw,1.7rem);line-height:1.45;font-weight:350}.quote p+p{margin-top:.7em}.quote strong{color:var(--wine);font-weight:700}.source{margin-top:22px;font-size:.86rem;line-height:1.5;color:#676163}.story{border-top:1px solid var(--line);padding:44px 0 56px;display:grid;grid-template-columns:1.25fr 1fr;gap:72px}.story h2{font-size:1.2rem;color:var(--wine);margin-bottom:24px}.voice{border-left:2px solid var(--line);padding-left:32px;align-self:center;font-size:1.3rem;font-weight:350}.voice strong{display:block;color:var(--wine);font-size:3rem;line-height:1.2;margin-top:6px}.book-strip{background:var(--wine);color:white;padding:32px}.book-strip h2{font-size:1.8rem;font-weight:800}.book-strip p{margin-top:8px}.book-strip a{display:inline-block;margin-top:18px;font-size:.9rem;text-underline-offset:5px}.next{padding:28px 0 40px;color:#777;font-size:.9rem}.next span{display:block;font-style:italic}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{padding:20px 0}.wordmark{font-size:1.2rem}.nav{gap:16px;font-size:.8rem}.hero{display:flex;flex-direction:column;padding:32px 0 44px;gap:32px}.cover{position:static;width:min(72%,310px);margin:auto}.hero-copy{width:100%}.release{text-align:center}.release time{font-size:2.5rem}.questions{font-size:1.1rem}.folders{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.card,.card:nth-child(5){grid-column:auto}.card-label h3{font-size:1.1rem}.button{padding:9px 12px;font-size:.8rem}.stamp{font-size:.65rem;letter-spacing:.03em}.characters{padding-top:28px}.characters h2{margin-bottom:26px}.profile{grid-template-columns:1fr;gap:32px;padding:32px 0}.profile-art{max-width:380px;width:100%;margin:auto}.profile h1{font-size:4rem}.role{font-size:1.7rem;margin-bottom:22px}.quote{font-size:1.3rem}.story{grid-template-columns:1fr;gap:36px;padding:32px 0}.voice{font-size:1.2rem}.book-strip{padding:26px 22px}.footer{align-items:flex-start}.publisher{max-width:135px}.back{font-size:.8rem}.source{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card-link{transition:none}}

/* La voce del personaggio: citazione su carta, con labirinto a matita. */
.voice{position:relative;isolation:isolate;overflow:hidden;min-width:0;border:1px solid var(--line);border-left:3px solid var(--wine);padding:30px 30px 32px;background:#f7f3ed;box-shadow:0 12px 28px -20px #34303155;font-size:1.2rem;line-height:1.65;font-weight:400}
.voice::before{content:"";position:absolute;inset:0;z-index:-1;background:url('assets/labirinto-dedalo.png') center bottom/cover no-repeat;opacity:.19;pointer-events:none}
.voice p{position:relative}.voice strong{display:inline;font-size:1em;line-height:inherit;margin:0 0 0 .25em;font-weight:650}
@media(max-width:760px){.voice{padding:28px 22px;font-size:1.1rem}}

/* Domande: stile originale del sito sudditidigitali.it. */
.questions{margin-bottom:25px;color:var(--wine);font-size:clamp(18px,1.5vw,20px);font-weight:600;line-height:1.36;letter-spacing:-.012em}
.questions p{margin:0 0 13px}
.questions p:last-child{margin-bottom:0}
.questions p+p::before{content:none;display:none}
@media(max-width:820px){.questions{font-size:20px}}

/* Titolo del personaggio e data: spaziatura naturale e gerarchia più sobria. */
.profile h1{letter-spacing:normal}
.release time{font-size:clamp(30px,3.2vw,44px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
@media(max-width:760px){.release time{font-size:clamp(28px,7.5vw,34px)}}

/* Copertina e preordine nella colonna sinistra, bilanciati con la quarta. */
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center}
.cover{position:static;width:100%;max-width:410px;justify-self:center}
.preorder{text-align:center;margin-top:24px}
.preorder-button{max-width:100%;padding:13px 22px;font-size:1rem;line-height:1.4}
.preorder-button:hover{background:#84283a}
@media(max-width:760px){.cover{width:min(100%,310px)}.cover img{width:90%;margin-inline:auto}.preorder{margin-top:22px}.preorder-button{padding:12px 18px}}

/* Filemone e Bauci: porta socchiusa a matita sullo sfondo della citazione. */
.filemone-bauci .profile h1{font-size:clamp(2.7rem,5.5vw,4.5rem)}
.filemone-bauci .quote{font-size:clamp(1.15rem,1.85vw,1.45rem)}
.filemone-bauci .voice::before{background-image:url('assets/porta-filemone-bauci.png');background-size:cover;background-position:right bottom;opacity:.16}
.filemone-bauci .voice strong{margin-left:0}
