/* Homepage only: compact four-way navigation and welcoming hero. */
.home-landing .art.treehouse{background-image:url('/assets/treehouse/build-tile.png')}
@media(min-width:651px){
 html body.home-landing .page main .categories{grid-template-columns:repeat(4,minmax(0,1fr));width:100%;max-width:1180px;gap:14px;padding:0 24px}
 html body.home-landing .page main .categories>.card{grid-column:auto;display:flex;flex-direction:column;padding:8px 12px 20px;border-radius:22px;min-width:0}
 .home-landing #treehouse{order:3}.home-landing #learning{order:4}
 html body.home-landing .page .categories .art{width:100%;height:auto;aspect-ratio:1.15;max-height:none;flex:none;margin:0;background-size:contain}
 html body.home-landing .page .categories .card-copy{display:flex;flex-direction:column;align-items:center;flex:1}
 html body.home-landing .page .categories .card h2{font:400 clamp(19px,2.25vw,29px)/1.12 Georgia,serif;letter-spacing:-.6px;margin:5px 0 9px}
 html body.home-landing .page .categories .card p{font-size:clamp(11px,1.25vw,14px);line-height:1.5;letter-spacing:0;margin:0 0 14px}
 html body.home-landing .page .categories .pill{min-height:44px;margin-top:auto;padding:11px 16px;font-size:clamp(11px,1.2vw,14px);letter-spacing:0;white-space:nowrap}
 .home-landing .hero img{aspect-ratio:3/2;height:auto;object-fit:contain}
}
@media(max-width:650px){
 html body.home-landing .page main .categories>#learning,
 html body.home-landing .page main .categories>#treehouse{grid-column:1/-1!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)!important;align-items:center;gap:10px;padding:12px}
 html body.home-landing .page main .categories>#learning .art,
 html body.home-landing .page main .categories>#treehouse .art{aspect-ratio:1.1;max-height:none}
 .home-landing .categories>#learning .pill,.home-landing .categories>#treehouse .pill{margin-top:4px}
 .home-landing nav{column-gap:16px}
}
/* Keep the established desktop masthead; fit the new illustration beside copy. */
html.desktop-view .home-landing .desktop-hero{height:clamp(360px,46vh,480px);background:#fffaf3}
html.desktop-view .home-landing .desktop-hero-art{left:30%;width:70%;object-fit:cover;object-position:center 84%;mask-image:linear-gradient(to right,transparent,#000 12%),linear-gradient(to bottom,#000 92%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 12%),linear-gradient(to bottom,#000 92%,transparent);-webkit-mask-composite:source-in}
html.desktop-view .home-landing .desktop-hero-copy{width:36%;position:relative;padding-left:clamp(28px,4vw,65px);padding-right:8px;text-shadow:none}
html.desktop-view .home-landing .page main .categories{width:88%;max-width:1180px;margin-top:22px;padding:0;grid-template-columns:repeat(4,minmax(0,1fr))}
html.desktop-view .home-landing .page main .categories .art{height:clamp(120px,17vh,175px);aspect-ratio:auto}
html.desktop-view .home-landing .page main .categories .card h2{font-size:clamp(20px,1.85vw,27px)}
html.desktop-view .home-landing .page main .categories .card p{font-size:12px}
html.desktop-view .home-landing .page main .categories .card .pill{font-size:12px;padding:10px 16px}
@media(max-width:900px) and (min-width:651px){html body.home-landing .page main .categories{gap:10px;padding:0 18px}html body.home-landing .page main .categories>.card{padding:6px 8px 14px}html body.home-landing .page .categories .card h2{font-size:20px}html body.home-landing .page .categories .card .pill{padding:10px 12px;font-size:11px}}
/* Clear tablet and phone navigation: artwork starts below the links. */
html:not(.desktop-view) .home-landing .hero{margin-top:0}
html:not(.desktop-view) .home-landing .masthead{padding-bottom:0}
html:not(.desktop-view) .home-landing .masthead nav{position:relative;z-index:2;width:calc(100% - 16px);max-width:1120px;margin:8px auto 0;padding:5px 16px;background:linear-gradient(90deg,#fffaf3b8,#fffaf3f2 20%,#fffaf3f2 80%,#fffaf3b8);border:1px solid #fffdf7;border-radius:999px;gap:12px 34px}
html:not(.desktop-view) .home-landing .hero img{mask-image:linear-gradient(to bottom,transparent,#000 6%,#000 90%,transparent)}
html:not(.desktop-view) .home-landing .welcome{margin-top:-12px}
@media(max-width:650px){html:not(.desktop-view) .home-landing .masthead nav{gap:5px 13px;padding:4px 7px;width:100%}html:not(.desktop-view) .home-landing .masthead nav a{font-size:10px;letter-spacing:.1px}html:not(.desktop-view) .home-landing .welcome{margin-top:-5px}}
@media(min-width:651px){html:not(.desktop-view) .home-landing .hero img{aspect-ratio:16/9;object-fit:cover;object-position:center 75%}}
/* Recompose the artwork rather than distorting or cropping the scene. */
html:not(.desktop-view) .home-landing .hero img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center}
@media(min-width:651px){
 html:not(.desktop-view) .home-landing .masthead{padding-top:10px}
 html:not(.desktop-view) .home-landing .brand-book{width:78px;height:49px;margin-bottom:0}
 html:not(.desktop-view) .home-landing .brand{font-size:clamp(34px,4.6vw,54px)}
 html:not(.desktop-view) .home-landing .flourish{margin:5px 0 7px}
 html:not(.desktop-view) .home-landing .masthead nav{margin-top:0;padding-top:2px;padding-bottom:2px}
 html:not(.desktop-view) .home-landing .welcome{margin-top:-6px;padding-bottom:14px}
 html:not(.desktop-view) .home-landing .welcome h1{margin-bottom:10px}
 html:not(.desktop-view) .home-landing .categories>.card{padding-bottom:16px}
 html:not(.desktop-view) .home-landing .categories .art{aspect-ratio:1.35}
 html:not(.desktop-view) .home-landing .site-footer{padding-top:12px;padding-bottom:10px}
 html:not(.desktop-view) .home-landing .footer-row{margin:3px 0 6px}
}
@media(min-width:651px) and (orientation:portrait) and (max-height:1250px){
 html:not(.desktop-view) .home-landing .brand-book{height:40px;width:64px}
 html:not(.desktop-view) .home-landing .brand{font-size:clamp(32px,4.2vw,46px)}
 html:not(.desktop-view) .home-landing .categories .art{aspect-ratio:1.6}
 html:not(.desktop-view) .home-landing .welcome h1{font-size:clamp(26px,3.4vw,38px)}
 html:not(.desktop-view) .home-landing .welcome p{font-size:14px}
}

/* Four approved homepage illustrations; retain existing card dimensions. */
.home-landing .categories #storybooks .art{background-image:url('/assets/home-icons-refresh/storybooks.png')}
.home-landing .categories #coloring .art{background-image:url('/assets/home-icons-refresh/playhouse.png')}
.home-landing .categories #treehouse .art{background-image:url('/assets/home-icons-refresh/treehouse.png')}
.home-landing .categories #learning .art{background-image:url('/assets/home-icons-refresh/learners.png')}
.home-landing .categories .card .art{background-size:contain;background-repeat:no-repeat;background-position:center}