body{background:#fffcf5}.hero{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;text-align:left;max-width:1440px;margin:auto;padding:55px 5% 70px;gap:35px}.hero-copy{padding:0}.hero h1{font-size:clamp(42px,4.6vw,69px)}.hero-art{margin:0;max-height:none;height:530px;object-fit:cover;object-position:center;border-radius:160px 160px 35px 35px;box-shadow:0 18px 0 #e2eacb}.ribbon{background:#295e4c;color:#fff5db}.friend{box-shadow:0 10px 28px #2947350c}.parent-section{display:grid;grid-template-columns:1fr 1fr;gap:65px}.parent-tips{border-left:2px dashed #a4b991;padding-left:35px}.parent-tips article{margin-bottom:25px}.parent-tips strong{font-size:21px}.parent-tips p{margin:8px 0}.faq{padding-top:15px}.faq details{border-bottom:1px solid #d9dfce;padding:22px 0}.faq summary{cursor:pointer;font-size:19px;font-weight:bold}.faq details p{max-width:820px;color:#4c6658}.hello{background:#e3edd8}footer{flex-wrap:wrap}@media(max-width:800px){.hero{grid-template-columns:1fr;padding:25px 23px 45px;text-align:center}.hero-art{height:310px;border-radius:70px 70px 24px 24px}.parent-section{grid-template-columns:1fr;gap:25px}nav{gap:14px;flex-wrap:wrap}.parent-tips{padding-left:22px}}
/* Full-width garden with a readable text overlay. */
.hero{display:flex;position:relative;isolation:isolate;max-width:none;min-height:640px;height:78svh;max-height:900px;padding:65px 7%;overflow:hidden;text-align:left;align-items:center}.hero-art{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;border-radius:0;box-shadow:none;margin:0;z-index:-2}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,250,237,.97) 0%,rgba(255,250,237,.90) 22%,rgba(255,250,237,.18) 55%,transparent 76%)}.hero-copy{max-width:460px}.hero h1{font-size:clamp(40px,4.2vw,65px)}@media(max-width:800px){.hero{height:auto;min-height:720px;padding:38px 24px;align-items:flex-start;text-align:left}.hero-copy{max-width:100%}.hero-art{height:100%;object-position:center bottom}.hero:before{background:linear-gradient(180deg,#fff9ec 0%,#fff9eceb 32%,#fff9ec26 65%,transparent 100%)}.hero h1{font-size:43px}.hero-copy p{font-size:17px}}
/* Keep the banner's character group inside its own right-hand image area. */
.hero{background:#fff8ea;min-height:580px;height:72svh}.hero-art{left:31%;right:0;width:69%;object-position:center center}.hero:before{background:linear-gradient(90deg,#fff8ea 0%,#fff8ea 28%,rgba(255,248,234,.72) 35%,transparent 47%)}.hero-copy{width:29%;max-width:430px}.hero h1{font-size:clamp(36px,3.5vw,58px)}.hero-copy p{font-size:17px}.hero-copy .eyebrow{font-size:11px;letter-spacing:1.5px}.hero-copy .button{padding:13px 19px;font-size:15px;gap:12px}.contact-links{align-items:center;flex-wrap:wrap;gap:16px 28px}.contact-links a{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-size:16px}.contact-links a:hover{text-decoration:underline}.contact-links svg{width:25px;height:25px;flex:none}@media(max-width:800px){.hero{height:auto;min-height:760px;padding-bottom:360px}.hero-copy{width:100%;max-width:520px}.hero-art{top:auto;bottom:0;left:0;width:100%;height:360px;object-position:center}.hero:before{background:linear-gradient(180deg,#fff8ea 0%,#fff8ea 45%,transparent 60%)}.hero h1{font-size:43px}.contact-links{max-width:430px;margin:25px auto 0}.contact-links a{font-size:15px}}
/* New artwork has its character group composed on the right. */
.hero{height:76svh;min-height:590px;max-height:850px;padding:60px 7%}.hero-art{inset:0;width:100%;height:100%;object-position:center;object-fit:cover}.hero:before{background:linear-gradient(90deg,#fff9ed80 0%,#fff9ed40 30%,transparent 53%)}.hero-copy{width:39%;max-width:490px}.hero h1{font-size:clamp(40px,4.2vw,65px)}.contact-links img{width:25px;height:25px;flex:none}@media(max-width:800px){.hero{height:auto;min-height:780px;padding:32px 24px 360px;align-items:flex-start}.hero-copy{width:100%;max-width:540px}.hero-art{top:auto;bottom:0;height:400px;object-position:right center}.hero:before{background:linear-gradient(180deg,#fff8ea 0%,#fff8ea 42%,transparent 63%)}.hero h1{font-size:43px}}
/* Mobile layout: preserve desktop and keep the complete banner visible. */
@media(max-width:800px){
html{scroll-padding-top:20px}header{padding:16px 20px;gap:14px;flex-wrap:wrap}.brand{min-width:0}.brand img{width:46px;height:46px}.brand small{font-size:11px}header .button.small{min-height:44px;padding:10px 14px;font-size:13px}header nav{order:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;width:100%;padding-top:10px}header nav a{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:13px;line-height:1.3}
.hero{display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;max-height:none;padding:30px 0 0;gap:20px;background:#fff8ea;overflow:hidden}.hero-copy{padding:0 24px;width:100%;max-width:none;text-align:left}.hero h1{font-size:clamp(36px,9vw,49px);line-height:1.1;letter-spacing:-1.5px}.hero-copy p{font-size:17px}.hero-copy .button{min-height:48px;max-width:100%;font-size:16px}.hero-art{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;object-position:center;z-index:0;border-radius:0;box-shadow:none}.hero:before{display:none}
.ribbon{font-size:13px;line-height:1.5;padding:18px 14px;gap:12px}.section{padding:48px 20px}.section-head h2,.section h2{font-size:31px}.friend-grid{grid-template-columns:1fr}.friend{display:block}.friend img{height:auto;width:100%;aspect-ratio:1/1;min-height:0}.friend>div{padding:24px}.friend p{font-size:16px}.episode-grid{grid-template-columns:1fr;gap:24px}.episode-copy{padding:24px}.episode a{padding:10px 0;min-height:44px}.parent-section{grid-template-columns:1fr;gap:22px}.parent-tips{padding-left:20px}.faq summary{font-size:18px;min-height:44px;line-height:1.5;padding-right:8px}.faq details p{font-size:16px}.hello{padding:48px 20px}.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:440px}.contact-links a{min-height:48px;padding:10px 12px;border:1px solid #9ab18b;border-radius:16px;justify-content:center;font-size:15px}.contact-links a[href^="mailto:"]{grid-column:1/-1;overflow-wrap:anywhere}.contact-links svg,.contact-links img{width:24px;height:24px}footer{padding:28px 20px;gap:14px}footer a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:370px){header .brand{font-size:20px;gap:8px}header .button.small{font-size:12px;padding:9px 10px}.hero-copy{padding:0 20px}.ribbon{font-size:12px}.contact-links{grid-template-columns:1fr}.contact-links a[href^="mailto:"]{grid-column:auto}}
.hero-picture{display:contents}
@media(max-width:800px){.hero-picture{display:block;width:100%;line-height:0}.hero-picture .hero-art{aspect-ratio:auto;height:auto;width:100%;object-fit:contain}.contact-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:480px}.contact-links a{min-width:0;padding:10px 4px;font-size:13px;gap:6px;flex-direction:column}.contact-links a[href^="mailto:"]{grid-column:1/-1;flex-direction:row;min-height:50px;font-size:15px;padding:12px 8px}.contact-links img,.contact-links svg{width:25px;height:25px}}