/* Regia delle tavole: immagini, battute e pause condividono la stessa scena. */
.work-card .comic-grid{grid-template-areas:'visual title' 'visual thesis' 'copy copy';grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:stretch}
.scene-stack{grid-area:visual;position:relative;min-width:0;padding-bottom:90px;align-self:start}
.scene-stack>.scene{width:100%;min-height:560px;grid-row:auto}
.work-card .title-panel{grid-area:title;min-height:220px}
.work-card .thesis-panel{grid-area:thesis;align-self:start}
.work-card .copy-panel{grid-area:copy}
.scene-stack>.speech{--balloon-paper:#fff;position:relative;z-index:5;width:250px;max-width:calc(100% - 28px);margin:-30px 14px -75px auto;padding:32px 28px;border:2px solid var(--ink);border-radius:50%;background:#fff;color:var(--ink);font:700 20px/1.25 'Comic Neue',sans-serif;letter-spacing:.015em;text-transform:uppercase;text-align:center;text-wrap:balance;box-shadow:none;transform:none!important;translate:none!important}
.scene-stack>.speech::after{content:'';position:absolute;left:25%;top:-30px;width:40px;height:36px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 40'%3E%3Cpath d='M2 1 Q15 19 5 38 Q33 24 41 1' fill='white' stroke='%23191714' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;rotate:180deg;pointer-events:none}
.work-card .copy-panel{box-shadow:none;border-width:0 0 2px;padding:28px 0 32px;background:transparent}
.work-card .copy-panel>.caption{margin-bottom:22px}
.work-card .title-panel h2{font-size:clamp(36px,4.7vw,76px);text-wrap:balance}
/* Una tavola stretta e scura apre il percorso. */
#berserk .comic-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
#berserk .scene{min-height:660px}
#berserk .scene-art{object-position:42% 38%;filter:saturate(.5) contrast(1.2)}
#berserk .title-panel{background:var(--accent);color:var(--paper)}
#berserk .thesis-panel{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:5px 5px 0 var(--accent)}
/* Il casco emerge dalla cornice: la maschera resta ferma, la stampa scorre dentro. */
#dorohedoro .scene{background:transparent;border:0;box-shadow:none;overflow:visible}
#dorohedoro .scene>picture{position:absolute;inset:0;overflow:hidden;clip-path:polygon(0 13%,34% 13%,35% 5%,42% 2%,55% 2%,64% 6%,67% 13%,100% 13%,100% 100%,0 100%)}
#dorohedoro .scene::before{content:'';position:absolute;inset:13% 0 0;z-index:3;pointer-events:none;border:3px solid var(--ink);border-top:0;box-shadow:5px 5px 0 var(--ink);background:linear-gradient(to right,var(--ink) 33%,transparent 33% 68%,var(--ink) 68%) top/100% 3px no-repeat}
#dorohedoro .scene .glyph{top:18%}
#dorohedoro .title-panel{align-self:center;rotate:-2deg}
/* La classe conserva un ritmo più leggero, quasi una pagina di quaderno. */
#assassination-classroom .comic-grid{grid-template-areas:'title visual' 'thesis visual' 'copy copy';grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
#assassination-classroom .scene-stack>.speech{margin-left:14px;margin-right:auto}
#assassination-classroom .title-panel{color:var(--ink);box-shadow:7px 7px 0 var(--ink)}
/* Re:Zero spezza la simmetria; la battuta resta agganciata al volto. */
#re-zero .scene{min-height:620px}
#re-zero .scene-art{object-position:50% 38%}
#re-zero .thesis-panel{border-left:8px solid var(--accent);box-shadow:none}
#roll-over-and-die .comic-grid{grid-template-areas:'title visual' 'thesis visual' 'copy copy'}
#roll-over-and-die .scene .sound{display:none}
#roll-over-and-die .scene-stack>.speech{margin-left:14px;margin-right:auto}
/* Tagli obliqui nelle cornici, senza inclinare il testo. */
#hells-paradise .scene{min-height:620px;border:0;box-shadow:none;background:var(--ink);padding:4px;clip-path:polygon(0 5%,100% 0,100% 95%,0 100%)}
#hells-paradise .scene>picture{position:absolute;inset:4px;overflow:hidden;clip-path:polygon(0 5%,100% 0,100% 95%,0 100%)}
#hells-paradise .scene-art{object-position:50% 45%;filter:saturate(.85) contrast(1.13)}
#hells-paradise .scene .glyph{top:10%}
#hells-paradise .scene .sound{bottom:15%}
#hells-paradise .title-panel{align-self:center;border-width:0 0 5px 5px;box-shadow:9px 9px 0 var(--ink);background:#b84931}
/* Frieren: una pausa, meno inchiostro e più paesaggio. */
#frieren{padding-top:125px;padding-bottom:145px;--ray-ink:transparent}
#frieren .comic-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:'title visual' 'thesis visual' 'copy copy';column-gap:44px;row-gap:38px}
#frieren .title-panel{background:transparent;color:var(--ink);border:0;box-shadow:none;padding:30px 0;align-self:end}
#frieren .title-panel h2{font-size:clamp(58px,7vw,104px)}
#frieren .thesis-panel{background:transparent;border:0;box-shadow:none;padding:0 0 35px}
#frieren .scene{min-height:600px;border-width:2px;box-shadow:none}
#frieren .scene-art{object-position:center;filter:saturate(.7) contrast(1.02)}
#frieren .scene .sound,#frieren .scene .glyph,#frieren .scene::after{display:none}
#frieren .scene-stack>.speech{margin-left:12px;margin-right:auto}
#frieren .copy-panel{padding-top:40px}
#clevatess .scene{min-height:620px}
#clevatess .title-panel{background:#213d36}
#sentenced-to-be-a-hero .scene{min-height:650px}
#sentenced-to-be-a-hero .title-panel{background:#25212d}
#sentenced-to-be-a-hero .scene .glyph{display:none}
#sentenced-to-be-a-hero .thesis-panel{border:0;border-left:3px solid var(--accent);box-shadow:none;background:transparent}
@media(max-width:1100px) and (min-width:901px){.scene-stack>.speech{font-size:18px;padding:28px 24px}.work-card .title-panel h2{font-size:40px}#frieren .comic-grid{column-gap:24px}}
@media(max-width:700px){
 .work-card .comic-grid{display:flex;flex-direction:column;gap:24px}
 .work-card .title-panel{order:0;min-height:0;padding:24px;rotate:none!important}
 .work-card .scene-stack{order:1;width:100%;padding-bottom:85px}
 .work-card .thesis-panel{order:2;width:100%}
 .work-card .copy-panel{order:3;width:100%;padding-top:12px}
 .work-card .scene-stack>.scene{min-height:0;aspect-ratio:3/4}
 .scene-stack>.speech{font-size:18px;width:235px;padding:28px;margin-top:-24px}
 .work-card .title-panel h2{font-size:clamp(34px,9vw,54px)}
 #frieren{padding-top:90px;padding-bottom:110px}
 #frieren .comic-grid{gap:30px}
 #frieren .title-panel{padding:0;align-self:stretch}
 #frieren .title-panel h2{font-size:64px}
 #frieren .thesis-panel{padding:0 0 20px}
 #frieren .scene-stack>.scene{aspect-ratio:3/4}
}
@media(prefers-reduced-motion:reduce){.work-card .title-panel{rotate:none!important}}