@font-face{font-family:ComicLetter;src:url('assets/ComicNeue-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:ComicLetter;src:url('assets/ComicNeue-BoldItalic.ttf') format('truetype');font-weight:700;font-style:italic;font-display:swap}
[hidden]{display:none!important}
#chapters{max-width:1160px;padding:0 22px}
.chapter{margin:44px 0 70px;padding:22px;background:#f5e9d5;color:#291c2a;box-shadow:0 9px 35px #0005}
.chapter-meta{font:10px/1.4 Arial,sans-serif;text-transform:uppercase;color:#674454;letter-spacing:.12em;margin:0 0 8px}
.chapter h2{color:#28152d;font-size:38px;margin:0 0 20px}
.panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"establish establish portrait" "detail voice voice" "spindle reveal reveal";gap:10px;padding:0;background:transparent}
.panel{min-width:0;margin:0;display:flex;flex-direction:column;position:relative;overflow:hidden;border:2px solid #17101b;background:#f5e9d5}
.panel.establish{grid-area:establish}.panel.portrait{grid-area:portrait}.panel.detail{grid-area:detail}.panel.voice{grid-area:voice}.panel.spindle{grid-area:spindle}.panel.reveal{grid-area:reveal}
.panel img,.panel.wide img{display:block;position:static;width:100%;height:280px;min-height:0;max-height:none;aspect-ratio:auto;object-fit:cover;filter:contrast(1.06) saturate(1.07);transform:none}
.panel.establish img{object-position:50% 70%;height:320px}
.panel.portrait img{object-fit:cover;object-position:50% 58%;height:320px}
.panel.detail img{object-position:18% 35%;height:310px}
.panel.voice img{object-fit:cover;object-position:50% 61%;height:310px}
.panel.spindle img{object-position:50% 94%;height:330px}
.panel.reveal img{object-fit:contain;object-position:center;height:330px;background:#e5a57a}
.panel-caption,.panel.portrait .panel-caption,.panel.reveal .panel-caption{display:block;position:static;inset:auto;order:0;width:auto;max-width:none;max-height:none;overflow:visible;margin:0;border:0;border-bottom:1.5px solid #17101b;border-radius:0;background:#fae69a;color:#211b25;padding:10px 13px;box-shadow:none;font:400 15px/1.18 ComicLetter,cursive;text-transform:uppercase;letter-spacing:.015em}
.panel-caption p{margin:0;max-width:none}
.time-label{display:block;font:600 8px/1.4 Arial,sans-serif;letter-spacing:.08em;margin:0 0 5px;color:#614850}
.panel img{order:1}
.panel-source{position:static;inset:auto;order:3;display:block;margin-top:auto;background:#201626;color:#e4ced9;font:10px/1.4 Arial,sans-serif}
.panel-source summary{padding:8px 10px;min-height:32px;cursor:pointer}
.panel-source .source{padding:10px;color:inherit;min-height:44px}
.panel.detail .panel-caption{border-top:1.5px solid #17101b;border-bottom:0;order:2}
.panel.spindle .panel-caption{order:2;border-top:1.5px solid #17101b;border-bottom:0}
.panel.voice .balloon-chain{position:relative;display:flex;align-items:flex-start;gap:3px;order:0;width:auto;max-width:none;margin:0;padding:12px 10px 28px;background:#bc64ad;border:0;border-bottom:1.5px solid #17101b;isolation:isolate}
.balloon-chain:before,.balloon-chain:after{display:none}
.balloon-chain .time-label{display:none}
.speech-lobe{position:relative;display:flex;flex:1;min-width:0;min-height:82px;flex-direction:column;justify-content:center;padding:12px 7px 15px;background:#d9eef5;border:1.5px solid #24212a;border-radius:28% 26% 48% 49% / 17% 17% 42% 43%;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #24212a;font:400 17px/1.07 ComicLetter,cursive;text-align:center;text-transform:uppercase}
.speech-lobe strong{font-style:italic;font-weight:700}
.speech-lobe:nth-child(2):before{content:'';position:absolute;bottom:-23px;left:60%;width:26px;height:27px;background:#24212a;clip-path:polygon(0 0,70% 0,100% 100%);z-index:-1}
.speech-lobe:nth-child(2):after{content:'';position:absolute;bottom:-19px;left:calc(60% + 3px);width:20px;height:23px;background:#fff;clip-path:polygon(0 0,65% 0,100% 100%)}
@media(max-width:850px){.panels{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"establish establish" "portrait detail" "voice voice" "spindle spindle" "reveal reveal"}.chapter{padding:15px}.panel.establish img{height:300px}.panel.portrait img,.panel.detail img{height:310px}.panel.voice img{height:330px}.panel-caption{font-size:15px}}
@media(max-width:540px){#chapters{padding:0 10px}.chapter{padding:10px}.chapter h2{font-size:29px}.panels{gap:8px;grid-template-columns:minmax(0,1fr);grid-template-areas:"establish" "portrait" "detail" "voice" "spindle" "reveal"}.panel img,.panel.establish img,.panel.portrait img,.panel.detail img,.panel.voice img,.panel.spindle img,.panel.reveal img{height:auto;aspect-ratio:1.32;object-fit:cover}.panel.portrait img,.panel.voice img{object-position:50% 62%}.panel.reveal img{aspect-ratio:auto;object-fit:contain}.panel-caption,.panel.portrait .panel-caption,.panel.reveal .panel-caption{font-size:15px;padding:9px 11px}.speech-lobe{font-size:14px;min-height:78px;padding:10px 5px 12px}.panel.voice .balloon-chain{padding:11px 8px 26px}.time-label{font-size:8px}}
/* Andrew's personal voice is blue across recollection, present and future. */
.panel .panel-caption.personal-narration,
.panel.portrait .panel-caption.personal-narration,
.panel.reveal .panel-caption.personal-narration{position:relative;inset:auto;order:0;align-self:flex-start;width:auto;max-width:calc(100% - 20px);margin:8px 10px 22px;padding:13px 17px;background:#d9eef5;color:#211e28;border:1.5px solid #24212a;border-radius:20px 23px 25px 22px;box-shadow:0 0 0 3px #fff,0 0 0 4px #24212a;font:400 15px/1.18 ComicLetter,cursive;text-transform:uppercase;overflow:visible;max-height:none}
.personal-narration:before{content:'';position:absolute;bottom:-18px;left:24px;border-top:19px solid #24212a;border-right:15px solid transparent}
.personal-narration:after{content:'';position:absolute;bottom:-14px;left:26px;border-top:16px solid #d9eef5;border-right:11px solid transparent}
.panel.detail .personal-narration,.panel.spindle .personal-narration{order:0;border:1.5px solid #24212a}
.personal-narration .time-label{color:#355563}
@media(max-width:540px){.panel .panel-caption.personal-narration,.panel.portrait .panel-caption.personal-narration,.panel.reveal .panel-caption.personal-narration{font-size:15px;padding:11px 14px;margin:8px 10px 20px}}