/* A soft subject frame, with room to read in the middle. Full artwork is retained on phones. */
.subject-backdrop-world{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;user-select:none;contain:strict}
.subject-backdrop-world[hidden]{display:none!important}
.subject-backdrop-world>img{position:absolute;left:0;bottom:0;display:block;width:100%;height:auto;max-height:100%;object-fit:contain;pointer-events:none;filter:none}
.subject-backdrop-world>.subject-backdrop-sky{top:0;bottom:auto;object-position:center top;opacity:.28;mask-image:linear-gradient(#000 0%,#0008 17%,transparent 42%)}
.subject-backdrop-world>.subject-backdrop-ground{object-position:center bottom;opacity:1;mask-image:linear-gradient(transparent 15%,#0007 55%,#000 94%)}
/* The same low-contrast artwork remains visible when a phone catalogue fills the window. */
.subject-backdrop-surface{isolation:isolate}
.subject-backdrop-card{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;user-select:none}
.subject-backdrop-card>img{position:absolute;left:0;bottom:0;width:100%;height:auto;max-height:100%;object-fit:contain;object-position:center bottom;filter:none;opacity:.85;pointer-events:none;mask-image:linear-gradient(transparent 12%,#0007 55%,#000 100%)}
/* Use one visible composition: outside large panels, inside near-fullscreen tablet/phone panels. */
@media(min-width:1400px){.subject-backdrop-card>img{opacity:0}}
@media(max-width:1399px){
 body.learning-calm-shelf .subject-backdrop-world>.subject-backdrop-ground{opacity:0}
 body.learning-calm-course .subject-backdrop-card>img{opacity:0}
}
@media(max-width:740px){
 .subject-backdrop-world>.subject-backdrop-sky{opacity:.12;mask-image:linear-gradient(#000 0%,#0005 20%,transparent 38%)}
 body.learning-calm-shelf .subject-backdrop-card>img{opacity:.85;filter:none;mask-image:linear-gradient(transparent 8%,#000a 62%,#000 100%)}
}
@media(max-width:1399px) and (max-height:500px) and (orientation:landscape){
 body.learning-calm-shelf .subject-backdrop-card>img{opacity:.7}
}
@media(prefers-reduced-motion:reduce){.subject-backdrop-world,.subject-backdrop-card,.subject-backdrop-world>img,.subject-backdrop-card>img{animation:none!important;transition:none!important}}