/* Generated by build_free.py from the homepage styles. */

:root {
  --sky: #5bb8ee; --sky-soft: #e4f3fd; --navy: #13216b; --orange: #f47a12; --butter: #fff6d6; --paper: #ffffff; --ink-soft: #3d4a85;
  --c-blue: #0d93ee; --c-yellow: #f7c90d; --c-green: #a2c12a; --c-pink: #e8588a; --c-purple: #8e6ab8; --c-orange: #f47a12;
  --display: "Comic Neue", "Comic Sans MS", "Chalkboard SE", cursive;
  --body: "Nunito", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
section, header { scroll-margin-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
h1, h2 { font-family: var(--display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); }
p { margin: 0; }
a { color: inherit; }
.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: 20px; }
section { padding-block: clamp(48px, 7vw, 88px); }
.crayons { display: grid; grid-template-columns: repeat(6, 1fr); height: 12px; }
.crayons span:nth-child(1){background:var(--c-blue)} .crayons span:nth-child(2){background:var(--c-yellow)}
.crayons span:nth-child(3){background:var(--c-green)} .crayons span:nth-child(4){background:var(--c-pink)}
.crayons span:nth-child(5){background:var(--c-purple)} .crayons span:nth-child(6){background:var(--c-orange)}
.topnav { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.94); backdrop-filter: blur(6px); border-bottom: 1px solid #e8eef8; }
.topnav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.25rem; color: var(--navy); }
.brand img { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--sky); }
.topnav ul { display: flex; gap: clamp(12px, 2.5vw, 28px); list-style: none; margin: 0; padding: 0; font-weight: 800; font-size: 0.98rem; }
.topnav a { text-decoration: none; }
.topnav ul a:hover { color: var(--orange); }
.topnav ul a { white-space: nowrap; }
.topnav .mb { display: none; }
.hero { padding-block: clamp(28px, 4vw, 52px) clamp(40px, 5vw, 64px); background: linear-gradient(180deg, #fff 0%, var(--sky-soft) 100%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.hero-copy { display: grid; gap: 14px; justify-items: start; }
.hero .logo { width: min(330px, 100%); }
.new-flag { font-weight: 800; font-size: 0.9rem; color: var(--paper); background: var(--c-pink); padding: 5px 14px; border-radius: 999px; }
.series { font-family: var(--display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); color: var(--navy); }
.tagline { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); color: var(--ink-soft); max-width: 36ch; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.btn.ghost { background: var(--paper); color: var(--navy); box-shadow: 0 4px 0 var(--navy); border: 2px solid var(--navy); padding: 10px 22px; }
.btn.ghost:hover { box-shadow: 0 2px 0 var(--navy); }
.feature { margin: 0; display: grid; justify-items: center; gap: 16px; }
.stack { position: relative; width: min(330px, 78%); aspect-ratio: 8.5 / 11; }
.stack img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px 12px 12px 4px; box-shadow: -5px 0 0 rgba(19,33,107,.18) inset, 0 18px 34px rgba(19,33,107,.25); }
.stack .back { transform: translate(18%, 3%) rotate(8deg) scale(.9); filter: saturate(.9); }
.stack .front { transform: rotate(-3deg); }
.sticker { position: absolute; top: -14px; left: -22px; z-index: 2; width: 92px; height: 92px; border-radius: 50%; background: var(--orange); color: var(--paper); display: grid; place-content: center; text-align: center; font-family: var(--display); font-weight: 700; font-size: 0.95rem; line-height: 1.1; transform: rotate(-12deg); box-shadow: 0 6px 14px rgba(19,33,107,.25); }
.feature figcaption { text-align: center; display: grid; gap: 6px; justify-items: center; max-width: 34ch; }
.feature figcaption b { font-family: var(--display); font-size: 1.3rem; }
.feature figcaption span.txt { color: var(--ink-soft); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; padding: 0; list-style: none; }
.why { background: var(--paper); }
.why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 30px; padding: 0; list-style: none; }
.why-grid li { background: var(--paper); border: 2px solid #e8eef8; border-top: 8px solid var(--c-blue); border-radius: 16px; padding: 18px; display: grid; gap: 6px; align-content: start; }
.why-grid li:nth-child(2) { border-top-color: var(--c-yellow); } .why-grid li:nth-child(3) { border-top-color: var(--c-green); } .why-grid li:nth-child(4) { border-top-color: var(--c-pink); }
.why-grid b { font-family: var(--display); font-size: 1.2rem; }
.why-grid span { color: var(--ink-soft); font-size: 1rem; }
.hello { background: var(--sky); text-align: center; }
.hello .wrap { display: grid; gap: 14px; justify-items: center; }
.hello h2 { color: var(--paper); text-shadow: 0 2px 0 var(--navy); }
.hello p { color: var(--navy); font-size: 1.15rem; max-width: 46ch; }
.facts li { font-weight: 800; font-size: 0.95rem; padding: 6px 14px; border-radius: 999px; background: var(--sky-soft); color: var(--navy); }
.facts li.hunt { background: var(--butter); }
.meet { background: var(--sky); }
.meet .wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.bunny-card { margin: 0; background: var(--paper); border-radius: 28px; padding: 10px; justify-self: center; width: min(300px, 100%); box-shadow: 0 14px 30px rgba(19,33,107,.28); transform: rotate(-2deg); }
.bunny-card img { border-radius: 20px; }
.meet h2 { color: var(--paper); text-shadow: 0 2px 0 var(--navy); margin-bottom: 14px; }
.meet .card { color: var(--navy); font-size: 1.15rem; max-width: 58ch; background: var(--paper); padding: 22px 24px; border-radius: 20px; display: grid; gap: 12px; }
.shelf-head { text-align: center; margin-bottom: 36px; display: grid; gap: 8px; }
.shelf-head p { color: var(--ink-soft); }
.books { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 30px); padding: 0; margin: 0; list-style: none; }
.book { display: grid; gap: 10px; text-align: center; align-content: start; }
.book figure { margin: 0; aspect-ratio: 8.5 / 11; border-radius: 4px 10px 10px 4px; overflow: hidden; box-shadow: -4px 0 0 rgba(19,33,107,.18) inset, 0 10px 22px rgba(19,33,107,.18); transition: transform .2s ease; }
.book figure img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .book:hover figure { transform: translateY(-6px) rotate(-1deg); } }
.book h3 { font-family: var(--display); font-size: 1.2rem; margin: 0; line-height: 1.2; }
.chip { justify-self: center; font-size: 0.78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); border: 2px solid var(--orange); border-radius: 999px; padding: 2px 12px; }
.buy { justify-self: center; font-weight: 800; font-size: 0.95rem; text-decoration: none; color: var(--paper); background: var(--orange); padding: 7px 16px; border-radius: 999px; box-shadow: 0 3px 0 #b9560a; }
.buy:hover { transform: translateY(1px); box-shadow: 0 2px 0 #b9560a; }
.more { text-align: center; margin-top: 40px; font-family: var(--display); font-size: 1.35rem; color: var(--navy); }
.free { background: var(--sky-soft); }
.free .wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.sheet { margin: 0; background: var(--paper); padding: 10px; box-shadow: 0 12px 26px rgba(19,33,107,.18); transform: rotate(-2deg); max-width: 300px; justify-self: center; }
.free-text { display: grid; gap: 14px; justify-items: start; }
.free-text p { max-width: 48ch; color: var(--ink-soft); }
.btn { display: inline-block; font-weight: 800; font-size: 1.05rem; text-decoration: none; color: var(--paper); background: var(--orange); padding: 12px 24px; border-radius: 999px; box-shadow: 0 4px 0 #b9560a; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #b9560a; }
.btn:focus-visible, .buy:focus-visible, footer a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.fine { font-size: 0.85rem; color: var(--ink-soft); }
.real { background: var(--butter); }
.real .wrap { max-width: 760px; display: grid; gap: 18px; }
.real p { font-size: 1.15rem; }
.real .closing { font-family: var(--display); font-size: 1.4rem; color: var(--orange); margin-top: 6px; }
footer { background: var(--navy); color: var(--paper); padding-block: 36px; text-align: center; font-size: 0.95rem; }
footer .wrap { display: grid; gap: 6px; justify-items: center; }
footer .mini { width: 64px; }
footer .small { opacity: .8; font-size: 0.85rem; }
footer a { color: var(--paper); font-weight: 800; }
@media (max-width: 900px) { .books { grid-template-columns: repeat(3, minmax(0, 1fr)); } .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px; }
  .hero-copy { display: contents; }
  .new-flag { order: 1; } .hero .logo { order: 2; width: min(210px, 62%); } .series { order: 3; } .tagline { order: 4; }
  .feature { order: 5; margin-top: 10px; } .cta { order: 6; } .facts { order: 7; }
  .sticker { width: 74px; height: 74px; font-size: 0.82rem; left: -18px; }
  .cta, .facts { justify-content: center; }
  .stack { width: min(240px, 62%); }
  .brand span { display: none; }
  .topnav ul { font-size: 0.9rem; gap: 14px; }
  .meet .wrap { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .meet .card { text-align: left; }
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free .wrap { grid-template-columns: minmax(0, 1fr); }
  .sheet { max-width: 240px; }
  .free-text { justify-items: center; text-align: center; }
}
@media (max-width: 480px) {
  .topnav .dk { display: none; } .topnav .mb { display: inline; }
  .brand { display: none; }
  .topnav .wrap { justify-content: center; padding-inline: 12px; }
  .topnav ul { gap: 13px; font-size: 0.88rem; }
}

/* ---- Free Coloring Pages ---- */
.free-hero { background: linear-gradient(180deg, var(--sky-soft), #fff); padding: 44px 0 30px; text-align: center; }
.free-hero h1 { font-family: var(--display); color: var(--navy); font-size: clamp(2.1rem, 5vw, 3.1rem); margin: 0 0 10px; line-height: 1.1; }
.free-hero p { color: var(--ink-soft); font-size: 1.15rem; max-width: 56ch; margin: 0 auto; }
.free-hero .crumbs { font-weight: 800; margin-bottom: 14px; }
.free-hero .crumbs a { color: var(--ink-soft); }
.fbook { padding: 40px 0 46px; border-top: 1px solid #e8eef8; }
.fbook-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.fbook-head img { width: 84px; height: auto; border-radius: 6px; box-shadow: 0 6px 16px rgba(19,33,107,.18); }
.fbook-head h2 { font-family: var(--display); color: var(--navy); margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.fbook-head p { margin: 2px 0 0; color: var(--ink-soft); font-weight: 600; }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.fcard { background: #fff; border: 1px solid #e3ecf8; border-radius: 18px; padding: 14px 14px 18px; display: grid; gap: 10px; justify-items: center; text-align: center; scroll-margin-top: 76px; }
.fcard:target { box-shadow: 0 0 0 4px var(--c-yellow); }
.fcard a.thumb { display: block; width: 100%; }
.fcard img { display: block; width: 100%; height: auto; border: 1px solid #e3e3e3; border-radius: 6px; background: #fff; }
.fcard h3 { margin: 4px 0 0; font-family: var(--display); color: var(--navy); font-size: 1.2rem; }
.fcard .pagelink { font-size: .9rem; font-weight: 700; color: var(--ink-soft); }
.fbook .more { text-align: center; margin-top: 28px; }
.fsingle { padding: 34px 0 50px; }
.fsingle .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.fsingle .sheet { margin: 0; background: #fff; padding: 10px; box-shadow: 0 12px 26px rgba(19,33,107,.18); border-radius: 4px; }
.fsingle .sheet img { display: block; width: 100%; height: auto; }
.fsingle h1 { font-family: var(--display); color: var(--navy); font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin: 0 0 8px; line-height: 1.12; }
.fsingle .from { font-weight: 800; color: var(--orange); margin: 0 0 12px; }
.fsingle .desc { color: var(--ink-soft); font-size: 1.1rem; margin: 0 0 20px; }
.fsingle .actions { display: grid; gap: 14px; justify-items: start; }
.fsingle .fine { color: var(--ink-soft); font-size: .92rem; margin: 6px 0 0; }
.bookcta { margin-top: 26px; display: flex; gap: 16px; align-items: center; background: var(--butter); border-radius: 16px; padding: 14px; }
.bookcta img { width: 78px; height: auto; border-radius: 5px; box-shadow: 0 4px 10px rgba(19,33,107,.18); }
.bookcta p { margin: 0 0 8px; font-weight: 700; color: var(--navy); }
.morefree { padding: 10px 0 46px; }
.morefree h2 { font-family: var(--display); color: var(--navy); text-align: center; margin: 0 0 18px; }
.morefree .fgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
.morefree .fcard { padding: 10px; }
.morefree .fcard h3 { font-size: 1rem; }
.btn.amazon, .buy.amazon { background: var(--navy); box-shadow: 0 4px 0 #0a1340; }
.buy, .btn { line-height: 1.3; text-align: center; }
.bookcta .buy { display: inline-block; }
.morefree .buy { font-size: .85rem; padding: 6px 12px; }
.topnav a[aria-current="page"] { color: var(--orange); }
@media (max-width: 760px) {
  .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .fsingle .wrap { grid-template-columns: 1fr; gap: 24px; }
  .fsingle .actions { justify-items: stretch; text-align: center; }
}
@media (max-width: 480px) {
  .fgrid { grid-template-columns: 1fr; }
  .morefree .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbook-head img { width: 64px; }
}