.section-cards.categories{padding:0;max-width:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.section-cards .card{display:flex;flex-direction:column;padding:14px 16px 22px}.section-cards .tile-image{display:block;aspect-ratio:1.2;flex:none}.section-cards .tile-image img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;mask:url('/assets/watercolor-tile-mask.svg') center/100% 100% no-repeat}.section-cards .card-copy{display:flex;flex-direction:column;align-items:center;flex:1}.section-cards .card h2{font-size:clamp(24px,2.8vw,34px);margin:8px 0 10px}.section-cards .card p{font-size:14px;min-height:0;letter-spacing:0;margin-bottom:18px}.section-cards .pill{margin-top:auto;font-size:13px;padding:12px 18px}.section-cards .badge{margin:6px 0 10px}.packet-preview{display:block;width:min(100%,610px);margin:24px auto;border:1px solid var(--line);border-radius:12px}@media(max-width:650px){.section-cards.categories{grid-template-columns:1fr;gap:18px;max-width:420px;margin:auto}.section-cards .tile-image{aspect-ratio:1.65}.section-cards .card h2{font-size:29px}.section-cards .card p{min-height:0}.section-cards .card{padding:12px 20px 24px}}/* Match the homepage's wide tablet illustration and compact card row. */
@media(min-width:700px) and (max-width:1400px){
 :is(.coloring-landing,.storybooks-landing) :is(.coloring-hero,.storybooks-hero),.learners-landing .learners-hero{margin-top:-155px}
 :is(.coloring-hero,.storybooks-hero) picture,.learners-hero picture{display:block}
 :is(.coloring-hero,.storybooks-hero) picture img,.learners-hero picture img{width:100%;height:auto;aspect-ratio:16/9}
 :is(.coloring-landing,.storybooks-landing) .section-main,.learners-landing .section-main{margin-top:-28px;max-width:1100px}
 :is(.coloring-landing,.storybooks-landing) .section-main>.back-link,.learners-landing .section-main>.back-link{padding:4px 0;font-size:12px}
 :is(.coloring-landing,.storybooks-landing) .section-intro.section-intro-compact,.learners-landing .section-intro.section-intro-compact{padding:8px 12px 16px}
 .section-cards.categories{gap:16px}
 .section-cards .card{padding:8px 14px 20px;border-radius:22px}
 .section-cards .card h2{font-size:clamp(23px,2.7vw,32px);margin:4px 0 8px;letter-spacing:-.7px}
 .section-cards .card p{font-size:13px;line-height:1.5;margin-bottom:14px}
 .section-cards .pill{font-size:12px;min-height:44px;padding:11px 18px}
 :is(.coloring-landing,.storybooks-landing) .site-footer,.learners-landing .site-footer{padding-top:12px;padding-bottom:10px}
 :is(.coloring-landing,.storybooks-landing) .footer-row,.learners-landing .footer-row{margin:4px 0 8px}
 :is(.coloring-landing,.storybooks-landing) .footer-language,.learners-landing .footer-language,:is(.coloring-landing,.storybooks-landing) .footer-favorites,.learners-landing .footer-favorites{position:relative;top:4px}
}
@media(min-width:700px) and (max-width:900px) and (orientation:portrait) and (max-height:1000px){
 .section-cards .tile-image{aspect-ratio:1.65}
 .section-cards .card{padding-bottom:14px}
 .section-cards .card h2{font-size:23px}
 .section-cards .card p{font-size:12px}
}
@media(min-width:700px) and (max-width:1400px){
 :is(.coloring-hero,.storybooks-hero) picture img,.learners-hero picture img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 91%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 91%,transparent)}
}

/* Preserve original watercolor files; scale the whole scene without cropping. */
@media(min-width:700px) and (max-width:1400px){
 :is(.coloring-hero,.storybooks-hero),.learners-hero{height:auto;aspect-ratio:16/9;position:relative;overflow:hidden}
 :is(.coloring-hero,.storybooks-hero)>img,.learners-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 91%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 91%,transparent)}
}

/* Wide artwork keeps its native aspect ratio and natural character shapes. */
@media(min-width:700px) and (max-width:1400px){
 :is(.coloring-hero,.storybooks-hero) picture img,.learners-hero picture img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
}

.rhymes-soon{text-align:center;border:2px solid var(--line);border-radius:26px;padding:24px;max-width:720px;margin:auto}.rhymes-soon img{display:block;width:min(100%,320px);margin:auto;mix-blend-mode:multiply}.rhymes-soon h2,.storybook-collection .section-intro h2{font:400 32px Georgia,serif}.rhymes-soon p{line-height:1.7;color:var(--ink)}.storybook-collection .featured-book+.featured-book{margin-top:24px}
