/* Consistent breathing room and soft transitions on the five main landings. */
body:is(.home-landing,.storybooks-refresh,.playhouse-refresh,.treehouse-refresh,.learners-refresh) .site-footer{margin-top:24px;padding-top:12px}
html:not(.desktop-view) body:is(.storybooks-refresh,.playhouse-refresh,.treehouse-refresh,.learners-refresh) .page{background:radial-gradient(ellipse 70% 430px at 50% 170px,#f9e9e7 0,transparent 80%)}
html:not(.desktop-view) body:is(.storybooks-refresh,.playhouse-refresh,.treehouse-refresh,.learners-refresh) :is(.storybooks-hero,.coloring-hero,.learners-hero){margin-top:-14px}
html:not(.desktop-view) body:is(.storybooks-refresh,.playhouse-refresh,.treehouse-refresh,.learners-refresh) :is(.storybooks-hero,.coloring-hero,.learners-hero) img{mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 93%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 14%,#000 93%,transparent)}
@media(min-width:651px) and (orientation:portrait){
 html:not(.desktop-view) body:is(.storybooks-refresh,.playhouse-refresh,.learners-refresh) .section-cards .tile-image{height:clamp(150px,18vw,210px)}
 html:not(.desktop-view) body.treehouse-refresh .page main .categories .tile-image{height:220px!important;aspect-ratio:auto!important}
}
@media(min-width:651px) and (orientation:portrait) and (max-height:1100px){
 html:not(.desktop-view) body:is(.storybooks-refresh,.playhouse-refresh,.learners-refresh) .section-cards .tile-image{height:140px}
 html:not(.desktop-view) body.treehouse-refresh .page main .categories .tile-image{height:130px!important}
}
@media(max-width:650px){body:is(.home-landing,.storybooks-refresh,.playhouse-refresh,.treehouse-refresh,.learners-refresh) .site-footer{margin-top:20px;padding-top:12px}}

html:not(.desktop-view) body.treehouse-refresh .coloring-hero{margin-top:-32px}