/* Chapter artwork is kept separate from knowledge-card diagrams and their layout. */
#atlas-cards.illustration-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.illustration-card{display:flex;flex-direction:column;width:100%;min-width:0;padding:0;border:1px solid #7583ac;border-radius:16px;overflow:hidden;background:#17254c;color:var(--ink);text-align:left;font:inherit}
button.illustration-card{cursor:pointer;transition:border-color .15s}
button.illustration-card:hover,button.illustration-card:focus-visible{border-color:var(--moon);outline-offset:3px}
.illustration-card>img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain}
.illustration-copy{display:grid;gap:8px;padding:14px;font-size:14px;line-height:1.5}
.illustration-copy strong{font-size:18px;color:var(--moon)}
.illustration-copy small{font-size:13px;color:var(--ink-soft)}
.illustration-silhouette{display:block;width:100%;aspect-ratio:3/2;background:#102044;position:relative}
.illustration-silhouette:after{content:'';position:absolute;inset:15%;background:#8594b3;opacity:.45;-webkit-mask:url('../assets/solar-art-v1/bunny-white-moon.webp') center/contain no-repeat;mask:url('../assets/solar-art-v1/bunny-white-moon.webp') center/contain no-repeat}
#modal[data-kind=illustration]{width:min(1040px,calc(100% - 32px));max-width:1040px}
.illustration-large{margin:0;display:grid;gap:12px}
.illustration-large>img{display:block;width:100%;height:auto;max-height:calc(100dvh - 300px);object-fit:contain;border-radius:12px}
.illustration-large figcaption{font-size:16px;line-height:1.7;text-align:center}
.chapter-stage.has-illustration .chapter-rays,.chapter-stage.has-illustration .chapter-medal{display:none}
.chapter-stage.has-illustration #chapter-art{width:100%;height:100%;filter:none;animation:none}
.chapter-illustration{position:relative;display:block;width:100%;height:100%;padding:0;border:1px solid var(--moon);border-radius:14px;overflow:hidden;background:#102044}
.chapter-illustration img{width:100%;height:100%;object-fit:contain;display:block}
.chapter-illustration span{position:absolute;bottom:6px;left:8px;right:8px;background:#0d173eeb;border-radius:6px;padding:5px;font-size:13px;color:#fff}
.chapter-illustration span i{font-style:normal}
body.phone #atlas-cards.illustration-gallery.phone-deck{display:flex}
/* Overflowing filter rows must start at the first item, never center offscreen. */
body.phone #atlas-filters{justify-content:flex-start}
body.phone #atlas-cards.illustration-gallery .illustration-card{height:100%;overflow-y:auto}
body.phone .illustration-card>img,body.phone .illustration-silhouette{flex:none;max-height:220px;object-fit:contain}
body.phone .illustration-copy{gap:5px;padding:10px}
body.phone .chapter-stage.has-illustration{width:min(100%,270px);height:180px}
body.phone #modal[data-kind=illustration] .illustration-large>img{max-height:calc(100dvh - 250px)}
@media (orientation:landscape) and (max-height:500px){
 body.phone #atlas-cards.illustration-gallery .illustration-card{display:grid;grid-template-columns:1fr 1fr;align-items:center}
 body.phone .illustration-card>img,body.phone .illustration-silhouette{height:100%;max-height:100%;width:100%;min-height:0;aspect-ratio:auto}
 body.phone .illustration-copy strong{font-size:17px}
 body.phone .with-illustration .chapter-cinematic{grid-template-columns:minmax(155px,.8fr) minmax(0,1.6fr)}
 body.phone .chapter-stage.has-illustration{width:100%;height:160px}
 body.phone .chapter-illustration span{bottom:2px;left:2px;right:2px;padding:3px;font-size:13px}
 body.phone #modal[data-kind=illustration]{max-width:960px}
 body.phone #modal[data-kind=illustration] .illustration-large{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:14px}
 body.phone #modal[data-kind=illustration] .illustration-large>img{height:calc(100dvh - 100px);max-height:calc(100dvh - 100px)}
 body.phone .illustration-large figcaption{font-size:14px;text-align:left;line-height:1.5}
}