*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:#12385d;background:#fffdf7;font-family:Arial Rounded MT Bold,Arial,sans-serif}
header{height:70px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fffdf8;position:relative;z-index:10;border-bottom:1px solid #dce8ef}
.logo{display:flex;align-items:center;gap:12px;color:#12385d;text-decoration:none;font-size:22px;font-weight:900}.mark{display:flex;gap:4px}.mark i{display:block;width:8px;height:31px;border-radius:8px;transform:rotate(-10deg)}.mark i:nth-child(1){background:#f24d70}.mark i:nth-child(2){background:#2b9ee9}.mark i:nth-child(3){background:#ffd64a}.mark i:nth-child(4){background:#ee72a9}.mark i:nth-child(5){background:#ff8736}
nav{display:flex;gap:30px}nav a{color:#12385d;text-decoration:none;font-weight:900}#menu{display:none;border:0;background:none;font-size:25px;color:#12385d}
.art-section{width:100%;overflow:hidden}.hero-art{background:#eaf8ff;padding:0 3% 22px}.friends-art{background:#eefaff;padding:48px 3%}.magic-art-v13{background:linear-gradient(100deg,#fff8db,#effcff);padding:55px 3%}
.art-wrap{position:relative;max-width:1600px;margin:0 auto;overflow:hidden}.art-wrap img{display:block;width:100%;height:auto}
.hotspot{position:absolute;display:block;z-index:5;border-radius:999px}
.hero-friends{left:11.4%;top:73%;width:12.5%;height:12%}.hero-books{left:25.5%;top:73%;width:11.7%;height:12%}
.magic-button{left:4.5%;top:70%;width:14.5%;height:20%}
.why{padding:70px 8%;background:#fffdf7}.why>span,.more-heading>span{letter-spacing:3px;font-size:12px;font-weight:900;color:#3379a1}.why h2,.more-heading h2{font-size:48px;line-height:1.05;margin:8px 0 18px}.why h2 em{font-style:normal;color:#f34e73}.why p,.more-heading p{font-family:Arial,sans-serif;color:#5e7b92;font-size:18px;line-height:1.55;max-width:900px}.chips{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px}.chips b{background:#e9f7ff;padding:12px 20px;border-radius:24px}
.more-v13{background:#eff9ff;padding:62px 3%}.more-heading{text-align:center;max-width:900px;margin:0 auto 30px}.cards-wrap{border-radius:26px}
.follow-art-v13{background:#062f60;padding:0 3% 28px}.night-wrap{max-width:1600px}
.yt{left:61.5%;top:15%;width:3.4%;height:27%}.ig{left:65.7%;top:15%;width:3.4%;height:27%}.tt{left:69.8%;top:15%;width:3.4%;height:27%}.fb{left:74%;top:15%;width:3.4%;height:27%}.email{left:70.5%;top:61%;width:23%;height:27%}
footer{padding:20px 6%;display:flex;justify-content:space-between;gap:25px;color:#12385d}footer span,footer small{color:#607c92}
@media(max-width:720px){
 header{height:66px;padding:0 4%}.logo{font-size:18px}nav{display:none;position:absolute;right:12px;top:58px;flex-direction:column;background:#fff;padding:18px;border-radius:16px;box-shadow:0 10px 25px #12385d33}nav.open{display:flex}#menu{display:block}
 .hero-art{padding:0 0 16px}.hero-wrap{width:100%;overflow:hidden}.hero-wrap img{width:205%;max-width:none;transform:translateX(-5%)}.hero-friends{left:15%;top:72%;width:27%;height:12%}.hero-books{left:45%;top:72%;width:25%;height:12%}
 .friends-art{padding:32px 0}.friends-art .art-wrap{width:175%;transform:translateX(-21%)} 
 .magic-art-v13{padding:34px 0}.magic-wrap{width:185%;transform:translateX(-2%)}.magic-button{left:4.5%;top:69%;width:15%;height:21%}
 .why{padding:50px 6%}.why h2,.more-heading h2{font-size:38px}
 .more-v13{padding:48px 0}.more-heading{padding:0 6%}.cards-wrap{width:190%;transform:translateX(-3%)}
 .follow-art-v13{padding:0 0 18px}.night-wrap{width:210%;transform:translateX(-6%)} 
 footer{flex-direction:column;align-items:center;text-align:center;gap:8px}
}


/* ===== V14 precision fixes ===== */

/* Cards artwork already includes its own title/subtitle. */
.more-v13{
  padding:38px 0 52px;
}
.more-v13 .cards-wrap{
  max-width:none;
  width:100%;
  border-radius:0;
}
.more-v13 .cards-wrap img{
  width:100%;
}

/* Make the entire night-sky reference artwork reach both viewport edges. */
.follow-art-v13{
  padding:0;
  width:100%;
  background:#062f60;
}
.follow-art-v13 .night-wrap{
  width:100%;
  max-width:none;
  margin:0;
  overflow:hidden;
}
.follow-art-v13 .night-wrap img{
  display:block;
  width:100%;
  height:auto;
}

/* Click targets aligned to the icon centers in the baked night artwork.
   Each target is intentionally tight so neighboring icons do not overlap. */
.follow-art-v13 .yt{
  left:68.1%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .ig{
  left:72.0%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .tt{
  left:75.8%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .fb{
  left:79.7%;
  top:16.5%;
  width:3.0%;
  height:24%;
}
.follow-art-v13 .email{
  left:65.0%;
  top:62%;
  width:28.5%;
  height:25%;
}

/* Override the old mobile transforms so this section also stays full bleed. */
@media(max-width:720px){
  .more-v13{
    padding:30px 0 38px;
  }
  .more-v13 .cards-wrap{
    width:100%;
    transform:none;
  }
  .follow-art-v13{
    padding:0;
  }
  .follow-art-v13 .night-wrap{
    width:190%;
    max-width:none;
    transform:translateX(-45%);
  }

  /* On the mobile crop, keep the interactive right-hand controls aligned. */
  .follow-art-v13 .yt{left:68.1%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .ig{left:72.0%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .tt{left:75.8%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .fb{left:79.7%;top:16.5%;width:3%;height:24%}
  .follow-art-v13 .email{left:65%;top:62%;width:28.5%;height:25%}
}


/* ===== V15 cleanup + exact clickable icon alignment ===== */

/* The residual strips were removed directly from hero.jpg and cards.jpg. */

/* Exact hotspots for the four social icons baked into night_v13.jpg.
   Coordinates are relative to the actual 1280px-wide source artwork. */
.follow-art-v13 .yt{
  left:74.9%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .ig{
  left:79.0%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .tt{
  left:83.1%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .fb{
  left:87.2%;
  top:16.5%;
  width:3.5%;
  height:27%;
}
.follow-art-v13 .email{
  left:71.1%;
  top:64%;
  width:25.2%;
  height:28%;
}

/* Same source-image coordinates remain valid on mobile because the
   hotspots live inside the transformed night-wrap itself. */
@media(max-width:720px){
  .follow-art-v13 .yt{left:74.9%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .ig{left:79.0%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .tt{left:83.1%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .fb{left:87.2%;top:16.5%;width:3.5%;height:27%}
  .follow-art-v13 .email{left:71.1%;top:64%;width:25.2%;height:28%}
}


/* ===== V16 final fine tuning ===== */

/* Let the Magic Pencil banner use substantially more of the screen width
   instead of sitting inside the old 1600px art-wrap constraint. */
.magic-art-v13{
  padding-left:0;
  padding-right:0;
}
.magic-art-v13 .magic-wrap{
  width:94%;
  max-width:none;
  margin:0 auto;
}
.magic-art-v13 .magic-wrap img{
  width:100%;
}

/* Tight independent social hotspots.
   V15 was slightly right-heavy, so all four targets move left and are narrower
   to prevent YouTube/Instagram and TikTok/Facebook cross-over. */
.follow-art-v13 .yt{
  left:73.7%;
  top:16.5%;
  width:2.6%;
  height:27%;
}
.follow-art-v13 .ig{
  left:77.8%;
  top:16.5%;
  width:2.6%;
  height:27%;
}
.follow-art-v13 .tt{
  left:81.9%;
  top:16.5%;
  width:2.6%;
  height:27%;
}
.follow-art-v13 .fb{
  left:86.0%;
  top:16.5%;
  width:2.6%;
  height:27%;
}

/* Keep mobile targets tied to the same source-image positions. */
@media(max-width:720px){
  .magic-art-v13 .magic-wrap{
    width:185%;
    max-width:none;
    margin:0;
    transform:translateX(-2%);
  }
  .follow-art-v13 .yt{left:73.7%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .ig{left:77.8%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .tt{left:81.9%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .fb{left:86.0%;top:16.5%;width:2.6%;height:27%}
}


/* ===== V17 surgical image cleanup ===== */

/* Magic Pencil: after physically cropping the empty margins, let artwork fill
   nearly the entire viewport while preserving its aspect ratio and readable text. */
.magic-art-v13{
  overflow:hidden;
}
.magic-art-v13 .magic-wrap{
  width:98%;
  max-width:none;
  margin:0 auto;
}
.magic-art-v13 .magic-wrap img{
  display:block;
  width:100%;
  height:auto;
  object-fit:fill;
}

/* V17 intentionally leaves the now-correct social hotspots from V16 untouched. */

@media(max-width:720px){
  .magic-art-v13 .magic-wrap{
    width:188%;
    max-width:none;
    margin:0;
    transform:translateX(-3%);
  }
}


/* ===== V20 MOBILE RESPONSIVE FIX =====
   Desktop V19 is intentionally unchanged.
   On phones, stop enlarging/translating the baked artwork. The entire artwork
   now fits inside the viewport so text and characters are not cut off.
*/
@media (max-width:720px){

  html, body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  /* HERO */
  .hero-art{
    padding:0 0 18px;
  }
  .hero-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
    overflow:hidden;
  }
  .hero-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
    transform:none;
  }
  /* hotspot positions revert to source-art coordinates */
  .hero-friends{
    left:11.4%;
    top:73%;
    width:12.5%;
    height:12%;
  }
  .hero-books{
    left:25.5%;
    top:73%;
    width:11.7%;
    height:12%;
  }

  /* FRIENDS */
  .friends-art{
    padding:26px 0;
  }
  .friends-art .art-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
  }
  .friends-art .art-wrap img{
    width:100%;
    height:auto;
  }

  /* MAGIC PENCIL */
  .magic-art-v13{
    padding:28px 0;
  }
  .magic-art-v13 .magic-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
  }
  .magic-art-v13 .magic-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
    object-fit:contain;
  }
  .magic-button{
    left:4.5%;
    top:70%;
    width:14.5%;
    height:20%;
  }

  /* OUR WHY */
  .why{
    padding:46px 6%;
  }
  .why h2{
    font-size:clamp(34px,10vw,44px);
  }
  .why p{
    font-size:17px;
  }
  .chips{
    gap:10px;
  }
  .chips b{
    padding:11px 16px;
  }

  /* BOOKS / MORE */
  .more-v13{
    padding:28px 0 34px;
  }
  .more-v13 .cards-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
    overflow:hidden;
  }
  .more-v13 .cards-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
    transform:none;
  }

  /* FOLLOW / NIGHT SKY */
  .follow-art-v13{
    padding:0;
    overflow:hidden;
  }
  .follow-art-v13 .night-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
  }
  .follow-art-v13 .night-wrap img{
    width:100%;
    max-width:100%;
    height:auto;
  }

  /* Social targets use the same source-image coordinates as desktop. */
  .follow-art-v13 .yt{left:73.7%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .ig{left:77.8%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .tt{left:81.9%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .fb{left:86.0%;top:16.5%;width:2.6%;height:27%}
  .follow-art-v13 .email{left:71.1%;top:64%;width:25.2%;height:28%}

  footer{
    padding:22px 5%;
  }
}

/* V22 available books */
.books-section{padding:64px max(5%,calc((100% - 1180px)/2));background:linear-gradient(135deg,#eff9ff,#fff6df);scroll-margin-top:24px}
.books-intro{text-align:center;max-width:700px;margin:0 auto 36px}.books-intro>span{font-size:12px;font-weight:900;letter-spacing:2px;color:#3379a1}.books-intro h2{font-size:clamp(32px,5vw,48px);margin:12px 0;color:#12385d}.books-intro p{font:18px/1.6 Arial,sans-serif;color:#526c82}
.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.book-card{padding:24px;border:1px solid #dce8ef;border-radius:24px;background:#fffdf8;box-shadow:0 12px 28px #12385d0c;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}.book-card img{width:100%;height:260px;object-fit:contain;filter:drop-shadow(0 7px 7px #12385d25)}.book-card h3{font-size:22px;line-height:1.25;margin:24px 0 10px}.book-card p{font:16px/1.6 Arial,sans-serif;color:#526c82;margin:0 0 24px}.amazon-button{display:block;align-self:stretch;margin-top:auto;padding:15px 12px;border-radius:30px;text-decoration:none;background:#12385d;color:white;font-size:16px;font-weight:bold;min-height:48px}.amazon-button:hover{background:#245779}.amazon-button:focus-visible{outline:3px solid #f34e73;outline-offset:4px}
@media(max-width:760px){.books-section{padding:42px 6%}.book-grid{grid-template-columns:1fr;max-width:430px;margin:auto}.book-card img{height:270px}.book-card{padding:24px}.books-intro p{font-size:17px}}

/* V23 four-book collection */
.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:960px;margin:0 auto}.book-card img{height:300px}
@media(max-width:760px){.book-grid{grid-template-columns:1fr;max-width:430px}.book-card img{height:270px}}

/* V24: five-book collection, clear shopping entry, accessible category filters. */
nav{gap:22px}nav a{font-size:14px}
.shop-banner{display:flex;justify-content:center;align-items:center;gap:28px;flex-wrap:wrap;padding:24px 6%;background:#fff5dd;border-bottom:1px solid #f3e4c8;text-align:center}
.shop-banner p{margin:0;font-size:21px;font-weight:900}
.shop-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 28px;min-height:50px;border-radius:32px;background:#ed4774;color:#fff;text-decoration:none;font-weight:900;box-shadow:0 5px 0 #c62d57}
.shop-button:hover{background:#d93662}.shop-button:focus-visible,.book-filter:focus-visible,#menu:focus-visible{outline:3px solid #287bb0;outline-offset:5px}
.book-filters{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:0 auto 12px;max-width:960px}
.book-filter{font:700 15px/1.3 Arial,sans-serif;color:#12385d;background:#fffdf8;border:2px solid #b9d5e5;border-radius:30px;min-height:46px;padding:12px 20px;cursor:pointer}
.book-filter:hover{border-color:#3379a1;background:#eaf6ff}.book-filter.is-active{background:#12385d;border-color:#12385d;color:#fff}
.book-count{text-align:center;font:14px/1.5 Arial,sans-serif;color:#526c82;margin:12px 0 26px}
.book-grid{max-width:1180px;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.book-card[hidden]{display:none!important}
.book-type{display:block;font:700 12px/1.4 Arial,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#526c82;margin-bottom:20px;min-height:18px}
.new-release{color:#9f2a52}.book-new{border:2px solid #e7b7cb;background:#fffafd}
.book-card img{height:280px}.book-card h3{font-size:21px}
@media(max-width:1000px){
 nav{display:none;position:absolute;right:12px;top:62px;flex-direction:column;background:#fff;padding:22px;border-radius:16px;box-shadow:0 10px 25px #12385d33;gap:22px}
 nav.open{display:flex}#menu{display:block;min-width:44px;min-height:44px;cursor:pointer}
 .book-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
 .book-grid{grid-template-columns:1fr;max-width:430px}.book-card img{height:280px}
 .shop-banner{padding:22px 6% 28px;gap:16px}.shop-banner p{font-size:18px}.shop-button{width:100%;max-width:330px}
 .book-filter{font-size:14px;padding:11px 16px}.book-filters{gap:9px}.books-intro{margin-bottom:24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep navigation in flow and pinned below the device safe area. */
:root{--header-height:70px;--safe-top:env(safe-area-inset-top,0px)}
html{scroll-padding-top:calc(var(--header-height) + var(--safe-top) + 16px)}
header{position:sticky;top:0;height:calc(var(--header-height) + var(--safe-top));padding-top:var(--safe-top);z-index:100}
#home{scroll-margin-top:0}
@media(max-width:1000px){nav{top:100%}}
@media(max-width:720px){:root{--header-height:66px}}

/* Seven-book thumbnail shelf */
.book-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;max-width:1180px}
.book-card{padding:18px 16px;border-radius:20px}
.book-cover-link{display:block;width:100%;border-radius:8px}
.book-cover-link:focus-visible{outline:3px solid #ed4774;outline-offset:5px}
.book-card img{display:block;width:100%;height:230px;object-fit:contain}
.book-type{font-size:10px;margin-bottom:14px;min-height:28px;display:flex;align-items:center;justify-content:center}
.book-card h3{font-size:18px;line-height:1.3;margin:18px 0 10px}
.book-card p{font-size:14px;line-height:1.5;margin-bottom:18px}
.amazon-button{font-size:14px;padding:14px 8px}
.all-books-link{text-align:center;margin:32px 0 0}.all-books-link a{color:#12385d;font-weight:bold;text-underline-offset:5px}
@media(max-width:1050px){.book-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.books-section{padding:40px 4%}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none;gap:12px}.book-card{padding:14px 10px;border-radius:16px}.book-card img{height:200px}.book-card h3{font-size:16px}.book-card p{font-size:13px}.book-type{font-size:9px}.amazon-button{font-size:13px}}
@media(max-width:380px){.book-card img{height:170px}.book-card h3{font-size:15px}}