:root{--navy:#1C2B5A;--teal:#1F9E9A;--sky:#E6F3FC;--paper:#FFFFFF;--ink:#24304F;--line:#1C2B5A;
--red:#E5483B;--orange:#F28C28;--yellow:#E2A900;--green:#3FA34D;--blue:#3B7DD8;--purple:#7B57C2;
font-size:112.5%}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Andika","Trebuchet MS",system-ui,sans-serif;line-height:1.6;
padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--teal)}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.25rem}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:9}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{color:var(--navy);line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,5vw,2.9rem);margin:.2em 0}
h2{font-size:clamp(1.45rem,3vw,1.85rem);margin:1.6em 0 .4em}
h3{font-size:1.2rem;margin:1.2em 0 .3em}
.top{border-bottom:3px solid var(--navy)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:.7rem;padding-bottom:.7rem}
.logo svg{height:34px;width:auto;font:700 34px "Andika",sans-serif;display:block}
.logo text{paint-order:stroke;stroke:var(--navy);stroke-width:1.2px}
.top nav{display:flex;gap:1.25rem}
.top nav a{text-decoration:none;font-weight:700}
.top nav a:hover{text-decoration:underline}
/* hero: outlined lettering that gets colored in */
.hero{padding:2.5rem 0 3rem;text-align:center;background:var(--sky);border-bottom:3px solid var(--navy)}
.hero-word{width:100%;max-width:900px;height:auto;margin:0 auto;display:block}
.hero-word text{font:700 112px "Andika",sans-serif}
.hero-word .outline{fill:none;stroke:var(--navy);stroke-width:3.5px;stroke-linejoin:round}
.stripe{transform-box:fill-box;transform-origin:left;transform:scaleX(0);animation:fill .5s cubic-bezier(.5,0,.3,1) forwards;animation-delay:calc(.3s + var(--i)*.22s)}
@keyframes fill{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.stripe{animation:none;transform:none}}
.lede{font-size:1.2rem;max-width:40em;margin:1rem auto}
.bio .lede{margin-left:0}
.actions{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
.hero .actions{justify-content:center}
.btn{display:inline-block;background:var(--teal);color:#fff;font-weight:700;text-decoration:none;padding:.65rem 1.3rem;border-radius:999px;border:3px solid var(--navy);box-shadow:0 4px 0 var(--navy)}
.btn:hover{color:#fff;background:#178a86}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.text-link{font-weight:700}
.band{padding:2.5rem 0 3rem;text-align:center}
.band.soft{background:var(--sky);border-top:3px solid var(--navy);border-bottom:3px solid var(--navy);text-align:left}
.band h2{margin-top:0}
.sub{margin:.3rem auto 0;max-width:40em}
/* book-page frame: double rounded border + star rule, like the text pages */
.rule{display:flex;align-items:center;gap:.6rem;max-width:280px;margin:.4rem auto 1.2rem;color:var(--navy)}
.rule span{flex:1;height:3px;background:var(--navy);border-radius:2px}
.rule svg{width:22px;height:22px;fill:var(--yellow);stroke:var(--navy);stroke-width:1.6}
.frame{border:3px solid var(--navy);border-radius:24px;padding:1.6rem;position:relative}
.frame::before{content:"";position:absolute;inset:7px;border:1.2px solid var(--navy);border-radius:18px;pointer-events:none}
.books{list-style:none;padding:0;margin:2rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2.2rem}
.book{text-align:left}
.cover{display:block;aspect-ratio:300/388;border:3px solid var(--navy);border-radius:10px;overflow:hidden;box-shadow:6px 6px 0 var(--navy)}
.cover img{width:100%;height:100%;object-fit:cover}.cover:hover{transform:rotate(-1deg)}
.book h3{margin:1rem 0 .1rem}
.book h3 a{text-decoration:none}
.tagline{margin:0 0 .8rem;color:var(--teal);font-weight:700}
.tagline.big{font-size:1.3rem}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2.5rem}
.inside{padding-left:1.2rem}.inside li{margin:.35rem 0}
.coming{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;text-align:left;margin-top:1.5rem}
.coming li{border:2px dashed var(--navy);border-radius:14px;padding:.9rem 1.1rem}
.coming strong{display:block;color:var(--navy)}
.coming span{color:#4A5675;font-size:.95rem}
/* bio pages */
.bio{padding:1.2rem 0 3rem}
.crumbs{font-size:.9rem;margin-bottom:1rem}
.bio-head{display:grid;grid-template-columns:1fr 260px;gap:2.5rem;align-items:start}
.bio-cover img{border:3px solid var(--navy);border-radius:10px;box-shadow:6px 6px 0 var(--navy)}
.bio-cover{margin:0}
.say{display:flex;gap:2rem;margin:1rem 0;flex-wrap:wrap}
.say dt{font-size:.85rem;color:#4A5675}.say dd{margin:0;font-weight:700;color:var(--navy);font-size:1.15rem}
.prose{max-width:38em;margin:0 auto}
.prose-wrap .rule{margin-left:0}
.prose p{font-size:1.08rem}
.facts{background:var(--sky);border-radius:18px;padding:.3rem 1.5rem 1rem;margin:2rem 0;border:3px solid var(--navy)}
.facts h2{margin-top:1rem}
.facts li,.talk li{margin:.35rem 0}
.buy{max-width:38em;margin:2.5rem auto 0;background:#FFF9E6}
.buy h2{margin-top:0}
.more{max-width:38em;margin:2rem auto 0}
.more ul{display:flex;gap:1.5rem;flex-wrap:wrap;padding:0;list-style:none;font-weight:700}
.foot{border-top:3px solid var(--navy);padding:1.5rem 0;font-size:.95rem;margin-top:2rem}
.foot a{margin-right:1rem}
.small{font-size:.85rem;color:#4A5675}
@media (max-width:720px){.bio-head{grid-template-columns:1fr}.bio-cover{max-width:220px}.top nav{gap:1rem}.logo svg{height:28px}}
.books .book{max-width:340px;margin:0 auto;width:100%}
/* header banner logo */
.logo img{height:46px;width:auto}
@media (max-width:720px){.logo img{height:36px}}
/* hero scene: characters pop in as line art, then color themselves */
.hero{padding:1.5rem 0 2.5rem}
.scene{position:relative;width:100%;max-width:980px;margin:0 auto;aspect-ratio:1168/770}
.scene img{position:absolute;height:auto;max-width:none}
.ban{z-index:5;animation:unfurl .8s cubic-bezier(.3,1.3,.5,1) both}
@keyframes unfurl{from{clip-path:inset(0 50% 0 50%);transform:translateY(-12px)}to{clip-path:inset(0 0 0 0);transform:none}}
.fig{position:absolute;aspect-ratio:auto;animation:pop .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(.7s + var(--i)*.28s);transform-origin:50% 100%}
.fig img{position:relative;display:block;width:100%}
.fig .bw{}
.fig .col{position:absolute;inset:0;clip-path:inset(100% 0 0 0);animation:colorin .9s ease-in-out forwards;animation-delay:calc(2.1s + var(--i)*.4s)}
@keyframes pop{from{opacity:0;transform:scale(.55) translateY(30px)}to{opacity:1;transform:none}}
@keyframes colorin{to{clip-path:inset(0 0 0 0)}}
.roll{z-index:6;animation:roll .7s cubic-bezier(.3,1.2,.5,1) both;animation-delay:calc(3.6s + var(--j)*.15s)}
@keyframes roll{from{opacity:0;transform:translateX(-60px) rotate(-30deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ban,.fig,.roll{animation:none}.fig .col{animation:none;clip-path:none}}