:root{--green:#153e35;--yellow:#ffe46b;--ink:#163b32;--pink:#fbe8ed;--white:#fff;--line:#cad8cf}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:white;font-family:Arial,sans-serif;font-size:17px;line-height:1.65}a{color:inherit;text-underline-offset:5px}a:focus-visible,summary:focus-visible{outline:3px solid #b4244e;outline-offset:5px}.skip{position:fixed;top:-100px;background:var(--yellow);padding:12px;z-index:10}.skip:focus{top:0}.announcement{text-align:center;background:var(--green);color:white;padding:10px 20px;font-size:14px}header{max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 5%;gap:30px}.brand{font-family:Georgia,serif;font-weight:bold;font-size:30px;letter-spacing:-1.2px;text-decoration:none;white-space:nowrap}.brand span{color:#b4244e}.brand small{font:700 11px Arial;letter-spacing:2px;margin-left:9px}nav{display:flex;gap:30px;flex-wrap:wrap}nav a{text-decoration:none;font-size:16px}nav a:hover{text-decoration:underline}main{min-height:55vh}h1,h2,h3{font-family:Georgia,serif;line-height:1.08;font-weight:normal;margin:0 0 24px}h1{font-size:clamp(42px,5.8vw,78px);letter-spacing:-2.4px}h1 em{color:#b4244e;font-style:normal}h2{font-size:36px;letter-spacing:-.7px}h3{font-size:27px}p{margin:0 0 20px}.eyebrow{font-size:14px;font-weight:bold;letter-spacing:2px;margin-bottom:22px}.hero,.product{max-width:1320px;margin:auto;padding:35px 5% 65px;display:grid;grid-template-columns:1fr 1fr;gap:7%;align-items:center}.intro{font-size:20px;max-width:430px;line-height:1.6}.button{display:inline-block;background:var(--green);color:white;border-radius:8px;padding:15px 24px;text-decoration:none;font-weight:700;margin:15px 0}.button:hover{background:#255e4c}.note,.small{font-size:14px}.note{margin-top:10px}.cover{margin:0}.cover img{width:100%;height:auto;display:block;border-radius:20px;box-shadow:12px 14px 0 var(--yellow)}figcaption{font-size:14px;margin-top:26px;text-align:center}.strip{padding:24px 5%;background:var(--yellow);display:flex;justify-content:space-evenly;gap:20px;flex-wrap:wrap}.strip p{margin:0;font-family:Georgia;font-size:23px}.story{max-width:1200px;margin:auto;padding:85px 5%;display:grid;grid-template-columns:1fr 1fr;gap:15px 9%}.story .eyebrow{grid-column:1/-1}.story h2{font-size:46px}.text-link{font-weight:bold}.care{background:var(--pink);padding:65px 5%;text-align:center}.care>p{max-width:630px;margin:0 auto 30px}.tiles{max-width:1100px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:auto}.tiles a{background:white;border:1px solid #e8c9d1;border-radius:10px;text-align:left;padding:26px;font-family:Georgia;font-size:28px;text-decoration:none}.tiles a:hover{border-color:#b4244e}.tiles span{display:block;font:16px/1.6 Arial;margin-top:10px}.article{max-width:940px;margin:auto;padding:55px 5% 90px}.article h1{max-width:800px}.article h2{font-size:29px;margin-top:36px;margin-bottom:15px}.article .lead{font-size:22px}.notice{background:#f4f7f4;border-left:4px solid var(--green);padding:22px 25px;border-radius:0 8px 8px 0;margin:25px 0}.notice h2{margin-top:0}.notice p:last-child{margin:0}.badge{display:inline-block;background:var(--yellow);padding:5px 16px;border-radius:30px;font-size:14px;font-weight:bold;margin-bottom:22px}.product h1{font-size:clamp(40px,4.8vw,64px)}dl{display:grid;grid-template-columns:140px 1fr;border-top:1px solid var(--line);padding-top:20px;font-size:16px;gap:12px}dt{font-weight:bold}dd{margin:0}details{border-top:1px solid var(--line);padding:16px 0}summary{cursor:pointer;font-size:16px;font-weight:bold}details p{margin:16px 0 0;font-size:16px}.characters{display:grid;grid-template-columns:1fr 1fr;gap:20px}.characters>div{background:#f4f7f4;padding:25px;border-radius:10px}.characters h3{margin-bottom:10px}.characters p{margin:0}footer{background:var(--green);color:white;padding:55px 7%;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}footer .brand span{color:var(--yellow)}footer .brand{display:inline-block;margin-bottom:18px}footer h2{font-family:Arial;font-weight:bold;font-size:16px;margin-bottom:20px}footer>div>a:not(.brand){display:block;font-size:15px;margin-bottom:10px;text-decoration:none}footer>div>a:hover{text-decoration:underline}footer p{font-size:16px}footer .small{font-size:14px;color:#d9e7df}@media(max-width:760px){header{align-items:flex-start;flex-direction:column;padding:22px 6%;gap:16px}nav{gap:20px}.hero,.product{grid-template-columns:1fr;padding:25px 6% 50px;gap:38px}.hero h1{font-size:56px}.hero .intro{max-width:none}.cover{max-width:550px}.story{grid-template-columns:1fr;padding:50px 6%}.story h2{font-size:38px}.tiles{grid-template-columns:1fr}.strip{justify-content:flex-start;gap:10px}.strip p{font-size:20px}.care{padding:45px 6%}.article{padding:35px 6% 65px}.article h1{letter-spacing:-1px}.characters{grid-template-columns:1fr}footer{grid-template-columns:1fr 1fr;padding:40px 6%;gap:30px}footer>div:first-child{grid-column:1/-1}dl{grid-template-columns:120px 1fr}h2{font-size:30px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@font-face{font-family:Storybook;src:url('/assets/story-heading.otf') format('opentype');font-weight:700;font-display:swap}
:root{--green:#46318a;--yellow:#ffe45b;--ink:#263257;--pink:#eaf8fc;--line:#d8d9eb}body{font-family:'Trebuchet MS',Arial,sans-serif}.announcement{background:#633ba8;color:white;font-weight:bold;letter-spacing:.2px}header{padding:16px 5%;gap:30px;border-bottom:3px solid #f1e6ff}.logo-link{display:block;flex-shrink:0;line-height:0}.site-logo{width:170px;height:auto;display:block}nav{gap:12px}nav a{font-weight:bold;padding:10px 17px;border-radius:30px}nav a:hover{background:#ffe45b;text-decoration:none}h1,h2,h3,.story h2,.strip p,.tiles a{font-family:Storybook,'Trebuchet MS',sans-serif;font-weight:700}h1{line-height:1.17;letter-spacing:-2px}h1 em{color:#8a299b}.hero{background:linear-gradient(115deg,#f4edff 0%,#fff 58%);border-radius:0 0 35px 35px;margin-top:0;padding-top:40px}.hero h1{font-size:clamp(42px,5.3vw,70px);color:#342d66}.eyebrow{color:#6c359e;letter-spacing:1.6px}.button{border-radius:30px;background:#633ba8;box-shadow:0 5px 0 #38216d;padding:15px 27px}.button:hover{background:#512994}.cover img{border-radius:25px;box-shadow:12px 14px 0 #ffe45b}.strip{background:#ffe45b;border-top:3px solid #e9c732;border-bottom:3px solid #e9c732}.strip p{font-size:21px}.strip p:nth-child(2){color:#714096}.strip p:nth-child(3){color:#195850}.story h2{color:#55348f;font-size:40px;line-height:1.25}.care{background:#eaf8fc}.care h2{color:#087d42;line-height:1.25}.tiles a{border:2px solid #d5c5f0;border-radius:22px;font-size:25px;box-shadow:0 5px 0 #d9eaf1}.tiles a:nth-child(1){background:#fff3b4}.tiles a:nth-child(2){background:#f2e6ff}.tiles a:nth-child(3){background:#dcf6e5}.tiles a:hover{border-color:#633ba8}.tiles span{font-family:'Trebuchet MS',Arial,sans-serif}.badge{background:#ffe45b;color:#263257}.notice{background:#f6f0ff;border-left-color:#7449af}.article h1{font-size:clamp(38px,5vw,62px);line-height:1.2;color:#55348f}.article h2{line-height:1.25}.characters>div:nth-child(1){background:#fff3b4}.characters>div:nth-child(2){background:#f2e6ff}.characters>div:nth-child(3){background:#eaf8fc}.characters>div:nth-child(4){background:#dcf6e5}footer{background:#302952;border-top:7px solid #ffe45b}.product h1{line-height:1.2}.policy h1{letter-spacing:-1px}a:focus-visible,summary:focus-visible{outline-color:#b22468}@media(max-width:760px){header{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;padding:15px 6%}.site-logo{width:135px}nav{gap:3px;flex:1;justify-content:flex-end}nav a{padding:8px 10px;font-size:15px}.hero h1{font-size:clamp(40px,10vw,56px)}.hero{border-radius:0 0 25px 25px}.story h2{font-size:34px}.strip p{font-size:18px}.article h1{font-size:clamp(36px,8vw,48px)}.care h2{font-size:29px}}@media(max-width:430px){header{justify-content:center}nav{flex-basis:100%;justify-content:center}.site-logo{width:145px}}
/* Colorful brand surfaces with clear reading areas. */
body{background:#e7f5ff}header{background:#fff;max-width:none;padding-left:max(5%,calc((100vw - 1190px)/2));padding-right:max(5%,calc((100vw - 1190px)/2));border-bottom:6px solid transparent;border-image:linear-gradient(90deg,#ffcf32,#ef5a71,#9e62dd,#45bfc4,#65be70) 1}nav a:nth-child(1){background:#fff0a2}nav a:nth-child(2){background:#ede0ff}nav a:nth-child(3){background:#daf4e2}nav a:nth-child(4){background:#def2ff}nav a:hover{background:#ffd654}.hero{max-width:none;background:linear-gradient(115deg,#dfeaff 0%,#eedfff 50%,#fff0ad 100%);padding-left:max(5%,calc((100vw - 1190px)/2));padding-right:max(5%,calc((100vw - 1190px)/2))}.hero h1{color:#3a3282}.hero h1 em{color:#a7216b}.strip{background:#ffda48}.story{max-width:none;background:#d8f4e4;padding-left:max(5%,calc((100vw - 1080px)/2));padding-right:max(5%,calc((100vw - 1080px)/2));border-bottom:6px solid #64bd88}.story h2{color:#285946}.care{background:linear-gradient(120deg,#e8ddff,#d7efff)}.tiles a{box-shadow:0 6px 0 #bbc5e7}.product{background:#fff5c8;border:2px solid #e8cf74;border-radius:28px;margin:32px auto 60px}.product .notice{background:white}.product details{border-color:#d1b965}.article{background:white;border:2px solid #c8dceb;border-top:9px solid #a65ce0;border-radius:25px;margin:32px auto 65px;box-shadow:0 9px 0 #c3ddef}.article>.eyebrow{display:inline-block;background:#ffe67b;border-radius:20px;padding:5px 15px}.article h2{color:#563294;padding-bottom:8px;border-bottom:3px solid #efe0ff}.article h2:nth-of-type(3n+2){color:#246348;border-bottom-color:#d4f3e3}.article h2:nth-of-type(3n){color:#275a8a;border-bottom-color:#d8ecff}.notice{background:#fff3bc;border-left-color:#d59516}.notice h2{border-bottom:none;color:#61471b}.characters>div{border:2px solid #fff;box-shadow:0 4px 0 #e6e4ef}footer{background:#3c2871;border-image:linear-gradient(90deg,#ffcf32,#ef5a71,#9e62dd,#45bfc4,#65be70) 1}footer>div>a:not(.brand):hover{color:#ffe45b}@media(max-width:760px){header{padding-left:6%;padding-right:6%}.hero,.story{padding-left:6%;padding-right:6%}.product{margin:22px 4% 45px;padding-left:6%;padding-right:6%}.article{margin:22px 4% 45px;padding:30px 6% 45px}.article h2{font-size:27px}}

/* Announcement and gently graduated logo header. */
.announcement{background:linear-gradient(100deg,#35206d,#513089 60%,#273b76);line-height:1.8}
.announcement-silly{color:#ffe45b}.announcement-kind{color:#a9f2be}.announcement-dot{color:#ffc0db;padding:0 .4rem}.announcement-soon{color:#bfeaff}
header{background:linear-gradient(105deg,#fff 0%,#fff 16%,#fff5cf 36%,#f1ddff 66%,#d6f2ff 100%)}
@media(max-width:760px){header{background:linear-gradient(110deg,#fff 0%,#fff9e8 35%,#f0e2ff 70%,#dff4ff 100%)}}

.announcement{background:linear-gradient(100deg,#164c56,#29326d 60%,#553080)}
.announcement-silly{color:#ffc2e6}.announcement-kind{color:#ffdd65}.announcement-soon{color:#b4f4df}.announcement-dot{color:#fff;padding:0 .55rem}
header{background:linear-gradient(110deg,#dfeaff 0%,#e9ddff 58%,#fff0ad 100%);isolation:isolate}.site-logo{mix-blend-mode:multiply}
.hero .small-moments{color:#ffe044;text-shadow:1px 2px 0 #745416,-1px -1px 0 #745416,1px -1px 0 #745416,-1px 1px 0 #745416}
@media(max-width:760px){header{background:linear-gradient(110deg,#dfeaff,#e9ddff 58%,#fff0ad)}}
.friend-card{font:inherit;color:inherit;text-align:left;padding:25px;border:2px solid white;border-radius:10px;cursor:pointer;box-shadow:0 4px 0 #e6e4ef}.friend-card[data-friend="Yubbie"]{background:#fff3b4}.friend-card[data-friend="Baadger"]{background:#ffe0e0}.friend-card[data-friend="Lorik"]{background:#eaf8fc}.friend-card[data-friend="Sovie"]{background:#efe0ff}.friend-card:hover{border-color:#633ba8}.friend-card:focus-visible{outline:3px solid #633ba8;outline-offset:4px}.friend-hint{display:block;margin-top:18px;font-weight:bold;text-decoration:underline;text-underline-offset:4px}.friend-dialog{width:min(92vw,850px);max-height:92vh;padding:0 20px 20px;border:3px solid #9470ce;border-radius:20px;background:#fff;overflow:auto;color:#263257}.friend-dialog::backdrop{background:rgba(26,19,49,.78)}.friend-toolbar{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 0;z-index:1}.friend-toolbar h2{font-size:25px;margin:0}.friend-close{font:700 16px Arial;background:#633ba8;color:white;border:0;border-radius:24px;padding:12px 22px;cursor:pointer}.friend-close:focus-visible,.friend-full:focus-visible{outline:3px solid #b22468;outline-offset:3px}.friend-flyer{display:block;width:100%;height:auto;border-radius:10px}.friend-full{display:inline-block;margin-top:18px;font-weight:bold}.flyer-open{overflow:hidden}@media(max-width:500px){.friend-dialog{width:96vw;padding:0 10px 15px}.friend-toolbar h2{font-size:21px}}
.order-surface{max-width:1100px}.checkout-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:40px}.checkout-grid label,.order-surface>label,.test-order label{display:block;font-weight:bold;margin:14px 0 7px}.order-surface input,.order-surface select{font:inherit;max-width:100%;padding:12px;border:2px solid #bba6d8;border-radius:10px;background:white;color:#263257}.order-surface input{width:100px}.order-cover{width:100%;max-width:300px;border-radius:15px}.order-surface aside{background:#fff3bb;border-radius:20px;padding:25px;align-self:start}.order-surface aside h2{font-size:26px}.order-surface button{cursor:pointer;font:inherit}.order-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px}.order-actions button{padding:12px 20px;border:2px solid #633ba8;border-radius:25px;color:#633ba8;background:white}.test-order{padding:25px;margin:20px 0;border:2px solid #d6c4ed;border-radius:15px;background:#f8f3ff}.test-order h2{margin-top:0;font-size:25px}.order-surface input:focus-visible,.order-surface select:focus-visible,.order-surface button:focus-visible{outline:3px solid #b22468;outline-offset:3px}@media(max-width:760px){.checkout-grid{grid-template-columns:1fr}}

/* Centered, larger primary navigation. */
header{display:grid;grid-template-columns:170px minmax(0,1fr) 170px;align-items:center;gap:25px}header nav{justify-content:center;gap:18px;flex-wrap:wrap}header nav a{font-size:20px;padding:14px 24px;line-height:1.4;text-align:center}
@media(max-width:1050px){header{grid-template-columns:1fr;justify-items:center;gap:16px}header nav{justify-content:center;width:100%}}
@media(max-width:760px){header{display:grid;grid-template-columns:1fr;justify-items:center}header nav{gap:10px;justify-content:center}header nav a{font-size:18px;padding:12px 17px}}
@media(max-width:430px){header nav{display:grid;grid-template-columns:1fr 1fr}header nav a{font-size:18px;padding:12px 14px}}

.cover-announcement{font-family:Storybook,Arial,sans-serif;font-weight:700;font-size:clamp(20px,2.3vw,28px);line-height:1.35;text-align:center;color:#55348f;margin:0 0 22px}

/* Explicit per-link colors keep every navigation pill visible. */
header nav a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;border:2px solid rgba(65,43,95,.18);min-height:56px;color:#263257}
header nav a[href="/home/"]{background:#ffe16b}header nav a[href="/books/"]{background:#a8e5bd}header nav a[href="/our-story/"]{background:#d9b5fa}header nav a[href="/contact-us/"]{background:#9fd9f5}
header nav a:hover{filter:brightness(.95);text-decoration:none}header nav a:focus-visible{outline:3px solid #842868;outline-offset:4px}
header nav a[href="/meet-the-characters/"]{background:#ffbfd7}#meet-characters{scroll-margin-top:24px}

/* Larger brand mark, with navigation centered in the header. */
@media(min-width:900px){body header{grid-template-columns:230px minmax(0,1fr);justify-items:stretch;gap:24px}body header .logo-link{justify-self:start}body header nav{display:flex;flex-wrap:wrap;width:100%;justify-content:flex-end;gap:12px}body header nav a{white-space:nowrap;font-size:21px;padding:16px 22px;min-height:62px}}
.site-logo{width:230px;height:auto}header{grid-template-columns:230px minmax(0,1fr) 230px}
@media(max-width:1200px){header{grid-template-columns:1fr;justify-items:center}header nav{justify-content:center}}
@media(max-width:760px){header{grid-template-columns:1fr}.site-logo{width:200px}}
@media(max-width:430px){.site-logo{width:190px}}

.hero .intro{max-width:560px;font-size:18px;line-height:1.7}.cover-actions{text-align:center;margin-top:28px}.cover-actions .button{font-size:17px}.cover-actions .note{font-size:14px;margin-bottom:0}

/* Balanced, centered book introduction alongside the cover. */
.announcement-quote{display:block;max-width:1100px;margin-inline:auto;color:#ffe45b;font-size:18px;line-height:1.6;text-wrap:balance}
.our-story-page .our-story-title{font-size:clamp(44px,6vw,72px);line-height:1.15;letter-spacing:1px;margin:0 0 22px;font-weight:800;text-shadow:0 3px 0 #fff,0 5px 0 #d9c5ef}.our-story-title span:first-child{color:#0054c7}.our-story-title span:last-child{color:#b62488}
.our-story-page h1,.our-story-page h2{text-align:center;max-width:none;margin-inline:auto}.story-intro-panel,.story-text-panel{padding:26px 28px;border:2px solid #bfa1e3;border-radius:24px;margin:28px 0;background:linear-gradient(120deg,#f7efff,#eef8ff);box-shadow:0 4px 0 #e5d9f3}.story-intro-panel{border-color:#a6c9ef;background:linear-gradient(120deg,#edf6ff,#f5edff)}.story-text-panel-1{border-color:#d998ba;background:linear-gradient(120deg,#fff0f5,#f7efff)}.story-text-panel-2{border-color:#9fc5e7;background:linear-gradient(120deg,#eaf6ff,#f1edff)}.story-text-panel-3{border-color:#94c7aa;background:linear-gradient(120deg,#ecfaef,#fff8df)}.our-story-page .story-text-panel h2{margin-top:0}.story-text-panel p:last-child,.story-intro-panel .lead{margin-bottom:0}@media(max-width:760px){.story-intro-panel,.story-text-panel{padding:22px 20px}}
.story-introduction{text-align:center}.story-introduction h1{max-width:none;margin-inline:auto}.story-introduction .lead{max-width:760px;margin:0 auto 28px}.story-origin-box p{font-size:20px;line-height:1.8}.story-origin-box p+p{margin-top:22px}@media(max-width:760px){.story-origin-box p{font-size:19px;line-height:1.75}}
.story-origin-box{margin:36px 0;padding:28px 32px;border:3px solid #b47ad7;border-radius:26px;background:linear-gradient(125deg,#fff8db,#f6edff 65%,#eaf6ff);box-shadow:0 6px 0 #e1cced}.story-origin-box::after{content:"";display:block;clear:both}.story-origin-box .story-nature-butterfly{float:right;width:92px;margin:0 0 16px 20px}.our-story-page .story-origin-box h2{margin-top:8px;max-width:620px;color:#7930b0;border-bottom:0}.story-origin-box .origin-story-label{font-size:13px;font-weight:700;letter-spacing:.6px;color:#645078;margin-bottom:12px}.story-origin-box p:last-child{margin-bottom:0}@media(max-width:760px){.story-origin-box{padding:22px}.story-origin-box .story-nature-butterfly{width:70px;margin-left:12px}}
.story-nature{width:82px;margin:28px auto 8px;line-height:0;pointer-events:none}.story-nature svg{display:block;width:100%;height:auto}.story-nature-butterfly{width:86px;margin:0 12px 10px auto;transform:rotate(9deg)}.story-nature-leaf{width:66px;transform:rotate(-12deg)}.story-nature-caterpillar{width:100px;margin-top:30px}@media(max-width:760px){.story-nature-butterfly{width:70px;margin-right:0}.story-nature-caterpillar{width:86px}}
.story-origin{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:30px;align-items:center;margin:30px 0}.story-origin h2{margin-top:0}.story-origin p:last-child{margin-bottom:0}.story-book-image{margin:0;padding:16px;border:2px solid #d7b9f4;border-radius:24px;background:linear-gradient(135deg,#f0e4ff,#fff0b5);box-shadow:0 6px 0 #e1d1ef}.story-book-image img{display:block;width:100%;height:auto;border-radius:16px}.story-book-image figcaption,.story-friends-image figcaption{font-size:15px;line-height:1.5;font-weight:700;color:#563294;margin-top:16px}.story-friends-image{margin:30px 0;padding:22px;border:2px solid #c7e3f6;border-radius:24px;background:linear-gradient(120deg,#fff0bf,#f0e5ff,#e1f4ff)}.story-friends-image>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:center}.story-friends-image img{width:100%;height:165px;object-fit:contain;background:white;border-radius:18px;display:block}@media(max-width:760px){.story-origin{grid-template-columns:1fr;gap:24px}.story-book-image{max-width:360px;justify-self:center}.story-friends-image>div{grid-template-columns:repeat(2,minmax(0,1fr))}.story-friends-image img{height:180px}.story-friends-image{padding:16px}}
.our-story-page .story-accent{font-weight:800;font-style:normal}.our-story-page .story-blue{color:#0054bb}.our-story-page .story-purple{color:#7930b0}.our-story-page .story-green{color:#08744e}.our-story-page .story-pink{color:#b91457}.our-story-page>h2{color:#7930b0}.our-story-page>h2:nth-of-type(2){color:#b91457}.our-story-page>h2:nth-of-type(3){color:#0054bb}.our-story-page>h2:nth-of-type(4){color:#08744e}
.our-story-page{max-width:1000px}.our-story-page h1{max-width:none}.story-purpose{margin:32px 0;padding:24px 28px;border:2px solid #c8adf0;border-radius:22px;background:linear-gradient(120deg,#f4eaff,#e6f4ff)}.our-story-page .story-purpose h2{margin-top:0}.our-story-page .story-mission h2{color:#004dc7}.our-story-page .story-pledge{background:linear-gradient(120deg,#fff0bd,#ffe6ed,#eee1ff)}.our-story-page .story-pledge h2{color:#08744e}.story-purpose p:last-child{margin-bottom:0}.story-signoff{text-align:center;font-family:Storybook,Arial,sans-serif;font-size:27px;font-weight:700;color:#7132ab;margin-top:30px}.story-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}@media(max-width:760px){.story-purpose{padding:20px}.story-links{gap:10px}}
.hero .book-headline>span:first-child{color:#07954d;text-shadow:0 2px 0 #fff}.hero .book-headline>.small-moments{color:#ffcf00;text-shadow:1px 2px 0 #785000,-1px -1px 0 #785000,1px -1px 0 #785000,-1px 1px 0 #785000}.hero .book-headline>em{color:#9a20d9;text-shadow:0 2px 0 #fff}

.characters-page>h1{max-width:none;width:100%;margin-inline:auto;text-align:center}.characters-page .friend-card,.characters-page .friend-card h3,.characters-page .friend-card p,.characters-page .friend-hint{text-align:center}.characters-page .friend-card p{width:100%}
.characters-page{text-align:center;max-width:1060px}.characters-page>.lead{max-width:680px;margin:0 auto 32px}.friend-card{text-align:center;display:flex;flex-direction:column;align-items:center;border-radius:24px;padding:24px}.character-portrait{display:block;width:100%;height:280px;object-fit:contain;background:#fff;border-radius:18px;margin:0 0 20px}.friend-card h3{font-size:36px;font-weight:800;line-height:1.2;margin:0 0 14px}.friend-card .friend-hint{margin-top:auto;padding-top:18px}.friend-card p{margin-bottom:10px}.friend-card h3.character-yubbie{color:#ad245b}.friend-card h3.character-baadger{color:#8b1e2d}.friend-card h3.character-lorik{color:#0059b8}.friend-card h3.character-sovie{color:#7132ab}@media(max-width:760px){.character-portrait{height:260px}.friend-card h3{font-size:32px}}
.character-name{font-weight:800}.hero .intro .character-name{font-size:1.1em}.character-name.character-yubbie{color:#85451e}.character-name.character-baadger{color:#000}.character-name.character-lorik{color:#0059b8}.character-name.character-sovie{color:#7132ab}
.hero{align-items:center;column-gap:5%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hero-copy{text-align:center;align-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;top:-24px}.hero .book-headline{font-size:clamp(28px,3vw,42px);line-height:1.3;letter-spacing:-.8px;margin:0 auto 28px}.book-headline>span,.book-headline>em{display:block}.hero .intro{max-width:560px;margin:0 auto;font-size:21px;line-height:1.7;text-align:center}.hero>.cover{align-self:center;width:100%}
@media(max-width:760px){.hero{grid-template-columns:1fr;gap:35px}.hero-copy{top:0}.hero .book-headline{font-size:clamp(25px,5.8vw,38px);letter-spacing:-.5px}.hero .intro{font-size:20px;line-height:1.7}.hero>.cover{justify-self:center}}
/* Bright storytime colors with strong contrast on sunshine yellow. */
.strip p:nth-child(1){color:#b20b57}.strip p:nth-child(2){color:#004dc7}.strip p:nth-child(3){color:#7d13bd}

.cover-announcement{color:#000}

.mission-box{max-width:1120px;margin:28px auto 12px;padding:25px 38px;text-align:center;border:3px solid #a23ab9;border-radius:24px;background:linear-gradient(115deg,#fff4b8,#f5e7ff 65%,#e2f7ff);box-shadow:0 6px 0 #d8c4eb}.mission-box h2{font-size:28px;color:#87207b;margin:0 0 12px;line-height:1.25}.mission-box p{font-size:18px;line-height:1.7;margin:0;color:#263257}.mission-box strong{color:#87207b}@media(max-width:1200px){.mission-box{margin-left:5%;margin-right:5%}}@media(max-width:760px){.mission-box{padding:22px;margin-top:22px}.mission-box p{font-size:17px}.mission-box h2{font-size:26px}}
/* Compact mission panel with evenly balanced lines. */
.mission-box{padding:17px 30px}.mission-box h2{font-size:25px;margin-bottom:8px}.mission-box p{max-width:1060px;margin-inline:auto;line-height:1.5;text-wrap:balance}
@media(max-width:760px){.mission-box{padding:18px 20px}.mission-box p{line-height:1.6}}
.mission-box h2{color:#004dc7}
.mission-pledge-row{max-width:1320px;margin:28px auto 12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:stretch}
.mission-box.promise-box{background:linear-gradient(125deg,#fff0d4,#ffe5ee 70%,#f1e5ff);border-color:#d16c98;box-shadow:0 6px 0 #edc5d8;display:flex;flex-direction:column;justify-content:center}.mission-box.promise-box h2{color:#b31c61}.mission-box.promise-box strong{color:#7930b0}
.mission-pledge-row .mission-box{max-width:none;margin:0;padding:20px 25px;min-width:0}
.pledge-box{border-color:#249a72;background:linear-gradient(120deg,#e2faeb,#fff3b5);box-shadow:0 6px 0 #bde4ce;display:flex;flex-direction:column;justify-content:center}
.mission-box.pledge-box h2{color:#08744e}.pledge-box strong{color:#08744e}
.pledge-box{border-color:#a245ba;background:linear-gradient(125deg,#fff1b3 0%,#ffe2ef 35%,#eadcff 68%,#d8f4ff 100%);box-shadow:0 6px 0 #d8bfed}
.mission-box.pledge-box h2{color:#08744e}.pledge-box .pledge-ten{color:#8a24af}.pledge-box .pledge-one{color:#bb155b}.pledge-box .pledge-child{color:#0055bf}
@media(max-width:1200px){.mission-pledge-row{margin-left:5%;margin-right:5%}}
@media(max-width:760px){.mission-pledge-row{grid-template-columns:1fr;gap:18px}.mission-pledge-row .mission-box{padding:18px 20px}}

/* Consistent, comfortable story copy and outlined kindness quote. */
.our-story-page{--story-copy-size:23px}
.our-story-page p,.our-story-page .lead,.our-story-page .story-signoff,.our-story-page .story-links a{font-size:var(--story-copy-size);line-height:1.75}
.announcement-quote{text-shadow:-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000,1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000}

.announcement-quote .quote-hearts{color:#ff4d4d}

/* Sunshine yellow story title with a crisp black outline. */
.our-story-page .story-origin-box h2{color:#000;-webkit-text-stroke:1px #ffdf35;paint-order:stroke fill;text-shadow:-1px -1px 0 #ffdf35,1px -1px 0 #ffdf35,-1px 1px 0 #ffdf35,1px 1px 0 #ffdf35,0 2px 0 #ffdf35}

/* Shared emphasis colors across all page copy and character dialogs. */
.site-difference-color{display:block;width:fit-content;max-width:100%;margin:14px auto 4px;padding:2px 10px;text-align:center;color:#000;background:#ffe45b;border-radius:6px;font-weight:800}
.site-pledge-color{color:#087443}
.site-yubbie-color,.character-yubbie{color:#07954d}
.site-sovie-color,.character-sovie{color:#ae16ff}

/* Large, bold character names in solid colors, without outlines. */
.site-yubbie-color,.site-sovie-color,.site-lorik-color,.site-baadger-color{font-size:1.18em;font-weight:900;-webkit-text-stroke:0;text-shadow:none}
.site-yubbie-color{color:#07954d}
.site-baadger-color{color:#dc1236}
.site-lorik-color{color:#0866ff}
.site-sovie-color{color:#bd00ff}

.colorful-book-title span{font:inherit}
.colorful-book-title .book-word-yubbie{color:#ed6700}
.colorful-book-title .book-word-big{color:#0059d6}
.colorful-book-title .book-word-kindness{color:#9a20d9}
.colorful-book-title .book-word-day{color:#07954d}

.mission-box.promise-box p{color:#000}

.cover img[src="/assets/yubbie-cover-oct21.webp"]{height:auto;max-height:none;aspect-ratio:1 / 1;object-fit:contain;object-position:center;display:block}

.announcement-quote .slogan-silly{color:#ff38b5}
.announcement-quote .slogan-dot{color:#8cff32}
.announcement-quote .slogan-you{color:#39cfff}

/* Mission, promise, and pledge presentation. */
.mission-box.promise-box h2{color:#0754b8}
.mission-box #mission-title,.our-story-page .story-mission h2{color:#c51624}
.pledge-box .pledge-copy,.our-story-page .story-pledge .pledge-copy{color:#000}

.strip p.strip-storytime{color:#0059d6}
.strip p.strip-silly{color:#a11220}

/* Playful storybook lettering only for names in the home-page introduction. */
.hero .intro .character-name{font-family:Storybook,Georgia,serif;font-weight:700;letter-spacing:.2px}
.hero .intro .character-name>span{font-family:inherit;font-weight:inherit}

/* Even line lengths for the home-page book introduction. */
.hero .hero-copy .intro{text-align:justify;text-align-last:center;text-justify:inter-word;text-wrap:pretty;line-height:1.75}

.our-story-page .story-origin-box p{text-align:center}

.our-story-page .story-origin-box .story-arya{color:#00dfcf;font-weight:900}

.our-story-page .story-origin-box h2{font-size:clamp(48px,7vw,78px);line-height:1.1;max-width:none;text-align:center;margin:12px auto 28px}
.our-story-page .story-origin-box [class*="story-color-"]{font-weight:800}
.our-story-page .story-color-blue{color:#075fc4}
.our-story-page .story-color-green{color:#087d42}
.our-story-page .story-color-pink{color:#c51b76}
.our-story-page .story-color-burgundy{color:#a2173d}
.our-story-page .story-color-orange{color:#b94b00}

.our-story-page .story-origin-box h2{-webkit-text-stroke:0;text-shadow:none}
.our-story-page .story-origin-box h2 .story-title-our{color:#ff279b}
.our-story-page .story-origin-box h2 .story-title-story{color:#00dfcf}

.our-story-page .story-origin-box h2>span{-webkit-text-stroke:2px #4b176b;paint-order:stroke fill;text-shadow:0 3px 0 #4b176b}

.our-story-page .story-origin-box .story-text-black{color:#000;font-weight:800}
.our-story-page .story-origin-box .story-company{color:#ffe600;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 1px 0 #000;font-weight:900}
.our-story-page .story-origin-box .story-muddle{color:#844019;font-weight:900;font-size:1.15em}

.our-story-page .story-origin-box p{color:#000;font-weight:400;-webkit-text-stroke:0;text-shadow:none}

.our-story-page .story-origin-box .story-company-outlined{color:#000;-webkit-text-stroke:1px #ffe600;paint-order:stroke fill;text-shadow:0 1px 0 #ffe600;font-weight:400}
.our-story-page .story-origin-box .story-arya-outlined{color:#ff279b;font-weight:900;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 1px 0 #000}

.our-story-page .story-origin-box .story-muddle-emphasis{color:#844019;font-weight:900}

.our-story-page .story-origin-box .story-yubbie-outlined{color:#0dce55;font-weight:900;-webkit-text-stroke:1px #000;paint-order:stroke fill;text-shadow:0 1px 0 #000}

.our-story-page .story-origin-box .story-muddle-emphasis{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.our-story-page .story-origin-box .story-yubbie-outlined{font-size:1.15em}

.hero .hero-copy .book-headline{margin-bottom:8px}
.book-story-divider{display:flex;justify-content:center;width:100%;margin:0 auto 20px}
.book-story-divider svg{display:block;width:min(260px,75%);height:auto;overflow:visible}

body:has(.our-story-page){background:linear-gradient(155deg,#fff6b0 0%,#eef7b9 45%,#c6edbb 100%)}

/* Roomy page frame and wider layouts for large screens. */
:root{--page-gutter:clamp(14px,2vw,38px)}
body header{padding-inline:clamp(20px,3vw,64px)}
main{width:calc(100% - 2 * var(--page-gutter));max-width:1880px;margin:24px auto 38px;border:3px solid #b89bdf;border-radius:30px;overflow:clip;box-shadow:0 8px 0 #d9c8ed;background:rgba(255,255,255,.48)}
.mission-pledge-row{max-width:none;margin:26px clamp(18px,2vw,36px) 28px;gap:22px}
.hero{padding:28px clamp(24px,3vw,58px) 46px;column-gap:5%;row-gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.hero .hero-copy{display:contents}
.hero .hero-copy .book-headline{grid-column:1/-1;font-size:clamp(30px,2.5vw,46px);line-height:1.23;margin:0 auto 8px}
.hero .book-story-divider{grid-column:1/-1;margin-bottom:26px}
.hero .hero-copy .intro{grid-column:1;grid-row:3;width:100%;max-width:740px;font-size:clamp(18px,1.35vw,24px);line-height:1.6;text-align:justify;text-align-last:center;text-wrap:pretty;align-self:center}
.hero>.cover{grid-column:2;grid-row:3;max-width:740px;justify-self:center;align-self:start}
.hero .cover-announcement{font-size:clamp(21px,1.7vw,30px);margin-bottom:18px}
.hero .cover-actions{margin-top:22px}
.article,.our-story-page,.characters-page,.order-surface{width:calc(100% - 48px);max-width:1500px;margin:26px auto 42px;padding:36px clamp(24px,3vw,58px) 48px}
.our-story-page .story-origin-box p{max-width:92ch;margin-inline:auto}
.product{width:calc(100% - 48px);max-width:1640px;margin:26px auto 44px;padding:36px clamp(24px,3vw,58px);gap:5%}
.tiles{max-width:1640px}
.care{padding:48px clamp(24px,3vw,58px)}
.characters-page .characters{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1101px){body header{grid-template-columns:230px minmax(0,1fr)}body header nav{justify-content:flex-end;gap:clamp(10px,1.3vw,26px)}body header nav a{font-size:clamp(18px,1.2vw,23px)}}
@media(max-width:1100px){body header{grid-template-columns:1fr;justify-items:center}body header .logo-link{justify-self:center}body header nav{justify-content:center}.characters-page .characters{grid-template-columns:repeat(2,minmax(0,1fr))}.mission-pledge-row{grid-template-columns:1fr 1.5fr 1fr;gap:14px}.mission-pledge-row .mission-box{padding:18px}.mission-box p{font-size:17px}}
@media(max-width:900px){.mission-pledge-row{grid-template-columns:1fr}.hero{grid-template-columns:1fr;padding:28px 6% 38px}.hero .hero-copy .intro{grid-column:1;grid-row:auto;max-width:650px;margin:0 auto 30px;font-size:20px;line-height:1.65}.hero>.cover{grid-column:1;grid-row:auto;max-width:620px}.hero .hero-copy .book-headline{font-size:clamp(25px,4.2vw,36px)}.article,.our-story-page,.characters-page,.order-surface,.product{width:calc(100% - 32px);padding:28px 5%;margin:20px auto 32px}}
@media(max-width:540px){main{margin-top:14px;border-width:2px;border-radius:22px}.mission-pledge-row{margin:18px 14px 24px}.hero .hero-copy .intro{font-size:18px;line-height:1.65}.hero .hero-copy .book-headline{font-size:clamp(23px,5.7vw,30px)}.characters-page .characters{grid-template-columns:1fr}.article,.our-story-page,.characters-page,.order-surface,.product{width:calc(100% - 24px);padding:24px 6%}.our-story-page p,.our-story-page .lead{font-size:19px}.story-origin-box{padding:20px 16px}.site-logo{width:170px}body header nav a{font-size:16px;padding:10px 12px;min-height:48px}.care{padding-inline:20px}}

@media(min-width:1101px){
.hero .hero-copy .intro{grid-row:4;font-size:clamp(20px,1.5vw,26px);line-height:1.6}
.hero>.cover{display:contents}
.hero>.cover>.cover-announcement{grid-column:2;grid-row:3;margin:0 0 18px}
.hero>.cover>img{grid-column:2;grid-row:4;width:100%;max-width:740px;justify-self:center;align-self:center}
.hero>.cover>.cover-actions{grid-column:2;grid-row:5}
}
@media(max-width:1100px){.hero{grid-template-columns:1fr}.hero .hero-copy .intro{grid-column:1;grid-row:3;max-width:720px;margin:0 auto 30px;font-size:20px;line-height:1.65}.hero>.cover{grid-column:1;grid-row:4;max-width:620px;justify-self:center}}

/* Keep the slogan, heart, and description together in the left column. */
@media(min-width:1101px){
.hero{align-items:start}
.hero .hero-copy{display:flex;grid-column:1;grid-row:1;position:static;align-self:center;gap:0}
.hero .hero-copy .book-headline{width:100%;font-size:clamp(28px,2.3vw,40px);margin:0 auto 8px;text-align:center}
.hero .hero-copy .book-story-divider{margin:0 auto 22px}
.hero .hero-copy .intro{font-size:clamp(18px,1.4vw,24px);line-height:1.55;margin:0 auto}
.hero>.cover{display:block;grid-column:2;grid-row:1;width:100%;max-width:740px}
}
@media(min-width:1101px) and (max-width:1200px){
.hero{grid-template-columns:1fr}
.hero .hero-copy{max-width:720px;justify-self:center;margin-bottom:30px}
.hero>.cover{grid-column:1;grid-row:2;max-width:620px}
}

body header{grid-template-columns:1fr;justify-items:center;gap:12px}
body header .logo-link{justify-self:center}
body header nav{justify-content:center;width:100%}
@media(min-width:761px){body header .site-logo{width:190px}}

/* Slightly narrower page and a more compact header. */
@media(min-width:761px){
main{width:92%;max-width:1640px;margin-top:20px}
body header{padding-top:10px;padding-bottom:14px;gap:8px}
body header .site-logo{width:155px}
body header nav a{padding:12px 20px;min-height:52px}
.article,.our-story-page,.characters-page,.order-surface{max-width:1360px}
.hero{padding-inline:clamp(24px,2.5vw,44px)}
.mission-pledge-row{margin-top:22px;gap:18px}
}

/* Logo beside the centered navigation on desktop and tablet. */
@media(min-width:761px){body header{grid-template-columns:155px minmax(0,1fr);align-items:center;gap:24px}body header .logo-link{justify-self:start}body header nav{justify-content:center}}
@media(min-width:1200px){body header{grid-template-columns:155px minmax(0,1fr) 155px}}

/* Center the logo and navigation together as one compact header group. */
@media(min-width:761px){
body header{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:34px;padding-inline:24px}
body header .logo-link{flex:0 0 auto}
body header .site-logo{width:220px}
body header nav{flex:0 1 auto;width:auto;max-width:900px;justify-content:center;gap:12px}
}
@media(min-width:761px) and (max-width:1050px){body header .site-logo{width:190px}body header nav{max-width:650px}body header nav a{font-size:18px;padding:12px 16px}}

/* One continuous homepage gradient, including the promise/mission/pledge area. */
main:has(>.mission-pledge-row){background:linear-gradient(115deg,#dfeaff 0%,#eedfff 50%,#fff0ad 100%)}
main:has(>.mission-pledge-row)>.hero{background:transparent}
.mission-pledge-row>.mission-box[aria-labelledby="mission-title"]{padding:18px 24px}
.mission-pledge-row>.mission-box[aria-labelledby="mission-title"] p{font-size:17px;line-height:1.5;max-width:46ch;text-wrap:balance}
.mission-pledge-row .mission-question .site-difference-color{margin:12px auto 8px}
@media(min-width:761px){.mission-pledge-row{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr) minmax(0,1fr)}}

/* Balance each centered paragraph in Arya’s origin story. */
.our-story-page .story-origin-box p{max-width:78ch;margin-inline:auto;text-wrap:balance;text-align:center}

.our-story-page .story-origin-box .story-closing-pink{color:#ff279b}

/* Balanced text without stretched spaces, and transient character flyers. */
.hero .hero-copy .intro{text-align:center;text-align-last:center;text-wrap:balance;word-spacing:normal;letter-spacing:normal}
.character-preview-trigger{cursor:help;white-space:nowrap;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:5px}
.character-preview-trigger:focus-visible{outline:2px solid #8b39b2;outline-offset:4px;border-radius:3px}
.character-hover-preview{position:fixed;z-index:1000;pointer-events:none;width:max-content;max-width:calc(100vw - 24px);padding:8px;border:2px solid #a470cf;border-radius:16px;background:#fff9e7;box-shadow:0 10px 32px #30295240}
.character-hover-preview[hidden]{display:none}
.character-hover-preview img{display:block;width:auto;height:auto;max-width:min(380px,calc(100vw - 44px));max-height:min(660px,calc(100vh - 44px));border-radius:9px}

/* Keep larger names from changing the spacing between individual lines. */
.hero .hero-copy .intro{line-height:1.75;word-spacing:0;letter-spacing:0}
.hero .intro .character-name{font-size:1.22em;line-height:0;vertical-align:baseline;letter-spacing:0}
.hero .intro .character-name>span{font-size:inherit;line-height:0;vertical-align:baseline}

/* Center and balance copy in every Our Story panel. */
.our-story-page :is(.story-origin-box,.story-purpose,.story-text-panel){text-align:center}
.our-story-page :is(.story-origin-box,.story-purpose,.story-text-panel) p{max-width:78ch;margin-inline:auto;text-align:center;text-align-last:center;text-wrap:balance;word-spacing:normal}
.our-story-page :is(.story-origin-box,.story-purpose,.story-text-panel) h2{text-align:center;text-wrap:balance;margin-inline:auto}

@media(min-width:1201px){.hero .hero-copy{transform:translateY(-28px)}}

/* A colorful, full-width welcome above the three promises. */
.welcome-panel{position:relative;margin:26px clamp(18px,2vw,36px) 30px;padding:24px clamp(22px,4vw,66px) 26px;text-align:center;border:3px solid #bd78cf;border-radius:28px;background:radial-gradient(ellipse at top left,#fff3aa 0%,transparent 55%),radial-gradient(ellipse at bottom right,#d9f8e9 0%,transparent 55%),linear-gradient(120deg,#fff9e9,#fff0f7 55%,#eee9ff);box-shadow:0 6px 0 #d8c4eb}
.welcome-confetti{display:flex;align-items:center;justify-content:center;gap:16px;font-size:20px;line-height:1;margin-bottom:12px;color:#ef398f}
.welcome-confetti span:first-child{color:#b37a05;font-size:24px}.welcome-confetti span:last-child{color:#258966;font-size:24px}
.welcome-panel h2{color:#573496;font-size:clamp(28px,3vw,44px);line-height:1.25;margin:0 auto 18px;text-wrap:balance}
.welcome-panel .welcome-brand{color:#c41f79}
.welcome-copy{max-width:1080px;margin-inline:auto}
.welcome-panel .welcome-copy p{font-size:18px;line-height:1.65;text-wrap:balance;margin:0 auto 14px;color:#263257}
.welcome-panel .welcome-purple{color:#812db0}.welcome-panel .welcome-pink{color:#c41f79}.welcome-panel .welcome-green{color:#087744}
.welcome-panel .welcome-copy .welcome-heartline{max-width:86ch;font-weight:700;color:#573496;margin-bottom:20px}
.welcome-panel .welcome-motto{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:10px;margin:0;font-family:Storybook,Georgia,serif;font-size:clamp(19px,2vw,26px);line-height:1.3;font-weight:700}
.welcome-motto span{padding:7px 15px;border-radius:999px;background:#fff;border:1px solid #e5b3d1}
.welcome-motto span:nth-of-type(1){color:#d0177c;background:#ffe0ef}.welcome-motto span:nth-of-type(2){color:#087744;background:#def7e7;border-color:#a6d8b8}.welcome-motto span:nth-of-type(3){color:#076ab5;background:#def3ff;border-color:#afd5ed}.welcome-motto b{color:#6f3f9d}
@media(max-width:760px){.welcome-panel{margin:18px 14px 24px;padding:22px 18px;border-radius:23px}.welcome-panel .welcome-copy p{font-size:17px;line-height:1.65}.welcome-panel .welcome-motto{gap:7px}.welcome-motto span{padding:6px 10px}}

/* Refreshed welcome colors and a compact, decorative sign-off. */
.welcome-panel{padding-top:18px;padding-bottom:20px}
.welcome-panel .welcome-brand{color:#b000e5}
.welcome-panel .welcome-sky{color:#20a9e9}
.welcome-panel .welcome-even{color:#000}
.welcome-panel .welcome-heart{color:#880a1f}
.welcome-panel h2{margin-bottom:14px}
.welcome-confetti{margin-bottom:8px}
.welcome-panel .welcome-copy p{line-height:1.55;margin-bottom:10px}
.welcome-panel .welcome-copy .welcome-heartline{color:#087744;margin-bottom:14px}
.welcome-panel .welcome-motto span{background:none;border:0;border-radius:0;box-shadow:none;padding:2px 8px 8px;text-decoration:underline wavy;text-decoration-thickness:2px;text-underline-offset:7px}
@media(max-width:760px){.welcome-panel{padding-top:18px;padding-bottom:18px}.welcome-panel .welcome-copy p{line-height:1.55}.welcome-panel .welcome-motto span{padding-inline:4px}}

/* Compact welcome panel with the requested bright accents. */
.welcome-panel{padding-top:14px;padding-bottom:16px}
.welcome-panel h2{margin-bottom:10px}
.welcome-panel .welcome-brand{color:#000;-webkit-text-stroke:3px #ffe500;paint-order:stroke fill;text-shadow:0 1px 0 #ffe500}
.welcome-panel .welcome-exclamation,.welcome-panel .welcome-heart{color:#ff171f}
.welcome-panel .welcome-lime{color:#70d500}
.welcome-panel .welcome-orange{color:#f07800}
.welcome-panel .welcome-copy p{line-height:1.5;margin-bottom:8px}
.welcome-panel .welcome-copy .welcome-heartline{color:#000;margin-bottom:12px}
.welcome-panel .welcome-motto span{text-decoration:none;border:2px solid currentColor;border-radius:3px;padding:3px 10px;background:transparent}
.welcome-panel .welcome-motto span:nth-of-type(2){color:#ffe500;background:#583482;border-color:#583482}
@media(max-width:760px){.welcome-panel{padding-top:14px;padding-bottom:16px}.welcome-panel .welcome-copy p{line-height:1.5}.welcome-panel .welcome-motto span{padding:3px 7px}}

.welcome-panel .welcome-greeting{color:#ff171f;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:0 1px 0 #000}
.welcome-panel .welcome-lavender{color:#602080}
.welcome-panel .welcome-lime{color:#086b3b}
.welcome-panel .welcome-motto span,.welcome-panel .welcome-motto span:nth-of-type(2){border-color:#000}

/* Books: full images side by side, with comfortable mobile stacking. */
.product .book-preview-gallery{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.book-preview-gallery figure{margin:0;min-width:0}
.book-preview-gallery img{display:block;width:100%;height:auto;object-fit:contain;border-radius:18px;box-shadow:5px 6px 0 #ffe45b}
.book-preview-gallery figcaption{margin-top:18px;text-align:center;font-weight:700;line-height:1.4}
.product .book-preview-gallery+div{grid-column:1/-1;width:100%;max-width:920px;margin-inline:auto}
@media(max-width:760px){.product .book-preview-gallery{grid-template-columns:1fr;gap:30px;max-width:550px;margin-inline:auto}.book-preview-gallery figure.cover{width:100%}}

/* Give all three Books previews identical frames without cropping artwork. */
.product .book-preview-gallery figure{width:100%;max-width:none}
.product .book-preview-gallery img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;object-position:center;background:#fff9e5;border-radius:18px;box-shadow:5px 6px 0 #ffe45b}
.product .book-preview-gallery figcaption{margin-top:18px;min-height:2.8em}

/* Our Story accents. */
.our-story-page .story-text-panel-1 .story-green{color:#f01824}
.our-story-page .story-text-panel-1 .story-purple{color:#008b8b}
.our-story-page .story-book-orange{color:#f07800}
.our-story-page .story-text-panel-3 .story-bright-green{color:#12c83c}

.our-story-page .story-signoff-pink{color:#ef168a}
.our-story-page .story-signoff-blue{color:#0866ee}

/* Three-book catalog and kindness previews. */
.books-showcase{padding:36px clamp(18px,3vw,44px) 48px;background:linear-gradient(130deg,#eee5ff,#fff5cf 50%,#e0f5e8);border-radius:26px}
.books-intro{text-align:center;max-width:850px;margin:0 auto 28px}
.books-intro .eyebrow{margin-bottom:12px;color:#74409b}
.books-intro h1{font-size:clamp(32px,3.3vw,50px);color:#57358e;letter-spacing:-1px;text-wrap:balance;margin-bottom:16px}
.books-intro p{margin-bottom:0;text-wrap:balance}
.book-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.catalog-book{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;padding:18px 18px 22px;border:2px solid #cdb1e9;border-radius:24px;box-shadow:0 5px 0 #d5c4e5;background:#fff7fc}
.catalog-flagship{background:#fffbe5;border-color:#e6bf4c;box-shadow:0 5px 0 #e9d58d}
.catalog-older{background:#edf9ff;border-color:#a7cde6;box-shadow:0 5px 0 #bedceb}
.catalog-cover{position:relative;width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.catalog-cover img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:14px}
.catalog-book .catalog-format{font-size:13px;line-height:1.4;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 10px;color:#633e88}
.catalog-book h2{font-size:clamp(23px,2.1vw,31px);line-height:1.2;text-wrap:balance;margin:0 0 12px;color:#7e248f}
.catalog-baby h2{color:#c81574}
.catalog-book .catalog-audience{font-size:16px;line-height:1.5;text-wrap:balance;margin:0 0 18px}
.catalog-book .badge{margin: auto 0 0}
.catalog-details{font-weight:700;font-size:15px;margin-top:12px;color:#61348e}
.catalog-orange{color:#ed7400}.catalog-green{color:#079945}.catalog-blue{color:#0678d5}
.book-kindness-extras{margin-top:48px;padding-top:32px;border-top:2px solid #c7b4e1}
.book-kindness-extras h2{color:#14734f;font-size:clamp(27px,2.6vw,38px);line-height:1.2;text-wrap:balance;margin-bottom:14px}
.kindness-extras-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:1000px;margin:auto}
.kindness-extras-grid figure{margin:0;min-width:0;padding:14px;background:#fff9e9;border:2px solid #d0b4e8;border-radius:22px;box-shadow:0 5px 0 #d9cbe5}
.kindness-extras-grid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:14px}
.kindness-extras-grid figcaption{margin:12px 0 3px;font-weight:700;color:#543481;font-size:18px}
@media(max-width:850px){.book-catalog{grid-template-columns:1fr;max-width:560px;margin:auto}.catalog-book h2{font-size:29px}.catalog-cover{max-width:420px}.catalog-book .badge{margin-top:0}.kindness-extras-grid{grid-template-columns:1fr;max-width:560px}.books-showcase{padding:28px 16px 36px}}

.catalog-book .board-meet-names{font-size:17px;line-height:1.6;margin:0 0 18px;text-wrap:balance}
.board-character-preview{font-weight:700;color:#713694;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px;cursor:help}
.board-character-preview:hover,.board-character-preview:focus-visible{color:#cf167d}
.board-character-preview:focus-visible{outline:2px solid #713694;outline-offset:4px;border-radius:2px}

.board-character-preview[data-preview-friend="Mista"]{color:#8a0303}
.board-character-preview[data-preview-friend="Tavi"]{color:#008b8b}
.board-character-preview[data-preview-friend="Sovie"]{color:#8b20c5}

.board-character-preview[data-preview-friend="Lorik"]{color:#0866ee}
.board-character-preview[data-preview-friend="Arya"]{color:#ed1687}
.board-character-preview[data-preview-friend="Marlov"]{color:#ed7800}

.catalog-flagship .board-character-preview[data-preview-friend="Yubbie"]{color:#078744}
.catalog-flagship .board-character-preview[data-preview-friend="Baadger"]{color:#e01828}
.catalog-flagship .board-character-preview[data-preview-friend="Lorik"]{color:#0866ee}
.catalog-flagship .board-character-preview[data-preview-friend="Sovie"]{color:#8b20c5}

.characters-page .friend-card[data-friend="Mista"]{background:#fff0e4}
.characters-page .friend-card[data-friend="Marlov"]{background:#e9f7e7}
.characters-page .friend-card[data-friend="Arya"]{background:#ffe7f3}
.characters-page .friend-card[data-friend="Tavi"]{background:#e5f6ef}
.site-mista-color{color:#8a0303}.site-marlov-color{color:#ed7800}.site-arya-color{color:#ed1687}.site-tavi-color{color:#008b8b}

.character-page-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;cursor:help}

/* Arya's photo accompanies the origin story. */
.arya-origin-layout{display:grid;grid-template-columns:minmax(190px,28%) minmax(0,1fr);gap:clamp(22px,3vw,40px);align-items:start;max-width:1200px;margin:24px auto 0}
.arya-origin-photo{margin:0;padding:8px;border:2px solid #d6b5e9;border-radius:22px;background:#fff;box-shadow:0 5px 0 #ead6ef}
.arya-origin-photo img{display:block;width:100%;height:auto;border-radius:15px}
.our-story-page .arya-origin-copy p{max-width:64ch;text-align:center;text-wrap:balance}
@media(max-width:800px){.arya-origin-layout{grid-template-columns:1fr;gap:26px}.arya-origin-photo{width:min(100%,250px);margin:auto}}

/* Let Arya sit directly on the story background with flowing text. */
.arya-origin-layout{display:flow-root;max-width:1200px}
.arya-origin-photo{float:left;width:29%;max-width:300px;margin:0 30px 18px 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;mix-blend-mode:multiply}
.arya-origin-photo img{border-radius:0}
.arya-origin-copy{display:contents}
.our-story-page .arya-origin-copy p{max-width:none;text-wrap:pretty}
@media(max-width:560px){.arya-origin-photo{float:none;width:min(65%,230px);margin:0 auto 24px}.arya-origin-layout{display:flow-root}}